{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"click-wheel-ipod","type":"registry:component","title":"Click Wheel — iPod skin","description":"iPod classic: plain CSS, printed glyphs, a domed hub.","dependencies":["click-wheel"],"files":[{"path":"components/click-wheel-ipod/wheel.tsx","target":"components/click-wheel-ipod/wheel.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ClickWheel } from \"click-wheel\";\nimport \"./ipod.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={`ipod-wheel ${className ?? \"\"}`}>\n      <ClickWheel.Ring aria-label={label} getAriaValueText={getAriaValueText} className=\"ipod-ring\">\n        <ClickWheel.Rotor className=\"ipod-rotor\" />\n        <span className=\"ipod-print\" data-at=\"top\">\n          MENU\n        </span>\n        <span className=\"ipod-print\" data-at=\"left\">\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M2 3h2v10H2zM14 3v10L8.5 8zM9 3v10L3.5 8z\" />\n          </svg>\n        </span>\n        <span className=\"ipod-print\" data-at=\"right\">\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M12 3h2v10h-2zM2 3v10L7.5 8zM7 3v10L12.5 8z\" />\n          </svg>\n        </span>\n        <span className=\"ipod-print\" data-at=\"bottom\">\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M2 3v10l6-5zM10 3h2v10h-2zM13 3h2v10h-2z\" />\n          </svg>\n        </span>\n      </ClickWheel.Ring>\n      <ClickWheel.Center aria-label={centerLabel} onClick={onCenterClick} className=\"ipod-center\">\n        {icon}\n      </ClickWheel.Center>\n    </ClickWheel.Root>\n  );\n}\n"},{"path":"components/click-wheel-ipod/ipod.css","target":"components/click-wheel-ipod/ipod.css","type":"registry:component","content":".ipod-wheel {\n  --ipod-shell: #efefed;\n  --ipod-shell-2: #dcdcd9;\n  --ipod-hub: #dcdcd9;\n  --ipod-hub-2: #c8c8c5;\n  --ipod-print: #8e8f92;\n  --ipod-line: rgba(0, 0, 0, 0.1);\n  --ipod-gloss: rgba(255, 255, 255, 0.9);\n  --ipod-focus: rgba(0, 122, 255, 0.55);\n  position: relative;\n  aspect-ratio: 1;\n}\n\n.dark .ipod-wheel {\n  --ipod-shell: #2e2e30;\n  --ipod-shell-2: #1f1f21;\n  --ipod-hub: #1e1e20;\n  --ipod-hub-2: #121214;\n  --ipod-print: #8c8c90;\n  --ipod-line: rgba(255, 255, 255, 0.08);\n  --ipod-gloss: rgba(255, 255, 255, 0.14);\n}\n\n.ipod-ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  cursor: grab;\n  outline: none;\n  background: radial-gradient(circle at 50% 36%, var(--ipod-shell) 0%, var(--ipod-shell-2) 100%);\n  box-shadow:\n    inset 0 1px 0 var(--ipod-gloss),\n    inset 0 -3px 5px rgba(0, 0, 0, 0.07),\n    0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.ipod-ring:focus-visible {\n  box-shadow:\n    inset 0 1px 0 var(--ipod-gloss),\n    0 0 0 3px var(--ipod-focus);\n}\n\n.ipod-ring[data-dragging] {\n  cursor: grabbing;\n}\n\n.ipod-ring[data-disabled] {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.ipod-rotor {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    from 0deg,\n    transparent 0 38%,\n    var(--ipod-gloss) 50%,\n    transparent 62%\n  );\n  opacity: 0;\n  transition: opacity 0.25s ease;\n}\n\n.ipod-rotor[data-dragging],\n.ipod-rotor[data-coasting] {\n  opacity: 0.6;\n}\n\n.ipod-print {\n  position: absolute;\n  display: flex;\n  color: var(--ipod-print);\n  font: 700 10px/1 var(--font-sans);\n  letter-spacing: 0.14em;\n  pointer-events: none;\n}\n\n.ipod-print svg {\n  width: 13px;\n  height: 13px;\n  fill: currentColor;\n}\n\n.ipod-print[data-at=\"top\"] {\n  top: 10%;\n  left: 50%;\n  translate: -50% -50%;\n}\n\n.ipod-print[data-at=\"bottom\"] {\n  bottom: 10%;\n  left: 50%;\n  translate: -50% 50%;\n}\n\n.ipod-print[data-at=\"left\"] {\n  left: 10%;\n  top: 50%;\n  translate: -50% -50%;\n}\n\n.ipod-print[data-at=\"right\"] {\n  right: 10%;\n  top: 50%;\n  translate: 50% -50%;\n}\n\n.ipod-center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  translate: -50% -50%;\n  width: 37%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 1px solid var(--ipod-line);\n  color: var(--ipod-print);\n  background: radial-gradient(circle at 50% 30%, var(--ipod-hub) 0%, var(--ipod-hub-2) 100%);\n  box-shadow:\n    inset 0 1px 0 var(--ipod-gloss),\n    inset 0 -2px 3px rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ipod-center > svg {\n  width: 36%;\n  height: 36%;\n}\n\n.ipod-center:active {\n  background: radial-gradient(circle at 50% 75%, var(--ipod-hub-2) 0%, var(--ipod-hub) 100%);\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16);\n}\n\n.ipod-center:focus-visible {\n  box-shadow: 0 0 0 3px var(--ipod-focus);\n}\n\n.ipod-center:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n"}],"docs":"Import { Wheel } from \"@/components/click-wheel-ipod/wheel\". Docs: https://click-wheel.jackymo.me/docs.md"}