50: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"] 51: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"] 52:T2a97,'use client'; import { KeyboardEvent, useCallback, useEffect, useMemo, useRef } from 'react'; import { Button } from '@/components/ui/button'; import { Label1 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G time picker: three scrolling columns of 56x28 items. Hover fills * #faefff (primary-50) and the current value fills #ecd0ff (primary-100), with * 1px #dee2e6 dividers between the columns. * * Each column is a listbox where selection follows focus, so the arrow keys * change the value directly instead of needing a second confirm keystroke. * That is the right pattern for a spinner and it keeps each column to one tab * stop rather than sixty. * * The kit's guidance asks twice for a 12-hour option — "include an option for * AM/PM where applicable" and "allow users to customize the format based on * regional preferences" — so `hourCycle` adds a fourth column. The value stays * 24-hour throughout: only the display changes, because a component that hands * back "7" without saying which seven is worse than useless. */ const HOURS_IN_DAY = 24; const MINUTES_IN_HOUR = 60; const MERIDIEM_OPTIONS = [ { value: 0, label: 'AM' }, { value: 1, label: 'PM' }, ]; interface ITimeValue { /** Always 0-23. `hourCycle` changes the display, never the value. */ hours: number; minutes: number; seconds: number; } type THourCycle = 12 | 24; /** Zero-padded two-digit label, the only form the kit shows. */ function pad(value: number) { return String(value).padStart(2, '0'); } /** "14:05:00", "14:05", or "02:05 PM" on a 12-hour clock. */ function formatTime(value: ITimeValue, showSeconds: boolean, hourCycle: THourCycle = 24) { const hours = hourCycle === 12 ? toClockHour(value.hours) : value.hours; const base = `${pad(hours)}:${pad(value.minutes)}`; const withSeconds = showSeconds ? `${base}:${pad(value.seconds)}` : base; return hourCycle === 12 ? `${withSeconds} ${value.hours < 12 ? 'AM' : 'PM'}` : withSeconds; } /** The face a 24-hour value shows on a 12-hour clock: 0 and 12 both read 12. */ function toClockHour(hours: number) { return hours % 12 === 0 ? 12 : hours % 12; } /** Rebuilds a 24-hour value from a clock face and a meridiem. */ function fromClockHour(clockHour: number, isAfternoon: boolean) { return (clockHour % 12) + (isAfternoon ? 12 : 0); } /** Wall-clock time from a Date, with seconds. */ function toTimeValue(date: Date): ITimeValue { return { hours: date.getHours(), minutes: date.getMinutes(), seconds: date.getSeconds() }; } interface ITimeOptionProps { option: number; label: string; selected: boolean; onSelect: (value: number) => void; registerRef: (option: number, node: HTMLButtonElement | null) => void; } /** One entry in a column. Split out so its callbacks stay stable. */ function TimeOption({ option, label, selected, onSelect, registerRef }: ITimeOptionProps) { const handleClick = useCallback(() => onSelect(option), [onSelect, option]); const handleRef = useCallback( (node: HTMLButtonElement | null) => registerRef(option, node), [registerRef, option], ); return ( ); } interface ITimeOption { value: number; label: string; } interface ITimeColumnProps { label: string; options: ITimeOption[]; value: number; onValueChange: (value: number) => void; } /** * One scrolling column, keyboard-driven as a listbox. * * Takes an options list rather than a count so the hour column can show 12, 1, * 2 … while still reporting 0-23, and so AM/PM is the same component. */ function TimeColumn({ label, options, value, onValueChange }: ITimeColumnProps) { const count = options.length; const nodes = useRef(new Map()); const list = useRef(null); const registerRef = useCallback((option: number, node: HTMLButtonElement | null) => { if (node) nodes.current.set(option, node); else nodes.current.delete(option); }, []); // scrollTop rather than scrollIntoView: the latter also scrolls every // ancestor, which would yank the page on mount. The container is `relative` // so that offsetTop is measured against it and not the document body. useEffect(() => { const node = nodes.current.get(value); const container = list.current; if (!node || !container) return; container.scrollTop = node.offsetTop - (container.clientHeight - node.offsetHeight) / 2; }, [value]); const handleKeyDown = useCallback( (event: KeyboardEvent) => { const steps: Record = { ArrowUp: -1, ArrowDown: 1, PageUp: -10, PageDown: 10, }; const current = options.findIndex(option => option.value === value); const move = (index: number) => { const next = options[((index % count) + count) % count]; onValueChange(next.value); nodes.current.get(next.value)?.focus(); }; if (event.key in steps) { event.preventDefault(); move(current + steps[event.key]); return; } if (event.key === 'Home' || event.key === 'End') { event.preventDefault(); move(event.key === 'Home' ? 0 : count - 1); } }, [value, count, options, onValueChange], ); return ( ); } interface ITimeColumnsProps { value: ITimeValue; onValueChange: (value: ITimeValue) => void; showSeconds?: boolean; /** 12 adds an AM/PM column and shows hours as 12, 1, 2 … */ hourCycle?: THourCycle; className?: string; } /** * The three columns on their own, for composing into a larger surface. * * DateTimePicker uses this beside a Calendar; TimePicker wraps it in the card * with the header and footer. */ function TimeColumns({ value, onValueChange, showSeconds = true, hourCycle = 24, className, }: ITimeColumnsProps) { const isAfternoon = value.hours >= 12; const setHours = useCallback( (hours: number) => onValueChange({ ...value, hours }), [onValueChange, value], ); const setClockHour = useCallback( (clockHour: number) => onValueChange({ ...value, hours: fromClockHour(clockHour, value.hours >= 12) }), [onValueChange, value], ); const setMeridiem = useCallback( (afternoon: number) => onValueChange({ ...value, hours: fromClockHour(toClockHour(value.hours), afternoon === 1) }), [onValueChange, value], ); const setMinutes = useCallback( (minutes: number) => onValueChange({ ...value, minutes }), [onValueChange, value], ); const setSeconds = useCallback( (seconds: number) => onValueChange({ ...value, seconds }), [onValueChange, value], ); const hourOptions = useMemo( () => hourCycle === 12 ? // 12 first, matching every analogue clock face [12, ...Array.from({ length: 11 }, (_, index) => index + 1)].map(hour => ({ value: hour, label: pad(hour), })) : Array.from({ length: HOURS_IN_DAY }, (_, hour) => ({ value: hour, label: pad(hour) })), [hourCycle], ); const minuteOptions = useMemo( () => Array.from({ length: MINUTES_IN_HOUR }, (_, unit) => ({ value: unit, label: pad(unit) })), [], ); return (

{showSeconds && ( )} {hourCycle === 12 && ( )}

); } interface ITimePickerProps { value: ITimeValue; onValueChange: (value: ITimeValue) => void; showSeconds?: boolean; /** 12 adds an AM/PM column and shows hours as 12, 1, 2 … */ hourCycle?: THourCycle; /** Shows the header echoing the current value. */ showHeader?: boolean; /** Called by the Ok button. Omit it and the button is not rendered. */ onConfirm?: () => void; className?: string; } /** Time picker card: the value echoed above the columns, Now and Ok below. */ function TimePicker({ value, onValueChange, showSeconds = true, hourCycle = 24, showHeader = false, onConfirm, className, }: ITimePickerProps) { const handleNow = useCallback(() => onValueChange(toTimeValue(new Date())), [onValueChange]); return (

{showHeader && ( {formatTime(value, showSeconds, hourCycle)} )}

{onConfirm && ( )}

); } export type { ITimeValue, THourCycle }; export { TimePicker, TimeColumns, formatTime, toTimeValue, toClockHour, fromClockHour }; 4f:["$","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,["$","$L50",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json","https://indiacn.in/r/button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/time-picker.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]