weekStartsOn1 (Monday)
0–6First column of the calendar (0 = Sunday).
locale"en-US"
stringMonth, weekday and date formats through Intl. Typed dates also accept that locale's month names.
timeZonethe browser's
string (IANA)Named in the footer ("All dates in Europe/Berlin · days end at midnight") and used to read today.
labelsdefaultGlassDateRangeLabels
Partial<GlassDateRangeLabels>All interface copy (Apply, Compare, errors, the footer note…), for translation. labels.presetLabels renames presets by id without redeclaring them: { "7d": { label: "Últimos 7 días", chip: "7D" } } (label, chip, hint).
formatRangeformatDateRange
(range, { locale }) => stringTrigger, summary and aria text for a range.
formatDateformatDateOnly
(day, { locale, year }) => stringA single date: error messages and single-day preset hints.
formatWeekday / formatMonthformatGlassDateRangeWeekday / formatGlassDateRangeMonth
(weekday 0–6 | month 1–12, { locale }) => stringCalendar column headers and month rail tiles. The defaults give "MO" / "JAN" in English and each locale's own short name in capitals elsewhere ("MIÉ", "FÉVR"), never cut.
trigger–
(api) => ReactNodeYour own trigger. Spread api.props on your button so the popover anchors to it; api has open, toggle, range, label, compareLabel, chip.
inlinefalse
booleanThe panel in place, always open, no trigger or popover. Under 680px wide it stacks: presets in a row, one month.
blockfalse
booleanThe trigger fills its container's width.
align / side"end" / "auto"
"start" | "end" / "auto" | "bottom" | "top"Popover edge and side. It stays 16px inside the viewport and flips above when there's more room.
portaltrue
booleanRender the popover into document.body so no parent clips it. false positions it inside the component, kept inside the nearest clipping or scrolling ancestor; when that leaves less than breakpoint px it stacks to one month.
zIndexvar(--glass-z-popover, 60)
numberStacking order of the popover and sheet (the scrim sits one below). Raise it above your modals and toasts, or set --glass-z-popover in CSS.
panelClassName / panelStyle–
string / CSSPropertiesClass and style on the popover / sheet overlay, which portals out of the root so className and style don't reach it. Inline: on the panel.
accent#8B93FF / #6B74F5
string | { dark; light }The accent (range fill, focus ring, chips, month tiles). The same as setting --glass-accent.
triggerRef–
Ref<HTMLElement>The trigger button (or your custom trigger's element), for focus management from forms. ref is the root.
autoApplyfalse
booleanApply every complete change at once. The popover shows Done instead of Cancel / Apply; inline shows no buttons.
onDraftChange–
({ range | null, preset, compare }) => voidEvery change to the unapplied draft, for live previews (range is null while picking the end).
isDateDisabled–
(day: DateOnly) => booleanDays that can't start or end a range (weekends, holidays), besides minDate / maxDate. Keyboard focus steps over them.
maxLength–
numberThe longest range in days: while picking, days beyond it are disabled; typed ranges beyond it show an error.
parseDateparseDateInput
(text, { today, locale }) => DateOnly | nullYour own parser for the date fields.
name–
stringForm integration: submits hidden `${name}_start` and `${name}_end` ("YYYY-MM-DD") and `${name}_compare`.
disabledfalse
booleanDisables the trigger (and an inline panel).
portalContainerdocument.body
HTMLElement | nullWhere the popover portals to (a modal, a shadow root). A "system" theme follows the trigger's resolved theme.
autoFocustrue
booleanMove focus into the calendar when the popover opens.
layout"auto"
"auto" | "desktop" | "mobile"auto uses the bottom sheet (drag down to dismiss) below a sheetBreakpoint viewport, and one stacked month when the panel has less than breakpoint px.
breakpoint / sheetBreakpoint680 / 700
number / numberbreakpoint: the panel width (inline: its own; portal={false}: its container's) under which it stacks to one month. sheetBreakpoint: the viewport width under which the popover becomes a bottom sheet.
motion"full"
"full" | "subtle" | "off"full: the designed motion. subtle: calm curve, shorter, no ripple delays. off: instant. prefers-reduced-motion is always respected.
soundtrue
boolean | "subtle"true plays Lumen cues when a GlassSoundProvider enables sound; false silences this instance; "subtle" plays at 55%. Without a provider nothing plays and the audio engine never loads.
theme"system"
"system" | "dark" | "light"system follows a .dark / .light class or data-theme on an ancestor, else the OS.
className / style / ref / id–
string / CSSProperties / Ref<HTMLDivElement> / stringApplied to the root element (the trigger wrapper, or the inline panel's wrapper). The panel gets id `${id}-panel`.
...rest–
HTML attributesdata-*, aria-* (aria-describedby…), role and handlers pass through to the root; unknown props are dropped.
CSS variables#8B93FF / #6B74F5, #FFB547 / #F2981C, 60
--glass-accent, --glass-warn (+ -dark / -light), --glass-z-popoverSet on the root or any ancestor to re-brand without props: --glass-accent drives every range, focus and chip tint; --glass-warn the comparison amber. They are copied onto the portaled popover while it is open.
