63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T8007,"use client"; // beui.dev/components/motion/date-range-picker import { ArrowRight, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, } from "lucide-react"; import { AnimatePresence, type HTMLMotionProps, motion, useIsPresent, } from "motion/react"; import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type KeyboardEvent, type ReactNode, useCallback, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { MorphPopover, MorphPopoverContent, type MorphPopoverContentProps, MorphPopoverTrigger, } from "@/components/motion/popover-morph"; import { DateRangePickerContext, useDateRangePickerContext, } from "./date-range-picker/context"; import { parse } from "./date-range-picker/date-utils"; import { useDateRangePickerController } from "./date-range-picker/use-date-range-picker"; import type { DateRange, DateRangePickerProps, } from "./date-range-picker/types"; export type { DateRange, DateRangePreset, DateRangePickerProps, } from "./date-range-picker/types"; const monthVariants = { enter: ({ direction, reduce }: { direction: number; reduce: boolean }) => ({ opacity: 0, x: reduce ? 0 : direction * 12, }), exit: ({ direction, reduce }: { direction: number; reduce: boolean }) => ({ opacity: 0, x: reduce ? 0 : direction * -8, transition: { duration: 0.12, ease: EASE_OUT }, }), }; const iconClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30"; /** State shared by built-in parts and custom date range controls. */ export function useDateRangePicker() { const ctx = useDateRangePickerContext("useDateRangePicker"); return { value: ctx.value, setValue: ctx.change, open: ctx.open, setOpen: ctx.setOpen, month: ctx.month, view: ctx.view, label: ctx.label, locale: ctx.locale, disabled: ctx.disabled, selectDate: ctx.select, clear: ctx.clear, goToMonth: ctx.goToMonth, previous: () => !ctx.previousDisabled && ctx.page(-1), next: () => !ctx.nextDisabled && ctx.page(1), previousDisabled: ctx.previousDisabled, nextDisabled: ctx.nextDisabled, chooseMonth: () => ctx.openChoices("months"), chooseYear: () => ctx.openChoices("years"), }; } /** Range state and popover root. Without children, renders the inline calendar. */ export function DateRangePicker({ children, className, ...props }: DateRangePickerProps) { const ctx = useDateRangePickerController(props); return ( {children === undefined ? ( ) : ( children )} ); } export interface DateRangePickerCalendarProps extends ComponentPropsWithoutRef<"section"> { showSummary?: boolean; } /** Calendar surface; arrange or omit its summary, header, grid and footer. */ export function DateRangePickerCalendar({ children, className, showSummary, ...props }: DateRangePickerCalendarProps) { const ctx = useDateRangePickerContext("DateRangePickerCalendar"); return (

{ctx.monthFormat.format(parse(ctx.month))}

{children === undefined ? ( <> {(showSummary ?? ctx.showSummary) && } ) : ( children )}

Use arrow keys to navigate dates, Home and End for the week, Page Up and Page Down for months, Shift with Page Up or Page Down for years. Enter or Space selects a date. Use the month and year buttons to jump directly. In the month or year choices, use arrow keys to move and Escape to return.

{ctx.announcement}

); } export type DateRangePickerSummaryProps = Omit< ComponentPropsWithoutRef<"div">, "children" >; export function DateRangePickerSummary({ className, ...props }: DateRangePickerSummaryProps) { const { value, shortFormat } = useDateRangePickerContext( "DateRangePickerSummary", ); return (

Start date

{value ? shortFormat.format(parse(value.from)) : "Select date"}

); } export type DateRangePickerHeaderProps = Omit< ComponentPropsWithoutRef<"div">, "children" >; export function DateRangePickerHeader({ className, ...props }: DateRangePickerHeaderProps) { const { monthTrigger, yearTrigger, view, choicesId, disabled, openChoices, monthNameFormat, month, yearPage, yearPageEnd, year, previousDisabled, nextDisabled, page, } = useDateRangePickerContext("DateRangePickerHeader"); return (

); } export type DateRangePickerGridProps = Omit< ComponentPropsWithoutRef<"div">, "children" >; export function DateRangePickerGrid({ className, onPointerLeave, ...props }: DateRangePickerGridProps) { const { setPreview, view, month, yearPage, yearPageEnd, year, direction, reduce, choicesId, choices, focusChoices, closeChoices, goToMonth, grid, heading, help, active, locale, weeks, shownRange, value, canHover, unavailable, dateFormat, today, select, setCursor, onKey, } = useDateRangePickerContext("DateRangePickerGrid"); return (

{ onPointerLeave?.(event); setPreview(null); }} > {view !== "days" ? ( goToMonth( view === "months" ? id : `${id.padStart(4, "0")}-${month.slice(5, 7)}-01`, ) } /> ) : ( { if (node) { grid.current = node; return () => { if (grid.current === node) grid.current = null; }; } }} // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: WAI calendar grids retain native table structure with an interactive grid role. role="grid" aria-labelledby={heading} aria-describedby={help} tabIndex={active === null ? 0 : undefined} className="w-full table-fixed select-none border-separate border-spacing-x-0 border-spacing-y-1" > {Array.from({ length: 7 }, (_, index) => { const day = new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC", }).format(Date.UTC(2026, 0, 4 + index)); return ( ); })} {weeks.map(({ start, dates: week }) => ( {week.map((date, dayIndex) => { const inRange = Boolean( date && shownRange && date >= shownRange.from && date <= (shownRange.to ?? shownRange.from), ); const endpoint = Boolean( date && value && (date === value.from || date === value.to), ); return ( // biome-ignore lint/a11y/useFocusableInteractive: Calendar cells delegate focus to the contained day button. ); })} ))}

{new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC", }).format(Date.UTC(2026, 0, 4 + index))}
= value.from && date <= (value.to ?? value.from), ) : undefined } onPointerEnter={(event) => { if ( canHover && event.pointerType !== "touch" && date && !unavailable(date) && value && !value.to ) setPreview(date); }} className={cn( "relative h-8 p-0 text-center", inRange && (dayIndex === 0 \|\| date === shownRange?.from) && "rounded-l-full", inRange && (dayIndex === 6 \|\| date === shownRange?.to \|\| !shownRange?.to) && "rounded-r-full", )} > {date && ( )} {date && ( select(date)} onFocus={() => { setCursor(date); if (value && !value.to) setPreview(date); }} onKeyDown={(event) => onKey(event, date)} className={cn( "relative mx-auto flex h-8 w-full max-w-8 items-center justify-center rounded-full text-xs tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-30", endpoint ? "bg-foreground font-medium text-background" : canHover && !unavailable(date) && !inRange && "hover:bg-muted", date === today && !endpoint && "font-semibold after:absolute after:bottom-1 after:size-0.75 after:rounded-full after:bg-current", )} > {new Date(parse(date)).getUTCDate()} )}

