1a:I[55681,["/_next/static/immutable/chunks/13zynho0xek-n.js","/_next/static/immutable/chunks/0sgmws27aoy08.js","/_next/static/immutable/chunks/1q0vry_zzrasp.js","/_next/static/immutable/chunks/1wtggqy5ornvj.js","/_next/static/immutable/chunks/1x2njqwibf04o.js","/_next/static/immutable/chunks/078a_ulhy8_3-.js"],"default"] 1b:T62ae,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type KeyboardEvent as ReactKeyboardEvent, } from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, type Transition } from "motion/react"; import "./calendar-card.css"; /** * Calendar — a month card with a date that moves like an object. * * The selected day is one red square shared through a layout id, so picking * another date glides it there on a spring rather than moving a highlight; a * grey one follows the pointer between days the same way. The big number * above rolls a digit at a time, the month name swaps through a blur, and the * bar under them fills to how far through the month the date falls. * * The month line under the date is a button too: it opens the picker in place * of the days — the year with an arrow either side of it, rolling as it * changes, over the twelve months, where the same red square marks the one * you are in. Pick a month and the days come back, turned to it. The little * calendar in the corner tears a page off: the month turns to the next, the * date keeps its day number (clamped to the new month's length), and * everything lands together. Arrow keys move a day or a week, Page Up and * Page Down a month, Home and End to the month's ends; in the picker, Page Up * and Page Down change the year and Escape closes it. * * It opens on today, read from the visitor's own clock so it is their date * wherever they are, and today stays marked in red as they move around. Left * open past midnight, it turns to the new day by itself, as long as it was * still sitting on the old one. * * One spring drives every morph, as in Bencho's SelectionList, so all the * pieces land together. */ export type CalendarCardProps = { /** The date it opens on. Left out, it opens on today, by the visitor's clock. */ defaultDate?: Date; theme?: "light" | "dark"; /** Fired whenever the selected date changes. */ onChange?: (date: Date) => void; }; const MONTHS = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const DAYS = ["M", "T", "W", "T", "F", "S", "S"]; /* the years the picker goes between */ const MIN_YEAR = 1900; const MAX_YEAR = 2100; const SEGMENTS = 4; /* the same motion vocabulary as Bencho's SelectionList: one spring for every morph */ const morph: Transition = { type: "spring", visualDuration: 0.42, bounce: 0.16 }; const fade = (delay = 0): Transition => ({ duration: 0.22, ease: [0.25, 0.1, 0.25, 1], delay }); const daysIn = (y: number, m: number) => new Date(y, m + 1, 0).getDate(); /* Monday-first: how many blank cells come before the 1st */ const leadOf = (y: number, m: number) => (new Date(y, m, 1).getDay() + 6) % 7; type Ymd = { y: number; m: number; d: number }; function shift({ y, m, d }: Ymd, days: number): Ymd { const next = new Date(y, m, d + days); return { y: next.getFullYear(), m: next.getMonth(), d: next.getDate() }; } function turnMonth({ y, m, d }: Ymd, by: number): Ymd { const first = new Date(y, m + by, 1); const ny = first.getFullYear(); const nm = first.getMonth(); return { y: ny, m: nm, d: Math.min(d, daysIn(ny, nm)) }; } const toYmd = (date: Date): Ymd => ({ y: date.getFullYear(), m: date.getMonth(), d: date.getDate() }); const sameDay = (a: Ymd, b: Ymd) => a.y === b.y && a.m === b.m && a.d === b.d; /* * Today, from the visitor's clock, as a "y-m-d" key. It is read on the client * only: the server has no idea of the visitor's timezone, so its "today" can be * a day off, and rendering it would not match. Past midnight, or when the tab * comes back after a while, the key moves on and the card hears about it. */ const todayKey = () => { const now = new Date(); return `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`; }; function subscribeToday(onTick: () => void) { let timer: ReturnType; const arm = () => { const now = new Date(); const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); /* a beat past midnight, so the new date has certainly begun */ timer = setTimeout(() => { onTick(); arm(); }, midnight.getTime() - now.getTime() + 500); }; arm(); const wake = () => { if (document.visibilityState === "visible") onTick(); }; document.addEventListener("visibilitychange", wake); window.addEventListener("focus", wake); return () => { clearTimeout(timer); document.removeEventListener("visibilitychange", wake); window.removeEventListener("focus", wake); }; } function useToday(): Ymd | null { const key = useSyncExternalStore(subscribeToday, todayKey, () => null); return useMemo(() => { if (!key) return null; const [y, m, d] = key.split("-").map(Number); return { y, m, d }; }, [key]); } export default function CalendarCard({ defaultDate, theme = "light", onChange }: CalendarCardProps) { const today = useToday(); /* a date given up front renders straight away; otherwise the card waits a frame for the visitor's today */ const opening = defaultDate ? toYmd(defaultDate) : today; if (!opening) { /* the server's pass, and the client's first: the card's footprint, so nothing moves when it arrives */ return (

); } return ; } function Calendar({ opening, today, theme, onChange, }: { opening: Ymd; today: Ymd | null; theme: "light" | "dark"; onChange?: (date: Date) => void; }) { const reduced = useReducedMotion(); const group = useId(); const [date, setDate] = useState(opening); /* which way the last month change went, so the grid leaves and arrives the right way */ const [dir, setDir] = useState(0); const [hover, setHover] = useState(null); /* bumps on every tear-off, so the icon's page can flip each time */ const [tears, setTears] = useState(0); /* the month and year picker, and the year it is showing (browsed before a month is picked) */ const [picking, setPicking] = useState(false); const [pickYear, setPickYear] = useState(date.y); const [yearDir, setYearDir] = useState(0); const [monthHover, setMonthHover] = useState(null); const commit = useCallback( (next: Ymd) => { setDate((cur) => { const monthDelta = (next.y - cur.y) * 12 + (next.m - cur.m); if (monthDelta !== 0) { setDir(Math.sign(monthDelta)); setHover(null); } return next; }); onChange?.(new Date(next.y, next.m, next.d)); }, [onChange], ); /* past midnight, a card still sitting on yesterday moves on to the new day */ const lastToday = useRef(today); useEffect(() => { const was = lastToday.current; lastToday.current = today; if (was && today && !sameDay(was, today) && sameDay(date, was)) commit(today); }, [today, date, commit]); const tearOff = (by: number) => { setTears((n) => n + 1); setPicking(false); commit(turnMonth(date, by)); }; const openPicker = () => { setPickYear(date.y); setYearDir(0); setMonthHover(null); setPicking((on) => !on); }; const stepYear = (by: number) => { setYearDir(by); setPickYear((y) => Math.min(MAX_YEAR, Math.max(MIN_YEAR, y + by))); }; const pickMonth = (m: number) => { commit({ y: pickYear, m, d: Math.min(date.d, daysIn(pickYear, m)) }); setPicking(false); }; const onPickerKey = (e: ReactKeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); setPicking(false); } else if (e.key === "PageUp" || e.key === "PageDown") { e.preventDefault(); stepYear(e.key === "PageUp" ? -1 : 1); } }; const total = daysIn(date.y, date.m); const lead = leadOf(date.y, date.m); const cells = useMemo( () => Array.from({ length: lead + total }, (_, i) => (i < lead ? null : i - lead + 1)), [lead, total], ); const fill = date.d / total; const onKeyDown = (e: ReactKeyboardEvent) => { const moves: Record Ymd> = { ArrowLeft: () => shift(date, -1), ArrowRight: () => shift(date, 1), ArrowUp: () => shift(date, -7), ArrowDown: () => shift(date, 7), PageUp: () => turnMonth(date, -1), PageDown: () => turnMonth(date, 1), Home: () => ({ ...date, d: 1 }), End: () => ({ ...date, d: total }), }; const move = moves[e.key]; if (!move) return; e.preventDefault(); if (e.key === "PageUp" || e.key === "PageDown") setTears((n) => n + 1); commit(move()); }; const monthKey = `${date.y}-${date.m}`; const dayText = String(date.d); const label = `${MONTHS[date.m]} ${date.d}, ${date.y}`; return (

{/* the day: an odometer, each digit that changes rolls through */} {/* The month and year: a button that opens the picker. The month swaps through a blur, leaving the way the page turned; the year rolls. */}

tearOff(1)} onBack={() => tearOff(-1)} />

