4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T30d5,"use client"; import * as React from "react"; import { LayoutGroup, motion } from "motion/react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { DayPicker, useDayPicker, type PropsBase, type DayPickerProps, type DateRange, type Matcher, type DayButtonProps, type MonthCaptionProps, type MonthGridProps, type WeekNumberProps, type WeekdayProps, type WeekNumberHeaderProps, type RootProps, } from "react-day-picker"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Icon, IconButton } from "@/components/ui/icon"; import { motionTokens, useChoreography, } from "@/lib/cojeev-motion/choreography"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type CalendarMark = "pink" | "blue" | "olive" | "yellow" | "ink"; const MarksContext = React.createContext>({}); const SelectionModeContext = React.createContext< "single" | "range" | "multiple" >("single"); // Related, legible silhouettes: selection has a finite contour change, while // the native day button and its focus target never move or change shape. const selectionContours = [ "43% 57% 48% 52% / 55% 44% 56% 45%", "55% 45% 58% 42% / 44% 54% 46% 56%", "48% 52% 41% 59% / 59% 45% 55% 41%", "58% 42% 53% 47% / 47% 59% 41% 53%", ]; export const calendarVariants = cva("v-cal [display:grid] [gap:14px]"); type CalendarBaseProps = Omit< PropsBase, "mode" | "onSelect" | "selected" | "disabled" | "required" > & { disabled?: Matcher | Matcher[]; marks?: Record; required?: boolean; }; export type CalendarSingleProps = CalendarBaseProps & { mode?: "single"; selected?: Date; defaultSelected?: Date; onSelect?: (date: Date | undefined) => void; }; export type CalendarRangeProps = CalendarBaseProps & { mode: "range"; selected?: DateRange; defaultSelected?: DateRange; onSelect?: (range: DateRange | undefined) => void; min?: number; max?: number; excludeDisabled?: boolean; resetOnSelect?: boolean; }; export type CalendarMultipleProps = CalendarBaseProps & { mode: "multiple"; selected?: Date[]; defaultSelected?: Date[]; onSelect?: (dates: Date[] | undefined) => void; min?: number; max?: number; }; export type CalendarProps = | CalendarSingleProps | CalendarRangeProps | CalendarMultipleProps; export type { DateRange }; export function Calendar(calendarProps: CalendarProps) { const { className, selected, defaultSelected, onSelect, marks = {}, classNames, components, mode = "single", required = false, animate = true, style, ...props } = calendarProps; const { quiet } = useChoreography(); const layoutId = React.useId(); const [internal, setInternal] = React.useState({ mode, value: defaultSelected, }); const controlled = Object.prototype.hasOwnProperty.call( calendarProps, "selected", ); const current = controlled ? selected : internal.mode === mode ? internal.value : defaultSelected; const selection = mode === "range" ? { mode, selected: current as DateRange | undefined, onSelect: (date: DateRange | undefined) => { setInternal({ mode, value: date }); (onSelect as CalendarRangeProps["onSelect"])?.(date); }, } : mode === "multiple" ? { mode, selected: current as Date[] | undefined, onSelect: (date: Date[] | undefined) => { setInternal({ mode, value: date }); (onSelect as CalendarMultipleProps["onSelect"])?.(date); }, } : { mode, selected: current as Date | undefined, onSelect: (date: Date | undefined) => { setInternal({ mode, value: date }); (onSelect as CalendarSingleProps["onSelect"])?.(date); }, }; // The public legacy required:boolean API is broader than DayPicker's literal // required discriminant. Values/callbacks above are still paired by mode. const selectionProps = { ...selection, required } as DayPickerProps; return ( date .toLocaleDateString("en", { weekday: "short" }) .slice(0, 2) .toUpperCase(), formatWeekNumberHeader: () => "WK", }} components={{ Root: CalendarRoot, MonthCaption: CalendarCaption, DayButton: CalendarDayButton, MonthGrid: CalendarGrid, WeekNumber: CalendarWeekNumber, Weekday: CalendarWeekday, WeekNumberHeader: CalendarWeekNumberHeader, ...components, }} {...props} /> ); } /** DayPicker retains an aria-hidden DOM snapshot during its finite month exit. */ function CalendarRoot({ rootRef, ...props }: RootProps) { const host = React.useRef(null); const ref = React.useCallback( (node: HTMLDivElement | null) => { host.current = node; const release = assignMotionRef(rootRef, node); return () => { host.current = null; release(); }; }, [rootRef], ); React.useLayoutEffect(() => { const root = host.current; if (!root) return; const protectSnapshots = () => root .querySelectorAll( '[data-animated-month][aria-hidden="true"]', ) .forEach((snapshot) => { snapshot.inert = true; snapshot .querySelectorAll("[id]") .forEach((element) => element.removeAttribute("id")); }); const observer = new MutationObserver(protectSnapshots); observer.observe(root, { childList: true, subtree: true }); protectSnapshots(); return () => observer.disconnect(); }, []); return

