4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1b80,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { useGalleryRef, useGallerySelection, } from "@/lib/cojeev/reference-gallery-motion"; export type OptionWheelItem = { id: string; label: string; description?: string; }; export type OptionWheelProps = Omit, "onChange"> & { items: readonly OptionWheelItem[]; defaultIndex?: number; selectedIndex?: number; onSelectionChange?: (index: number) => void; side?: "left" | "right"; /** Same selection, arranged as a rotary arc, aligned reel or compact readout. */ presentation?: "arc" | "reel" | "compact"; }; function WheelSlot(props: React.ComponentProps<"div">) { const ref = useMorph("buttons"); return (

); } export function OptionWheel({ items, defaultIndex = 0, selectedIndex, onSelectionChange, side = "left", presentation = "arc", className, ref, ...props }: OptionWheelProps) { const host = React.useRef(null), id = React.useId(); const { enabled, inView } = useMotionVisibility(host); const { selected, select } = useGallerySelection( items.length, defaultIndex, selectedIndex, onSelectionChange, ); const stage = React.useRef(null); const wheelGesture = React.useRef({ amount: 0, last: 0, direction: 0, eventTime: 0, }); React.useEffect(() => { const node = stage.current; if (!node) return; // React's delegated wheel listener is passive. Own only this bounded rotary // region, and release the native page scroll before the first/after the last. const wheel = (event: WheelEvent) => { if ( event.defaultPrevented || event.ctrlKey || Math.abs(event.deltaX) >= Math.abs(event.deltaY) || !event.deltaY || items.length < 2 ) return; const direction = Math.sign(event.deltaY); if (selected + direction < 0 || selected + direction >= items.length) return; event.preventDefault(); const now = performance.now(), gesture = wheelGesture.current; if (gesture.direction !== direction || now - gesture.eventTime > 180) { gesture.amount = 0; gesture.last = 0; } gesture.direction = direction; gesture.eventTime = now; if (now - gesture.last < 100) return; gesture.amount += Math.abs(event.deltaY) * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? node.clientHeight : 1); if (gesture.amount >= 40) { gesture.amount = 0; gesture.last = now; select(selected + direction); } }; node.addEventListener("wheel", wheel, { passive: false }); return () => node.removeEventListener("wheel", wheel); }, [items.length, selected, select]); const key = (event: React.KeyboardEvent) => { let next = selected; if (event.key === "ArrowDown" || event.key === "ArrowRight") next++; else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next--; else if (event.key === "Home") next = 0; else if (event.key === "End") next = items.length - 1; else return; event.preventDefault(); select(next); }; return (

{items[selected]?.description ?? items[selected]?.label ?? "No selection"}

); } 52:T22d4,@layer cojeev-states { /* A paper dial: fixed option slots, projected labels, one coloured readout. */ .v-option-wheel { width: 100%; min-width: 0; max-width: 600px; margin-inline: auto; border-radius: 28px; background: var(--v-canvas); color: var(--v-text); overflow: hidden; border: 1px solid var(--v-border); } .v-option-wheel__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 0; font-size: 12px; color: var(--v-text-2); } .v-option-wheel__heading > span:last-child { font-variant-numeric: tabular-nums; color: var(--v-text); } .v-option-wheel__heading i { font-style: normal; color: var(--v-text-2); } .v-option-wheel__stage { position: relative; height: 324px; overflow: hidden; isolation: isolate; outline-offset: -5px; } .v-option-wheel__stage > p { margin: 0; padding: 100px 24px; text-align: center; color: var(--v-text-2); } .v-option-wheel__dial { position: absolute; z-index: -1; pointer-events: none; width: 310px; height: 310px; top: 7px; left: -222px; border: 1px solid var(--v-edge); border-radius: 50%; } .v-option-wheel__dial::before, .v-option-wheel__dial::after { content: ""; position: absolute; border: 1px dashed var(--v-border); border-radius: 50%; inset: 12px; } .v-option-wheel__dial::after { inset: 28px; border-style: solid; background: color-mix(in oklab, var(--v-yellow) 17%, transparent); } .v-option-wheel__dial > span { position: absolute; top: 50%; right: -4px; width: 8px; height: 8px; background: var(--v-yellow); border-radius: 50%; } .v-option-wheel__dial > i { position: absolute; right: 0; top: calc(50% - 1px); width: 14px; height: 1px; background: var(--v-edge); transform-origin: -140px center; } .v-option-wheel__dial > i:nth-child(2) { transform: rotate(-30deg); } .v-option-wheel__dial > i:nth-child(4) { transform: rotate(30deg); } .v-option-wheel__marker { display: grid; place-items: center; position: absolute; left: 82px; top: calc(50% - 24px); width: 36px; height: 48px; color: var(--v-text); pointer-events: none; } .v-option-wheel__option { position: absolute; top: calc(50% - 24px + var(--wheel-distance) * 54px); left: 122px; right: 24px; height: 48px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; border-radius: 12px; font: 500 clamp(20px, 3vw, 28px) / 1.15 var(--font-display); } .v-option-wheel__option > * { pointer-events: none; } .v-option-wheel__label { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateX(var(--wheel-bend)) rotate(var(--wheel-tilt)); transform-origin: left center; } .v-option-wheel__option:not([aria-selected="true"]) { color: var(--v-text-2); } .v-option-wheel__option[data-distance="-2"], .v-option-wheel__option[data-distance="2"] { font-size: 20px; } .v-option-wheel__option[aria-selected="true"] { --mfill: var(--v-pink); --mstroke: none; background: var(--v-pink); color: var(--v-on-accent); border-radius: 17px 24px 19px 14px / 18px 17px 24px 20px; } .v-option-wheel__option:not([aria-selected="true"]):hover { background: var(--v-beige); color: var(--v-text); } .v-option-wheel[data-motion="on"] .v-option-wheel__label { animation: v-wheel-arrive 0.22s ease-out both; } @keyframes v-wheel-arrive { from { opacity: 0.4; translate: 0 6px; } to { opacity: 1; translate: 0 0; } } .v-option-wheel__footer { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px dashed var(--v-border); background: color-mix(in oklab, var(--v-beige) 55%, transparent); } .v-option-wheel__footer p { margin: 0; font-size: 13px; line-height: 1.5; min-height: 3em; display: flex; align-items: center; } .v-option-wheel .v-option-wheel__control { padding: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .v-option-wheel__stage:focus-visible { outline: 2px solid var(--v-brand); outline-offset: -5px; } .v-option-wheel[data-side="right"] .v-option-wheel__dial { left: auto; right: -222px; transform: scaleX(-1); } .v-option-wheel[data-side="right"] .v-option-wheel__marker { left: auto; right: 82px; } .v-option-wheel[data-side="right"] .v-option-wheel__option { left: 24px; right: 122px; text-align: right; } .v-option-wheel[data-side="right"] .v-option-wheel__label { transform: translateX(calc(-1 * var(--wheel-bend))) rotate(var(--wheel-tilt)); transform-origin: right center; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__stage { height: 280px; margin: 20px 20px 0; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__dial { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: repeating-linear-gradient( to bottom, transparent 0 26px, var(--v-border) 26px 27px, transparent 27px 54px ); mask-image: linear-gradient( to right, #000 0 8px, transparent 8px calc(100% - 8px), #000 calc(100% - 8px) ); } .v-option-wheel[data-presentation="reel"] .v-option-wheel__dial > *, .v-option-wheel[data-presentation="reel"] .v-option-wheel__dial::before, .v-option-wheel[data-presentation="reel"] .v-option-wheel__dial::after { display: none; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__marker { display: none; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__option { left: 20px; right: 20px; text-align: center; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__label { transform: none; } .v-option-wheel[data-presentation="reel"] .v-option-wheel__option[aria-selected="true"] { --mfill: var(--v-blue); border-radius: 12px; background: var(--v-blue); box-shadow: 0 5px 0 color-mix(in oklab, var(--v-blue) 28%, transparent); } .v-option-wheel[data-presentation="compact"] { display: grid; grid-template-columns: minmax(0, 1fr) 60px; background: var(--v-beige); border-radius: 24px; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__heading { grid-column: 1 / -1; padding: 20px 20px 0; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__stage { height: 108px; grid-area: 2 / 1; overflow: visible; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__option { --mfill: transparent; inset: 20px 8px 20px 20px; height: 68px; padding: 0; background: transparent; color: var(--v-text); font-size: 28px; text-align: left; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__label { transform: none; white-space: normal; overflow-wrap: anywhere; } .v-option-wheel[data-presentation="compact"] :is(.v-option-wheel__dial, .v-option-wheel__marker) { display: none; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__footer { display: contents; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__footer p { grid-area: 3 / 1 / 4 / -1; min-height: 0; margin: 0 20px 20px; border-top: 1px dashed var(--v-border); padding-top: 12px; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__control { grid-column: 2; align-self: center; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__control:first-child { grid-row: 2; align-self: start; margin-top: 10px; } .v-option-wheel[data-presentation="compact"] .v-option-wheel__control:last-child { grid-row: 2; align-self: end; margin-bottom: 10px; } .v-wheel-example { display: grid; gap: 12px; width: 100%; min-width: 0; max-width: 600px; margin-inline: auto; } .v-wheel-example > p { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--v-text-2); } @media (max-width: 480px) { .v-option-wheel__option { left: 78px; right: 16px; padding-inline: 12px; font-size: 20px; } .v-option-wheel__dial { left: -260px; } .v-option-wheel__marker { left: 43px; width: 28px; } .v-option-wheel[data-side="right"] .v-option-wheel__dial { right: -260px; } .v-option-wheel[data-side="right"] .v-option-wheel__marker { right: 43px; } .v-option-wheel[data-side="right"] .v-option-wheel__option { left: 16px; right: 78px; } .v-option-wheel__footer { gap: 12px; padding: 16px; } } @media (prefers-reduced-motion: reduce) { .v-option-wheel[data-motion="on"] .v-option-wheel__label { animation: none; } } /* The shared contour is the sole painted surface when motion is active. */ :root .v-option-wheel__option[aria-selected="true"]:has(> svg.v-morph) { background: transparent; box-shadow: none; } @media (forced-colors: active) { .v-option-wheel__option[aria-selected="true"] { outline: 2px solid Highlight; color: Highlight; } } } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/option-wheel.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/option-wheel.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/option-wheel.css","content":"$52","type":"registry:file","target":"styles/cojeev/option-wheel.css"}],"className":"h-[70svh] min-h-80"}]]}]