{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meter-ring",
  "description": "A radial reading of a bounded value, such as a score, a utilization, or a fill level.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@ondo-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/meter-ring.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst meterRingVariants = cva(\n  \"group/meter-ring flex w-fit flex-col items-center gap-1.5 text-center transition-[--meter-ring-fraction] duration-500 ease-out\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs [--meter-ring-size:--spacing(14)] [--meter-ring-thickness:--spacing(1.5)]\",\n        default:\n          \"text-sm [--meter-ring-size:--spacing(20)] [--meter-ring-thickness:--spacing(2)]\",\n        lg: \"text-base [--meter-ring-size:--spacing(28)] [--meter-ring-thickness:--spacing(2.5)]\",\n      },\n      variant: {\n        default: \"text-primary\",\n        info: \"text-info\",\n        success: \"text-success\",\n        warning: \"text-warning\",\n        destructive: \"text-destructive\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n  }\n)\n\nfunction MeterRingProperty() {\n  return (\n    <style href=\"ondo-ui-meter-ring-fraction\" precedence=\"default\">\n      {\n        \"@property --meter-ring-fraction{syntax:'<number>';inherits:true;initial-value:0}\"\n      }\n    </style>\n  )\n}\n\nfunction MeterRing({\n  className,\n  size = \"default\",\n  variant = \"default\",\n  value,\n  min = 0,\n  max = 100,\n  formatValue,\n  children,\n  ...props\n}: MeterPrimitive.Root.Props &\n  VariantProps<typeof meterRingVariants> & {\n    formatValue?: (formattedValue: string, value: number) => React.ReactNode\n  }) {\n  const span = max - min || 1\n  const fraction = Math.min(1, Math.max(0, (value - min) / span))\n\n  return (\n    <MeterPrimitive.Root\n      value={value}\n      min={min}\n      max={max}\n      data-slot=\"meter-ring\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(meterRingVariants({ size, variant, className }))}\n      style={{ \"--meter-ring-fraction\": fraction } as React.CSSProperties}\n      {...props}\n    >\n      <MeterRingProperty />\n      <MeterRingDial>\n        <MeterRingValue>{formatValue}</MeterRingValue>\n      </MeterRingDial>\n      {children}\n    </MeterPrimitive.Root>\n  )\n}\n\nfunction MeterRingDial({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"meter-ring-dial\"\n      className={cn(\n        \"grid size-(--meter-ring-size) shrink-0 place-items-center *:col-start-1 *:row-start-1\",\n        className\n      )}\n      {...props}\n    >\n      <MeterRingTrack />\n      {children}\n    </div>\n  )\n}\n\nfunction MeterRingTrack({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"meter-ring-track\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-full rounded-full bg-muted\",\n        \"[mask:radial-gradient(farthest-side,#0000_calc(100%-var(--meter-ring-thickness)),#000_calc(100%-var(--meter-ring-thickness)+1px))]\",\n        className\n      )}\n      {...props}\n    >\n      <MeterRingIndicator />\n    </span>\n  )\n}\n\nfunction MeterRingIndicator({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"meter-ring-indicator\"\n      className={cn(\n        \"block size-full rounded-full\",\n        \"[background:conic-gradient(currentColor_calc(var(--meter-ring-fraction)*360deg),#0000_0)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MeterRingValue({ className, ...props }: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value\n      data-slot=\"meter-ring-value\"\n      className={cn(\"font-medium text-foreground tabular-nums\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MeterRingLabel({ className, ...props }: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label\n      data-slot=\"meter-ring-label\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  MeterRing,\n  MeterRingDial,\n  MeterRingTrack,\n  MeterRingIndicator,\n  MeterRingValue,\n  MeterRingLabel,\n  meterRingVariants,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}