52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T36fd,'use client' import { Popover } from '@base-ui/react/popover' import { forwardRef, useEffect, useId, useRef, useState, type ButtonHTMLAttributes, type KeyboardEvent, } from 'react' import { CalendarGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@/lib/internal-glyphs' import { useLiquefyConfig, useLiquefyPortalContainer } from '@/lib/provider' import { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop' import { useLiquidGlass } from '@/hooks/use-liquid-glass' // Base UI has no calendar, so the month grid is this file's own: a roving-tabindex // grid with the key map WAI-ARIA asks for — arrows by a day and a week, Home/End // to the ends of the week, PageUp/PageDown by a month and with Shift by a year. // Base UI still owns the parts a hand-rolled picker gets wrong: the popup flips to // stay on screen, Escape closes it, and focus returns to the trigger. const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/ const pad = (value: number) => String(value).padStart(2, '0') /** Local midnight for a `yyyy-mm-dd` string, or null when it is not one. */ const parseISO = (value?: string | null): Date | null => { if (!value || !ISO_DATE.test(value)) return null const year = Number(value.slice(0, 4)) const month = Number(value.slice(5, 7)) const day = Number(value.slice(8, 10)) const date = new Date(year, month - 1, day) // `2026-02-31` builds a perfectly valid Date in March. A picker that takes one // and then shows a different day than it was handed is worse than one that // ignores it, so a date that rolled over is not a date. return date.getMonth() === month - 1 && date.getDate() === day ? date : null } /** * The day a Date falls on, read in local time. `toISOString()` answers in UTC, * which is already tomorrow through a Tokyo evening and still yesterday through a * New York one — the off-by-one every hand-rolled picker ships at least once. */ const toISO = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` const addDays = (date: Date, days: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days) /** Clamped to the end of the target month, so 31 Jan a month on is 28 Feb, not 3 Mar. */ const addMonths = (date: Date, months: number) => { const target = new Date(date.getFullYear(), date.getMonth() + months, 1) const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate() target.setDate(Math.min(date.getDate(), lastDay)) return target } /** How far into its week a date sits, once the week starts where the caller says. */ const weekIndex = (date: Date, weekStartsOn: number) => (date.getDay() - weekStartsOn + 7) % 7 /** The first day of the week the month starts in, which is where the grid begins. */ const startOfGrid = (month: Date, weekStartsOn: number) => { const first = new Date(month.getFullYear(), month.getMonth(), 1) return addDays(first, -weekIndex(first, weekStartsOn)) } /** * Six weeks from there. Always six, even when five would cover the month: a grid * that changes height re-lays the popup out under the pointer, and the next * month's arrow moves out from under the click. */ const weeksFrom = (start: Date): Date[][] => Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day))) export type LiquidDatePickerProps = Omit< ButtonHTMLAttributes, 'defaultValue' | 'onChange' | 'value' > & LiquidStyleProps & { /** Initial `yyyy-mm-dd` value when uncontrolled. */ defaultValue?: string /** How the chosen date reads on the trigger. Defaults to the ISO value itself. */ format?: (value: string) => string hint?: string label?: string /** * BCP 47 tag for the month, weekday and day names. Fixed rather than taken from * the environment so that a server and a browser format the same markup. */ locale?: string /** Latest selectable date, `yyyy-mm-dd`. */ max?: string /** Earliest selectable date, `yyyy-mm-dd`. */ min?: string /** Names a hidden input carrying the ISO value, for a plain form submit. */ name?: string nextMonthLabel?: string /** Called when the calendar opens or closes — a sheet holding the picker needs to know. */ onOpenChange?: (open: boolean) => void onValueChange?: (value: string) => void placeholder?: string previousMonthLabel?: string /** Controlled `yyyy-mm-dd` value. */ value?: string /** 0 is Sunday through 6 is Saturday. */ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 } export const LiquidDatePicker = forwardRef(({ className, defaultValue, disabled, format, hint, label, locale = 'en-US', max, min, name, nextMonthLabel = 'Next month', onOpenChange, onValueChange, placeholder = 'Select a date…', previousMonthLabel = 'Previous month', style, styles, value, weekStartsOn = 0, ...props }, forwardedRef) => { const config = useLiquefyConfig() const portalContainer = useLiquefyPortalContainer() const [glassRef, canvasRef, pulse] = useLiquidGlass(forwardedRef, { bounce: 0.05, disabled, glow: config.glow, intensity: config.intensity, lens: config.lens && config.transparency, lensStrength: config.refraction, motion: config.motion, ripple: config.ripple, shimmer: config.shimmer, sparkle: config.sparkle, tilt: 2, tint: config.tint, webgl: config.webgl, wobbliness: config.wobbliness, }) const id = useId() const captionId = `${id}-caption` const hintId = `${id}-hint` const labelId = `${id}-label` const valueId = `${id}-value` const [uncontrolled, setUncontrolled] = useState(defaultValue ?? '') const selected = value ?? uncontrolled const [open, setOpen] = useState(false) // Which day the arrow keys are standing on, and therefore which month is drawn. const [focusedISO, setFocusedISO] = useState(() => selected || toISO(new Date())) const focusedCell = useRef(null) // Set only by a key press. Clicking the month arrows must leave focus on the // arrow, or the second click of a run lands on a button that moved away. const takeFocus = useRef(false) useEffect(() => { if (!takeFocus.current) return takeFocus.current = false focusedCell.current?.focus() }, [focusedISO]) const minDate = parseISO(min) const maxDate = parseISO(max) const clamp = (date: Date) => { if (minDate && date < minDate) return minDate if (maxDate && date > maxDate) return maxDate return date } const focused = parseISO(focusedISO) ?? new Date() const todayISO = toISO(new Date()) const gridStart = startOfGrid(focused, weekStartsOn) const weeks = weeksFrom(gridStart) const monthName = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }) const dayName = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'long', weekday: 'long', year: 'numeric' }) const weekdayName = new Intl.DateTimeFormat(locale, { weekday: 'long' }) const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: 'short' }) const setOpenState = (next: boolean) => { if (next) { pulse(0.8) // Re-entering always starts from the chosen day, not wherever the arrows // were left the time before. setFocusedISO(selected || todayISO) } setOpen(next) onOpenChange?.(next) } const moveFocus = (date: Date) => { takeFocus.current = true setFocusedISO(toISO(clamp(date))) } const select = (date: Date) => { pulse(1) const iso = toISO(date) if (value === undefined) setUncontrolled(iso) onValueChange?.(iso) setOpenState(false) } const handleGridKeyDown = (event: KeyboardEvent) => { const from = parseISO(focusedISO) if (!from) return const step: Record Date> = { ArrowDown: () => addDays(from, 7), ArrowLeft: () => addDays(from, -1), ArrowRight: () => addDays(from, 1), ArrowUp: () => addDays(from, -7), End: () => addDays(from, 6 - weekIndex(from, weekStartsOn)), Home: () => addDays(from, -weekIndex(from, weekStartsOn)), PageDown: () => addMonths(from, event.shiftKey ? 12 : 1), PageUp: () => addMonths(from, event.shiftKey ? -12 : -1), } const next = step[event.key] if (!next) return // Otherwise the arrows scroll the popup and PageDown scrolls the page behind it. event.preventDefault() moveFocus(next()) } const root = useLiquidStyles('lq-date-picker', { className, style, styles }) return (

setOpenState(next)} open={open}> {label && {label}} {config.webgl &&

{/* Polite rather than silent: the arrows change the month without moving focus, and nothing else would announce it. */}

{monthName.format(focused)}

{Array.from({ length: 7 }, (_, day) => addDays(gridStart, day)).map((date) => ( {weekdayShort.format(date)} ))}

{weeks.map((week, index) => (

{week.map((date) => { const iso = toISO(date) const isSelected = iso === selected return ( ) })}

))}

{hint && {hint}} {name && }

) }) LiquidDatePicker.displayName = 'LiquidDatePicker' 51:["$","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","@base-ui/react@1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@1.8.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@liquefy-ui","registryDependencies":["https://liquefy-ui.com/r/liquefy-ui.json","https://liquefy-ui.com/r/internal-glyphs.json","https://liquefy-ui.com/r/provider.json","https://liquefy-ui.com/r/styles-prop.json","https://liquefy-ui.com/r/use-liquid-glass.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/liquid-date-picker.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]