52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2839,"use client"; import { ClockIcon } from "lucide-react"; import * as React from "react"; import { Field, FieldDescription, FieldError, FieldLabel, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; export type TimeFormat = "12h" | "24h"; export interface TimePickerFieldProps { label?: string; description?: string; error?: string; id?: string; name?: string; /** Controlled value as a "HH:mm" string (24-hour internally). */ value?: string; defaultValue?: string; onValueChange?: (value: string) => void; disabled?: boolean; required?: boolean; /** "12h" shows AM/PM selector; "24h" shows plain 24-hour input. Defaults to "24h". */ timeFormat?: TimeFormat; fieldClassName?: string; labelClassName?: string; inputClassName?: string; orientation?: "vertical" | "horizontal" | "responsive"; } /** Parse a "HH:mm" string into { hours, minutes } (both as numbers). */ function parseTime(value: string): { hours: number; minutes: number } { const [h, m] = value.split(":").map(Number); return { hours: Number.isFinite(h) ? h : 0, minutes: Number.isFinite(m) ? m : 0, }; } /** Convert hours/minutes back to a "HH:mm" string. */ function formatTime(hours: number, minutes: number): string { return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`; } /** Convert 24-hour `hours` to 12-hour display value (1-12). */ function to12Hour(hours: number): number { const h = hours % 12; return h === 0 ? 12 : h; } /** Convert 12-hour display value + period back to 24-hour hours. */ function from12Hour(hour12: number, period: "AM" | "PM"): number { if (period === "AM") return hour12 === 12 ? 0 : hour12; return hour12 === 12 ? 12 : hour12 + 12; } export const TimePickerField = React.forwardRef< HTMLInputElement, TimePickerFieldProps >( ( { label, description, error, id, name, value, defaultValue = "00:00", onValueChange, disabled, required, timeFormat = "24h", fieldClassName, labelClassName, inputClassName, orientation = "vertical", }, ref, ) => { const generatedId = React.useId(); const inputId = id ?? generatedId; const descriptionId = description ? `${inputId}-description` : undefined; const errorId = error ? `${inputId}-error` : undefined; const describedBy = description && !error ? descriptionId : undefined; // Internal state (always stored as 24h) const isControlled = value !== undefined; const [internalValue, setInternalValue] = React.useState( defaultValue ?? "00:00", ); const currentValue = isControlled ? value : internalValue; const { hours, minutes } = parseTime(currentValue); const [period, setPeriod] = React.useState<"AM" | "PM">( hours >= 12 ? "PM" : "AM", ); // Keep period in sync when controlled value changes React.useEffect(() => { if (isControlled) { setPeriod(hours >= 12 ? "PM" : "AM"); } }, [hours, isControlled]); const commitChange = React.useCallback( (newHours: number, newMinutes: number) => { const newValue = formatTime(newHours, newMinutes); if (!isControlled) setInternalValue(newValue); onValueChange?.(newValue); }, [isControlled, onValueChange], ); // ── 24-hour input handler ── const handleNativeChange = (e: React.ChangeEvent) => { const newValue = e.target.value; // "HH:mm" if (!isControlled) setInternalValue(newValue); onValueChange?.(newValue); }; // ── 12-hour: hours spin box ── const hour12 = to12Hour(hours); const handleHourChange = (e: React.ChangeEvent) => { const raw = parseInt(e.target.value, 10); if (!Number.isFinite(raw)) return; const clamped = Math.max(1, Math.min(12, raw)); commitChange(from12Hour(clamped, period), minutes); }; const handleMinuteChange = (e: React.ChangeEvent) => { const raw = parseInt(e.target.value, 10); if (!Number.isFinite(raw)) return; const clamped = Math.max(0, Math.min(59, raw)); commitChange(from12Hour(hour12, period), clamped); }; const togglePeriod = () => { const newPeriod = period === "AM" ? "PM" : "AM"; setPeriod(newPeriod); commitChange(from12Hour(hour12, newPeriod), minutes); }; // ── keyboard spin for hour/minute ── const spinOnKeyDown = ( current: number, min: number, max: number, onChange: (v: number) => void, ) => (e: React.KeyboardEvent) => { if (e.key === "ArrowUp") { e.preventDefault(); onChange(current < max ? current + 1 : min); } else if (e.key === "ArrowDown") { e.preventDefault(); onChange(current > min ? current - 1 : max); } }; return ( {label && ( {label} {required && ( <> (required) )} )} {timeFormat === "24h" ? ( // ─── 24-hour: native ───────────────────────────

) : ( // ─── 12-hour: custom HH:mm AM/PM ──────────────────────────────────

{/* Hours */} commitChange(from12Hour(v, period), minutes), )} disabled={disabled} required={required} aria-required={required || undefined} aria-invalid={!!error} aria-describedby={describedBy} aria-errormessage={errorId} aria-label="Hours" className={cn( "w-10 border-0 bg-transparent text-center text-sm tabular-nums", "focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", )} /> : {/* Minutes */} commitChange(from12Hour(hour12, period), v), )} disabled={disabled} aria-label="Minutes" className={cn( "w-10 border-0 bg-transparent text-center text-sm tabular-nums", "focus:outline-none focus:ring-0", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", )} /> {/* AM/PM toggle */}

)} {description && !error && ( {description} )} {error && {error}} ); }, ); TimePickerField.displayName = "TimePickerField"; 51:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@nekode","registryDependencies":["field","input","label"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/time-picker-field.tsx","content":"$54","type":"registry:ui","target":"components/ui/time-picker-field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]