60: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"] 61:I[544296,["/_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"],"ItemStyles"] 62:I[8513,["/_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"],"ScrollArea"] 63:I[8513,["/_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"],"ScrollBar"] 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:T3661,"use client"; import { useEffect, useId, useRef, useState, useSyncExternalStore, } from "react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion, useIsPresent, type Variants, } from "motion/react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // Far enough to read as travel, short enough that the fade does most of the // work and the grid never looks like it is leaving the card. const SLIDE = 56; const GRID: Variants = { enter: (dir: number) => ({ x: dir * SLIDE, opacity: 0, filter: "blur(4px)" }), center: { x: 0, opacity: 1, filter: "blur(0px)", transition: { duration: 0.25, ease: EASE_OUT }, }, // Leaves quicker and travels less than the incoming grid arrives, so the // eye goes straight to the new month. exit: (dir: number) => ({ x: dir * -SLIDE * 0.6, opacity: 0, filter: "blur(2px)", transition: { duration: 0.18, ease: EASE_OUT }, }), }; const TITLE: Variants = { enter: { opacity: 0, filter: "blur(4px)" }, center: { opacity: 1, filter: "blur(0px)", transition: { duration: 0.25, ease: EASE_OUT }, }, exit: { opacity: 0, filter: "blur(2px)", transition: { duration: 0.15, ease: EASE_OUT }, }, }; // No bounce: a circle that overshoots would briefly mark the wrong day. const SELECT = { type: "spring", duration: 0.3, bounce: 0 } as const; const WEEKDAYS = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ]; // Six weeks covers every month, so the grid is always the same height and // the month buttons never move. const CELLS = 42; const pad = (n: number) => String(n).padStart(2, "0"); const toIso = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`; const fromIso = (iso: string) => { const [y, m, d] = iso.split("-").map(Number); return new Date(y, m - 1, d); }; // Months as one running number, so comparing two tells the direction. const monthIndex = (date: Date) => date.getFullYear() * 12 + date.getMonth(); const addDays = (iso: string, days: number) => { const date = fromIso(iso); return toIso( new Date(date.getFullYear(), date.getMonth(), date.getDate() + days), ); }; // Keeps the day of month, clamped so Jan 31 plus one month is Feb 28. const addMonths = (iso: string, months: number) => { const date = fromIso(iso); const y = date.getFullYear(); const m = date.getMonth() + months; const last = new Date(y, m + 1, 0).getDate(); return toIso(new Date(y, m, Math.min(date.getDate(), last))); }; const monthTitle = (month: number) => new Date(Math.floor(month / 12), month % 12, 1).toLocaleDateString("en-US", { month: "long", year: "numeric", }); const dayLabel = (date: Date) => date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric", }); // The server can't know the viewer's date or time zone, so it renders an // empty shell of the same size and the client fills it in on hydration. const noSubscribe = () => () => {}; const useToday = () => useSyncExternalStore( noSubscribe, () => toIso(new Date()), () => null, ); export function MiniCalendar({ onSelect, className, }: { onSelect?: (iso: string) => void; className?: string; }) { const today = useToday(); // Null until the user acts, meaning "today" and "today's month". const [selected, setSelected] = useState(null); const [focused, setFocused] = useState(null); const [month, setMonth] = useState(null); const [direction, setDirection] = useState(1); const moveFocus = useRef(false); const gridRef = useRef(null); const titleId = useId(); const selectedIso = selected ?? today; const focusedIso = focused ?? selectedIso; const shownMonth = month ?? (selectedIso ? monthIndex(fromIso(selectedIso)) : null); // After a keyboard move, focus follows to the day's button, which may be // in a grid that has only just mounted. useEffect(() => { if (!moveFocus.current) return; moveFocus.current = false; gridRef.current ?.querySelector( `[data-month="${shownMonth}"] [data-date="${focusedIso}"]`, ) ?.focus({ preventScroll: true }); }, [focusedIso, shownMonth]); if (!today || !focusedIso || shownMonth === null) { return ; } const showMonth = (next: number) => { if (next === shownMonth) return; setDirection(next > shownMonth ? 1 : -1); setMonth(next); }; const goTo = (iso: string, takeFocus: boolean) => { setFocused(iso); showMonth(monthIndex(fromIso(iso))); moveFocus.current = takeFocus; }; const select = (iso: string) => { setSelected(iso); goTo(iso, false); onSelect?.(iso); }; // The buttons move the grid a month and carry the roving focus with it, // without pulling focus off the button itself. const step = (months: number) => { const iso = addMonths(focusedIso, months); setFocused(iso); showMonth(monthIndex(fromIso(iso))); }; const onKeyDown = (event: React.KeyboardEvent) => { const weekday = fromIso(focusedIso).getDay(); const years = event.shiftKey ? 12 : 1; const moves: Record string> = { ArrowLeft: () => addDays(focusedIso, -1), ArrowRight: () => addDays(focusedIso, 1), ArrowUp: () => addDays(focusedIso, -7), ArrowDown: () => addDays(focusedIso, 7), Home: () => addDays(focusedIso, -weekday), End: () => addDays(focusedIso, 6 - weekday), PageUp: () => addMonths(focusedIso, -years), PageDown: () => addMonths(focusedIso, years), }; const move = moves[event.key]; if (!move) return; event.preventDefault(); goTo(move(), true); }; return (

{/* Its own positioning context, so the outgoing title can sit on top of the incoming one while they crossfade. */}

{monthTitle(shownMonth)}

step(-1)}> step(1)}>

{/* Clips the sliding grids at the card edge. The 4px of padding buys back room for focus outlines on the outer days. */}

); } function MonthGrid({ ref, month, direction, today, selected, focused, labelledBy, onSelect, }: { // popLayout measures the outgoing grid through this ref. ref?: React.Ref; month: number; direction: number; today: string; selected: string | null; focused: string; labelledBy: string; onSelect: (iso: string) => void; }) { // The outgoing grid stays in the DOM while it fades, but is gone as far as // focus and screen readers are concerned. const present = useIsPresent(); const first = new Date(Math.floor(month / 12), month % 12, 1); const start = first.getDay(); const days = Array.from( { length: CELLS }, (_, i) => new Date(first.getFullYear(), first.getMonth(), i - start + 1), ); const weeks = Array.from({ length: CELLS / 7 }, (_, w) => days.slice(w * 7, w * 7 + 7), ); return ( {/* Scoped per month, so the selection springs between days of one month but never flies across from the outgoing grid. */} {WEEKDAYS.map((day) => ( ))} {weeks.map((week, w) => ( {week.map((date) => { const iso = toIso(date); const isSelected = iso === selected; const outside = monthIndex(date) !== month; return ( ); })} ))}

{day.slice(0, 2)}

); } // Same footprint as the real calendar, for the server render. function Shell({ className }: { className?: string }) { return (

{/* Header row plus the 32px weekday row and six 44px weeks. */}

); } function MonthButton({ label, onClick, children, }: { label: string; onClick: () => void; children: React.ReactNode; }) { return ( ); } export default function MiniCalendarDemo() { return ; } 5f:["$","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","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/mini-calendar.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]