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[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"] 4f:T1af2,import { useId, useRef, useState, type ComponentProps, type KeyboardEvent } from "react" import { cn } from "@/lib/utils" import { Field, FieldDescription, FieldError, FieldLabel } from "./field" import { isValidTime } from "./time-picker-utils" type TimeValue = { hour: number; minute: number } type TimeMode = "12-hour" | "24-hour" type TimePickerProps = Omit, "onChange"> & { disabled?: boolean error?: string invalid?: boolean label: string max?: TimeValue min?: TimeValue mode?: TimeMode onValueChange: (value: TimeValue) => void readOnly?: boolean supportingText?: string value: TimeValue } function TimePicker({ className, disabled = false, error, invalid = false, label, max, min, mode = "12-hour", onValueChange, readOnly = false, supportingText, value, ...props }: TimePickerProps) { const key = `${value.hour}:${value.minute}:${mode}` const displayHour = mode === "12-hour" && value.hour >= 0 && value.hour <= 23 ? value.hour % 12 || 12 : value.hour const [draft, setDraft] = useState(() => ({ key, hour: String(displayHour), minute: String(value.minute).padStart(2, "0") })) if (draft.key !== key) { setDraft({ key, hour: String(displayHour), minute: String(value.minute).padStart(2, "0") }) } const hourRef = useRef(null) const minuteRef = useRef(null) const id = useId() const valueInvalid = !isValidTime(value, min, max) const emptySegment = draft.hour === "" || draft.minute === "" const ariaInvalid = invalid || valueInvalid || emptySegment const updateHour = (raw: string) => { if (raw === "") return setDraft({ ...draft, hour: raw }) const entered = Number(raw) let hour = entered if (mode === "12-hour" && entered >= 1 && entered <= 12) { const pm = value.hour >= 12 hour = (entered % 12) + (pm ? 12 : 0) } const next = { ...value, hour } setDraft({ key: `${next.hour}:${next.minute}:${mode}`, hour: raw, minute: draft.minute }) onValueChange(next) } const updateMinute = (raw: string) => { if (raw === "") return setDraft({ ...draft, minute: raw }) const next = { ...value, minute: Number(raw) } setDraft({ key: `${next.hour}:${next.minute}:${mode}`, hour: draft.hour, minute: raw }) onValueChange(next) } const handleSegmentKey = ( segment: "hour" | "minute", event: KeyboardEvent, ) => { if (event.key === "ArrowRight" && segment === "hour") { event.preventDefault() minuteRef.current?.focus() return } if (event.key === "ArrowLeft" && segment === "minute") { event.preventDefault() hourRef.current?.focus() return } if (readOnly) return if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return event.preventDefault() const delta = event.key === "ArrowUp" ? 1 : -1 if (segment === "hour") { const nextHour = (value.hour + delta + 24) % 24 onValueChange({ ...value, hour: nextHour }) } else { const nextMinute = (value.minute + delta + 60) % 60 onValueChange({ ...value, minute: nextMinute }) } } const segmentClass = cn( // Kit keyboard segment: 96 × 72, 8dp corners, Surface Container Highest, // no stroke, display-medium numerals; the focused segment turns Primary // Container with a 2dp Primary outline (painted inset so nothing reflows). "h-18 w-24 rounded-m3-sm bg-m3-surface-container-highest text-center text-m3-display-md text-foreground outline-none", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", "transition-[background-color,box-shadow] duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast)", "focus:bg-m3-primary-container focus:text-m3-on-primary-container focus:shadow-[inset_0_0_0_2px_var(--m3-primary)]", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary", "disabled:cursor-not-allowed disabled:text-muted-foreground/38", "aria-invalid:shadow-[inset_0_0_0_2px_var(--m3-error)]", ) return ( {label}

updateHour(event.target.value)} onKeyDown={(event) => handleSegmentKey("hour", event)} /> updateMinute(event.target.value)} onKeyDown={(event) => handleSegmentKey("minute", event)} /> {mode === "12-hour" && ( )}

{supportingText && {supportingText}} {(error || valueInvalid || emptySegment) && ( {error ?? (emptySegment ? "Enter both hours and minutes" : "Enter a time within the allowed range")} )} ) } export { TimePicker, type TimeMode, type TimePickerProps, type TimeValue, } 50:T545,import type { TimeMode, TimeValue } from "./time-picker" function formatTime(value: TimeValue, mode: TimeMode = "24-hour") { if (mode === "24-hour") { return `${String(value.hour).padStart(2, "0")}:${String(value.minute).padStart(2, "0")}` } const period = value.hour >= 12 ? "PM" : "AM" const hours = value.hour % 12 || 12 return `${hours}:${String(value.minute).padStart(2, "0")} ${period}` } function parseTime(text: string, mode: TimeMode = "24-hour"): TimeValue | null { const match = text.trim().match(/^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i) if (!match) return null let hour = Number(match[1]) const minute = Number(match[2]) if (mode === "12-hour") { const period = match[3]?.toUpperCase() if (!period || hour < 1 || hour > 12) return null hour = (hour % 12) + (period === "PM" ? 12 : 0) } if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return null return { hour, minute } } function minutesOf(value: TimeValue) { return value.hour * 60 + value.minute } function isValidTime(value: TimeValue, min?: TimeValue, max?: TimeValue) { if (value.hour < 0 || value.hour > 23 || value.minute < 0 || value.minute > 59) return false const total = minutesOf(value) return (!min || total >= minutesOf(min)) && (!max || total <= minutesOf(max)) } export { formatTime, isValidTime, parseTime } 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":"@materialcn","registryDependencies":["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/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/ui/time-picker.tsx","content":"$4f","type":"registry:ui"},{"path":"src/components/ui/time-picker-utils.ts","content":"$50","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]