{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"click-wheel-galley","type":"registry:component","title":"Click Wheel — Galley skin","description":"The knob on an aircraft coffee maker: soft metal, a knurled rim, a pressed-in hub, indicator segments.","dependencies":["click-wheel"],"files":[{"path":"components/click-wheel-galley/wheel.tsx","target":"components/click-wheel-galley/wheel.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { ClickWheel } from \"click-wheel\";\nimport \"./galley.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={`galley-wheel ${className ?? \"\"}`}>\n      <div className=\"galley-lamps\" aria-hidden=\"true\" />\n      <ClickWheel.Ring aria-label={label} getAriaValueText={getAriaValueText} className=\"galley-ring\">\n        <ClickWheel.Rotor className=\"galley-rotor\" />\n      </ClickWheel.Ring>\n      <ClickWheel.Center aria-label={centerLabel} onClick={onCenterClick} className=\"galley-center\">\n        {icon}\n      </ClickWheel.Center>\n    </ClickWheel.Root>\n  );\n}\n"},{"path":"components/click-wheel-galley/galley.css","target":"components/click-wheel-galley/galley.css","type":"registry:component","content":".galley-wheel {\n  --galley-metal: #e3e1dc;\n  --galley-metal-2: #d2cfc8;\n  --galley-sheen: #f4f2ee;\n  --galley-ink: #3b3a36;\n  --galley-light: rgba(255, 255, 255, 0.85);\n  --galley-shade: rgba(60, 50, 35, 0.22);\n  --galley-lamp: #f99d1b;\n  --galley-lamp-off: rgba(60, 50, 35, 0.14);\n  position: relative;\n  aspect-ratio: 1;\n}\n\n.dark .galley-wheel {\n  --galley-metal: #2c2d2f;\n  --galley-metal-2: #222325;\n  --galley-sheen: #3a3b3e;\n  --galley-ink: #d9d7d1;\n  --galley-light: rgba(255, 255, 255, 0.07);\n  --galley-shade: rgba(0, 0, 0, 0.55);\n  --galley-lamp-off: rgba(255, 255, 255, 0.08);\n}\n\n.galley-lamps {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: conic-gradient(\n    var(--galley-lamp) calc(var(--click-wheel-fraction) * 360deg),\n    var(--galley-lamp-off) 0\n  );\n  mask:\n    repeating-conic-gradient(#000 0 7deg, transparent 7deg 15deg),\n    radial-gradient(circle closest-side, transparent 92%, #000 93%);\n  mask-composite: intersect;\n  -webkit-mask-composite: source-in;\n}\n\n.galley-ring {\n  position: absolute;\n  inset: 11%;\n  border-radius: 50%;\n  cursor: grab;\n  outline: none;\n  background: radial-gradient(\n    circle at 35% 30%,\n    var(--galley-sheen) 0%,\n    var(--galley-metal) 45%,\n    var(--galley-metal-2) 100%\n  );\n  box-shadow:\n    10px 10px 22px var(--galley-shade),\n    -8px -8px 18px var(--galley-light),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n.galley-ring:focus-visible {\n  box-shadow:\n    10px 10px 22px var(--galley-shade),\n    -8px -8px 18px var(--galley-light),\n    0 0 0 3px var(--galley-lamp);\n}\n\n.galley-ring[data-dragging] {\n  cursor: grabbing;\n}\n\n.galley-ring[data-disabled] {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.galley-rotor {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: repeating-conic-gradient(\n    rgba(0, 0, 0, 0.16) 0 1deg,\n    rgba(255, 255, 255, 0.45) 1deg 2deg,\n    transparent 2deg 5deg\n  );\n  mask: radial-gradient(circle closest-side, transparent 84%, #000 85%);\n}\n\n.galley-center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  translate: -50% -50%;\n  width: 38%;\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 50%;\n  background: var(--galley-metal);\n  color: var(--galley-ink);\n  box-shadow:\n    inset 5px 5px 10px var(--galley-shade),\n    inset -4px -4px 9px var(--galley-light);\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.galley-center > svg {\n  width: 36%;\n  height: 36%;\n}\n\n.galley-center:active {\n  box-shadow:\n    inset 7px 7px 14px var(--galley-shade),\n    inset -3px -3px 7px var(--galley-light);\n}\n\n.galley-center:active > * {\n  transform: translateY(1px);\n}\n\n.galley-center:focus-visible {\n  outline: 2px solid var(--galley-lamp);\n  outline-offset: 3px;\n}\n\n.galley-center:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n"}],"docs":"Import { Wheel } from \"@/components/click-wheel-galley/wheel\". Docs: https://click-wheel.jackymo.me/docs.md"}