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:T3587,// Month 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 MonthValue { year: number; month: number; } export interface MonthRange { from: MonthValue; to?: MonthValue; } export type MonthPickerMode = 'single' | 'range'; // Default locale for labels, so a static export and the visitor's browser format the same way. const DEFAULT_LOCALE = 'en-US'; interface MonthPickerSharedContext { setValue: (v: MonthValue) => void; min: MonthValue; max: MonthValue; locale: string; displayYear: number; setDisplayYear: (n: number) => void; disabled?: boolean; } type MonthPickerContextValue = | (MonthPickerSharedContext & { mode: 'single'; value: MonthValue | undefined }) | (MonthPickerSharedContext & { mode: 'range'; value: MonthRange | undefined }); const MonthPickerContext = React.createContext(null); const useMonthPicker = () => { const ctx = React.useContext(MonthPickerContext); if (!ctx) { throw new Error('MonthPicker compound components must be used inside '); } return ctx; }; const shortMonthLabels = (locale: string) => { const fmt = new Intl.DateTimeFormat(locale, { month: 'short' }); return Array.from({ length: 12 }, (_, m) => fmt.format(new Date(2024, m, 1))); }; const currentMonth = (): MonthValue => { const d = new Date(); return { year: d.getFullYear(), month: d.getMonth() }; }; const compareMonth = (a: MonthValue, b: MonthValue) => a.year * 12 + a.month - (b.year * 12 + b.month); const monthEq = (a: MonthValue | undefined, b: MonthValue | undefined) => !!a && !!b && compareMonth(a, b) === 0; interface MonthPickerSharedProps { /** Earliest selectable month. Takes precedence over `minYear`. */ min?: MonthValue; /** Latest selectable month. Takes precedence over `maxYear`. */ max?: MonthValue; minYear?: number; maxYear?: number; /** BCP 47 tag for labels. Defaults to `en-US` so server and client render the same text. */ locale?: string; 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 MonthPickerProps = | (MonthPickerSharedProps & { mode?: 'single'; value?: MonthValue | null; defaultValue?: MonthValue | null; onValueChange?: (v: MonthValue) => void; }) | (MonthPickerSharedProps & { mode: 'range'; value?: MonthRange | null; defaultValue?: MonthRange | null; onValueChange?: (range: MonthRange) => void; }); const MonthPicker = (props: MonthPickerProps) => { const { min: minProp, max: maxProp, minYear = 1900, maxYear = 2100, locale = DEFAULT_LOCALE, disabled, open: openProp, defaultOpen = false, onOpenChange, children, } = props; const mode = props.mode ?? 'single'; const { value: valueProp, defaultValue, onValueChange, } = props as { value?: MonthValue | MonthRange | null; defaultValue?: MonthValue | MonthRange | null; onValueChange?: (v: MonthValue | MonthRange) => 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 minYearValue = minProp?.year ?? minYear; const minMonthValue = minProp?.month ?? 0; const maxYearValue = maxProp?.year ?? maxYear; const maxMonthValue = maxProp?.month ?? 11; const min = React.useMemo( () => ({ year: minYearValue, month: minMonthValue }), [minYearValue, minMonthValue], ); const max = React.useMemo( () => ({ year: maxYearValue, month: maxMonthValue }), [maxYearValue, maxMonthValue], ); const [internal, setInternal] = React.useState(defaultValue ?? undefined); const value = valueProp !== undefined ? (valueProp ?? undefined) : internal; const anchorOf = (v: MonthValue | MonthRange | null | undefined) => (v && 'from' in v ? v.from : (v ?? undefined)); const anchor = anchorOf(value) ?? currentMonth(); const [displayYear, setDisplayYear] = React.useState(anchor.year); const controlledAnchorYear = anchorOf(valueProp)?.year; const [prevControlledAnchorYear, setPrevControlledAnchorYear] = React.useState(controlledAnchorYear); if (controlledAnchorYear !== prevControlledAnchorYear) { setPrevControlledAnchorYear(controlledAnchorYear); if (controlledAnchorYear !== undefined) setDisplayYear(controlledAnchorYear); } const [prevOpen, setPrevOpen] = React.useState(open); if (open !== prevOpen) { setPrevOpen(open); if (open) setDisplayYear(anchor.year); } const setValue = React.useCallback( (v: MonthValue) => { const current = value as MonthRange | undefined; const next: MonthValue | MonthRange = mode === 'single' ? v : !current || current.to ? { from: v } : compareMonth(v, current.from) < 0 ? { from: v, to: current.from } : { from: current.from, to: v }; if (valueProp === undefined) setInternal(next); onValueChange?.(next); if (mode === 'single' || 'to' in next) setOpen(false); }, [mode, value, valueProp, onValueChange, setOpen], ); const ctx = React.useMemo( () => ({ mode, value, setValue, min, max, locale, displayYear, setDisplayYear, disabled }) as MonthPickerContextValue, [mode, value, setValue, min, max, locale, displayYear, disabled], ); return ( {children} ); }; const formatMonthValue = (ctx: MonthPickerContextValue, placeholder: string, fmt: Intl.DateTimeFormat): string => { const label = (v: MonthValue) => fmt.format(new Date(v.year, v.month, 1)); if (!ctx.value) return placeholder; if (ctx.mode === 'single') return label(ctx.value); return `${label(ctx.value.from)} – ${ctx.value.to ? label(ctx.value.to) : '…'}`; }; const MonthPickerTrigger = ({ placeholder = 'Pick a month', className, children, ...props }: Omit, 'children'> & { placeholder?: string; children?: React.ReactNode; }) => { const ctx = useMonthPicker(); const empty = ctx.value === undefined; const fmt = React.useMemo( () => new Intl.DateTimeFormat(ctx.locale, { month: 'short', year: 'numeric' }), [ctx.locale], ); return ( ); }; const isInRange = (v: MonthValue, range: MonthRange | undefined) => { if (!range || range.to === undefined) return false; return compareMonth(v, range.from) > 0 && compareMonth(v, range.to) < 0; }; const isEndpoint = (v: MonthValue, range: MonthRange | undefined) => !!range && (monthEq(v, range.from) || monthEq(v, range.to)); const MonthPickerContent = ({ className, ...props }: React.ComponentProps) => { const ctx = useMonthPicker(); const today = currentMonth(); const labelsShort = React.useMemo(() => shortMonthLabels(ctx.locale), [ctx.locale]); const yearMonthFmt = React.useMemo( () => new Intl.DateTimeFormat(ctx.locale, { month: 'long', year: 'numeric' }), [ctx.locale], ); const canPrev = ctx.displayYear - 1 >= ctx.min.year; const canNext = ctx.displayYear + 1 <= ctx.max.year; const inBounds = (v: MonthValue) => compareMonth(v, ctx.min) >= 0 && compareMonth(v, ctx.max) <= 0; const selectedMonth = ctx.mode === 'single' ? ctx.value : ctx.value?.from; const firstInBounds = Array.from({ length: 12 }, (_, month) => month).find((month) => inBounds({ year: ctx.displayYear, month }), ); const tabbableMonth = selectedMonth && selectedMonth.year === ctx.displayYear && inBounds(selectedMonth) ? selectedMonth.month : today.year === ctx.displayYear && inBounds(today) ? today.month : (firstInBounds ?? 0); const gridRef = React.useRef(null); const focusCell = (year: number, month: number) => { const el = gridRef.current?.querySelector(`[data-month-key="${year * 12 + month}"]`); el?.focus(); }; const handleKey = (e: React.KeyboardEvent, year: number, month: number) => { const forward = getComputedStyle(e.currentTarget).direction === 'rtl' ? -1 : 1; const delta = ( { ArrowLeft: -forward, ArrowRight: forward, ArrowUp: -4, ArrowDown: 4, Home: -(month % 4), End: 3 - (month % 4), PageUp: -12, PageDown: 12, } as Record )[e.key]; if (delta === undefined) return; e.preventDefault(); const key = year * 12 + month + delta; const nextYear = Math.floor(key / 12); const nextMonth = key - nextYear * 12; // Past the first/last allowed month: stay put rather than wrap within the same year. if (!inBounds({ year: nextYear, month: nextMonth })) return; if (nextYear !== ctx.displayYear) { ctx.setDisplayYear(nextYear); requestAnimationFrame(() => focusCell(nextYear, nextMonth)); } else { focusCell(nextYear, nextMonth); } }; const navButton = (step: -1 | 1) => ( ); return (

{navButton(-1)} {ctx.displayYear} {navButton(1)}

{Array.from({ length: 3 }, (_, row) => (

{labelsShort.slice(row * 4, row * 4 + 4).map((label, col) => { const month = row * 4 + col; const v: MonthValue = { year: ctx.displayYear, month }; const selected = ctx.mode === 'single' ? monthEq(ctx.value, v) : isEndpoint(v, ctx.value); const inRange = ctx.mode === 'range' ? isInRange(v, ctx.value) : false; const isToday = monthEq(today, v); return ( ); })}

))}

); }; export { MonthPicker, MonthPickerTrigger, MonthPickerContent }; 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/month-picker.tsx","content":"$50","type":"registry:component","target":"components/month-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]