{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-circular",
  "title": "Progress Circular",
  "description": "A shadcn-style progress circular component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "class-variance-authority"],
  "files": [
    {
      "path": "src/components/ui/progress-circular.tsx",
      "content": "\"use client\";\n\nimport {\n  Progress as ProgressPrimitive,\n  useProgress,\n  useProgressContext,\n} from \"@ark-ui/react/progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport { useProgress, useProgressContext };\n\nexport type ProgressCircularRootProps = ProgressPrimitive.RootProps;\n\nexport const ProgressCircularRoot = ({\n  className,\n  ...props\n}: ProgressCircularRootProps) => (\n  <ProgressPrimitive.Root\n    className={cn(\n      \"group/progress-circular flex flex-col items-center gap-2\",\n      className,\n    )}\n    data-slot=\"progress-circular\"\n    {...props}\n  />\n);\n\nexport type ProgressCircularLabelProps = ProgressPrimitive.LabelProps;\n\nexport const ProgressCircularLabel = ({\n  className,\n  ...props\n}: ProgressCircularLabelProps) => (\n  <ProgressPrimitive.Label\n    className={cn(\n      \"w-full text-start font-medium text-foreground text-sm leading-none\",\n      className,\n    )}\n    data-slot=\"progress-circular-label\"\n    {...props}\n  />\n);\n\nexport type ProgressCircularValueTextProps = ProgressPrimitive.ValueTextProps;\n\nexport const ProgressCircularValueText = ({\n  className,\n  ...props\n}: ProgressCircularValueTextProps) => (\n  <ProgressPrimitive.ValueText\n    className={cn(\"tabular-nums text-foreground text-sm\", className)}\n    data-slot=\"progress-circular-value-text\"\n    {...props}\n  />\n);\n\nexport type ProgressCircularCircleProps = ProgressPrimitive.CircleProps;\n\nexport const ProgressCircularCircle = ({\n  className,\n  style,\n  ...props\n}: ProgressCircularCircleProps) => (\n  <ProgressPrimitive.Circle\n    className={cn(\n      \"text-primary\",\n      \"group-data-[state=indeterminate]/progress-circular:animate-spin\",\n      className,\n    )}\n    data-slot=\"progress-circular-circle\"\n    style={style}\n    {...props}\n  />\n);\n\nexport type ProgressCircularTrackProps = ProgressPrimitive.CircleTrackProps;\n\nexport const ProgressCircularTrack = ({\n  className,\n  ...props\n}: ProgressCircularTrackProps) => (\n  <ProgressPrimitive.CircleTrack\n    className={cn(\"stroke-current text-muted\", className)}\n    data-slot=\"progress-circular-track\"\n    {...props}\n  />\n);\n\nexport type ProgressCircularRangeProps = ProgressPrimitive.CircleRangeProps;\n\nexport const ProgressCircularRange = ({\n  className,\n  ...props\n}: ProgressCircularRangeProps) => (\n  <ProgressPrimitive.CircleRange\n    className={cn(\n      \"stroke-current text-primary [stroke-linecap:round]\",\n      \"transition-[stroke-dashoffset] duration-300 ease-out\",\n      className,\n    )}\n    data-slot=\"progress-circular-range\"\n    {...props}\n  />\n);\n\nexport type ProgressCircularRootProviderProps =\n  ProgressPrimitive.RootProviderProps;\n\nexport const ProgressCircularRootProvider = ({\n  className,\n  ...props\n}: ProgressCircularRootProviderProps) => (\n  <ProgressPrimitive.RootProvider\n    className={cn(\n      \"group/progress-circular flex flex-col items-center gap-2\",\n      className,\n    )}\n    data-slot=\"progress-circular-root-provider\"\n    {...props}\n  />\n);\n\nconst progressCircularVariants = cva(\"flex items-center gap-2\", {\n  defaultVariants: {\n    variant: \"ring\",\n  },\n  variants: {\n    variant: {\n      labeled: \"flex-col\",\n      ring: \"flex-col\",\n      row: \"flex-row\",\n    },\n  },\n});\n\nexport type ProgressCircularProps = Omit<\n  ProgressCircularRootProps,\n  \"children\" | \"className\" | \"style\"\n> &\n  VariantProps<typeof progressCircularVariants> & {\n    children?: ReactNode;\n    className?: string;\n    footer?: ReactNode;\n    label?: ReactNode;\n    showCenterValue?: boolean;\n    showThumb?: boolean;\n    size?: number;\n    style?: ProgressCircularRootProps[\"style\"];\n    thickness?: number;\n  };\n\nexport const ProgressCircularThumb = ({\n  className,\n}: {\n  className?: string;\n}) => {\n  const api = useProgressContext();\n  if (api.indeterminate) {\n    return null;\n  }\n  const deg = api.percent * 3.6;\n  return (\n    <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n      <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n        <div\n          className=\"origin-center\"\n          style={{ transform: `rotate(${deg}deg)` }}\n        >\n          <div\n            className={cn(\n              \"absolute left-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary shadow-sm ring-2 ring-primary/35\",\n              className,\n            )}\n            style={{\n              top: \"calc(var(--thickness) / 2 - var(--size) / 2)\",\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const ProgressCircular = ({\n  children,\n  className,\n  footer,\n  label,\n  showCenterValue = false,\n  showThumb = false,\n  size = 120,\n  style,\n  thickness = 8,\n  variant = \"ring\",\n  ...rootProps\n}: ProgressCircularProps) => {\n  const v = variant ?? \"ring\";\n  const cssVars = {\n    \"--size\": `${size}px`,\n    \"--thickness\": `${thickness}px`,\n  } as CSSProperties;\n\n  return (\n    <ProgressCircularRoot\n      className={cn(progressCircularVariants({ variant: v }), className)}\n      style={{ ...cssVars, ...style }}\n      {...rootProps}\n    >\n      {label != null ? (\n        <ProgressCircularLabel className={cn(v === \"row\" && \"w-auto shrink-0\")}>\n          {label}\n        </ProgressCircularLabel>\n      ) : null}\n\n      <div className=\"relative inline-flex shrink-0\" style={{ ...cssVars }}>\n        <ProgressCircularCircle>\n          <ProgressCircularTrack />\n          <ProgressCircularRange />\n        </ProgressCircularCircle>\n        {showCenterValue ? (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n            <ProgressCircularValueText className=\"font-semibold text-[0.95rem]\" />\n          </div>\n        ) : null}\n        {showThumb ? <ProgressCircularThumb /> : null}\n      </div>\n\n      {footer}\n      {children}\n    </ProgressCircularRoot>\n  );\n};\n\nexport { progressCircularVariants };\n",
      "type": "registry:ui",
      "target": "src/components/ui/progress-circular.tsx"
    }
  ],
  "type": "registry:ui"
}