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:T34c1,'use client'; import { CalendarDays, Clock } from 'lucide-react'; import { ReactNode, useCallback, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Calendar, IDateRange, MONTH_LABELS, startOfDay } from '@/components/ui/calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { ITimeValue, THourCycle, TimeColumns, formatTime, toTimeValue, } from '@/components/ui/time-picker'; import { Label1 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G picker triggers: an input-shaped field with a trailing icon, or a bare * 32px icon button. Both open the same surface. * * The field is a button rather than a text input. The kit draws it as a field, * and it looks identical here, but a real input invites typing and then has to * guess what "03/04" means. The button says what it is — aria-haspopup dialog, * the chosen date as its label — and the grid stays the one way in. */ const TRIGGER_FIELD = 'border-neutral-200 bg-neutral-0 hover:border-primary focus-visible:border-primary focus-visible:shadow-focus-primary flex h-11 w-full cursor-pointer items-center gap-2 rounded-md border px-3 text-left text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-neutral-600'; const TRIGGER_ICON = 'border-neutral-200 bg-neutral-0 hover:border-primary hover:text-primary focus-visible:shadow-focus-primary flex size-8 cursor-pointer items-center justify-center rounded-md border text-neutral-600 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-[18px]'; /* * Radix reports how much room it has below the trigger. Without the cap the * stacked date-time surface came to 703px in an 844px viewport and hung 307px * above the top edge, where it could not be reached. */ const PANEL = 'w-auto max-h-[var(--radix-popover-content-available-height)] overflow-y-auto border-0 bg-transparent p-0 shadow-none'; /* * `modal` on every picker. Radix popovers are non-modal by default, and Tab * from the last day cell closed the surface and dropped focus on a bare span. * The kit asks that focus stay in the picker until the choice is confirmed or * cancelled, and a calendar with 42 cells is a place you can get lost. */ const MODAL = true; type TPickerTrigger = 'field' | 'icon'; /** "21 Oct 2021" — spelled out so the day and month can never be read the wrong way round. */ function formatDate(date: Date) { return `${date.getDate()} ${MONTH_LABELS[date.getMonth()]} ${date.getFullYear()}`; } /** "21 Oct 2021 – 30 Oct 2021", or just the start while the span is open. */ function formatRange(range: IDateRange) { if (!range.from) return ''; return range.to ? `${formatDate(range.from)} – ${formatDate(range.to)}` : formatDate(range.from); } interface IPickerTriggerProps { trigger: TPickerTrigger; text: string; placeholder: string; icon: ReactNode; triggerLabel: string; disabled?: boolean; className?: string; } /** Shared trigger for every picker on this page. */ function PickerTrigger({ trigger, text, placeholder, icon, triggerLabel, disabled, className, }: IPickerTriggerProps) { if (trigger === 'icon') { return ( {icon} ); } return ( {text || placeholder} {icon} ); } interface IDatePickerProps { value: Date | null; onValueChange: (date: Date) => void; trigger?: TPickerTrigger; placeholder?: string; /** Overrides the trigger text. Useful for a locale-aware format. */ format?: (date: Date) => string; showViewControls?: boolean; min?: Date; max?: Date; disabled?: boolean; className?: string; } /** Single date. Picking a day commits it and closes the surface. */ function DatePicker({ value, onValueChange, trigger = 'field', placeholder = 'Select Date', format = formatDate, showViewControls = true, min, max, disabled, className, }: IDatePickerProps) { const [open, setOpen] = useState(false); const handleSelect = useCallback( (date: Date) => { onValueChange(date); setOpen(false); }, [onValueChange], ); return ( } triggerLabel='Choose date' disabled={disabled} className={className} /> ); } interface IDateRangePickerProps { value: IDateRange; onValueChange: (range: IDateRange) => void; trigger?: TPickerTrigger; placeholder?: string; min?: Date; max?: Date; disabled?: boolean; className?: string; } /** * Date span across two months. * * The surface stays open until both ends are set, since closing on the first * click would make the second one impossible. */ function DateRangePicker({ value, onValueChange, trigger = 'field', placeholder = 'Select Dates', min, max, disabled, className, }: IDateRangePickerProps) { const [open, setOpen] = useState(false); const handleChange = useCallback( (range: IDateRange) => { onValueChange(range); if (range.from && range.to) setOpen(false); }, [onValueChange], ); return ( } triggerLabel='Choose dates' disabled={disabled} className={className} /> ); } interface ITimePickerFieldProps { value: ITimeValue | null; onValueChange: (value: ITimeValue) => void; trigger?: TPickerTrigger; placeholder?: string; showSeconds?: boolean; /** 12 adds an AM/PM column and shows hours as 12, 1, 2 … */ hourCycle?: THourCycle; disabled?: boolean; className?: string; } /** Time of day. Ok commits the draft, so scrolling past a value costs nothing. */ function TimePickerField({ value, onValueChange, trigger = 'field', placeholder = 'Select Time', showSeconds = true, hourCycle = 24, disabled, className, }: ITimePickerFieldProps) { const [open, setOpen] = useState(false); const [draft, setDraft] = useState(value ?? { hours: 0, minutes: 0, seconds: 0 }); const handleOpenChange = useCallback( (next: boolean) => { if (next && value) setDraft(value); setOpen(next); }, [value], ); const handleNow = useCallback(() => setDraft(toTimeValue(new Date())), []); const handleConfirm = useCallback(() => { onValueChange(draft); setOpen(false); }, [onValueChange, draft]); return ( } triggerLabel='Choose time' disabled={disabled} className={className} />

); } interface IDateTimePickerProps { value: Date | null; onValueChange: (date: Date) => void; trigger?: TPickerTrigger; placeholder?: string; showSeconds?: boolean; /** 12 adds an AM/PM column and shows hours as 12, 1, 2 … */ hourCycle?: THourCycle; min?: Date; max?: Date; disabled?: boolean; className?: string; } /** Calendar and clock on one surface. Ok commits both halves at once. */ function DateTimePicker({ value, onValueChange, trigger = 'field', placeholder = 'Select Date & Time', showSeconds = true, hourCycle = 24, min, max, disabled, className, }: IDateTimePickerProps) { const [open, setOpen] = useState(false); const [draftDate, setDraftDate] = useState(value); const [draftTime, setDraftTime] = useState( value ? toTimeValue(value) : { hours: 0, minutes: 0, seconds: 0 }, ); const handleOpenChange = useCallback( (next: boolean) => { if (next && value) { setDraftDate(value); setDraftTime(toTimeValue(value)); } setOpen(next); }, [value], ); const handleToday = useCallback(() => setDraftDate(startOfDay(new Date())), []); const handleConfirm = useCallback(() => { const day = draftDate ?? startOfDay(new Date()); onValueChange( new Date( day.getFullYear(), day.getMonth(), day.getDate(), draftTime.hours, draftTime.minutes, draftTime.seconds, ), ); setOpen(false); }, [draftDate, draftTime, onValueChange]); const text = value ? `${formatDate(value)} ${formatTime(toTimeValue(value), showSeconds, hourCycle)}` : ''; return ( } triggerLabel='Choose date and time' disabled={disabled} className={className} />

{/* One grid for the body and the footer, so Today sits under the middle of the calendar and Ok under the clock. With the footer as its own row, Today centred on the whole card and landed 38px off. */}

{/* pt-4 + h-8 puts the clock readout on the same band as the calendar's month label, which sits under the same 16px pad. */}

{formatTime(draftTime, showSeconds, hourCycle)}

); } /** The reset-and-confirm row under a draft surface. */ function PickerFooter({ onReset, resetLabel, onConfirm, }: { onReset: () => void; resetLabel: string; onConfirm: () => void; }) { return (

); } export type { TPickerTrigger }; export { DatePicker, DateRangePicker, DateTimePicker, TimePickerField, formatDate, formatRange }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json","https://indiacn.in/r/button.json","https://indiacn.in/r/popover.json","https://indiacn.in/r/calendar.json","https://indiacn.in/r/time-picker.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/date-picker.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]