{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "angle-slider",
  "title": "Angle Slider",
  "description": "An angle slider component",
  "dependencies": ["@ark-ui/react", "clsx", "tailwind-merge"],
  "files": [
    {
      "path": "src/registry/thornberry/components/angle-slider.tsx",
      "content": "\"use client\";\n\nimport { AngleSlider as ArkAngleSlider } from \"@ark-ui/react/angle-slider\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport type {\n  AngleSliderControlProps,\n  AngleSliderHiddenInputProps,\n  AngleSliderMarkerGroupProps,\n  AngleSliderMarkerProps,\n  AngleSliderRootProps,\n  AngleSliderThumbProps,\n  AngleSliderValueTextProps,\n} from \"@ark-ui/react\";\n\nconst AngleSliderRoot = ({ className, ...rest }: AngleSliderRootProps) => (\n  <ArkAngleSlider.Root\n    className={cn(\"relative aspect-square w-[200px]\", className)}\n    {...rest}\n  />\n);\n\nconst AngleSliderControl = ({\n  className,\n  ...rest\n}: AngleSliderControlProps) => (\n  <ArkAngleSlider.Control\n    className={cn(\"absolute inset-0 rounded-full\", className)}\n    {...rest}\n  />\n);\n\nconst AngleSliderThumb = ({ className, ...rest }: AngleSliderThumbProps) => (\n  <div className=\"rounded-full\">\n    <div className=\"absolute inset-0 rounded-full bg-[conic-gradient(from_0deg,var(--primary)_var(--angle,0deg),var(--border)_var(--angle,0deg))] opacity-50\" />\n\n    <ArkAngleSlider.Thumb\n      tabIndex={-1}\n      className={cn(\n        \"group pointer-events-none absolute top-0 right-0 bottom-0 left-[calc(50%-1.5px)] z-20 flex h-full w-[3px] items-start justify-center focus-visible:outline-none\",\n        className,\n      )}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        className={\n          \"h-4 w-4 shrink-0 scale-125 rounded-full bg-primary ring ring-primary/60 ring-offset-1 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        }\n      />\n    </ArkAngleSlider.Thumb>\n  </div>\n);\n\nconst AngleSliderMarkerGroup = ({\n  className,\n  ...rest\n}: AngleSliderMarkerGroupProps) => (\n  <ArkAngleSlider.MarkerGroup\n    className={cn(\"absolute inset-4 rounded-full bg-background\", className)}\n    {...rest}\n  />\n);\n\nconst AngleSliderMarker = ({\n  className,\n  value,\n  ...rest\n}: AngleSliderMarkerProps) => (\n  <ArkAngleSlider.Marker value={value} className={className} {...rest} />\n);\n\nconst AngleSliderValueText = ({\n  className,\n  ...rest\n}: AngleSliderValueTextProps) => (\n  <ArkAngleSlider.ValueText\n    className={cn(\n      \"pointer-events-none absolute inset-0 z-30 flex items-center justify-center text-center font-bold text-2xl text-foreground\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst AngleSliderHiddenInput = ({\n  className,\n  ...rest\n}: AngleSliderHiddenInputProps) => (\n  <ArkAngleSlider.HiddenInput className={className} {...rest} />\n);\n\nexport {\n  AngleSliderRoot,\n  AngleSliderControl,\n  AngleSliderMarkerGroup,\n  AngleSliderMarker,\n  AngleSliderThumb,\n  AngleSliderValueText,\n  AngleSliderHiddenInput,\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport type { ClassValue } from \"clsx\";\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n",
      "type": "registry:lib",
      "target": ""
    }
  ],
  "type": "registry:ui"
}