4c: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"] 4d: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"] 4e:T2602,import { useState, type KeyboardEvent } from "react" import { cn } from "@/lib/utils" import { Button } from "./button" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog" import { FieldError } from "./field" import { type TimeMode, type TimeValue } from "./time-picker" import { formatTime, isValidTime } from "./time-picker-utils" type TimeDialProps = { disabled?: boolean mode?: TimeMode onValueChange: (value: TimeValue) => void phase?: "hour" | "minute" value: TimeValue } function TimeDial({ disabled = false, mode = "12-hour", onValueChange, phase: phaseProp, value, }: TimeDialProps) { const [internalPhase, setInternalPhase] = useState<"hour" | "minute">("hour") const phase = phaseProp ?? internalPhase const hourValues = mode === "24-hour" ? Array.from({ length: 24 }, (_, index) => index) : Array.from({ length: 12 }, (_, index) => index + 1) const values = phase === "hour" ? hourValues : Array.from({ length: 12 }, (_, index) => index * 5) const selected = phase === "hour" ? mode === "12-hour" ? value.hour % 12 || 12 : value.hour : Math.round(value.minute / 5) * 5 % 60 const choose = (next: number) => { if (disabled) return if (phase === "hour") { const hour = mode === "12-hour" ? (next % 12) + (value.hour >= 12 ? 12 : 0) : next onValueChange({ ...value, hour }) if (!phaseProp) setInternalPhase("minute") } else { onValueChange({ ...value, minute: next }) } } const move = (event: KeyboardEvent, index: number) => { if (!["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) return event.preventDefault() const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1 const buttons = event.currentTarget.parentElement?.querySelectorAll('[data-slot="time-dial-value"]') buttons?.[(index + delta + values.length) % values.length]?.focus() } return (

{/* Kit dial inputs: 96 × 80, 8dp corners, display-large; the active segment is Primary Container. The separator is a fixed 24dp column. */}

{mode === "12-hour" && (

{(["AM", "PM"] as const).map((period) => { const pressed = period === (value.hour >= 12 ? "PM" : "AM") return ( ) })}

)}

{/* Clock hand: a 2dp Primary line from the centre to the selected numeral. */} {(() => { const index = values.indexOf(selected) if (index < 0) return null const clockPosition = phase === "minute" ? index : selected % 12 const inner = phase === "hour" && mode === "24-hour" && (selected === 0 || selected > 12) const length = inner ? 72 : 104 return (

) })()} {values.map((number, index) => { const clockPosition = phase === "minute" ? index : number % 12 const angle = (clockPosition * 30 - 90) * Math.PI / 180 const radius = phase === "hour" && mode === "24-hour" && (number === 0 || number > 12) ? 72 : 104 const x = Math.cos(angle) * radius const y = Math.sin(angle) * radius const active = number === selected return ( ) })}

) } type DialTimePickerProps = { defaultOpen?: boolean disabled?: boolean error?: string invalid?: boolean label: string max?: TimeValue min?: TimeValue mode?: TimeMode onValueChange: (value: TimeValue) => void value: TimeValue } function DialTimePicker({ defaultOpen, disabled, error, invalid, label, max, min, mode = "12-hour", onValueChange, value, }: DialTimePickerProps) { const [draft, setDraft] = useState(value) const valueInvalid = invalid || !isValidTime(draft, min, max) return ( ) } export { DialTimePicker, TimeDial, type DialTimePickerProps, type TimeDialProps } 4b:["$","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,["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/dialog.json","https://guillermo-rebolledo.github.io/materialcn/r/field.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/time-picker.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/time-dial.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]