{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "meter",
  "title": "meter",
  "description": "meter",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/meter.tsx",
      "content": "\"use client\"\n\nimport { createContext, use } from \"react\"\nimport {\n  Meter as PrimitiveMeter,\n  type MeterProps as PrimitiveMeterProps,\n  type MeterRenderProps as PrimitiveMeterRenderProps,\n} from \"react-aria-components/Meter\"\nimport { cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\n\nexport interface MeterRenderProps extends PrimitiveMeterRenderProps {\n  color?: string\n}\n\nconst MeterContext = createContext<MeterRenderProps | null>(null)\n\nexport interface MeterProps extends PrimitiveMeterProps, Pick<MeterRenderProps, \"color\"> {}\n\nexport function Meter({ className, children, color, ...props }: MeterProps) {\n  return (\n    <PrimitiveMeter\n      data-slot=\"meter\"\n      {...props}\n      className={cx(\n        \"w-full\",\n        \"[&>[data-slot=meter-header]+[data-slot=meter-track]]:mt-2\",\n        \"[&>[data-slot=meter-header]+[data-slot=meter-track]]:mt-2\",\n        \"[&>[data-slot=meter-header]+[slot='description']]:mt-1\",\n        \"[&>[slot='description']+[data-slot=meter-track]]:mt-2\",\n        \"[&>[data-slot=meter-track]+[slot=description]]:mt-2\",\n        \"[&>[data-slot=meter-track]+[slot=errorMessage]]:mt-2\",\n        \"*:data-[slot=meter-header]:font-medium\",\n        className\n      )}\n    >\n      {(values) => (\n        <MeterContext value={{ ...values, color }}>\n          {typeof children === \"function\" ? children(values) : children}\n        </MeterContext>\n      )}\n    </PrimitiveMeter>\n  )\n}\n\nexport function MeterTrack({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { percentage, color } = use(MeterContext)!\n  return (\n    <div\n      data-slot=\"meter-track\"\n      className={cn(\n        \"[--meter-height:--spacing(1.5)]\",\n        \"relative h-(--meter-height) w-full overflow-hidden rounded-full bg-secondary outline outline-transparent -outline-offset-1\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"meter-fill\"\n        className=\"absolute start-0 top-0 h-full rounded-full transition-[width] duration-200 ease-linear will-change-[width] motion-reduce:transition-none forced-colors:bg-[Highlight]\"\n        style={{ width: `${percentage}%`, backgroundColor: color ?? getMeterColor(percentage) }}\n      />\n    </div>\n  )\n}\n\nexport function MeterValue({\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"children\">) {\n  const { valueText } = use(MeterContext)!\n  return (\n    <span data-slot=\"meter-value\" className={cn(\"text-base/6 sm:text-sm/6\", className)} {...props}>\n      {valueText}\n    </span>\n  )\n}\n\nexport function MeterHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"meter-header\"\n      className={cn(\"flex items-center justify-between\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction getMeterColor(value: number): string {\n  if (value < 50) return \"var(--color-success)\"\n  if (value < 80) return \"var(--color-warning)\"\n  return \"var(--color-danger)\"\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}