{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-meter",
  "type": "registry:ui",
  "title": "Meter",
  "dependencies": [
    "lucide-react",
    "react",
    "react-aria-components",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Meter.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {AlertTriangle} from 'lucide-react';\nimport React from 'react';\nimport {Meter as AriaMeter, type MeterProps as AriaMeterProps} from 'react-aria-components/Meter';\nimport {Label} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface MeterProps extends AriaMeterProps {\n  label?: string;\n}\n\nexport function Meter({label, ...props}: MeterProps) {\n  return (\n    <AriaMeter\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'flex flex-col gap-2 font-sans max-w-full'\n      )}>\n      {({percentage, valueText}) => (\n        <>\n          <div className=\"flex justify-between gap-2\">\n            <Label>{label}</Label>\n            <span\n              className={`text-sm ${percentage >= 80 ? 'text-red-600 dark:text-red-500' : 'text-neutral-600 dark:text-neutral-400'}`}>\n              {percentage >= 80 && (\n                <AlertTriangle\n                  aria-label=\"Alert\"\n                  className=\"inline-block w-4 h-4 align-text-bottom\"\n                />\n              )}\n              {' ' + valueText}\n            </span>\n          </div>\n          <div className=\"w-64 max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative\">\n            <div\n              className={`absolute top-0 left-0 h-full rounded-full ${getColor(percentage)} forced-colors:bg-[Highlight]`}\n              style={{width: percentage + '%'}}\n            />\n          </div>\n        </>\n      )}\n    </AriaMeter>\n  );\n}\n\nfunction getColor(percentage: number) {\n  if (percentage < 70) {\n    return 'bg-green-600';\n  }\n\n  if (percentage < 80) {\n    return 'bg-orange-500';\n  }\n\n  return 'bg-red-600';\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}