{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["@base-ui/react","motion"],"description":"Semantic Meter for SmoothUI with Base UI twin and ARIA Radix-parity twin for gauges and capacity.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\nimport { cn } from \"@/lib/utils\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ComponentProps } from \"react\";\n\nexport type MeterSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface MeterProps {\n  /** Accessible name when there is no visible `label` */\n  \"aria-label\"?: string;\n  /** Optional CSS class for the root */\n  className?: string;\n  /** Visible label rendered above the track */\n  label?: string;\n  /** Maximum value (default 100) */\n  max?: number;\n  /** Minimum value (default 0) */\n  min?: number;\n  /** Show the formatted value next to the label */\n  showValue?: boolean;\n  /** Track height: `sm`, `md` (default) or `lg` */\n  size?: MeterSize;\n  /** Current value within the range */\n  value: number;\n}\n\nexport type MeterRootProps = Omit<\n  ComponentProps<typeof MeterPrimitive.Root>,\n  \"className\"\n> & { className?: string };\nexport type MeterTrackProps = Omit<\n  ComponentProps<typeof MeterPrimitive.Track>,\n  \"className\"\n> & { className?: string; size?: MeterSize };\nexport type MeterIndicatorProps = Omit<\n  ComponentProps<typeof MeterPrimitive.Indicator>,\n  \"className\"\n> & { className?: string };\nexport type MeterLabelProps = Omit<\n  ComponentProps<typeof MeterPrimitive.Label>,\n  \"className\"\n> & { className?: string };\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof MeterPrimitive.Value>,\n  \"className\"\n> & { className?: string };\n\nconst TRACK_SIZE: Record<MeterSize, string> = {\n  lg: \"h-3\",\n  md: \"h-2\",\n  sm: \"h-1\",\n};\n\nexport const MeterRoot = ({ className, ...props }: MeterRootProps) => (\n  <MeterPrimitive.Root\n    className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}\n    data-slot=\"meter\"\n    {...props}\n  />\n);\n\nexport const MeterTrack = ({\n  className,\n  size = \"md\",\n  ...props\n}: MeterTrackProps) => (\n  <MeterPrimitive.Track\n    className={cn(\n      \"relative w-full min-w-0 overflow-hidden rounded-full bg-foreground/40\",\n      TRACK_SIZE[size],\n      className\n    )}\n    data-slot=\"meter-track\"\n    {...props}\n  />\n);\n\nexport const MeterIndicator = ({\n  className,\n  ...props\n}: MeterIndicatorProps) => {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\n        \"block h-full rounded-full bg-brand\",\n        shouldReduceMotion\n          ? null\n          : \"transition-[width] duration-[250ms] ease-out motion-reduce:transition-none\",\n        className\n      )}\n      data-slot=\"meter-indicator\"\n      {...props}\n    />\n  );\n};\n\nexport const MeterLabel = ({ className, ...props }: MeterLabelProps) => (\n  <MeterPrimitive.Label\n    className={cn(\"font-medium text-sm leading-none\", className)}\n    data-slot=\"meter-label\"\n    {...props}\n  />\n);\n\nexport const MeterValue = ({ className, ...props }: MeterValueProps) => (\n  <MeterPrimitive.Value\n    className={cn(\"text-muted-foreground text-sm tabular-nums\", className)}\n    data-slot=\"meter-value\"\n    {...props}\n  />\n);\n\n/**\n * SmoothUI Meter — Base UI twin (default).\n * Convenience API for capacity / gauge values; use compounds for custom layouts.\n */\nexport default function Meter({\n  \"aria-label\": ariaLabel,\n  className,\n  label,\n  max,\n  min,\n  showValue = false,\n  size = \"md\",\n  value,\n}: MeterProps) {\n  const hasHeader = Boolean(label) || showValue;\n\n  return (\n    <MeterRoot\n      aria-label={label ? undefined : ariaLabel}\n      className={className}\n      max={max}\n      min={min}\n      value={value}\n    >\n      {hasHeader ? (\n        <div className=\"flex items-center justify-between gap-2\">\n          {label ? <MeterLabel>{label}</MeterLabel> : <span />}\n          {showValue ? <MeterValue /> : null}\n        </div>\n      ) : null}\n      <MeterTrack size={size}>\n        <MeterIndicator />\n      </MeterTrack>\n    </MeterRoot>\n  );\n}\n","path":"index.tsx","target":"components/smoothui/meter/index.tsx","type":"registry:ui"}],"name":"meter","registryDependencies":["https://smoothui.dev/r/tokens.json"],"title":"Meter","type":"registry:ui"}