{new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC", }).format(Date.UTC(2026, 0, 4 + index))}

= value.from && date <= (value.to ?? value.from), ) : undefined } onPointerEnter={(event) => { if ( canHover && event.pointerType !== "touch" && date && !unavailable(date) && value && !value.to ) setPreview(date); }} className={cn( "relative h-8 p-0 text-center", inRange && (dayIndex === 0 || date === shownRange?.from) && "rounded-l-full", inRange && (dayIndex === 6 || date === shownRange?.to || !shownRange?.to) && "rounded-r-full", )} > {date && ( )} {date && ( select(date)} onFocus={() => { setCursor(date); if (value && !value.to) setPreview(date); }} onKeyDown={(event) => onKey(event, date)} className={cn( "relative mx-auto flex h-8 w-full max-w-8 items-center justify-center rounded-full text-xs tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-30", endpoint ? "bg-foreground font-medium text-background" : canHover && !unavailable(date) && !inRange && "hover:bg-muted", date === today && !endpoint && "font-semibold after:absolute after:bottom-1 after:size-0.75 after:rounded-full after:bg-current", )} > {new Date(parse(date)).getUTCDate()} )}

)}

); } export type DateRangePickerSelectionProps = ComponentPropsWithoutRef<"p">; export function DateRangePickerSelection({ children, className, ...props }: DateRangePickerSelectionProps) { const { value, dayCount } = useDateRangePickerContext( "DateRangePickerSelection", ); return (

{children ?? (dayCount ? `${dayCount} ${dayCount === 1 ? "day" : "days"} selected` : value ? "Choose an end date" : "Choose a start date")}

); } export type DateRangePickerClearProps = ComponentPropsWithRef<"button">; export function DateRangePickerClear({ children = "Clear", className, onClick, disabled, ...props }: DateRangePickerClearProps) { const ctx = useDateRangePickerContext("DateRangePickerClear"); return ( ); } export type DateRangePickerFooterProps = ComponentPropsWithoutRef<"div">; export function DateRangePickerFooter({ children, className, ...props }: DateRangePickerFooterProps) { return (

{children === undefined ? ( <>

) : ( children )}

); } export type DateRangePickerPresetsProps = ComponentPropsWithoutRef<"div">; export function DateRangePickerPresets({ children, className, ...props }: DateRangePickerPresetsProps) { const ctx = useDateRangePickerContext("DateRangePickerPresets"); if (children === undefined && ctx.presets.length === 0) return null; return (

{children === undefined ? ctx.presets.map((preset) => ( {preset.label} )) : children}

); } export interface DateRangePickerPresetProps extends Omit, "value"> { value: DateRange; /** Accessible preset name and selection announcement. */ label: string; } export function DateRangePickerPreset({ value, label, children, className, disabled, onClick, ...props }: DateRangePickerPresetProps) { const ctx = useDateRangePickerContext("DateRangePickerPreset"); const selected = ctx.value?.from === value.from && ctx.value?.to === value.to; return ( ); } export interface DateRangePickerTriggerProps extends HTMLMotionProps<"button"> { placeholder?: string; } export function DateRangePickerTrigger({ children, placeholder = "Select dates", className, disabled, ref, ...props }: DateRangePickerTriggerProps) { const ctx = useDateRangePickerContext("DateRangePickerTrigger"); const mergedRef = useCallback( (node: HTMLButtonElement | null) => { ctx.trigger.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }, [ctx.trigger, ref], ); const format = new Intl.DateTimeFormat(ctx.locale, { month: "short", day: "numeric", timeZone: "UTC", }); const sameYear = ctx.value?.to && ctx.value.from.slice(0, 4) === ctx.value.to.slice(0, 4); const summary = ctx.value ? `${(sameYear ? format : ctx.shortFormat).format(parse(ctx.value.from))} – ${ctx.value.to ? ctx.shortFormat.format(parse(ctx.value.to)) : "Select end"}` : placeholder; return ( {children != null ? ( {children} ) : ( <> {summary} )} ); } export interface DateRangePickerContentProps extends MorphPopoverContentProps { /** Move focus to the active calendar date when opened. Default true. */ autoFocus?: boolean; } function focusCalendarDate(content: HTMLDivElement | null) { const grid = Array.from( content?.querySelectorAll('[role="grid"]') ?? [], ).find((element) => !element.closest("[inert]")); const target = grid?.querySelector('button[tabindex="0"]') ?? grid; target?.focus({ preventScroll: true }); } export function DateRangePickerContent({ children, className, autoFocus = true, onOpenAutoFocus, ...props }: DateRangePickerContentProps) { const ctx = useDateRangePickerContext("DateRangePickerContent"); useLayoutEffect(() => { // A rapid reopen can revive the exiting surface before it unmounts. // That surface already ran its positioned callback, so focus it here too. if (ctx.open && autoFocus) focusCalendarDate(ctx.content.current); }, [ctx.open, ctx.content, autoFocus]); return ( { ctx.content.current = content; if (autoFocus) focusCalendarDate(content); onOpenAutoFocus?.(content); }} > {children} ); } export interface DateRangePickerDropdownProps extends Omit { placeholder?: string; triggerClassName?: string; calendarClassName?: string; } /** Convenience composition of the root, trigger, content and calendar. */ export function DateRangePickerDropdown({ placeholder, triggerClassName, calendarClassName, autoFocus = true, showSummary = false, ...props }: DateRangePickerDropdownProps) { return ( ); } // The departing month's grid must leave the tab order as soon as exit begins. function CalendarPresence({ children }: { children: ReactNode }) { const present = useIsPresent(); return

{children}

; } function CalendarChoices({ id, label, choices, selected, focusOnMount, reduce, onClose, onSelect, }: { id: string; label: string; choices: { id: string; label: string; disabled: boolean }[]; selected: string; focusOnMount: boolean; reduce: boolean; onClose: () => void; onSelect: (id: string) => void; }) { const enabled = choices.filter((choice) => !choice.disabled); const [cursor, setCursor] = useState(selected); const active = enabled.find((choice) => choice.id === cursor)?.id ?? enabled.find((choice) => choice.id === selected)?.id ?? enabled[0]?.id; if (cursor !== null && cursor !== active) setCursor(active ?? null); const root = useRef(null); useLayoutEffect(() => { if (focusOnMount) root.current ?.querySelector('button[tabindex="0"]') ?.focus({ preventScroll: true }); }, [focusOnMount]); const onKey = (event: KeyboardEvent) => { if (event.altKey || event.ctrlKey || event.metaKey) return; const buttons = Array.from( root.current?.querySelectorAll("button") ?? [], ); const index = buttons.indexOf(event.currentTarget); const offset = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -3 : event.key === "ArrowDown" ? 3 : null; let target = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : offset === null ? null : index + offset; if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); onClose(); return; } if (target === null) return; event.preventDefault(); const step = offset === null ? (event.key === "Home" ? 1 : -1) : Math.sign(offset); while (target >= 0 && target < buttons.length && buttons[target].disabled) target += step; buttons[target]?.focus({ preventScroll: true }); }; return (

{choices.map((choice) => ( setCursor(choice.id)} onKeyDown={onKey} onClick={() => onSelect(choice.id)} whileTap={reduce ? undefined : { scale: 0.96 }} transition={SPRING_PRESS} className={cn( "flex h-13 items-center justify-center rounded-xl px-1 text-[13px] tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-25", choice.id === selected ? "bg-foreground font-medium text-background" : "bg-muted/40 hover:bg-muted", )} > {choice.label} ))}

); } 66:T42f,import type { DateRange } from "./types"; export const DAY = 86_400_000; export function parse(date: string) { const time = Date.parse(`${date}T00:00:00Z`); if ( !/^\d{4}-\d{2}-\d{2}$/.test(date) || !Number.isFinite(time) || new Date(time).toISOString().slice(0, 10) !== date ) throw new Error(`Invalid calendar date: ${date}. Use YYYY-MM-DD.`); return time; } export function iso(time: number) { return new Date(time).toISOString().slice(0, 10); } export function monthOf(date: string) { return `${date.slice(0, 7)}-01`; } export function shiftMonth(date: string, offset: number) { const day = new Date(parse(date)); const month = new Date(parse(monthOf(date))); month.setUTCMonth(month.getUTCMonth() + offset); const end = new Date(month); end.setUTCMonth(end.getUTCMonth() + 1); end.setUTCDate(0); month.setUTCDate(Math.min(day.getUTCDate(), end.getUTCDate())); return iso(month.getTime()); } export function ordered(a: string, b: string): Required { return a <= b ? { from: a, to: b } : { from: b, to: a }; } 67:T456,import type { ReactNode } from "react"; /** Calendar dates, independent of a browser's timezone: YYYY-MM-DD. */ export interface DateRange { from: string; to?: string; } export interface DateRangePreset { label: string; value: DateRange; } export interface DateRangePickerProps { value?: DateRange | null; defaultValue?: DateRange | null; onValueChange?: (range: DateRange | null) => void; defaultMonth?: string; min?: string; max?: string; isDateDisabled?: (date: string) => boolean; presets?: DateRangePreset[]; locale?: string; label?: string; disabled?: boolean; /** Move focus to the active date on mount, for use inside a popover. */ autoFocus?: boolean; /** Show the start/end summary above the calendar. Default true. */ showSummary?: boolean; className?: string; /** Compose custom controls; omitted children render the inline calendar. */ children?: ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Close an open popover after a complete range or preset. Default false. */ closeOnSelect?: boolean; } 68:T3ccd,"use client"; import { useReducedMotion } from "motion/react"; import { type KeyboardEvent, useId, useLayoutEffect, useRef, useState, } from "react"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { DAY, parse, iso, monthOf, shiftMonth, ordered } from "./date-utils"; import type { DateRange, DateRangePickerProps } from "./types"; export function useDateRangePickerController({ value: controlledValue, defaultValue = null, onValueChange, defaultMonth, min, max, isDateDisabled, presets = [], locale = "en-US", label = "Choose a date range", disabled = false, autoFocus = false, showSummary = true, open: controlledOpen, defaultOpen = false, onOpenChange, closeOnSelect = false, }: DateRangePickerProps) { const [today] = useState(() => { const now = new Date(); return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; }); const [internalValue, setInternalValue] = useState(defaultValue); const value = controlledValue === undefined ? internalValue : controlledValue; const [internalOpen, setInternalOpen] = useState(defaultOpen); const open = controlledOpen === undefined ? internalOpen : controlledOpen; const trigger = useRef(null); const content = useRef(null); const setOpen = (next: boolean) => { if (controlledOpen === undefined) setInternalOpen(next); onOpenChange?.(next); if (!next && content.current?.contains(document.activeElement)) trigger.current?.focus({ preventScroll: true }); }; useLayoutEffect(() => { if (!open && content.current?.contains(document.activeElement)) trigger.current?.focus({ preventScroll: true }); }, [open]); if (min) parse(min); if (max) parse(max); if (min && max && min > max) throw new Error("DateRangePicker min must not exceed max."); if (defaultMonth) parse(defaultMonth); if (value) { parse(value.from); if (value.to) { parse(value.to); if (value.to < value.from) throw new Error("DateRangePicker range must be ordered."); } } const initial = defaultMonth ?? value?.from ?? (min && today < min ? min : max && today > max ? max : today); const [requestedMonth, setMonth] = useState(() => monthOf(initial)); const month = min && requestedMonth < monthOf(min) ? monthOf(min) : max && requestedMonth > monthOf(max) ? monthOf(max) : requestedMonth; if (requestedMonth !== month) setMonth(month); const [cursor, setCursor] = useState( () => value?.from ?? initial, ); const [preview, setPreview] = useState(null); const [direction, setDirection] = useState(1); const [announcement, setAnnouncement] = useState(""); const [view, setView] = useState<"days" | "months" | "years">("days"); const [requestedYearPage, setYearPage] = useState( () => Math.floor(Number(initial.slice(0, 4)) / 12) * 12, ); const [focusChoices, setFocusChoices] = useState(false); const monthTrigger = useRef(null); const yearTrigger = useRef(null); const returnToTrigger = useRef<"months" | "years" | null>(null); const grid = useRef(null); const pendingFocus = useRef(autoFocus); const heading = useId(); const help = useId(); const choicesId = useId(); const reduce = useReducedMotion() ?? false; const canHover = useHoverCapable(); const monthFormat = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC", }); const monthNameFormat = new Intl.DateTimeFormat(locale, { month: "long", timeZone: "UTC", }); const dateFormat = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC", }); const shortFormat = new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric", timeZone: "UTC", }); const unavailable = (date: string) => disabled || Boolean(min && date < min) || Boolean(max && date > max) || Boolean(isDateDisabled?.(date)); const rangeAvailable = (range: DateRange) => { const first = parse(range.from); const last = parse(range.to ?? range.from); if ( last < first || unavailable(range.from) || unavailable(range.to ?? range.from) ) return false; // Only scan interiors when the consumer supplies unavailable dates. if (isDateDisabled) for (let time = first + DAY; time < last; time += DAY) if (unavailable(iso(time))) return false; return true; }; const lastDay = new Date(parse(month)); lastDay.setUTCMonth(lastDay.getUTCMonth() + 1); lastDay.setUTCDate(0); const daysInMonth = lastDay.getUTCDate(); const dates = Array.from({ length: daysInMonth }, (_, index) => iso(parse(month) + index * DAY), ); const active = cursor && dates.includes(cursor) && !unavailable(cursor) ? cursor : (dates.find((date) => !unavailable(date)) ?? null); if (cursor !== null && cursor !== active) setCursor(active); const shownRange = value && !value.to && preview && rangeAvailable(ordered(value.from, preview)) ? ordered(value.from, preview) : value; const latest = useRef({ month, active }); useLayoutEffect(() => { latest.current = { month, active }; }); useLayoutEffect(() => { if (returnToTrigger.current) { const target = returnToTrigger.current; returnToTrigger.current = null; (target === "months" ? monthTrigger : yearTrigger).current?.focus({ preventScroll: true, }); } if (!pendingFocus.current) return; pendingFocus.current = false; const button = grid.current?.querySelector( 'button[tabindex="0"]', ); (button ?? grid.current)?.focus({ preventScroll: true }); }); const change = (next: DateRange | null) => { if (disabled || (next && !rangeAvailable(next))) return; if (controlledValue === undefined) setInternalValue(next); onValueChange?.(next); setPreview(null); if (next?.to && open && closeOnSelect) setOpen(false); }; const select = (date: string) => { if (unavailable(date)) return; setCursor(date); if (!value || value.to) { change({ from: date }); setAnnouncement( `Start date ${dateFormat.format(parse(date))}. Choose an end date.`, ); } else { const next = ordered(value.from, date); if (!rangeAvailable(next)) { setAnnouncement( "This range includes unavailable dates. Choose another end date.", ); return; } change(next); setAnnouncement( `${shortFormat.format(parse(next.from))} to ${shortFormat.format(parse(next.to))} selected.`, ); } }; const navigate = ( offset: number, focus = false, target = latest.current.active ?? latest.current.month, ) => { const next = shiftMonth(target, offset); if ( (min && monthOf(next) < monthOf(min)) || (max && monthOf(next) > monthOf(max)) ) return; latest.current = { month: monthOf(next), active: next }; setDirection(offset > 0 ? 1 : -1); setMonth(monthOf(next)); setCursor(next); setPreview(null); pendingFocus.current = focus; }; const onKey = (event: KeyboardEvent, date: string) => { if (event.altKey || event.ctrlKey || event.metaKey) return; if (event.key === "PageUp" || event.key === "PageDown") { event.preventDefault(); navigate( (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1), true, date, ); return; } const base = latest.current.active ?? date; const weekday = new Date(parse(base)).getUTCDay(); const offset = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : event.key === "Home" ? -weekday : event.key === "End" ? 6 - weekday : null; if (offset === null) return; event.preventDefault(); let next = iso(parse(base) + offset * DAY); // Arrow navigation skips unavailable dates; Home/End stay within their week. if (event.key !== "Home" && event.key !== "End") { const step = offset < 0 ? -1 : 1; for (let attempts = 0; unavailable(next) && attempts < 366; attempts++) { if ((min && next < min) || (max && next > max)) return; next = iso(parse(next) + step * DAY); } } if (unavailable(next)) return; const nextMonth = monthOf(next); setDirection(nextMonth >= latest.current.month ? 1 : -1); // Own event updates are visible to a second key in the same batch. latest.current = { month: nextMonth, active: next }; pendingFocus.current = true; setMonth(nextMonth); setCursor(next); setPreview(value && !value.to ? next : null); }; const leading = new Date(parse(month)).getUTCDay(); const cells: (string | null)[] = [ ...Array(leading).fill(null), ...dates, ]; // Six rows keep the surface stable while changing months or browsing years. while (cells.length < 42) cells.push(null); const weeks = Array.from({ length: cells.length / 7 }, (_, index) => ({ start: iso(parse(month) + (index * 7 - leading) * DAY), dates: cells.slice(index * 7, index * 7 + 7), })); const year = Number(month.slice(0, 4)); const monthIndex = Number(month.slice(5, 7)) - 1; const minYear = min ? Number(min.slice(0, 4)) : 0; const maxYear = max ? Number(max.slice(0, 4)) : 9999; const firstYearPage = minYear; // Backfill the final page so it still has twelve years when the bounds allow it. const lastYearPage = Math.max(minYear, maxYear - 11); const yearPage = Math.min( lastYearPage, Math.max(firstYearPage, requestedYearPage), ); if (requestedYearPage !== yearPage) setYearPage(yearPage); const yearPageEnd = Math.min(yearPage + 11, maxYear); const previousDisabled = disabled || (view === "years" ? yearPage <= firstYearPage : view === "months" ? year <= minYear : (year === 0 && monthIndex === 0) || Boolean(min && monthOf(shiftMonth(month, -1)) < monthOf(min))); const nextDisabled = disabled || (view === "years" ? yearPage >= lastYearPage : view === "months" ? year >= maxYear : (year === 9999 && monthIndex === 11) || Boolean(max && monthOf(shiftMonth(month, 1)) > monthOf(max))); const closeChoices = () => { returnToTrigger.current = view === "years" ? "years" : "months"; setView("days"); }; const openChoices = (next: "months" | "years") => { if (disabled) return; if (view === next) { closeChoices(); return; } setPreview(null); setFocusChoices(true); if (next === "years") setYearPage( Math.min( lastYearPage, Math.max( firstYearPage, minYear + Math.floor((year - minYear) / 12) * 12, ), ), ); setView(next); }; const goToMonth = (next: string) => { if (disabled) return; const clamped = min && next < monthOf(min) ? monthOf(min) : max && next > monthOf(max) ? monthOf(max) : next; setDirection(clamped >= month ? 1 : -1); setMonth(clamped); setCursor(clamped); setPreview(null); closeChoices(); }; const page = (step: -1 | 1) => { setFocusChoices(false); if (view === "years") { setDirection(step); const next = Math.min( lastYearPage, Math.max(firstYearPage, yearPage + step * 12), ); if (next === firstYearPage || next === lastYearPage) returnToTrigger.current = "years"; setYearPage((current) => Math.min(lastYearPage, Math.max(firstYearPage, current + step * 12)), ); } else if (view === "months") { const next = shiftMonth(month, step * 12); const clamped = min && next < monthOf(min) ? monthOf(min) : max && next > monthOf(max) ? monthOf(max) : monthOf(next); setDirection(step); setMonth(clamped); setCursor(clamped); if ( Number(clamped.slice(0, 4)) === minYear || Number(clamped.slice(0, 4)) === maxYear ) returnToTrigger.current = "months"; } else { const next = monthOf(shiftMonth(latest.current.active ?? month, step)); if (next === (min && monthOf(min)) || next === (max && monthOf(max))) returnToTrigger.current = "months"; navigate(step); } }; const choices = view === "months" ? Array.from({ length: 12 }, (_, index) => { const date = `${String(year).padStart(4, "0")}-${String(index + 1).padStart(2, "0")}-01`; return { id: date, label: monthNameFormat.format(parse(date)), disabled: disabled || Boolean(min && date < monthOf(min)) || Boolean(max && date > monthOf(max)), }; }) : Array.from( { length: Math.max(0, yearPageEnd - yearPage + 1) }, (_, index) => { const choiceYear = yearPage + index; return { id: String(choiceYear), label: String(choiceYear), disabled: disabled || choiceYear < minYear || choiceYear > maxYear, }; }, ); const dayCount = value?.to ? Math.round((parse(value.to) - parse(value.from)) / DAY) + 1 : null; const clear = () => { if (disabled) return; if (view === "days") pendingFocus.current = true; else returnToTrigger.current = view; change(null); setAnnouncement("Date range cleared."); }; const selectPreset = (range: DateRange, name: string) => { if (!rangeAvailable(range)) return; if (view !== "days") closeChoices(); change(range); setDirection(range.from >= month ? 1 : -1); setMonth(monthOf(range.from)); setCursor(range.from); setAnnouncement(`${name} selected.`); }; const [wasOpen, setWasOpen] = useState(open); if (wasOpen !== open) { setWasOpen(open); if (open) { // A reopened popover starts a fresh calendar session, retaining its range. setMonth(monthOf(initial)); setCursor(value?.from ?? initial); setPreview(null); setView("days"); setFocusChoices(false); setAnnouncement(""); } } return { value, change, open, setOpen, trigger, content, label, locale, disabled, autoFocus, showSummary, presets, today, month, view, heading, help, choicesId, monthTrigger, yearTrigger, monthFormat, monthNameFormat, shortFormat, dateFormat, year, yearPage, yearPageEnd, previousDisabled, nextDisabled, openChoices, page, direction, reduce, choices, focusChoices, closeChoices, goToMonth, grid, active, weeks, shownRange, canHover, unavailable, setPreview, select, setCursor, onKey, dayCount, clear, rangeAvailable, selectPreset, announcement, }; } 69:T4ce5,"use client"; import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, useTransform, } from "motion/react"; import { cloneElement, createContext, isValidElement, type ReactElement, type ReactNode, type Ref, type RefObject, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { usePopoverPortalPosition } from "@/components/motion/popover-position"; import { EASE_OUT } from "@/lib/ease"; import { FOCUSABLE_SELECTOR } from "@/lib/focusable"; import { cn } from "@/lib/utils"; type Side = "top" | "bottom"; type Align = "start" | "end"; type MorphContextValue = { open: boolean; setOpen: (open: boolean) => void; toggle: () => void; triggerId: string; contentId: string; /** The element the panel measures against — see `registerTrigger`. */ triggerRef: React.MutableRefObject; registerTrigger: (node: HTMLElement | null) => void; contentRef: React.MutableRefObject; /** Arms or disarms moving focus into the panel as it next appears. */ armFocusOnOpen: (armed: boolean) => void; /** Reads and disarms the flag set by `armFocusOnOpen`. */ takeFocusOnOpen: () => boolean; }; const MorphContext = createContext(null); function useMorphContext(component: string) { const ctx = useContext(MorphContext); if (!ctx) throw new Error(`${component} must be used within `); return ctx; } export interface MorphPopoverProps { children: ReactNode; /** Controlled open state. */ open?: boolean; /** Uncontrolled initial open state. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; className?: string; } /** * A popover whose full-size panel reveals from the corner nearest the trigger * on one spring, then retraces the same clip on close. Content and surface * edges keep their size throughout. Closes on outside pointer / Escape. * Controlled or uncontrolled. */ export function MorphPopover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, className, }: MorphPopoverProps) { const baseId = useId(); const [root, setRoot] = useState(null); const [trigger, setTrigger] = useState(null); const contentRef = useRef(null); const [internalOpen, setInternalOpen] = useState(defaultOpen); const controlled = controlledOpen !== undefined; const open = controlled ? controlledOpen : internalOpen; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const toggle = useCallback(() => setOpen(!open), [setOpen, open]); // A keyboard open arms focus for the panel to take as it appears. Any later // key or pointer press disarms it, so an open the parent declined cannot // leave it armed for a later open that nobody asked to focus. const focusOnOpenRef = useRef(false); const disarmRef = useRef(null); const armFocusOnOpen = useCallback((armed: boolean) => { disarmRef.current?.abort(); disarmRef.current = null; focusOnOpenRef.current = armed; if (!armed) return; const controller = new AbortController(); const disarm = () => { focusOnOpenRef.current = false; controller.abort(); }; const options = { capture: true, signal: controller.signal }; document.addEventListener("keydown", disarm, options); document.addEventListener("pointerdown", disarm, options); disarmRef.current = controller; }, []); const takeFocusOnOpen = useCallback(() => { const armed = focusOnOpenRef.current; armFocusOnOpen(false); return armed; }, [armFocusOnOpen]); useEffect(() => () => disarmRef.current?.abort(), []); // A trigger normally registers itself through MorphPopoverTrigger. It can't // when something else already clones the element — a Tooltip wrapping the // button, say — and an unregistered trigger leaves the panel with nothing to // measure against, so it renders permanently invisible. The root boxes the // trigger exactly (the content portals out of it), so it stands in until a // real trigger registers, and stands in again if that one unmounts. Both are // state, so a trigger arriving while the panel is open re-anchors it. const anchorRef = useMemo>( () => ({ current: trigger ?? root }), [root, trigger], ); // The panel is a `role="dialog"` and goes inert the moment it closes, so // focus cannot be left sitting inside it: a dismissal hands it back to the // trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes // the focus onward itself when it lands on something focusable — this only // catches the case where it would otherwise be stranded. When no trigger has // registered, the root anchor stands in only if it can actually hold focus; // there is nowhere better than where the keyboard already is, so leave it. const close = useCallback(() => { setOpen(false); const focused = document.activeElement; const inPanel = focused instanceof HTMLElement && contentRef.current?.contains(focused); if (!inPanel) return; const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null); restore?.focus(); }, [root, setOpen, trigger]); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && close(); const onPointer = (e: PointerEvent) => { const target = e.target as Node; if ( root && !root.contains(target) && !contentRef.current?.contains(target) ) close(); }; window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onPointer); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onPointer); }; }, [open, root, close]); const ctx = useMemo( () => ({ open, setOpen, toggle, triggerId: `${baseId}-trigger`, contentId: `${baseId}-content`, triggerRef: anchorRef, registerTrigger: setTrigger, contentRef, armFocusOnOpen, takeFocusOnOpen, }), [open, setOpen, toggle, baseId, anchorRef, armFocusOnOpen, takeFocusOnOpen], ); return (

