4e: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/3j06ow7w40nxu.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"] 4f: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/3j06ow7w40nxu.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"] 50:T2e6d,// Time Picker from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { Clock, X } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; import { Popover, PopoverContent, PopoverTrigger } from '@/registry/hirael/bases/radix/ui/popover'; import { Tabs, TabsList, TabsTrigger } from '@/registry/hirael/bases/radix/ui/tabs'; export interface TimeValue { hour: number; minute: number; second?: number; } export type TimeFormat = '12h' | '24h'; export interface MeridiemLabels { am: string; pm: string; } const DEFAULT_MERIDIEM_LABELS: MeridiemLabels = { am: 'AM', pm: 'PM' }; interface TimePickerContextValue { value: TimeValue | null; setValue: (v: TimeValue) => void; clearValue: () => void; clearable: boolean; format: TimeFormat; meridiemLabels: MeridiemLabels; showSeconds: boolean; minuteStep: number; secondStep: number; open: boolean; setOpen: (open: boolean) => void; disabled?: boolean; } const TimePickerContext = React.createContext(null); const useTimePicker = () => { const ctx = React.useContext(TimePickerContext); if (!ctx) { throw new Error('TimePicker compound components must be used inside '); } return ctx; }; const pad2 = (n: number) => n.toString().padStart(2, '0'); const to12Hour = (hour: number) => ((hour + 11) % 12) + 1; const stepValues = (step: number) => { const size = Math.max(1, step); return Array.from({ length: Math.ceil(60 / size) }, (_, i) => i * size); }; export interface TimePickerProps { value?: TimeValue | null; defaultValue?: TimeValue; /** Reports every change, including `null` when the value is cleared. */ onValueChange?: (v: TimeValue | null) => void; clearable?: boolean; format?: TimeFormat; /** Labels for the 12-hour clock halves, in the trigger and the AM/PM switch. */ meridiemLabels?: MeridiemLabels; showSeconds?: boolean; minuteStep?: number; secondStep?: number; disabled?: boolean; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children?: React.ReactNode; } const TimePicker = ({ value: valueProp, defaultValue, onValueChange, clearable = false, format = '24h', meridiemLabels = DEFAULT_MERIDIEM_LABELS, showSeconds = false, minuteStep = 1, secondStep = 1, disabled, open: openProp, defaultOpen = false, onOpenChange, children, }: TimePickerProps) => { const [openInternal, setOpenInternal] = React.useState(defaultOpen); const open = openProp !== undefined ? openProp : openInternal; const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setOpenInternal(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const [internal, setInternal] = React.useState(defaultValue ?? null); const value = valueProp !== undefined ? valueProp : internal; const setValue = React.useCallback( (next: TimeValue) => { if (valueProp === undefined) setInternal(next); onValueChange?.(next); }, [valueProp, onValueChange], ); const clearValue = React.useCallback(() => { if (valueProp === undefined) setInternal(null); onValueChange?.(null); }, [valueProp, onValueChange]); const ctx = React.useMemo( () => ({ value, setValue, clearValue, clearable, format, meridiemLabels, showSeconds, minuteStep, secondStep, open, setOpen, disabled, }), [ value, setValue, clearValue, clearable, format, meridiemLabels, showSeconds, minuteStep, secondStep, open, setOpen, disabled, ], ); return ( {children} ); }; const formatTimeValue = (v: TimeValue, format: TimeFormat, showSeconds: boolean, labels: MeridiemLabels) => { const tail = showSeconds ? `:${pad2(v.second ?? 0)}` : ''; if (format === '24h') { return `${pad2(v.hour)}:${pad2(v.minute)}${tail}`; } return `${pad2(to12Hour(v.hour))}:${pad2(v.minute)}${tail} ${v.hour >= 12 ? labels.pm : labels.am}`; }; const TimePickerTrigger = ({ placeholder = 'Pick a time', className, children, ...props }: Omit, 'children'> & { placeholder?: string; children?: React.ReactNode; }) => { const ctx = useTimePicker(); const label = ctx.value ? formatTimeValue(ctx.value, ctx.format, ctx.showSeconds, ctx.meridiemLabels) : null; return ( ); }; interface ScrollColumnProps { values: number[]; selected?: number; onSelect: (n: number) => void; ariaLabel: string; } const ScrollColumn = ({ values, selected, onSelect, ariaLabel }: ScrollColumnProps) => { const listRef = React.useRef(null); const displayValues = React.useMemo(() => { if (selected === undefined || values.includes(selected)) return values; return [...values, selected].sort((a, b) => a - b); }, [values, selected]); const tabbableValue = selected ?? displayValues[0]; // Scroll only this column; scrollIntoView would also scroll the page and any scrollable ancestor. React.useEffect(() => { const list = listRef.current; if (selected === undefined || !list) return; const el = list.querySelector(`[data-val="${selected}"]`); if (!el) return; list.scrollTo({ top: el.offsetTop - (list.clientHeight - el.offsetHeight) / 2, behavior: 'instant' }); }, [selected]); const handleKeyDown = (e: React.KeyboardEvent, index: number) => { const last = displayValues.length - 1; const nextIndex = ( { ArrowDown: Math.min(last, index + 1), ArrowUp: Math.max(0, index - 1), Home: 0, End: last } as Record< string, number > )[e.key]; if (nextIndex === undefined) return; e.preventDefault(); const n = displayValues[nextIndex]; onSelect(n); listRef.current?.querySelector(`[data-val="${n}"]`)?.focus(); }; return (