{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "meter",
  "title": "meter",
  "description": "meter",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "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 { twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\n\ninterface MeterRenderProps extends PrimitiveMeterRenderProps {\n  color?: string\n}\n\nconst MeterContext = createContext<MeterRenderProps | null>(null)\n\ninterface 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={twMerge(\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\n      data-slot=\"meter-value\"\n      className={twMerge('text-base/6 sm:text-sm/6', className)}\n      {...props}\n    >\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={twMerge('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"
}