{children}

); } export interface MorphPopoverTriggerProps { children: ReactElement; } function mergeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref && typeof ref === "object") (ref as React.MutableRefObject).current = node; } }; } /** Wraps a single element, toggling the popover on click. */ export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) { const ctx = useMorphContext("MorphPopoverTrigger"); const child = children as ReactElement>; const childOnClick = child?.props?.onClick as | ((e: unknown) => void) | undefined; const childOnKeyDown = child?.props?.onKeyDown as | ((e: unknown) => void) | undefined; const childOnPointerDown = child?.props?.onPointerDown as | ((e: unknown) => void) | undefined; // Set by an Enter or Space keydown on the trigger, cleared by a pointer // press, read by the click that follows. const keyboardRef = useRef(false); const childRef = (child?.props as { ref?: Ref } | undefined) ?.ref; // Register once per actual ref change, not once per open-state render. const mergedRef = useMemo( () => mergeRefs(childRef, ctx.registerTrigger), [childRef, ctx.registerTrigger], ); if (!isValidElement(children)) return children; return cloneElement(child, { id: ctx.triggerId, ref: mergedRef, onKeyDown: (e: unknown) => { childOnKeyDown?.(e); const key = (e as { key?: string } | undefined)?.key; keyboardRef.current = key === "Enter" || key === " "; }, onPointerDown: (e: unknown) => { childOnPointerDown?.(e); keyboardRef.current = false; }, onClick: (e: unknown) => { childOnClick?.(e); // Enter and Space reach here as a click with `detail` 0 after their // keydown on this element. A pointer click counts at least 1, and a // scripted click() has no keydown before it. Only a keyboard open // moves focus into the panel. const keyboard = keyboardRef.current && (e as { detail?: number } | undefined)?.detail === 0; keyboardRef.current = false; ctx.armFocusOnOpen(!ctx.open && keyboard); ctx.toggle(); }, "aria-haspopup": "dialog", "aria-expanded": ctx.open, "aria-controls": ctx.open ? ctx.contentId : undefined, }); } // Full-distance clip travel needs a shorter curve than SPRING_PANEL's slow // overdamped tail. A non-bouncing spring reaches its rest within 260 ms. const MORPH_ENTER = { type: "spring", duration: 0.26, bounce: 0 } as const; const MORPH_EXIT = { duration: 0.2, ease: EASE_OUT } as const; // Keep the panel and content at their final size. An inset clip reveals the // nearest corner without scaling borders, shadows or keyboard-focus geometry. // A full-size clip keeps content at its final coordinates without box-to-box // scale correction. One progress value keeps clip and opacity synchronized; // clip-path and the shadow may paint, so this is not a compositor-only morph. function clipAt(side: Side, align: Align, radius: number, inset: number) { return `inset(${side === "top" ? inset : 0}% ${align === "start" ? inset : 0}% ${side === "bottom" ? inset : 0}% ${align === "end" ? inset : 0}% round ${radius}px)`; } export interface MorphPopoverContentProps { children: ReactNode; side?: Side; align?: Align; /** Gap between trigger and panel, in px. Default 8. */ sideOffset?: number; /** Panel corner radius, in px. Default 16. */ radius?: number; /** Draw the surface shadow. Default true. */ shadow?: boolean; /** * Runs after the portalled surface is positioned and visible. Passing it * hands focus to the caller: the panel then moves no focus on its own. */ onOpenAutoFocus?: (content: HTMLDivElement) => void; /** * Element to focus when the trigger opens the panel by keyboard. Defaults * to the first focusable element in the panel, or the panel itself. A * pointer open does not move focus. Ignored with `onOpenAutoFocus`. */ initialFocus?: RefObject; className?: string; } export function MorphPopoverContent(props: MorphPopoverContentProps) { const ctx = useMorphContext("MorphPopoverContent"); const [portalReady, setPortalReady] = useState(false); useEffect(() => setPortalReady(true), []); if (!portalReady) return null; return createPortal( {ctx.open && } , document.body, ); } // Measurement belongs to the mounted portal session: reopening must not start // an entrance at the previous session's coordinates before measuring this one. function MorphPopoverSurface({ children, side = "bottom", align = "end", sideOffset = 8, radius = 16, shadow = true, onOpenAutoFocus, initialFocus, className, }: MorphPopoverContentProps) { const ctx = useMorphContext("MorphPopoverContent"); const reduce = useReducedMotion() ?? false; const [isPresent, safeToRemove] = usePresence(); const layout = usePopoverPortalPosition( ctx.triggerRef, ctx.contentRef, isPresent, ); const preferredLeft = layout ? align === "end" ? layout.trigger.left + layout.trigger.width - layout.content.width : layout.trigger.left : 0; // Keep larger compositions, such as calendars, inside the viewport. Prefer // the requested side, then use the roomier side when it cannot fit there. const gutter = 12; const below = layout ? Math.max( 0, window.innerHeight - layout.trigger.top - layout.trigger.height - sideOffset - gutter, ) : 0; const above = layout ? Math.max(0, layout.trigger.top - sideOffset - gutter) : 0; const requestedSpace = side === "bottom" ? below : above; const otherSpace = side === "bottom" ? above : below; const resolvedSide = layout && layout.content.height > requestedSpace && otherSpace > requestedSpace ? side === "bottom" ? "top" : "bottom" : side; const availableHeight = resolvedSide === "bottom" ? below : above; const left = layout ? Math.max( gutter, Math.min( preferredLeft, window.innerWidth - layout.content.width - gutter, ), ) : 0; const top = layout ? resolvedSide === "bottom" ? layout.trigger.top + layout.trigger.height + sideOffset : Math.max( gutter, layout.trigger.top - layout.content.height - sideOffset, ) : 0; const progress = useMotionValue(0); const clipPath = useTransform(progress, (p) => clipAt(resolvedSide, align, radius, 92 * (1 - p)), ); const surfaceOpacity = useTransform(progress, [0, 0.15], [0, 1]); // Reduced motion has no travel, so a short fade carries the whole entrance // and exit on its own. const fade = useMotionValue(reduce ? 0 : 1); const ready = layout !== null; const focusedOnOpen = useRef(false); useEffect(() => { if ( !ready || !isPresent || focusedOnOpen.current || !ctx.contentRef.current ) return; focusedOnOpen.current = true; onOpenAutoFocus?.(ctx.contentRef.current); }, [ready, isPresent, ctx.contentRef, onOpenAutoFocus]); // `safeToRemove` is a new function on every render: AnimatePresence // rebuilds its context each time its parent renders. Read it through a ref // so a render during the exit (a consumer's state change, a list streaming // in) does not restart the exit from where it got to — restarted every // render, it would close in ever smaller steps and never report completion, // leaving an inert, invisible panel mounted for good. const safeToRemoveRef = useRef(safeToRemove); useLayoutEffect(() => { safeToRemoveRef.current = safeToRemove; }); useEffect(() => { if (!ready) { if (!isPresent) safeToRemoveRef.current?.(); return; } const settle = () => { if (!isPresent) safeToRemoveRef.current?.(); }; if (reduce) { progress.jump(1); const animation = animate(fade, isPresent ? 1 : 0, { duration: 0.12, onComplete: settle, }); return () => animation.stop(); } const animation = animate(progress, isPresent ? 1 : 0, { ...(isPresent ? MORPH_ENTER : MORPH_EXIT), onComplete: settle, }); return () => animation.stop(); }, [fade, progress, ready, isPresent, reduce]); // The wrapper stays `visibility: hidden` until the first measurement, and // focus() inside a hidden subtree is silently ignored. So move focus in the // commit that makes the panel visible, not when it mounts. A CSS transition // on `visibility` can still hold the controls hidden for a moment after // that commit (a reduced-motion reset that gives every element a short // transition-duration does), so while focus rests on the panel or has not // moved, each such transition that ends tries the candidates again, until // the user presses a key or pointer. The effect runs once per open, so it // reads the caller's props through refs: a new ref or callback passed // mid-open must not tear down a pending retry. const initialFocusRef = useRef(initialFocus); const callerFocusesRef = useRef(onOpenAutoFocus !== undefined); useLayoutEffect(() => { initialFocusRef.current = initialFocus; callerFocusesRef.current = onOpenAutoFocus !== undefined; }); const { contentRef, takeFocusOnOpen } = ctx; useLayoutEffect(() => { if (!ready || !isPresent) return; if (!takeFocusOnOpen() || callerFocusesRef.current) return; const panel = contentRef.current; const wrapper = panel?.parentElement; if (!panel || !wrapper) return; const from = document.activeElement; const unmoved = () => document.activeElement === from || document.activeElement === panel; // The selector also matches elements focus() refuses: a hidden input, a // disabled button that carries a tabindex, anything under display: none. // Keep the first candidate that takes focus, else hold it on the panel. const focusFirst = () => { const candidates = [ initialFocusRef.current?.current, ...panel.querySelectorAll(FOCUSABLE_SELECTOR), ]; for (const candidate of candidates) { if (!candidate) continue; candidate.focus({ preventScroll: true }); if (unmoved()) continue; // preventScroll keeps the page still, but it also stops the panel's // own scroll area from bringing a row below the fold into view. candidate.scrollIntoView?.({ block: "nearest" }); return true; } panel.focus({ preventScroll: true }); return false; }; if (focusFirst()) return; const retry = (event: TransitionEvent) => { if (event.propertyName !== "visibility") return; if (!unmoved() || focusFirst()) stop(); }; const stop = () => { wrapper.removeEventListener("transitionend", retry); document.removeEventListener("keydown", stop, true); document.removeEventListener("pointerdown", stop, true); }; wrapper.addEventListener("transitionend", retry); document.addEventListener("keydown", stop, true); document.addEventListener("pointerdown", stop, true); return stop; }, [ready, isPresent, contentRef, takeFocusOnOpen]); return ( ); } 6a:T722,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; /** Accelerating curve for things that fall (a dropped ball, a toppled block). Not for UI entrances. */ export const EASE_IN = [0.55, 0, 1, 0.45] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 6b:T8af,"use client"; import { type MutableRefObject, useCallback, useLayoutEffect, useState, } from "react"; export type PortalLayout = { trigger: { left: number; top: number; width: number; height: number; }; content: { width: number; height: number; }; }; function sameLayout(a: PortalLayout | null, b: PortalLayout) { return ( a?.trigger.left === b.trigger.left && a.trigger.top === b.trigger.top && a.trigger.width === b.trigger.width && a.trigger.height === b.trigger.height && a.content.width === b.content.width && a.content.height === b.content.height ); } /** Measures a trigger and portalled panel in viewport coordinates. */ export function usePopoverPortalPosition< TriggerElement extends HTMLElement, ContentElement extends HTMLElement, >( triggerRef: MutableRefObject, contentRef: MutableRefObject, active: boolean, ) { const [layout, setLayout] = useState(null); const update = useCallback(() => { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) return; const rect = trigger.getBoundingClientRect(); const next: PortalLayout = { trigger: { left: rect.left, top: rect.top, width: rect.width, height: rect.height, }, content: { width: content.offsetWidth, height: content.offsetHeight, }, }; setLayout((current) => (sameLayout(current, next) ? current : next)); }, [contentRef, triggerRef]); useLayoutEffect(() => { update(); if (!active) return; const trigger = triggerRef.current; const content = contentRef.current; const observer = new ResizeObserver(update); if (trigger) observer.observe(trigger); if (content) observer.observe(content); window.addEventListener("scroll", update, true); window.addEventListener("resize", update); return () => { observer.disconnect(); window.removeEventListener("scroll", update, true); window.removeEventListener("resize", update); }; }, [active, contentRef, triggerRef, update]); return layout; } 62:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/motion/date-range-picker.tsx","content":"$65","type":"registry:component","target":"@components/motion/date-range-picker.tsx"},{"path":"components/motion/date-range-picker/context.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { useDateRangePickerController } from \"./use-date-range-picker\";\n\ntype DateRangePickerContextValue = ReturnType<\n typeof useDateRangePickerController\n>;\nexport const DateRangePickerContext =\n createContext(null);\nexport function useDateRangePickerContext(part: string) {\n const context = useContext(DateRangePickerContext);\n if (!context) throw new Error(`${part} must be used within DateRangePicker`);\n return context;\n}\n","type":"registry:component","target":"@components/motion/date-range-picker/context.ts"},{"path":"components/motion/date-range-picker/date-utils.ts","content":"$66","type":"registry:component","target":"@components/motion/date-range-picker/date-utils.ts"},{"path":"components/motion/date-range-picker/types.ts","content":"$67","type":"registry:component","target":"@components/motion/date-range-picker/types.ts"},{"path":"components/motion/date-range-picker/use-date-range-picker.ts","content":"$68","type":"registry:component","target":"@components/motion/date-range-picker/use-date-range-picker.ts"},{"path":"components/motion/popover-morph.tsx","content":"$69","type":"registry:component","target":"@components/motion/popover-morph.tsx"},{"path":"lib/ease.ts","content":"$6a","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"components/motion/popover-position.ts","content":"$6b","type":"registry:component","target":"@components/motion/popover-position.ts"},{"path":"lib/focusable.ts","content":"/**\n * Elements that can usually take keyboard focus. The selector cannot see\n * everything focus() checks (an element under `display: none`, say), so a\n * caller that needs certainty tries focus() and checks where it landed.\n */\nexport const FOCUSABLE_SELECTOR = [\n \"a[href]\",\n \"button:not(:disabled)\",\n \"input:not(:disabled):not([type='hidden'])\",\n \"select:not(:disabled)\",\n \"textarea:not(:disabled)\",\n \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n","type":"registry:lib","target":"@lib/focusable.ts"}],"className":"h-[70svh] min-h-80"}]]}]