{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"click-wheel-retro","type":"registry:component","title":"Click Wheel — Retro skin","description":"Retro hardware, soft: a knob raised from a pressed-in well, one accent index, a scale that fills. Four accents.","dependencies":["click-wheel"],"files":[{"path":"components/click-wheel-retro/wheel.tsx","target":"components/click-wheel-retro/wheel.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ClickWheel } from \"click-wheel\";\nimport \"./retro.css\";\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}\n\nexport function Wheel({\n  label,\n  getAriaValueText,\n  icon,\n  onCenterClick,\n  centerLabel,\n  className,\n  ...rootProps\n}: WheelProps) {\n  return (\n    <ClickWheel.Root {...rootProps} className={`retro-wheel ${className ?? \"\"}`}>\n      <div className=\"retro-scale\" aria-hidden=\"true\" />\n      <ClickWheel.Ring aria-label={label} getAriaValueText={getAriaValueText} className=\"retro-ring\">\n        <ClickWheel.Rotor className=\"retro-rotor\" />\n      </ClickWheel.Ring>\n      <ClickWheel.Center aria-label={centerLabel} onClick={onCenterClick} className=\"retro-center\">\n        {icon}\n      </ClickWheel.Center>\n    </ClickWheel.Root>\n  );\n}\n"},{"path":"components/click-wheel-retro/retro.css","target":"components/click-wheel-retro/retro.css","type":"registry:component","content":".retro-wheel {\n  --retro-face: #e6e6e2;\n  --retro-face-hi: #f5f5f2;\n  --retro-face-lo: #d3d3ce;\n  --retro-ink: #1f1f1d;\n  --retro-light: rgba(255, 255, 255, 0.95);\n  --retro-shade: rgba(40, 40, 36, 0.2);\n  position: relative;\n  aspect-ratio: 1;\n}\n\n.dark .retro-wheel {\n  --retro-face: #2c2c2c;\n  --retro-face-hi: #383838;\n  --retro-face-lo: #212121;\n  --retro-ink: #ececea;\n  --retro-light: rgba(255, 255, 255, 0.07);\n  --retro-shade: rgba(0, 0, 0, 0.6);\n}\n\n[data-accent=\"peacock\"] {\n  --retro-accent: #00939b;\n}\n\n[data-accent=\"scarlet\"] {\n  --retro-accent: #cb2f43;\n}\n\n[data-accent=\"ocher\"] {\n  --retro-accent: #e2b540;\n}\n\n[data-accent=\"sea\"] {\n  --retro-accent: #00b49b;\n}\n\n.retro-wheel::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: var(--retro-face);\n  box-shadow:\n    inset 7px 7px 14px var(--retro-shade),\n    inset -7px -7px 14px var(--retro-light);\n}\n\n.retro-scale {\n  position: absolute;\n  inset: 3%;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--retro-accent, #00939b) calc(var(--click-wheel-fraction) * 360deg),\n    var(--retro-ink) 0\n  );\n  opacity: 0.85;\n  mask:\n    repeating-conic-gradient(#000 0 1.4deg, transparent 1.4deg 15deg),\n    radial-gradient(circle closest-side, transparent 88%, #000 89%);\n  mask-composite: intersect;\n  -webkit-mask-composite: source-in;\n}\n\n.retro-ring {\n  position: absolute;\n  inset: 15%;\n  border-radius: 50%;\n  cursor: grab;\n  outline: none;\n  background: linear-gradient(145deg, var(--retro-face-hi) 0%, var(--retro-face) 55%, var(--retro-face-lo) 100%);\n  box-shadow:\n    12px 12px 24px var(--retro-shade),\n    -10px -10px 22px var(--retro-light);\n  transition: box-shadow 120ms ease;\n}\n\n.retro-ring:focus-visible {\n  box-shadow:\n    12px 12px 24px var(--retro-shade),\n    -10px -10px 22px var(--retro-light),\n    0 0 0 3px var(--retro-accent, #00939b);\n}\n\n.retro-ring[data-dragging] {\n  cursor: grabbing;\n  box-shadow:\n    6px 6px 12px var(--retro-shade),\n    -5px -5px 12px var(--retro-light);\n}\n\n.retro-ring[data-disabled] {\n  cursor: default;\n  opacity: 0.5;\n}\n\n.retro-rotor {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n}\n\n.retro-rotor::after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  top: 8%;\n  width: 9%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: var(--retro-accent, #00939b);\n  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);\n  translate: -50% 0;\n}\n\n.retro-center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  translate: -50% -50%;\n  width: 34%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 50%;\n  background: linear-gradient(145deg, var(--retro-face-hi), var(--retro-face-lo));\n  color: var(--retro-ink);\n  box-shadow:\n    6px 6px 12px var(--retro-shade),\n    -5px -5px 12px var(--retro-light);\n  cursor: pointer;\n  outline: none;\n  transition: box-shadow 80ms ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.retro-center > svg {\n  width: 36%;\n  height: 36%;\n}\n\n.retro-center:active {\n  background: linear-gradient(145deg, var(--retro-face-lo), var(--retro-face-hi));\n  box-shadow:\n    inset 5px 5px 10px var(--retro-shade),\n    inset -4px -4px 9px var(--retro-light);\n}\n\n.retro-center:active > * {\n  transform: translateY(1px);\n}\n\n.retro-center:focus-visible {\n  box-shadow:\n    6px 6px 12px var(--retro-shade),\n    -5px -5px 12px var(--retro-light),\n    0 0 0 3px var(--retro-accent, #00939b);\n}\n\n.retro-center:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n"}],"docs":"Import { Wheel } from \"@/components/click-wheel-retro/wheel\". Docs: https://click-wheel.jackymo.me/docs.md"}