{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"click-wheel-shadcn","type":"registry:component","title":"Click Wheel — shadcn skin","description":"The stock skin: shadcn/ui tokens and Tailwind classes.","dependencies":["click-wheel"],"files":[{"path":"components/click-wheel-shadcn/wheel.tsx","target":"components/click-wheel-shadcn/wheel.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ClickWheel } from \"click-wheel\";\n\nconst GROOVE = 4;\nconst MAX_GROOVES = 8;\n\nexport interface WheelProps extends Omit<ClickWheel.RootProps, \"children\" | \"className\"> {\n  label: string;\n  getAriaValueText?: (value: number) => string;\n  icon?: React.ReactNode;\n  onCenterClick?: () => void;\n  centerLabel?: string;\n  className?: string;\n  grooves?: boolean;\n}\n\nexport function Wheel({\n  label,\n  getAriaValueText,\n  icon,\n  onCenterClick,\n  centerLabel,\n  className,\n  grooves: wantGrooves = false,\n  min = 0,\n  max = 100,\n  unitsPerTurn = 100,\n  ...rootProps\n}: WheelProps) {\n  const laps = Math.ceil((max - min) / unitsPerTurn - 1e-9);\n  const grooves = wantGrooves && laps > 1 && laps <= MAX_GROOVES ? laps : 1;\n\n  return (\n    <ClickWheel.Root\n      {...rootProps}\n      min={min}\n      max={max}\n      unitsPerTurn={unitsPerTurn}\n      className={`relative aspect-square ${className ?? \"\"}`}\n    >\n      {Array.from({ length: grooves }, (_, i) => (\n        <div\n          key={i}\n          aria-hidden=\"true\"\n          className=\"absolute rounded-full [background:conic-gradient(var(--primary)_calc(var(--groove-fill)*360deg),var(--border)_0)] [mask:radial-gradient(circle_closest-side,transparent_calc(100%_-_3px),black_calc(100%_-_2px))]\"\n          style={\n            {\n              inset: i * GROOVE,\n              \"--groove-fill\":\n                grooves === 1\n                  ? \"var(--click-wheel-fraction)\"\n                  : `clamp(0, calc(var(--click-wheel-turns) - ${i}), 1)`,\n            } as React.CSSProperties\n          }\n        />\n      ))}\n      <ClickWheel.Ring\n        aria-label={label}\n        getAriaValueText={getAriaValueText}\n        style={{ inset: grooves * GROOVE + 4 }}\n        className=\"absolute cursor-grab rounded-full border border-border bg-muted shadow-sm outline-none ring-offset-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring data-[dragging]:cursor-grabbing data-[disabled]:cursor-default data-[disabled]:opacity-50\"\n      >\n        <ClickWheel.Rotor className=\"absolute inset-0 rounded-full opacity-25 transition-opacity [background:repeating-conic-gradient(var(--ticks,var(--foreground))_0_1deg,transparent_1deg_15deg)] [mask:radial-gradient(circle_closest-side,transparent_56%,black_57%_82%,transparent_83%)] data-[dragging]:opacity-60 data-[coasting]:opacity-60\" />\n      </ClickWheel.Ring>\n      <ClickWheel.Center\n        aria-label={centerLabel}\n        onClick={onCenterClick}\n        className=\"absolute left-1/2 top-1/2 flex size-[38%] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border [background:var(--hub,var(--background))] [color:var(--hub-foreground,var(--foreground))] shadow-xs outline-none transition-transform active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 [&>svg]:size-[36%]\"\n      >\n        {icon}\n      </ClickWheel.Center>\n    </ClickWheel.Root>\n  );\n}\n"}],"docs":"Import { Wheel } from \"@/components/click-wheel-shadcn/wheel\". Docs: https://click-wheel.jackymo.me/docs.md"}