{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-ring",
  "description": "A task's progress drawn as a ring, with support for an indeterminate state.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@ondo-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/progress-ring.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst progressRingVariants = cva(\n  \"group/progress-ring flex w-fit flex-col items-center gap-1.5 text-center transition-[--progress-ring-fraction] duration-500 ease-out\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs [--progress-ring-size:--spacing(14)] [--progress-ring-thickness:--spacing(1.5)]\",\n        default:\n          \"text-sm [--progress-ring-size:--spacing(20)] [--progress-ring-thickness:--spacing(2)]\",\n        lg: \"text-base [--progress-ring-size:--spacing(28)] [--progress-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 ProgressRingProperty() {\n  return (\n    <style href=\"ondo-ui-progress-ring-fraction\" precedence=\"default\">\n      {\n        \"@property --progress-ring-fraction{syntax:'<number>';inherits:true;initial-value:0}\"\n      }\n    </style>\n  )\n}\n\nfunction ProgressRing({\n  className,\n  size = \"default\",\n  variant = \"default\",\n  value,\n  min = 0,\n  max = 100,\n  formatValue,\n  children,\n  ...props\n}: ProgressPrimitive.Root.Props &\n  VariantProps<typeof progressRingVariants> & {\n    formatValue?: (\n      formattedValue: string | null,\n      value: number | null\n    ) => React.ReactNode\n  }) {\n  const span = max - min || 1\n  const fraction =\n    value == null ? 0 : Math.min(1, Math.max(0, (value - min) / span))\n\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      min={min}\n      max={max}\n      data-slot=\"progress-ring\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(progressRingVariants({ size, variant, className }))}\n      style={{ \"--progress-ring-fraction\": fraction } as React.CSSProperties}\n      {...props}\n    >\n      <ProgressRingProperty />\n      <ProgressRingDial>\n        <ProgressRingValue>{formatValue}</ProgressRingValue>\n      </ProgressRingDial>\n      {children}\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressRingDial({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"progress-ring-dial\"\n      className={cn(\n        \"grid size-(--progress-ring-size) shrink-0 place-items-center *:col-start-1 *:row-start-1\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressRingTrack />\n      {children}\n    </div>\n  )\n}\n\nfunction ProgressRingTrack({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"progress-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(--progress-ring-thickness)),#000_calc(100%-var(--progress-ring-thickness)+1px))]\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressRingIndicator />\n    </span>\n  )\n}\n\nfunction ProgressRingIndicator({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"progress-ring-indicator\"\n      className={cn(\n        \"block size-full rounded-full\",\n        \"[background:conic-gradient(currentColor_calc(var(--progress-ring-fraction)*360deg),#0000_0)]\",\n        \"group-data-[indeterminate]/progress-ring:animate-spin group-data-[indeterminate]/progress-ring:[background:conic-gradient(currentColor_90deg,#0000_0)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressRingValue({\n  className,\n  ...props\n}: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      data-slot=\"progress-ring-value\"\n      className={cn(\"font-medium text-foreground tabular-nums\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressRingLabel({\n  className,\n  ...props\n}: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      data-slot=\"progress-ring-label\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ProgressRing,\n  ProgressRingDial,\n  ProgressRingTrack,\n  ProgressRingIndicator,\n  ProgressRingValue,\n  ProgressRingLabel,\n  progressRingVariants,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}