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:T5f60,'use client'; import { ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'; import { KeyboardEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Label1, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G calendar: four views off one surface — a single month, two months side * by side for ranges, a year of months, and a decade of years. * * Measured from the kit at 1:1 — today is a 1px #613af5 outline, the selected * day is filled #613af5, a range fills #faefff (primary-50), and the card * carries a shadow rather than a border. * * Two deliberate departures. The kit's day cells are 24px on a 41px pitch; * these are 36px on a 37px pitch, so the footprint is unchanged but the target * clears WCAG 2.5.8 comfortably. And in the two-month view the kit repeats the * full arrow set under both headers; here the back arrows sit on the first * month and the forward arrows on the last, because two controls that move the * same window read as four different destinations to a screen reader. */ const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const; const MONTH_LABELS = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ] as const; const MONTH_LABELS_LONG = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ] as const; const DAYS_IN_GRID = 42; /** Midnight on the given day, so comparisons ignore the clock. */ function startOfDay(date: Date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); } /** Shifts by whole days, rolling over month and year boundaries. */ function addDays(date: Date, amount: number) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount); } /** Shifts by whole months, landing on the first of the target month. */ function addMonths(date: Date, amount: number) { return new Date(date.getFullYear(), date.getMonth() + amount, 1); } /** True when both dates fall on the same calendar day. */ function isSameDay(a?: Date | null, b?: Date | null) { return ( !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() ); } /** True when both dates fall in the same calendar month. */ function isSameMonth(a: Date, b: Date) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth(); } /** Stable key for a day, used to address the cell refs. */ function dayKey(date: Date) { return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`; } /** The six weeks that cover a month, including the days either side of it. */ function monthMatrix(month: Date, weekStartsOn: number) { const first = new Date(month.getFullYear(), month.getMonth(), 1); const offset = (first.getDay() - weekStartsOn + 7) % 7; const start = addDays(first, -offset); return Array.from({ length: DAYS_IN_GRID }, (_, index) => addDays(start, index)); } /** Weekday names rotated so the configured first day of the week leads. */ function weekdayLabels(weekStartsOn: number) { return Array.from({ length: 7 }, (_, index) => WEEKDAY_LABELS[(weekStartsOn + index) % 7]); } /** Long-form label used in the day cell's accessible name. */ function describeDay(date: Date) { return `${date.getDate()} ${MONTH_LABELS_LONG[date.getMonth()]} ${date.getFullYear()}`; } interface IDateRange { from: Date | null; to: Date | null; } type TCalendarView = 'day' | 'month' | 'year'; const CELL_BASE = 'focus-visible:shadow-focus-primary flex size-9 cursor-pointer items-center justify-center rounded-md border border-transparent text-sm transition-colors focus-visible:outline-none disabled:pointer-events-none'; interface ICalendarNavProps { label: ReactNode; onStepBack: () => void; onStepForward: () => void; onJumpBack: () => void; onJumpForward: () => void; stepBackLabel: string; stepForwardLabel: string; jumpBackLabel: string; jumpForwardLabel: string; showStep?: boolean; showBack?: boolean; showForward?: boolean; } /** * The arrow row above a grid. * * `showBack` / `showForward` let the two-month view put the back arrows on the * first header and the forward arrows on the last without duplicating them. */ function CalendarNav({ label, onStepBack, onStepForward, onJumpBack, onJumpForward, stepBackLabel, stepForwardLabel, jumpBackLabel, jumpForwardLabel, showStep = true, showBack = true, showForward = true, }: ICalendarNavProps) { /* * Both arrow groups reserve the same width whether or not they render * anything. Without it the two-month view, which shows the back arrows only * on the first month, pushed each month's label 30px off the centre of its * own grid. */ return (

{showBack && ( )} {showBack && showStep && ( )}

{label}

{showForward && showStep && ( )} {showForward && ( )}

); } /** One arrow. Always carries a text label, since the glyph is decorative. */ function CalendarNavButton({ onClick, label, children, }: { onClick: () => void; label: string; children: ReactNode; }) { return ( ); } interface ICalendarDayProps { date: Date; label: string; outside: boolean; disabled: boolean; selected: boolean; today: boolean; inRange: boolean; focused: boolean; onSelect: (date: Date) => void; registerRef: (key: string, node: HTMLButtonElement | null) => void; } /** A single day. Split out so its click and ref callbacks stay stable. */ function CalendarDay({ date, label, outside, disabled, selected, today, inRange, focused, onSelect, registerRef, }: ICalendarDayProps) { const handleClick = useCallback(() => onSelect(date), [onSelect, date]); const handleRef = useCallback( (node: HTMLButtonElement | null) => registerRef(dayKey(date), node), [registerRef, date], ); return ( ); } interface ICalendarMonthProps { month: Date; weekStartsOn: number; today: Date; focusedDate: Date; selected: Date | null; range: IDateRange | null; fixedWeeks: boolean; onSelect: (date: Date) => void; registerRef: (key: string, node: HTMLButtonElement | null) => void; min?: Date; max?: Date; } /** One month's day grid, with its weekday header row. */ function CalendarMonth({ month, weekStartsOn, today, focusedDate, selected, range, min, max, fixedWeeks, onSelect, registerRef, }: ICalendarMonthProps) { const labels = useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]); const days = useMemo(() => { const all = monthMatrix(month, weekStartsOn); if (fixedWeeks) return all; const lastWeek = all.slice(35); return lastWeek.every(day => !isSameMonth(day, month)) ? all.slice(0, 35) : all; }, [month, weekStartsOn, fixedWeeks]); const rangeFrom = range?.from ? startOfDay(range.from) : null; const rangeTo = range?.to ? startOfDay(range.to) : null; return (

{labels.map(label => ( {label} ))}

{days.map(day => { const outside = !isSameMonth(day, month); const beforeMin = !!min && day < startOfDay(min); const afterMax = !!max && day > startOfDay(max); const isEdge = isSameDay(day, rangeFrom) || isSameDay(day, rangeTo); const inRange = !!rangeFrom && !!rangeTo && day >= rangeFrom && day <= rangeTo && !isEdge; return ( ); })}

); } /** One month name in the year view, or one year in the decade view. */ function CalendarChoice({ value, label, selected, muted, onSelect, }: { value: number; label: string; selected: boolean; muted: boolean; onSelect: (value: number) => void; }) { const handleClick = useCallback(() => onSelect(value), [onSelect, value]); return ( ); } interface ICalendarProps { /** Selected day in single-select mode. */ value?: Date | null; onValueChange?: (date: Date) => void; /** Selected span in range mode. Providing this switches the calendar to ranges. */ range?: IDateRange; onRangeChange?: (range: IDateRange) => void; /** Months shown side by side. Two is the kit's range layout. */ months?: 1 | 2; /** Which grid opens first. Month and year views drill down into days. */ defaultView?: TCalendarView; /** Shows the month and year selects plus the Month/Year view toggle. */ showViewControls?: boolean; /** * Always render six week rows. Off by default: a trailing week made * entirely of next month's days is noise, and the kit never shows one. */ fixedWeeks?: boolean; weekStartsOn?: 0 | 1; min?: Date; max?: Date; /** Anchors "today" and the initial view. Pass a fixed date in tests. */ referenceDate?: Date; className?: string; } /** * Date grid with day, month and year views. * * Keyboard support follows the ARIA grid pattern: arrows move a day at a time, * Home and End jump to the ends of the week, PageUp and PageDown change month, * and only the focused cell is tabbable so the grid is a single tab stop. */ function Calendar({ value = null, onValueChange, range, onRangeChange, months = 1, defaultView = 'day', showViewControls = false, fixedWeeks = false, weekStartsOn = 1, min, max, referenceDate, className, }: ICalendarProps) { const today = useMemo(() => startOfDay(referenceDate ?? new Date()), [referenceDate]); const [view, setView] = useState(defaultView); const [viewMonth, setViewMonth] = useState(() => addMonths(value ?? range?.from ?? referenceDate ?? new Date(), 0), ); const [focusedDate, setFocusedDate] = useState(() => value ?? range?.from ?? today); const cells = useRef(new Map()); const pendingFocus = useRef(false); const registerRef = useCallback((key: string, node: HTMLButtonElement | null) => { if (node) cells.current.set(key, node); else cells.current.delete(key); }, []); useEffect(() => { if (!pendingFocus.current) return; pendingFocus.current = false; cells.current.get(dayKey(focusedDate))?.focus(); }, [focusedDate]); const moveFocus = useCallback((next: Date) => { pendingFocus.current = true; setFocusedDate(next); setViewMonth(current => (isSameMonth(next, current) ? current : addMonths(next, 0))); }, []); const handleSelect = useCallback( (date: Date) => { setFocusedDate(date); if (range && onRangeChange) { const open = range.from && !range.to; if (open && range.from && date >= range.from) onRangeChange({ from: range.from, to: date }); else onRangeChange({ from: date, to: null }); return; } onValueChange?.(date); }, [range, onRangeChange, onValueChange], ); const handleKeyDown = useCallback( (event: KeyboardEvent) => { const moves: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7, }; if (event.key in moves) { event.preventDefault(); moveFocus(addDays(focusedDate, moves[event.key])); return; } if (event.key === 'Home' || event.key === 'End') { event.preventDefault(); const offset = (focusedDate.getDay() - weekStartsOn + 7) % 7; moveFocus(addDays(focusedDate, event.key === 'Home' ? -offset : 6 - offset)); return; } if (event.key === 'PageUp' || event.key === 'PageDown') { event.preventDefault(); const step = event.key === 'PageUp' ? -1 : 1; const shifted = addMonths(focusedDate, event.shiftKey ? step * 12 : step); const lastDay = new Date(shifted.getFullYear(), shifted.getMonth() + 1, 0).getDate(); moveFocus( new Date( shifted.getFullYear(), shifted.getMonth(), Math.min(focusedDate.getDate(), lastDay), ), ); } }, [focusedDate, moveFocus, weekStartsOn], ); const stepMonth = useCallback((amount: number) => { setViewMonth(current => addMonths(current, amount)); }, []); const stepBack = useCallback(() => stepMonth(-1), [stepMonth]); const stepForward = useCallback(() => stepMonth(1), [stepMonth]); const jumpBack = useCallback(() => stepMonth(-12), [stepMonth]); const jumpForward = useCallback(() => stepMonth(12), [stepMonth]); const pickMonth = useCallback((month: number) => { setViewMonth(current => new Date(current.getFullYear(), month, 1)); setView('day'); }, []); const pickYear = useCallback((year: number) => { setViewMonth(current => new Date(year, current.getMonth(), 1)); setView('month'); }, []); const openMonthView = useCallback( () => setView(current => (current === 'month' ? 'day' : 'month')), [], ); const openYearView = useCallback( () => setView(current => (current === 'year' ? 'day' : 'year')), [], ); const handleMonthSelect = useCallback( (event: React.ChangeEvent) => pickMonth(Number(event.target.value)), [pickMonth], ); const handleYearSelect = useCallback((event: React.ChangeEvent) => { const year = Number(event.target.value); setViewMonth(current => new Date(year, current.getMonth(), 1)); }, []); const years = useMemo(() => { const first = min ? min.getFullYear() : today.getFullYear() - 100; const last = max ? max.getFullYear() : today.getFullYear() + 10; return Array.from({ length: last - first + 1 }, (_, index) => first + index); }, [min, max, today]); const decadeStart = Math.floor(viewMonth.getFullYear() / 10) * 10; const shownMonths = useMemo( () => Array.from({ length: months }, (_, index) => addMonths(viewMonth, index)), [months, viewMonth], ); return (

{view === 'day' && showViewControls && (

{/* Year first, then month, as the kit orders them. */} ({ value: year, label: String(year) }))} /> ({ value: index, label }))} />

)} {view === 'day' && (

{shownMonths.map((month, index) => (

{/* The kit's one-month card navigates by select, not by arrow. Showing both stacks two ways to do the same thing. */} {!showViewControls && ( )}

))}

)} {view === 'month' && (

{MONTH_LABELS.map((label, index) => ( ))}

)} {view === 'year' && (

{Array.from({ length: 12 }, (_, index) => decadeStart - 1 + index).map(year => ( decadeStart + 9} onSelect={pickYear} /> ))}

)}

); } /** Month or year select in the day header. Native, so it works on touch. */ function CalendarSelect({ value, onChange, label, options, }: { value: number; onChange: (event: React.ChangeEvent) => void; label: string; options: { value: number; label: string }[]; }) { return (

); } /** * One half of the Month/Year toggle. * * These open the month and decade grids. The kit paints one of them filled, * but nothing is selected while the day grid is showing, so neither is marked * pressed here — the fill would claim a state that does not exist. */ function CalendarViewToggle({ label, onClick }: { label: string; onClick: () => void }) { return ( ); } export type { IDateRange, TCalendarView }; export { Calendar, addDays, addMonths, isSameDay, startOfDay, MONTH_LABELS, MONTH_LABELS_LONG }; 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"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/calendar.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]