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:T2f5d,// Year Picker from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { ChevronLeft, ChevronRight } 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'; export interface YearRange { from: number; to?: number; } export type YearPickerMode = 'single' | 'range'; interface YearPickerSharedContext { setValue: (year: number) => void; minYear: number; maxYear: number; decadeStart: number; setDecadeStart: (n: number) => void; disabled?: boolean; } type YearPickerContextValue = | (YearPickerSharedContext & { mode: 'single'; value: number | undefined }) | (YearPickerSharedContext & { mode: 'range'; value: YearRange | undefined }); const YearPickerContext = React.createContext(null); const useYearPicker = () => { const ctx = React.useContext(YearPickerContext); if (!ctx) { throw new Error('YearPicker compound components must be used inside '); } return ctx; }; const YEARS_PER_VIEW = 12; // Each view is a decade plus one year either side, so paging steps a decade and views stay aligned. const YEARS_PER_PAGE = 10; const viewStartFor = (year: number) => year - (year % 10) - 1; interface YearPickerSharedProps { minYear?: number; maxYear?: number; disabled?: boolean; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children?: React.ReactNode; } /** `null` and `undefined` both mean no selection; `value={null}` stays controlled. */ export type YearPickerProps = | (YearPickerSharedProps & { mode?: 'single'; value?: number | null; defaultValue?: number | null; onValueChange?: (year: number) => void; }) | (YearPickerSharedProps & { mode: 'range'; value?: YearRange | null; defaultValue?: YearRange | null; onValueChange?: (range: YearRange) => void; }); const YearPicker = (props: YearPickerProps) => { const { minYear = 1900, maxYear = 2100, disabled, open: openProp, defaultOpen = false, onOpenChange, children, } = props; const mode = props.mode ?? 'single'; const { value: valueProp, defaultValue, onValueChange, } = props as { value?: number | YearRange | null; defaultValue?: number | YearRange | null; onValueChange?: (v: number | YearRange) => void; }; 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 ?? undefined); const value = valueProp !== undefined ? (valueProp ?? undefined) : internal; const anchorOf = (v: number | YearRange | null | undefined) => typeof v === 'object' && v ? v.from : (v ?? undefined); const anchorYear = anchorOf(value) ?? new Date().getFullYear(); const [decadeStart, setDecadeStart] = React.useState(viewStartFor(anchorYear)); const controlledAnchorYear = anchorOf(valueProp); const [prevControlledAnchorYear, setPrevControlledAnchorYear] = React.useState(controlledAnchorYear); if (controlledAnchorYear !== prevControlledAnchorYear) { setPrevControlledAnchorYear(controlledAnchorYear); if (controlledAnchorYear !== undefined) setDecadeStart(viewStartFor(controlledAnchorYear)); } const [prevOpen, setPrevOpen] = React.useState(open); if (open !== prevOpen) { setPrevOpen(open); if (open) setDecadeStart(viewStartFor(anchorYear)); } const setValue = React.useCallback( (year: number) => { const current = value as YearRange | undefined; const next: number | YearRange = mode === 'single' ? year : !current || current.to !== undefined ? { from: year } : year < current.from ? { from: year, to: current.from } : { from: current.from, to: year }; if (valueProp === undefined) setInternal(next); onValueChange?.(next); if (mode === 'single' || (next as YearRange).to !== undefined) setOpen(false); }, [mode, value, valueProp, onValueChange, setOpen], ); const ctx = React.useMemo( () => ({ mode, value, setValue, minYear, maxYear, decadeStart, setDecadeStart, disabled }) as YearPickerContextValue, [mode, value, setValue, minYear, maxYear, decadeStart, setDecadeStart, disabled], ); return ( {children} ); }; const formatYearValue = (ctx: YearPickerContextValue, placeholder: string) => { if (ctx.value === undefined) return placeholder; if (ctx.mode === 'single') return String(ctx.value); return `${ctx.value.from} – ${ctx.value.to ?? '…'}`; }; const YearPickerTrigger = ({ placeholder = 'Pick a year', className, children, ...props }: Omit, 'children'> & { placeholder?: string; children?: React.ReactNode; }) => { const ctx = useYearPicker(); const empty = ctx.value === undefined; return ( ); }; const isInRange = (year: number, range: YearRange | undefined) => !!range && range.to !== undefined && year > range.from && year < range.to; const isEndpoint = (year: number, range: YearRange | undefined) => !!range && (year === range.from || year === range.to); const YearPickerContent = ({ className, ...props }: React.ComponentProps) => { const ctx = useYearPicker(); const years = Array.from({ length: YEARS_PER_VIEW }, (_, i) => ctx.decadeStart + i); const today = new Date().getFullYear(); // Page only while the neighbouring view still holds a selectable year. const canPrev = ctx.decadeStart > ctx.minYear; const canNext = ctx.decadeStart + YEARS_PER_VIEW <= ctx.maxYear; const inBounds = (year: number) => year >= ctx.minYear && year <= ctx.maxYear; const selectedYear = ctx.mode === 'single' ? ctx.value : ctx.value?.from; const tabbableYear = selectedYear !== undefined && years.includes(selectedYear) ? selectedYear : years.includes(today) && inBounds(today) ? today : (years.find(inBounds) ?? years[0]); const gridRef = React.useRef(null); const focusYear = (year: number) => { gridRef.current?.querySelector(`[data-year="${year}"]`)?.focus(); }; const handleKey = (e: React.KeyboardEvent, year: number) => { const forward = getComputedStyle(e.currentTarget).direction === 'rtl' ? -1 : 1; const column = (year - ctx.decadeStart) % 4; const delta = ( { ArrowLeft: -forward, ArrowRight: forward, ArrowUp: -4, ArrowDown: 4, Home: -column, End: 3 - column } as Record< string, number > )[e.key]; if (e.key === 'PageUp' || e.key === 'PageDown') { e.preventDefault(); const up = e.key === 'PageUp'; // Same step as the header buttons; at the edge, stay on this view and move to its last selectable year. const pageable = up ? canPrev : canNext; const start = pageable ? ctx.decadeStart + (up ? -YEARS_PER_PAGE : YEARS_PER_PAGE) : ctx.decadeStart; const lo = Math.max(ctx.minYear, start); const hi = Math.min(ctx.maxYear, start + YEARS_PER_VIEW - 1); const target = Math.max(lo, Math.min(hi, year + (up ? -YEARS_PER_PAGE : YEARS_PER_PAGE))); if (start === ctx.decadeStart) { focusYear(target); return; } ctx.setDecadeStart(start); // The focused cell unmounts with the old view; refocus once the new one renders. requestAnimationFrame(() => focusYear(target)); return; } if (delta === undefined) return; e.preventDefault(); const next = Math.max(ctx.minYear, Math.min(ctx.maxYear, year + delta)); if (next < ctx.decadeStart || next >= ctx.decadeStart + YEARS_PER_VIEW) { ctx.setDecadeStart(viewStartFor(next)); requestAnimationFrame(() => focusYear(next)); } else { focusYear(next); } }; const navButton = (step: -1 | 1) => ( ); return (

{navButton(-1)} {years[0]} – {years[years.length - 1]} {navButton(1)}

{Array.from({ length: YEARS_PER_VIEW / 4 }, (_, row) => (

{years.slice(row * 4, row * 4 + 4).map((year) => { const out = !inBounds(year); const selected = ctx.mode === 'single' ? ctx.value === year : isEndpoint(year, ctx.value); const inRange = ctx.mode === 'range' ? isInRange(year, ctx.value) : false; const isToday = year === today; return ( ); })}

))}

); }; export { YearPicker, YearPickerTrigger, YearPickerContent }; 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["button","popover"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/year-picker.tsx","content":"$50","type":"registry:component","target":"components/year-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]