; } export function CalendarCaption({ calendarMonth, displayIndex, className, ...props }: MonthCaptionProps) { const { goToMonth, previousMonth, nextMonth } = useDayPicker(); const month = calendarMonth.date; return (

{month.toLocaleDateString("en", { month: "long" })} {month.getFullYear()} previousMonth && goToMonth(previousMonth)} > nextMonth && goToMonth(nextMonth)} >

); } export function CalendarGrid({ className, ...props }: MonthGridProps) { return ( ); } export function CalendarDayButton({ day, modifiers, className, children, ...props }: DayButtonProps) { const marks = React.useContext(MarksContext); const mode = React.useContext(SelectionModeContext); const { quiet } = useChoreography(); const ref = React.useRef(null); React.useEffect(() => { if (modifiers.focused) ref.current?.focus(); }, [modifiers.focused]); const date = day.date; const contour = selectionContours[date.getDate() % selectionContours.length]; const iso = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`; const mark = marks[iso]; return ( ); } export function CalendarWeekNumber({ week, className, ...props }: WeekNumberProps) { const { isSelected } = useDayPicker(); const active = week.days.some((day) => isSelected?.(day.date)); const weekRef = useMorph("pills"); return (

); } function CalendarWeekday(props: WeekdayProps) { return	; } function CalendarWeekNumberHeader(props: WeekNumberHeaderProps) { return	; } 51:T1edc,@layer cojeev-states { /* An open date grid: type carries the hierarchy; colour carries the date state. / [data-slot="calendar"] { min-width:0; max-width:100%; color:var(--v-text); } [data-slot="calendar"] .v-cal__months { display:flex; flex-wrap:wrap; gap:28px; min-width:0; max-width:100%; } [data-slot="calendar"] .v-cal__month-wrap { display:grid; gap:20px; flex:0 1 360px; width:100%; min-width:0; max-width:360px; } [data-slot="calendar-header"] { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; } [data-slot="calendar-caption"] { display:grid; gap:1px; font-family:var(--font-display); background:transparent; color:var(--v-text); } [data-slot="calendar-caption"] b { font-size:26px; font-weight:600; line-height:1.1; letter-spacing:-.025em; } [data-slot="calendar-caption"] > span { font-family:var(--font-text); font-size:13px; font-weight:500; line-height:1.5; color:var(--v-text-2); } [data-slot="calendar-nav"] { display:inline-flex; gap:6px; } [data-slot="calendar-nav"] .v-ibtn { width:36px; height:36px; color:var(--v-text); background:var(--v-beige); box-shadow:none; } [data-slot="calendar-nav"] .v-ibtn:not(:disabled):hover { background:var(--v-blue); color:var(--v-on-accent); } [data-slot="calendar-nav"] .v-icon { width:17px; height:17px; } [data-slot="calendar-grid"] { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:center; justify-items:center; gap:5px 2px; width:100%; border-collapse:collapse; } [data-slot="calendar-grid"]:has(.v-cal__wk) { grid-template-columns:24px repeat(7,minmax(0,1fr)); } [data-slot="calendar-grid"] :is(thead,tbody,tr) { display:contents; } [data-slot="calendar-grid"] td { display:grid; place-items:center; position:relative; width:100%; min-width:0; height:42px; padding:0; } [data-slot="calendar-weekday"], [data-slot="calendar-week-number-header"] { display:grid; place-items:center; width:100%; height:28px; padding:0; font-size:11px; font-weight:600; color:var(--v-text-2); background:transparent; text-align:center; } [data-slot="calendar-week-number-header"] { font-size:9px; letter-spacing:.02em; } [data-slot="calendar-week-number"] { display:grid; place-items:center; width:20px; height:26px; font-size:10px; font-weight:400; color:var(--v-text-2); padding:0; background:transparent; } [data-slot="calendar-week-number"].-on { color:var(--v-text); font-weight:600; } [data-slot="calendar-day"] { position:relative; isolation:isolate; display:grid; place-items:center; width:40px; max-width:100%; height:40px; margin:0; padding:0; border:0; border-radius:43% 57% 48% 52% / 55% 44% 56% 45%; background:transparent; color:var(--v-text); font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; cursor:pointer; } [data-slot="calendar-day"] > span { position:relative; z-index:1; } [data-slot="calendar-day"]:not(:disabled):not([aria-pressed="true"]):hover { background:var(--v-beige); } [data-slot="calendar-day"][aria-pressed="true"] { background:transparent; color:var(--v-on-accent); font-weight:700; } [data-slot="calendar-day"][data-today]:not([aria-pressed="true"]) { box-shadow:inset 0 0 0 1.5px var(--v-blue); font-weight:700; } [data-slot="calendar-day"][data-today]::after { content:""; position:absolute; width:3px; height:3px; bottom:4px; border-radius:50%; background:currentColor; } [data-slot="calendar-day"][data-range-middle] { border-radius:0; color:var(--v-text); } [data-slot="calendar-day"]:is([data-range-start],[data-range-end]) { color:var(--v-on-accent); } [data-slot="calendar-day"] > [data-slot="calendar-selection"] { position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:43% 57% 48% 52% / 55% 44% 56% 45%; background:var(--v-pink); } [data-selection-mode="range"] [data-slot="calendar-grid"] td:has([data-range-middle],[data-range-start],[data-range-end])::before { content:""; position:absolute; inset:3px -1px; background:color-mix(in oklab,var(--v-pink) 23%,var(--v-canvas)); pointer-events:none; } [data-selection-mode="range"] [data-slot="calendar-grid"] td:has([data-range-start])::before { inset-inline-start:50%; } [data-selection-mode="range"] [data-slot="calendar-grid"] td:has([data-range-end])::before { inset-inline-end:50%; } [data-selection-mode="range"] [data-slot="calendar-grid"] td:has([data-range-start][data-range-end])::before { display:none; } [data-slot="calendar-day"]:disabled { color:var(--v-disabled-ink); cursor:not-allowed; } [data-slot="calendar-day"]:focus-visible { outline:2px solid var(--ring); outline-offset:2px; } [data-slot="calendar-mark"] { position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--v-pink-deep); z-index:1; } [data-slot="calendar-mark"].-blue { background:var(--v-blue-deep); } [data-slot="calendar-mark"].-olive { background:var(--v-olive); } [data-slot="calendar-mark"].-yellow { background:var(--v-yellow-deep); } [data-slot="calendar-mark"].-ink { background:var(--v-text); } [data-slot="calendar-day"][aria-pressed="true"] [data-slot="calendar-mark"] { background:var(--v-on-accent); } @media(max-width:420px) { [data-slot="calendar-day"] { width:36px; height:38px; font-size:13px; } [data-slot="calendar-grid"] td { height:40px; } [data-slot="calendar"] .v-cal__month-wrap { gap:16px; } } @media(prefers-reduced-motion:reduce) { [data-slot="calendar"] , [data-slot="calendar"] ::before, [data-slot="calendar"] ::after { animation-duration:0s; transition-duration:0s; } } /* DayPicker owns retained month snapshots; shared timing keeps both sides finite. */ .v-cal [data-animated-weeks] { display:grid; grid-column:1 / -1; grid-template-columns:inherit; gap:inherit; align-items:inherit; justify-items:inherit; } .v-cal .v-cal__caption-enter { animation:v-cal-caption-in var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal .v-cal__caption-exit { animation:v-cal-caption-out var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal .v-cal__weeks-after-enter, .v-cal:dir(rtl) .v-cal__weeks-before-enter { animation:v-cal-month-in-right var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal .v-cal__weeks-before-enter, .v-cal:dir(rtl) .v-cal__weeks-after-enter { animation:v-cal-month-in-left var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal .v-cal__weeks-before-exit, .v-cal:dir(rtl) .v-cal__weeks-after-exit { animation:v-cal-month-out-left var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal .v-cal__weeks-after-exit, .v-cal:dir(rtl) .v-cal__weeks-before-exit { animation:v-cal-month-out-right var(--v-calendar-duration) var(--v-calendar-ease) both; } .v-cal [data-animated-month][aria-hidden="true"] { width:100%; inset:0 auto auto 0; } @keyframes v-cal-caption-in { from { opacity:0; } to { opacity:1; } } @keyframes v-cal-caption-out { from { opacity:1; } to { opacity:0; } } @keyframes v-cal-month-in-right { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } } @keyframes v-cal-month-in-left { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } } @keyframes v-cal-month-out-left { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-12px); } } @keyframes v-cal-month-out-right { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(12px); } } .v-calendar-example { width:100%; max-width:360px; margin-inline:auto; display:grid; gap:20px; } .v-calendar-example__intro { display:grid; gap:6px; } .v-calendar-example__intro h3 { margin:0; font-size:22px; font-weight:500; color:var(--v-text); } .v-calendar-example__intro p { margin:0; color:var(--v-text-2); font-size:13px; line-height:1.5; } .v-calendar-example__summary { display:grid; gap:6px; padding-top:14px; border-top:1px solid var(--v-border); color:var(--v-text); } .v-calendar-example__summary p { margin:0; font-size:13px; line-height:1.5; } } 4b:["$","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"}]]}]}],["$","li","react-day-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/calendar.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/calendar.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/calendar.css","content":"$51","type":"registry:file","target":"styles/cojeev/calendar.css"}],"className":"h-[70svh] min-h-80"}]]}]