{/* how far through the month the date falls, across four segments */} {/* the days, or in their place the month and year picker, in one fixed-height body */}

{picking ? (

stepYear(-1)} whileTap={reduced ? undefined : { scale: 0.86, x: -2 }} transition={morph} > = MAX_YEAR} onClick={() => stepYear(1)} whileTap={reduced ? undefined : { scale: 0.86, x: 2 }} transition={morph} >

setMonthHover(null)} > {SHORT.map((name, m) => { const on = pickYear === date.y && m === date.m; const now = today !== null && pickYear === today.y && m === today.m; return ( e.pointerType === "mouse" && setMonthHover(m)} onClick={() => pickMonth(m)} whileTap={reduced ? undefined : { scale: 0.92 }} initial={reduced ? false : { opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ ...morph, opacity: { ...fade(), delay: reduced ? 0 : 0.04 + Math.floor(m / 3) * 0.035 }, y: { ...morph, delay: reduced ? 0 : 0.04 + Math.floor(m / 3) * 0.035 }, }} > {monthHover === m && !on && ( )} {on && } {name} ); })}

) : (

setHover(null)} > ({ opacity: 0, x: d * 28, filter: "blur(6px)" }), center: { opacity: 1, x: 0, filter: "blur(0px)" }, exit: (d: number) => ({ opacity: 0, x: d * -28, filter: "blur(6px)" }), }} initial={reduced ? false : "enter"} animate="center" exit="exit" transition={{ ...morph, opacity: fade(), filter: fade() }} > {cells.map((day, i) => { const isToday = today !== null && today.y === date.y && today.m === date.m && today.d === day; return day === null ? ( ) : ( e.pointerType === "mouse" && setHover(day)} onClick={() => commit({ ...date, d: day })} whileTap={reduced ? undefined : { scale: 0.9 }} /* the first paint: the days arrive a row at a time */ initial={reduced || dir !== 0 ? false : { opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} /* the row delay is on the entrance only, never on the press */ transition={{ ...morph, opacity: { ...fade(), delay: dir !== 0 || reduced ? 0 : 0.14 + Math.floor(i / 7) * 0.045 }, y: { ...morph, delay: dir !== 0 || reduced ? 0 : 0.14 + Math.floor(i / 7) * 0.045 }, }} > {hover === day && day !== date.d && ( )} {day === date.d && ( )} {day} ); })}

)}

); } /* a number that rolls: each character that changes slides through, the others stay put */ function Odometer({ value, dir = 1 }: { value: string; dir?: number }) { const up = dir >= 0; return ( {value.split("").map((c, i) => ( {c} ))} ); } /* * The little calendar: a red header over a field of dots, one of them red. * Pressed, its page tears off — a leaf of red flips up and away while the * dots run a quick ripple — and the card turns to the next month. A right * click (or a long press's context menu) turns back instead. */ function CalendarIcon({ tears, day, onTear, onBack, }: { tears: number; day: number; onTear: () => void; onBack: () => void; }) { const reduced = useReducedMotion(); /* the red dot sits where the selected day would in a 7 × 3 sketch of the month */ const marked = (day - 1) % 21; return ( { e.preventDefault(); onBack(); }} whileHover={reduced ? undefined : { y: -1.5, rotate: -2 }} whileTap={reduced ? undefined : { scale: 0.92 }} transition={morph} > {/* the page that tears off, once per turn */} {tears > 0 && !reduced && ( )} {Array.from({ length: 21 }, (_, i) => ( 0 && !reduced ? { scale: 0.3, opacity: 0 } : false} animate={{ scale: 1, opacity: 1 }} transition={{ ...morph, delay: tears > 0 ? 0.12 + (i % 7) * 0.018 + Math.floor(i / 7) * 0.03 : 0 }} /> ))} ); } 1c:T28ef,/* =========================================================================== Calendar. A soft double-walled card: a pale shell with a hairline, and the card inside it. Measured off the reference at 300 px wide; everything is themed through the tokens below, and the dark set swaps in on data-theme="dark". =========================================================================== */ .pcal { --pcal-shell: #f5f5f5; --pcal-shell-edge: #e6e6e6; --pcal-card: #fbfbfb; --pcal-card-edge: rgb(0 0 0 / 0.035); --pcal-ink: #0d0d0d; --pcal-quiet: #a7a7a7; --pcal-red: #f54a3f; --pcal-red-ink: #ffffff; --pcal-track: #efefef; --pcal-hover: rgb(0 0 0 / 0.05); --pcal-icon: #ececec; --pcal-icon-edge: rgb(0 0 0 / 0.06); --pcal-dot: #b9b9b9; --pcal-shadow: 0 1px 1px rgb(0 0 0 / 0.02), 0 10px 30px -12px rgb(0 0 0 / 0.12), 0 30px 60px -30px rgb(0 0 0 / 0.1); display: flex; justify-content: center; color: var(--pcal-ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .pcal[data-theme="dark"] { --pcal-shell: #161616; --pcal-shell-edge: #2a2a2a; --pcal-card: #1c1c1d; --pcal-card-edge: rgb(255 255 255 / 0.04); --pcal-ink: #f5f5f5; --pcal-quiet: #7d7d82; --pcal-red: #ff4b40; --pcal-track: #2b2b2d; --pcal-hover: rgb(255 255 255 / 0.07); --pcal-icon: #2a2a2c; --pcal-icon-edge: rgb(255 255 255 / 0.06); --pcal-dot: #5c5c60; --pcal-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 34px -12px rgb(0 0 0 / 0.6), 0 30px 60px -30px rgb(0 0 0 / 0.5); } .pcal *, .pcal *::before, .pcal *::after { box-sizing: border-box; } .pcal button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } /* --- the two walls ---------------------------------------------------------- */ .pcal__shell { width: 300px; padding: 8.5px; border-radius: 40px; background: var(--pcal-shell); box-shadow: inset 0 0 0 1px var(--pcal-shell-edge), var(--pcal-shadow); transition: background-color 0.35s ease, box-shadow 0.35s ease; } .pcal__card { padding: 27px 20px 22px; border-radius: 32px; background: var(--pcal-card); box-shadow: inset 0 0 0 1px var(--pcal-card-edge), 0 1px 2px rgb(0 0 0 / 0.04); transition: background-color 0.35s ease; } /* --- the date and the little calendar --------------------------------------- */ .pcal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 6px 0 6px; } .pcal__title { display: flex; flex-direction: column; min-width: 0; } .pcal__day { position: relative; display: inline-flex; overflow: hidden; height: 40px; font-size: 36px; font-weight: 600; line-height: 40px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pcal__digit { display: inline-block; } .pcal__month { position: relative; display: block; height: 27px; margin-top: 5px; overflow: hidden; color: var(--pcal-quiet); font-size: 21px; font-weight: 400; line-height: 26px; letter-spacing: -0.01em; white-space: nowrap; } .pcal__monthName { display: block; } .pcal__icon { position: relative; flex: none; width: 54px; height: 53px; overflow: hidden; border-radius: 11px; background: var(--pcal-icon); box-shadow: inset 0 0 0 1px var(--pcal-icon-edge), 0 2px 6px -2px rgb(0 0 0 / 0.12); perspective: 140px; transition: background-color 0.35s ease; } .pcal__icon:focus-visible, .pcal__gridWrap:focus-visible { outline: 2px solid var(--pcal-red); outline-offset: 3px; } .pcal__iconTop { position: absolute; top: 3px; left: 3px; right: 3px; height: 15px; border-radius: 8px 8px 2px 2px; background: var(--pcal-red); } /* the leaf that flips away on each turn: a copy of the red top */ .pcal__leaf { position: absolute; top: 3px; left: 3px; right: 3px; height: 15px; border-radius: 8px 8px 2px 2px; background: var(--pcal-red); transform-origin: 50% 0; pointer-events: none; } /* the perforation under the red top, where the pages tear */ .pcal__icon::after { content: ""; position: absolute; top: 20px; left: 6px; right: 6px; border-top: 1px dotted var(--pcal-dot); opacity: 0.8; } .pcal__dots { position: absolute; top: 26px; left: 9px; right: 9px; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4.5px; justify-items: center; } .pcal__dot { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--pcal-dot); } .pcal__dot[data-on] { background: var(--pcal-red); } /* --- the month's progress ------------------------------------------------------ */ .pcal__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.5px; margin: 26px 6px 0; } .pcal__seg { position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: var(--pcal-track); transition: background-color 0.35s ease; } .pcal__segFill { position: absolute; inset: 0; border-radius: inherit; background: var(--pcal-red); transform-origin: 0 50%; } /* --- the grid ------------------------------------------------------------------- */ .pcal__week, .pcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .pcal__week { margin-top: 30px; color: var(--pcal-quiet); font-size: 16px; font-weight: 500; line-height: 20px; text-align: center; } .pcal__gridWrap { position: relative; margin-top: 13px; /* six rows always, so the card never changes height when the month turns */ height: 195px; border-radius: 8px; outline: none; } .pcal__grid { row-gap: 0; } .pcal__cell { position: relative; display: grid; place-items: center; height: 32.5px; } .pcal .pcal__date { color: var(--pcal-ink); font-size: 17.5px; font-weight: 450; font-variant-numeric: tabular-nums; line-height: 1; } .pcal__num { position: relative; z-index: 1; transition: color 0.2s ease; } .pcal__date[data-selected] .pcal__num { color: var(--pcal-red-ink); } /* the selected day: one red square, shared, so it glides from date to date */ .pcal__selected, .pcal__hover { position: absolute; top: 50%; left: 50%; width: 32px; height: 25px; margin: -12.5px 0 0 -16px; border-radius: 6px; } .pcal__selected { background: var(--pcal-red); box-shadow: 0 3px 8px -3px rgb(245 74 63 / 0.55); } .pcal__hover { background: var(--pcal-hover); } @media (prefers-reduced-motion: reduce) { .pcal__shell, .pcal__card, .pcal__num { transition: none; } } /* --- the month line: a button that opens the picker -------------------------------- */ .pcal .pcal__monthBtn { display: inline-flex; align-items: baseline; gap: 5px; max-width: calc(100% + 6px); margin: 5px 0 0 -5px; padding: 0 5px; border-radius: 8px; color: var(--pcal-quiet); transition: background-color 0.2s ease, color 0.2s ease; } /* the month span no longer carries its own top margin: the button does */ .pcal .pcal__monthBtn .pcal__month { flex: none; margin-top: 0; color: inherit; transition: color 0.2s ease; } /* the year rides beside the month a size down, so the pair fits next to the corner icon */ .pcal__year { position: relative; flex: none; display: inline-flex; height: 22px; overflow: hidden; color: var(--pcal-quiet); opacity: 0.6; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .pcal__chevron { flex: none; align-self: center; width: 12px; height: 12px; margin-left: -2px; opacity: 0.7; } @media (hover: hover) { .pcal .pcal__monthBtn:hover { background: var(--pcal-hover); color: var(--pcal-ink); } } .pcal .pcal__monthBtn:focus-visible, .pcal .pcal__step:focus-visible, .pcal .pcal__monthCell:focus-visible { outline: 2px solid var(--pcal-red); outline-offset: 2px; } /* --- the body: the days, or the picker, in the same fixed height --------------------- */ .pcal__body { position: relative; /* weekday row (30 + 20) + the grid (13 + 195) */ height: 258px; } /* its own block, so the weekday row's top margin stays inside the body instead of escaping above it */ .pcal__days { display: flow-root; } .pcal__picker { display: flex; flex-direction: column; padding-top: 22px; } .pcal__yearRow { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 4px; } .pcal .pcal__step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pcal-hover); color: var(--pcal-ink); transition: background-color 0.2s ease, opacity 0.2s ease; } .pcal .pcal__step svg { width: 13px; height: 13px; } @media (hover: hover) { .pcal .pcal__step:not(:disabled):hover { background: var(--pcal-track); } } .pcal .pcal__step:disabled { opacity: 0.35; cursor: default; } .pcal__yearBig { position: relative; display: inline-flex; height: 32px; overflow: hidden; color: var(--pcal-ink); font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pcal__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; } .pcal .pcal__monthCell { position: relative; display: grid; place-items: center; height: 41px; color: var(--pcal-ink); font-size: 16px; font-weight: 450; } .pcal__monthCell[data-selected] .pcal__num { color: var(--pcal-red-ink); } /* the picked month: the same red square as the picked day, wider for a word */ .pcal__mSelected, .pcal__mHover { position: absolute; inset: 4px 8px; border-radius: 9px; } .pcal__mSelected { background: var(--pcal-red); box-shadow: 0 3px 8px -3px rgb(245 74 63 / 0.55); } .pcal__mHover { background: var(--pcal-hover); } /* --- today -------------------------------------------------------------------------- */ /* the card's footprint while it waits a frame for the visitor's own date */ .pcal__ghost { width: 300px; height: 427px; } /* today, wherever it is not the picked day: its number in red */ .pcal__date[data-today]:not([data-selected]) .pcal__num, .pcal__monthCell[data-today]:not([data-selected]) .pcal__num { color: var(--pcal-red); font-weight: 600; } 12:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Calendar — Pin UI\",\"description\":\"A month card where the selected day glides from date to date. A soft, double-walled month card that opens on today, by the visitor's own clock. The selected day is one red square that glides to whichever date you pick, the big number above rolls a digit at a time, the month name swaps through a blur\",\"url\":\"https://www.pinui.xyz/components/calendar-card\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar\",\"item\":\"https://www.pinui.xyz/components/calendar-card\"}]}"}}]],["$","$L1a",null,{"entry":{"slug":"calendar-card","category":"cards","name":"Calendar","isNew":true,"tagline":"A month card where the selected day glides from date to date.","blurb":"A soft, double-walled month card that opens on today, by the visitor's own clock. The selected day is one red square that glides to whichever date you pick, the big number above rolls a digit at a time, the month name swaps through a blur and the bar fills to how far through the month you are. Tap the month to pick any month and year, or press the little calendar in the corner to tear a page off to the next month.","highlights":["Opens on today","Gliding selected day","Month and year picker","Tear-off month turn"],"clip":"/clips/loop/calendar-card.mp4?v=2","poster":"/clips/loop/calendar-card.jpg?v=2","hero":false,"sound":false,"zoom":1,"stage":"#f4f4f4","clipStage":"#f4f4f4","spill":true,"stageDark":"#0b0b0c","usage":"import CalendarCard from \"@/components/library/CalendarCard\";\n\n console.log(date)} />","props":[{"name":"defaultDate","type":"Date","fallback":"today","note":"The date it opens on. Left out, it is today by the visitor's clock, read on the client so it is their date in their timezone."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"A pale double-walled card, or the same card in graphite with a brighter red."},{"name":"onChange","type":"(date) => void","note":"Fired whenever the selected date changes — by a click, a key or a month turn."}],"files":[{"name":"CalendarCard.tsx","lang":"tsx"},{"name":"calendar-card.css","lang":"css"}],"info":{"paragraphs":["It opens on today. The date comes from the visitor's own clock, not the server's, so it is their day wherever they are — the card holds its footprint for the one frame before that is known, then arrives with the date already set, and nothing on the page moves. Today stays marked in red as you browse — in the grid and in the month picker. Left open past midnight, the card moves on to the new day by itself, as long as it was still sitting on the old one.","The selected day is a single red square shared through a layout id, so picking another date glides it there on a spring instead of switching a highlight off in one place and on in another; a soft grey square follows the pointer between days the same way. The big number rolls a digit at a time, the month name swaps through a blur toward the way the page turned, and the four-part bar fills to how far through the month the date falls.","Tap the month line — the month and the year — and the days give way to a picker: the year between two arrows, rolling a digit at a time as it changes, over the twelve months, where the same red square marks the one you are in. Pick a month and the days come back, turned to it. Page Up and Page Down change the year there, and Escape closes it.","The little calendar in the corner is a button. Press it and its page tears off — a red leaf flips up and away while the dots ripple back in — and the card turns to the next month, keeping the day number (clamped to the new month's length) with the grid sliding over through a blur. Right-click it to go back. The grid is a keyboard calendar too: the arrows move a day or a week, Page Up and Page Down a month, Home and End to the month's ends."]},"origin":{"label":"calendar"}},"panes":[{"name":"CalendarCard.tsx","lang":"tsx","code":"$1b"},{"name":"calendar-card.css","lang":"css","code":"$1c"}],"registryUrl":"https://www.pinui.xyz/r/calendar-card.json"}]]

Calendar — Pin UI Component