{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "openlmis-status-meter-list",
  "title": "Status Meter List",
  "description": "Composable labeled meters with icons, counts and semantic tones.",
  "dependencies": [
    "@base-ui/react@^1",
    "lucide-react@^1"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/components/openlmis/status-meter-list/status-meter-list.tsx",
      "content": "\"use client\"\n\nimport { Meter } from \"@base-ui/react/meter\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { type ComponentProps, createContext, type ReactNode, use } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type StatusMeterTone = \"success\" | \"warning\" | \"destructive\" | \"info\"\n\nconst TONES = {\n  success: { icon: \"text-success\", bar: \"bg-success\" },\n  warning: { icon: \"text-warning\", bar: \"bg-warning\" },\n  destructive: { icon: \"text-destructive\", bar: \"bg-destructive\" },\n  info: { icon: \"text-info\", bar: \"bg-info\" },\n} as const satisfies Record<StatusMeterTone, { icon: string; bar: string }>\n\nconst ToneContext = createContext<StatusMeterTone>(\"info\")\n\n/** A list of status rows, each with its own meter. */\nexport function StatusMeterList({ className, ...props }: ComponentProps<\"ul\">) {\n  return <ul className={cn(\"flex flex-col gap-3\", className)} {...props} />\n}\n\ntype StatusMeterProps = {\n  /** The row's share; read against `max`. */\n  value: number\n  max?: number\n  tone?: StatusMeterTone\n  /** Formats the percentage read aloud; fixed by default, so a server render and the browser agree. */\n  locale?: string\n  /** The header line: `StatusMeterIcon`, `StatusMeterLabel`, `StatusMeterValue`. */\n  children: ReactNode\n  className?: string\n}\n\n/** One status: a header line over a thin bar filled to `value / max`. */\nexport function StatusMeter({\n  value,\n  max = 100,\n  tone = \"info\",\n  locale = \"en-US\",\n  children,\n  className,\n}: StatusMeterProps) {\n  return (\n    <li className={className}>\n      <ToneContext value={tone}>\n        {/* A meter, not a progress bar: it is a share of the whole, not a task underway. */}\n        <Meter.Root\n          className=\"flex flex-col gap-1.5\"\n          locale={locale}\n          max={Math.max(max, 1)}\n          value={value}\n        >\n          <div className=\"flex items-center gap-2 text-sm\">{children}</div>\n          <Meter.Track className=\"h-1 w-full overflow-hidden rounded-full bg-muted\">\n            <Meter.Indicator\n              className={cn(\"h-full transition-all\", TONES[tone].bar)}\n            />\n          </Meter.Track>\n        </Meter.Root>\n      </ToneContext>\n    </li>\n  )\n}\n\n/** Tinted by the row's tone; pair it with a label so the colour is never the only cue. */\nexport function StatusMeterIcon({\n  icon: Icon,\n  className,\n}: {\n  icon: LucideIcon\n  className?: string\n}) {\n  const tone = use(ToneContext)\n  return (\n    <Icon\n      aria-hidden=\"true\"\n      className={cn(\"size-4 shrink-0\", TONES[tone].icon, className)}\n    />\n  )\n}\n\nexport function StatusMeterLabel({\n  className,\n  ...props\n}: ComponentProps<typeof Meter.Label>) {\n  return (\n    <Meter.Label\n      className={cn(\"min-w-0 flex-1 truncate\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function StatusMeterValue({\n  className,\n  ...props\n}: ComponentProps<\"span\">) {\n  return (\n    <span className={cn(\"font-medium tabular-nums\", className)} {...props} />\n  )\n}",
      "type": "registry:component",
      "target": "components/openlmis/status-meter-list.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "destructive": "oklch(0.577 0.245 27.325)",
      "destructive-foreground": "oklch(0.985 0 0)",
      "success": "oklch(0.596 0.145 163.225)",
      "success-foreground": "oklch(0.985 0 0)",
      "warning": "oklch(0.666 0.179 58.318)",
      "warning-foreground": "oklch(0.985 0 0)",
      "info": "oklch(0.55 0.13 237)",
      "info-foreground": "oklch(0.985 0 0)"
    },
    "dark": {
      "destructive": "oklch(0.704 0.191 22.216)",
      "destructive-foreground": "oklch(0.21 0.04 25)",
      "success": "oklch(0.696 0.17 162.48)",
      "success-foreground": "oklch(0.21 0.04 163)",
      "warning": "oklch(0.769 0.188 70.08)",
      "warning-foreground": "oklch(0.22 0.04 60)",
      "info": "oklch(0.7 0.14 237)",
      "info-foreground": "oklch(0.2 0.04 240)"
    }
  },
  "meta": {
    "project": "openlmis",
    "height": "220px"
  },
  "categories": [
    "charts"
  ],
  "type": "registry:component"
}