plass-ui 1.0.0 → 1.0.2

package/dist/internal/calendar.js

@@ -1,501 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { PlButton } from '../components/button/PlButton.js';
-import { ChevronIcon } from './icons.js';
-import { dateFormatter } from './format.js';
-import { addDays, addMonths, addYears, calendarWeeks, compareDay, daysInMonth, isDayOutside, isMonthBeforeYear, isSameDay, isSameMonth, isValidDate, makeDate, meridiemLabels, monthLabels, startOfDay, startOfMonth, today, weekdayLabels, withTime, YEAR_PAGE_SIZE, yearPageStart } from './date.js';
-import { controlHeightClasses, controlTextClasses, cx, gapClasses, metaTextClasses, srOnlyClasses, transitionClasses } from './styles.js';
-export const defaultPickerLabels = {
-    previousMonth: 'Previous month',
-    nextMonth: 'Next month',
-    previousYear: 'Previous year',
-    nextYear: 'Next year',
-    previousYears: 'Previous years',
-    nextYears: 'Next years',
-    chooseMonth: 'Choose a month',
-    chooseYear: 'Choose a year',
-    today: 'Today',
-    now: 'Now',
-    clear: 'Clear',
-    done: 'Done',
-    hour: 'Hour',
-    minute: 'Minute',
-    second: 'Second',
-    meridiem: 'AM/PM',
-    start: 'Start',
-    end: 'End'
-};
-/** Merges a caller's overrides over the defaults, once per render. */
-export function usePickerLabels(overrides) {
-    return React.useMemo(() => (overrides ? { ...defaultPickerLabels, ...overrides } : defaultPickerLabels), [overrides]);
-}
-/* ---------------------------------------------------------------------------
- * Scale
- * ------------------------------------------------------------------------- */
-/**
- * The width of one day cell, as a length rather than as a class.
- *
- * It goes in an inline `--p-cell` slot for the reason the design language gives
- * for every per-instance value: Tailwind only sees class names written out
- * literally, and the grid needs this number in places that are not a `size-*`
- * utility — the panel's own width (`7 × cell`), the height the three views share
- * so switching between them does not resize the popup, and the clock's columns.
- *
- * The numbers are `controlHeightClasses` as lengths: a `md` day cell is 40px,
- * which is a `md` PlButton, which is a `md` PlTextField. A calendar dropped
- * beside a form is on the form's grid.
- */
-const cellSizes = {
-    xs: '1.5rem',
-    sm: '2rem',
-    md: '2.5rem',
-    lg: '3rem',
-    xl: '3.5rem'
-};
-/** A cell's corner, one step *down* the radius ladder from the popup it sits in. */
-const cellRadiusClasses = {
-    xs: 'rounded-(--plass-radius-xs)',
-    sm: 'rounded-(--plass-radius-xs)',
-    md: 'rounded-(--plass-radius-sm)',
-    lg: 'rounded-(--plass-radius-md)',
-    xl: 'rounded-(--plass-radius-lg)'
-};
-/** The same corner on one side only, for where a range band stops. */
-const cellRadiusStartClasses = {
-    xs: 'rounded-s-(--plass-radius-xs)',
-    sm: 'rounded-s-(--plass-radius-xs)',
-    md: 'rounded-s-(--plass-radius-sm)',
-    lg: 'rounded-s-(--plass-radius-md)',
-    xl: 'rounded-s-(--plass-radius-lg)'
-};
-const cellRadiusEndClasses = {
-    xs: 'rounded-e-(--plass-radius-xs)',
-    sm: 'rounded-e-(--plass-radius-xs)',
-    md: 'rounded-e-(--plass-radius-sm)',
-    lg: 'rounded-e-(--plass-radius-md)',
-    xl: 'rounded-e-(--plass-radius-lg)'
-};
-/**
- * What every cell in every one of the three views is drawn on.
- *
- * The house transition, unchanged, and **no `transform` anywhere near it**: a
- * grid of forty-two cells that each grew a pixel under the pointer would be the
- * single worst place in the library to break that rule.
- *
- * The ring is written as the `outline` shorthand — never `outline-none`, which
- * zeroes the variable Tailwind routes the style through — and pulled *inside*
- * the cell rather than sitting outside it, because a ring drawn outside a cell
- * in a gapless grid is a ring drawn on the neighbours.
- */
-const cellBaseClasses = /* @__PURE__ */ [
-    'relative flex items-center justify-center tabular-nums select-none',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    'focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]',
-    'focus-visible:[outline-offset:-2px]'
-].join(' ');
-/**
- * One pressable square in a grid.
- *
- * The state branch is an if/else chain rather than a stack of Tailwind
- * variants, which the design language asks for by name: two utilities of equal
- * specificity resolve by their order in the generated stylesheet, and "chosen"
- * beating "inside the range" is not something a component may leave to that.
- *
- * The order is the order of importance. Unavailable first — a blocked day still
- * wearing the range's tint would be advertising that it is part of a range it
- * cannot join. Then chosen, then inside the range, then today, then the days
- * belonging to the month next door.
- *
- * A chosen cell is the family's **gradient**, which makes it the one filled
- * token in the popup: the sheet under it is undyed glass, so what a reader is
- * looking for in a grid of forty-two is the only coloured thing on it.
- */
-function Cell({ children, label, selected, inRange = false, rangeEdge = null, current = false, muted = false, disabled = false, focused = false, size, className, onClick, onPointerEnter, onKeyDown }) {
-    const stateClasses = disabled
-        ? 'cursor-not-allowed text-(--plass-muted-fg) opacity-50'
-        : selected
-            ? 'cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95'
-            : inRange
-                ? 'cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)'
-                : current
-                    ? 'cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
-                    : muted
-                        ? 'cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
-                        : 'cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)';
-    // Square through the middle of a run and rounded where the run stops, so a
-    // week of banded days reads as one shape rather than as seven tokens.
-    const shapeClasses = rangeEdge === 'start'
-        ? cellRadiusStartClasses[size]
-        : rangeEdge === 'end'
-            ? cellRadiusEndClasses[size]
-            : rangeEdge === 'middle'
-                ? 'rounded-none'
-                : cellRadiusClasses[size];
-    return (_jsxs("button", { type: "button", role: "gridcell", "aria-label": label, "aria-selected": selected, "aria-current": current ? 'date' : undefined, "aria-disabled": disabled || undefined, 
-        // Not the `disabled` attribute. A disabled button leaves the tab order and
-        // the grid's arrow-key path with it, so a reader arrowing across a month
-        // would fall into a hole at every blocked day.
-        tabIndex: focused ? 0 : -1, "data-focus-target": focused ? 'true' : undefined, className: cx(cellBaseClasses, shapeClasses, stateClasses, className), onClick: () => {
-            if (!disabled) {
-                onClick();
-            }
-        }, onPointerEnter: onPointerEnter, onKeyDown: onKeyDown, children: [children, current ? (_jsx("span", { "aria-hidden": "true", className: "absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current" })) : null] }));
-}
-/**
- * The two steppers and, between them, the way into the other two views.
- *
- * This is what the component is for. A calendar that only steps a month at a
- * time puts a birthday thirty years back a hundred and eighty clicks away, so
- * the month and the year are each a button that opens a grid of its own: two
- * clicks to any month of the year on screen, three to any year at all.
- *
- * The two buttons are printed in the order the locale writes them — `July 2026`
- * in English, `2026년 7월` in Korean. `Intl` is asked which part comes first
- * rather than being guessed at, because a header in the wrong order reads as
- * broken to exactly the readers it is wrong for.
- */
-function Header({ size, color, view, month, locale, labels, showPreviousButton, showNextButton, onStep, onViewChange }) {
-    const monthName = monthLabels(locale, 'long')[month.getMonth()];
-    const yearName = String(month.getFullYear());
-    const monthFirst = isMonthBeforeYear(locale);
-    const stepLabels = view === 'day'
-        ? [labels.previousMonth, labels.nextMonth]
-        : view === 'month'
-            ? [labels.previousYear, labels.nextYear]
-            : [labels.previousYears, labels.nextYears];
-    const stepper = (direction, shown) => shown ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", "aria-label": stepLabels[direction === -1 ? 0 : 1], onClick: () => onStep(direction), startIcon: _jsx("span", { className: cx('flex items-center', direction === -1 ? 'rotate-90 rtl:-rotate-90' : '-rotate-90 rtl:rotate-90'), children: _jsx(ChevronIcon, {}) }) })) : (_jsx("span", { "aria-hidden": "true", className: cx(controlHeightClasses[size], 'w-(--p-cell)') }));
-    const disclosure = (open) => (_jsx("span", { className: cx('flex items-center text-(--plass-muted-fg)', '[transition:rotate_var(--plass-duration)_var(--plass-ease)]', open && 'rotate-180'), children: _jsx(ChevronIcon, {}) }));
-    const monthButton = (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", "aria-label": labels.chooseMonth, "aria-expanded": view === 'month', onClick: () => onViewChange(view === 'month' ? 'day' : 'month'), endIcon: disclosure(view === 'month'), children: monthName }, "month"));
-    const yearButton = (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", className: "tabular-nums", "aria-label": labels.chooseYear, "aria-expanded": view === 'year', onClick: () => onViewChange(view === 'year' ? 'day' : 'year'), endIcon: disclosure(view === 'year'), children: yearName }, "year"));
-    const pageStart = yearPageStart(month.getFullYear());
-    return (_jsxs("div", { className: "flex items-center justify-between gap-1", children: [stepper(-1, showPreviousButton), _jsx("div", { className: cx('flex min-w-0 flex-1 items-center justify-center', gapClasses[size]), children: view === 'year' ? (_jsx("span", { className: cx('flex items-center font-semibold tabular-nums text-(--plass-fg)', controlHeightClasses[size], controlTextClasses[size]), children: `${pageStart}–${pageStart + YEAR_PAGE_SIZE - 1}` })) : view === 'month' ? (yearButton) : monthFirst ? (_jsxs(React.Fragment, { children: [monthButton, yearButton] })) : (_jsxs(React.Fragment, { children: [yearButton, monthButton] })) }), stepper(1, showNextButton)] }));
-}
-/**
- * One month, with a way to reach every other one.
- *
- * Three views on the same footprint: the days of a month, the twelve months of
- * a year, twelve years at a time. They are deliberately the same width *and*
- * the same height — the day view is seven rows counting its header, and the
- * other two stretch four rows and three rows across that same height — so
- * switching view never resizes the popup under the pointer that opened it.
- *
- * Arrow keys move by one cell, `PageUp`/`PageDown` by a month (a year with
- * Shift), `Home`/`End` to the ends of the week, and running off an edge steps
- * the calendar rather than stopping. One roving tab stop, so `Tab` leaves the
- * grid instead of walking forty-two cells — the pattern the ARIA date-picker
- * practice describes, and the reason none of the cells is a `disabled` button.
- */
-export function Calendar({ size, color, locale, weekStartsOn, month, onMonthChange, selected, rangeStart = null, rangeEnd = null, onSelect, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays = true, autoFocus = false, showPreviousButton = true, showNextButton = true, labels, className }) {
-    const [view, setView] = React.useState('day');
-    const chosen = React.useMemo(() => selected.filter(isValidDate), [selected]);
-    // The one cell that carries the tab stop. It starts on the chosen day, or on
-    // today when today is on screen, or on the 1st — never nowhere, because a grid
-    // whose tab stop is nowhere cannot be reached by a keyboard at all.
-    const [focusedDate, setFocusedDate] = React.useState(() => {
-        const preferred = chosen.find((date) => isSameMonth(date, month));
-        if (preferred) {
-            return startOfDay(preferred);
-        }
-        return isSameMonth(today(), month) ? today() : startOfMonth(month);
-    });
-    // Set only by the interactions that *move* the focus — an arrow key, a view
-    // change — so the effect below never yanks focus out from under a pointer user
-    // doing something else on the page.
-    const pendingFocus = React.useRef(autoFocus);
-    const rootRef = React.useRef(null);
-    // Following the month keeps the tab stop inside the grid the reader is looking
-    // at: stepping a month and then pressing an arrow lands somewhere sensible
-    // instead of scrolling the panel back where it came from.
-    React.useEffect(() => {
-        // The tab stop follows a prop, and the updater is a no-op unless the month
-        // actually changed — so this settles in one pass rather than cascading.
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setFocusedDate((current) => (isSameMonth(current, month) ? current : startOfMonth(month)));
-    }, [month]);
-    React.useLayoutEffect(() => {
-        if (!pendingFocus.current) {
-            return;
-        }
-        pendingFocus.current = false;
-        // `preventScroll`, because on the very first pass this runs before the popup
-        // has been positioned — it is still at the top-left of the page, and the
-        // browser's own "scroll the focused element into view" would drag the
-        // document up there with it.
-        rootRef.current
-            ?.querySelector('[data-focus-target="true"]')
-            ?.focus({ preventScroll: true });
-    });
-    const isDisabled = React.useCallback((date) => isDayOutside(date, minDate, maxDate) || (shouldDisableDate?.(date) ?? false), [minDate, maxDate, shouldDisableDate]);
-    /** Moves the tab stop, pulling the month along when it lands outside. */
-    const moveFocus = (next) => {
-        pendingFocus.current = true;
-        setFocusedDate(next);
-        if (!isSameMonth(next, month)) {
-            onMonthChange(startOfMonth(next));
-        }
-    };
-    const step = (direction) => {
-        if (view === 'day') {
-            onMonthChange(addMonths(month, direction));
-        }
-        else if (view === 'month') {
-            onMonthChange(addYears(month, direction));
-        }
-        else {
-            onMonthChange(addYears(month, direction * YEAR_PAGE_SIZE));
-        }
-    };
-    const changeView = (next) => {
-        pendingFocus.current = true;
-        setView(next);
-    };
-    /** In month and year view the header's `month` *is* the cursor. */
-    const moveCursor = (next) => {
-        pendingFocus.current = true;
-        onMonthChange(next);
-    };
-    return (_jsxs("div", { ref: rootRef, className: cx('flex flex-col', gapClasses[size], className), style: { '--p-cell': cellSizes[size] }, onPointerLeave: () => onPreviewChange?.(null), children: [_jsx(Header, { size: size, color: color, view: view, month: month, locale: locale, labels: labels, showPreviousButton: showPreviousButton, showNextButton: showNextButton, onStep: step, onViewChange: changeView }), _jsx("div", { className: "h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]", children: view === 'day' ? (_jsx(DayGrid, { size: size, locale: locale, weekStartsOn: weekStartsOn, month: month, chosen: chosen, rangeStart: rangeStart, rangeEnd: rangeEnd, focusedDate: focusedDate, showOutsideDays: showOutsideDays, isDisabled: isDisabled, onSelect: (date) => {
-                        setFocusedDate(date);
-                        onSelect(date);
-                    }, onPreviewChange: onPreviewChange, onMoveFocus: moveFocus })) : view === 'month' ? (_jsx(MonthGrid, { size: size, locale: locale, month: month, chosen: chosen, minDate: minDate, maxDate: maxDate, onMoveCursor: moveCursor, onPick: (index) => {
-                        onMonthChange(makeDate(month.getFullYear(), index, 1));
-                        changeView('day');
-                    } })) : (_jsx(YearGrid, { size: size, month: month, chosen: chosen, minDate: minDate, maxDate: maxDate, onMoveCursor: moveCursor, onPick: (year) => {
-                        onMonthChange(makeDate(year, month.getMonth(), 1));
-                        changeView('month');
-                    } })) })] }));
-}
-/* ---------------------------------------------------------------------------
- * The three grids
- * ------------------------------------------------------------------------- */
-/** The two ends of a band, smallest first, whichever way round they arrived. */
-function orderedRange(a, b) {
-    if (!isValidDate(a) || !isValidDate(b)) {
-        return null;
-    }
-    return compareDay(a, b) <= 0 ? [a, b] : [b, a];
-}
-function DayGrid({ size, locale, weekStartsOn, month, chosen, rangeStart, rangeEnd, focusedDate, showOutsideDays, isDisabled, onSelect, onPreviewChange, onMoveFocus }) {
-    const weeks = calendarWeeks(month, weekStartsOn);
-    const short = weekdayLabels(locale, weekStartsOn, 'short');
-    const long = weekdayLabels(locale, weekStartsOn, 'long');
-    const fullDate = dateFormatter(locale, { dateStyle: 'full' });
-    const band = orderedRange(rangeStart, rangeEnd);
-    const now = today();
-    const onKeyDown = (event, date) => {
-        const offsetInWeek = (date.getDay() - weekStartsOn + 7) % 7;
-        const moves = {
-            ArrowLeft: () => addDays(date, -1),
-            ArrowRight: () => addDays(date, 1),
-            ArrowUp: () => addDays(date, -7),
-            ArrowDown: () => addDays(date, 7),
-            Home: () => addDays(date, -offsetInWeek),
-            End: () => addDays(date, 6 - offsetInWeek),
-            PageUp: () => addMonths(date, event.shiftKey ? -12 : -1),
-            PageDown: () => addMonths(date, event.shiftKey ? 12 : 1)
-        };
-        const move = moves[event.key];
-        if (!move) {
-            return;
-        }
-        event.preventDefault();
-        onMoveFocus(move());
-    };
-    return (_jsxs("div", { role: "grid", className: "flex h-full flex-col", children: [_jsx("div", { role: "row", className: "grid grid-cols-7", children: short.map((label, index) => (_jsx("span", { role: "columnheader", "aria-label": long[index], className: cx('flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none', metaTextClasses[size]), children: label }, index))) }), weeks.map((week, weekIndex) => (_jsx("div", { role: "row", className: "grid grid-cols-7", children: week.map((date) => {
-                    const outside = !isSameMonth(date, month);
-                    // A hole the size of a cell rather than a missing one: the grid has
-                    // to keep its seven columns and six rows whatever month it is on.
-                    if (outside && !showOutsideDays) {
-                        return (_jsx("span", { role: "gridcell", "aria-hidden": "true", className: "size-(--p-cell)" }, date.getTime()));
-                    }
-                    const isChosen = chosen.some((entry) => isSameDay(entry, date));
-                    const within = band !== null && compareDay(date, band[0]) >= 0 && compareDay(date, band[1]) <= 0;
-                    const atStart = band !== null && within && isSameDay(date, band[0]);
-                    const atEnd = band !== null && within && isSameDay(date, band[1]);
-                    return (_jsx(Cell, { size: size, label: fullDate.format(date), selected: isChosen, inRange: within && !isChosen, rangeEdge: !within
-                            ? null
-                            : atStart && atEnd
-                                ? 'both'
-                                : atStart
-                                    ? 'start'
-                                    : atEnd
-                                        ? 'end'
-                                        : 'middle', current: isSameDay(date, now) && !isChosen, muted: outside, disabled: isDisabled(date), focused: isSameDay(date, focusedDate), className: cx('size-(--p-cell)', controlTextClasses[size]), onClick: () => onSelect(date), onPointerEnter: () => onPreviewChange?.(date), onKeyDown: (event) => onKeyDown(event, date), children: date.getDate() }, date.getTime()));
-                }) }, weekIndex)))] }));
-}
-/**
- * Twelve months, three across.
- *
- * The tab stop is the header's own month, so moving it *is* moving the header —
- * arrowing right off December lands on January of the next year and the year
- * button follows, which is one fewer thing for the reader to keep track of.
- */
-function MonthGrid({ size, locale, month, chosen, minDate, maxDate, onMoveCursor, onPick }) {
-    const short = monthLabels(locale, 'short');
-    const long = monthLabels(locale, 'long');
-    const year = month.getFullYear();
-    const now = new Date();
-    const onKeyDown = (event) => {
-        const steps = {
-            ArrowLeft: -1,
-            ArrowRight: 1,
-            ArrowUp: -3,
-            ArrowDown: 3,
-            PageUp: -12,
-            PageDown: 12
-        };
-        const step = steps[event.key];
-        if (step === undefined) {
-            return;
-        }
-        event.preventDefault();
-        onMoveCursor(addMonths(startOfMonth(month), step));
-    };
-    return (_jsx("div", { role: "grid", className: "flex h-full flex-col justify-evenly", children: [0, 1, 2, 3].map((row) => (_jsx("div", { role: "row", className: "grid grid-cols-3 gap-1", children: [0, 1, 2].map((column) => {
-                const index = row * 3 + column;
-                // A month is out of bounds only when every day in it is: the month a
-                // `minDate` falls in is still reachable, it just starts late.
-                const first = makeDate(year, index, 1);
-                const last = makeDate(year, index, daysInMonth(year, index));
-                return (_jsx(Cell, { size: size, label: `${long[index]} ${year}`, selected: chosen.some((entry) => entry.getFullYear() === year && entry.getMonth() === index), current: now.getFullYear() === year && now.getMonth() === index, disabled: (isValidDate(minDate) && compareDay(last, minDate) < 0) ||
-                        (isValidDate(maxDate) && compareDay(first, maxDate) > 0), focused: index === month.getMonth(), className: cx('h-(--p-cell) w-full', controlTextClasses[size]), onClick: () => onPick(index), onKeyDown: onKeyDown, children: short[index] }, index));
-            }) }, row))) }));
-}
-/** Twelve years, four across, and the same trick with the cursor. */
-function YearGrid({ size, month, chosen, minDate, maxDate, onMoveCursor, onPick }) {
-    const pageStart = yearPageStart(month.getFullYear());
-    const now = new Date().getFullYear();
-    const onKeyDown = (event) => {
-        const steps = {
-            ArrowLeft: -1,
-            ArrowRight: 1,
-            ArrowUp: -4,
-            ArrowDown: 4,
-            PageUp: -YEAR_PAGE_SIZE,
-            PageDown: YEAR_PAGE_SIZE
-        };
-        const step = steps[event.key];
-        if (step === undefined) {
-            return;
-        }
-        event.preventDefault();
-        onMoveCursor(addYears(startOfMonth(month), step));
-    };
-    return (_jsx("div", { role: "grid", className: "flex h-full flex-col justify-evenly", children: [0, 1, 2].map((row) => (_jsx("div", { role: "row", className: "grid grid-cols-4 gap-1", children: [0, 1, 2, 3].map((column) => {
-                const year = pageStart + row * 4 + column;
-                return (_jsx(Cell, { size: size, label: String(year), selected: chosen.some((entry) => entry.getFullYear() === year), current: year === now, disabled: (isValidDate(minDate) && year < minDate.getFullYear()) ||
-                        (isValidDate(maxDate) && year > maxDate.getFullYear()), focused: year === month.getFullYear(), className: cx('h-(--p-cell) w-full', controlTextClasses[size]), onClick: () => onPick(year), onKeyDown: onKeyDown, children: year }, year));
-            }) }, row))) }));
-}
-/**
- * Brings a row into view *inside its own column*, and nowhere else.
- *
- * `scrollIntoView` walks every scrollable ancestor up to the document, and the
- * popup this runs in has not been positioned yet when the effect fires — it is
- * still at the top-left of the page. So the browser dutifully scrolled the whole
- * document to the top to reveal a row that was about to move anyway, which is
- * the "opening a picker jumps the page" bug. Setting `scrollTop` on the column
- * cannot touch anything above it.
- */
-function revealInColumn(row) {
-    const column = row.parentElement;
-    if (!column) {
-        return;
-    }
-    // Measured rather than read off `offsetTop`, which is relative to whichever
-    // ancestor happens to be positioned and not necessarily to the column.
-    const rowBox = row.getBoundingClientRect();
-    const columnBox = column.getBoundingClientRect();
-    const top = rowBox.top - columnBox.top - column.clientTop + column.scrollTop;
-    const bottom = top + rowBox.height;
-    if (top < column.scrollTop) {
-        column.scrollTop = top;
-    }
-    else if (bottom > column.scrollTop + column.clientHeight) {
-        column.scrollTop = bottom - column.clientHeight;
-    }
-}
-/**
- * Hours, minutes and — when asked for — seconds, as columns you scroll rather
- * than as a dial you drag.
- *
- * Columns because they are the shape that answers what a time picker is actually
- * asked: "half past nine" is two glances, and "any time at all, on the hour" is
- * a column you never touch. A clock face is prettier and needs a `transform` to
- * read, which this library does not have.
- *
- * The chosen row in each column is scrolled into view once, on open. That is the
- * only imperative work here and it is not optional: a column of sixty minutes
- * that opens at `00` while the value is `45` has hidden its own answer.
- */
-export function TimeGrid({ size, density, locale, value, referenceDate, onChange, hour12, showSeconds, hourStep, minuteStep, secondStep, shouldDisableTime, autoFocus = false, labels, className }) {
-    const base = value ?? referenceDate;
-    const rootRef = React.useRef(null);
-    const [am, pm] = React.useMemo(() => meridiemLabels(locale), [locale]);
-    React.useEffect(() => {
-        const root = rootRef.current;
-        root?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn);
-        if (autoFocus) {
-            const first = root?.querySelector('[role="listbox"]');
-            (first?.querySelector('[data-chosen="true"]') ??
-                first?.querySelector('[role="option"]'))?.focus({ preventScroll: true });
-        }
-        // Once, on open. Re-running it on every change would drag a column back
-        // under the pointer that is scrolling it.
-    }, [autoFocus]);
-    const hours = React.useMemo(() => {
-        const count = Math.ceil((hour12 ? 12 : 24) / hourStep);
-        const raw = Array.from({ length: count }, (_, index) => index * hourStep);
-        // 12, 1, 2 … 11 — the order a 12-hour dial is read in, not 0…11.
-        return hour12 ? raw.map((hour) => (hour === 0 ? 12 : hour)) : raw;
-    }, [hour12, hourStep]);
-    const minutes = React.useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, index) => index * minuteStep), [minuteStep]);
-    const seconds = React.useMemo(() => Array.from({ length: Math.ceil(60 / secondStep) }, (_, index) => index * secondStep), [secondStep]);
-    /** The instant choosing this row would produce. */
-    const candidate = (unit, raw) => {
-        if (unit === 'hour') {
-            return withTime(base, {
-                hours: hour12 ? (raw % 12) + (base.getHours() >= 12 ? 12 : 0) : raw
-            });
-        }
-        if (unit === 'minute') {
-            return withTime(base, { minutes: raw });
-        }
-        if (unit === 'second') {
-            return withTime(base, { seconds: raw });
-        }
-        // `raw` is 0 for the first half of the day and 1 for the second.
-        return withTime(base, { hours: (base.getHours() % 12) + raw * 12 });
-    };
-    const pad = (raw) => String(raw).padStart(2, '0');
-    const displayHour = hour12 ? base.getHours() % 12 || 12 : base.getHours();
-    const column = (unit, name, rows, isChosen, render) => (_jsx("div", { role: "listbox", "aria-label": name, className: cx('flex flex-col gap-0.5 overflow-y-auto overscroll-contain', 
-        // The same height as the calendar beside it, so a PlDateTimePicker's
-        // popup is one rectangle rather than two of different heights.
-        'h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]', 'scroll-py-0.5 [scrollbar-width:thin]'), children: rows.map((raw) => {
-            const at = candidate(unit, raw);
-            const chosen = value !== null && isChosen(raw);
-            const disabled = shouldDisableTime?.(at, unit) ?? false;
-            return (_jsx("button", { type: "button", role: "option", "aria-selected": chosen, "aria-disabled": disabled || undefined, "data-chosen": chosen ? 'true' : undefined, className: cx(cellBaseClasses, cellRadiusClasses[size], controlHeightClasses[size], controlTextClasses[size], 'w-full shrink-0', disabled
-                    ? 'cursor-not-allowed text-(--plass-muted-fg) opacity-50'
-                    : chosen
-                        ? 'cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95'
-                        : 'cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)'), onClick: () => {
-                    if (!disabled) {
-                        onChange(at);
-                    }
-                }, children: render(raw) }, raw));
-        }) }, unit));
-    return (_jsxs("div", { ref: rootRef, className: cx('flex', density === 'compact' ? 'gap-0.5' : 'gap-1', className), style: { '--p-cell': cellSizes[size] }, children: [column('hour', labels.hour, hours, (raw) => raw === displayHour, (raw) => (hour12 ? String(raw) : pad(raw))), column('minute', labels.minute, minutes, (raw) => raw === base.getMinutes(), pad), showSeconds
-                ? column('second', labels.second, seconds, (raw) => raw === base.getSeconds(), pad)
-                : null, hour12
-                ? column('meridiem', labels.meridiem, [0, 1], (raw) => (base.getHours() >= 12 ? 1 : 0) === raw, (raw) => (raw === 0 ? am : pm))
-                : null, _jsx("span", { className: srOnlyClasses, "aria-live": "polite", children: value === null
-                    ? ''
-                    : dateFormatter(locale, {
-                        hour: 'numeric',
-                        minute: '2-digit',
-                        ...(showSeconds ? { second: '2-digit' } : {})
-                    }).format(value) })] }));
-}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as r}from"../components/button/PlButton.js";import{ChevronIcon as s}from"./icons.js";import{dateFormatter as n}from"./format.js";import{addDays as l,addMonths as a,addYears as i,calendarWeeks as c,compareDay as u,daysInMonth as d,isDayOutside as m,isMonthBeforeYear as h,isSameDay as p,isSameMonth as g,isValidDate as f,makeDate as v,meridiemLabels as x,monthLabels as b,startOfDay as y,startOfMonth as w,today as D,weekdayLabels as N,withTime as C,YEAR_PAGE_SIZE as M,yearPageStart as S}from"./date.js";import{controlHeightClasses as P,controlTextClasses as k,cx as Y,gapClasses as z,metaTextClasses as A,srOnlyClasses as F,transitionClasses as j}from"./styles.js";export const defaultPickerLabels={previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function usePickerLabels(e){return t.useMemo(()=>e?{...defaultPickerLabels,...e}:defaultPickerLabels,[e])}const E={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},H={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},R={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},T={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},B=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:t,label:r,selected:s,inRange:n=!1,rangeEdge:l=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:u=!1,size:d,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return o("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":s,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:Y(B,"start"===l?R[d]:"end"===l?T[d]:"middle"===l?"rounded-none":H[d],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":s?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":n?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[t,a?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:n,color:l,view:a,month:i,locale:c,labels:u,showPreviousButton:d,showNextButton:m,onStep:p,onViewChange:g}){const f=b(c,"long")[i.getMonth()],v=String(i.getFullYear()),x=h(c),y="day"===a?[u.previousMonth,u.nextMonth]:"month"===a?[u.previousYear,u.nextYear]:[u.previousYears,u.nextYears],stepper=(o,t)=>t?e(r,{variant:"ghost",size:n,color:l,density:"compact","aria-label":y[-1===o?0:1],onClick:()=>p(o),startIcon:e("span",{className:Y("flex items-center",-1===o?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(s,{})})}):e("span",{"aria-hidden":"true",className:Y(P[n],"w-(--p-cell)")}),disclosure=o=>e("span",{className:Y("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",o&&"rotate-180"),children:e(s,{})}),w=e(r,{variant:"ghost",size:n,color:l,density:"compact","aria-label":u.chooseMonth,"aria-expanded":"month"===a,onClick:()=>g("month"===a?"day":"month"),endIcon:disclosure("month"===a),children:f},"month"),D=e(r,{variant:"ghost",size:n,color:l,density:"compact",className:"tabular-nums","aria-label":u.chooseYear,"aria-expanded":"year"===a,onClick:()=>g("year"===a?"day":"year"),endIcon:disclosure("year"===a),children:v},"year"),N=S(i.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,d),e("div",{className:Y("flex min-w-0 flex-1 items-center justify-center",z[n]),children:"year"===a?e("span",{className:Y("flex items-center font-semibold tabular-nums text-(--plass-fg)",P[n],k[n]),children:`${N}–${N+M-1}`}):"month"===a?D:o(t.Fragment,x?{children:[w,D]}:{children:[D,w]})}),stepper(1,m)]})}export function Calendar({size:r,color:s,locale:n,weekStartsOn:l,month:c,onMonthChange:u,selected:d,rangeStart:h=null,rangeEnd:p=null,onSelect:x,onPreviewChange:b,minDate:N,maxDate:C,shouldDisableDate:S,showOutsideDays:P=!0,autoFocus:k=!1,showPreviousButton:A=!0,showNextButton:F=!0,labels:j,className:H}){const[R,T]=t.useState("day"),B=t.useMemo(()=>d.filter(f),[d]),[L,G]=t.useState(()=>{const e=B.find(e=>g(e,c));return e?y(e):g(D(),c)?D():w(c)}),K=t.useRef(k),I=t.useRef(null);t.useEffect(()=>{G(e=>g(e,c)?e:w(c))},[c]),t.useLayoutEffect(()=>{K.current&&(K.current=!1,I.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const O=t.useCallback(e=>m(e,N,C)||(S?.(e)??!1),[N,C,S]),changeView=e=>{K.current=!0,T(e)},moveCursor=e=>{K.current=!0,u(e)};return o("div",{ref:I,className:Y("flex flex-col",z[r],H),style:{"--p-cell":E[r]},onPointerLeave:()=>b?.(null),children:[e(Header,{size:r,color:s,view:R,month:c,locale:n,labels:j,showPreviousButton:A,showNextButton:F,onStep:e=>{u("day"===R?a(c,e):i(c,"month"===R?e:e*M))},onViewChange:changeView}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===R?e(DayGrid,{size:r,locale:n,weekStartsOn:l,month:c,chosen:B,rangeStart:h,rangeEnd:p,focusedDate:L,showOutsideDays:P,isDisabled:O,onSelect:e=>{G(e),x(e)},onPreviewChange:b,onMoveFocus:e=>{K.current=!0,G(e),g(e,c)||u(w(e))}}):"month"===R?e(MonthGrid,{size:r,locale:n,month:c,chosen:B,minDate:N,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{u(v(c.getFullYear(),e,1)),changeView("day")}}):e(YearGrid,{size:r,month:c,chosen:B,minDate:N,maxDate:C,onMoveCursor:moveCursor,onPick:e=>{u(v(e,c.getMonth(),1)),changeView("month")}})})]})}function DayGrid({size:t,locale:r,weekStartsOn:s,month:i,chosen:d,rangeStart:m,rangeEnd:h,focusedDate:v,showOutsideDays:x,isDisabled:b,onSelect:y,onPreviewChange:w,onMoveFocus:C}){const M=c(i,s),S=N(r,s,"short"),P=N(r,s,"long"),z=n(r,{dateStyle:"full"}),F=function orderedRange(e,o){return f(e)&&f(o)?u(e,o)<=0?[e,o]:[o,e]:null}(m,h),j=D();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,r)=>e("span",{role:"columnheader","aria-label":P[r],className:Y("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",A[t]),children:o},r))}),M.map((o,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const r=!g(o,i);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},o.getTime());const n=d.some(e=>p(e,o)),c=null!==F&&u(o,F[0])>=0&&u(o,F[1])<=0,m=null!==F&&c&&p(o,F[0]),h=null!==F&&c&&p(o,F[1]);return e(Cell,{size:t,label:z.format(o),selected:n,inRange:c&&!n,rangeEdge:c?m&&h?"both":m?"start":h?"end":"middle":null,current:p(o,j)&&!n,muted:r,disabled:b(o),focused:p(o,v),className:Y("size-(--p-cell)",k[t]),onClick:()=>y(o),onPointerEnter:()=>w?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-s+7)%7,r={ArrowLeft:()=>l(o,-1),ArrowRight:()=>l(o,1),ArrowUp:()=>l(o,-7),ArrowDown:()=>l(o,7),Home:()=>l(o,-t),End:()=>l(o,6-t),PageUp:()=>a(o,e.shiftKey?-12:-1),PageDown:()=>a(o,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),C(r()))})(e,o),children:o.getDate()},o.getTime())})},r))]})}function MonthGrid({size:o,locale:t,month:r,chosen:s,minDate:n,maxDate:l,onMoveCursor:i,onPick:c}){const m=b(t,"short"),h=b(t,"long"),p=r.getFullYear(),g=new Date,onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),i(a(w(r),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(a=>{const i=3*t+a,x=v(p,i,1),b=v(p,i,d(p,i));return e(Cell,{size:o,label:`${h[i]} ${p}`,selected:s.some(e=>e.getFullYear()===p&&e.getMonth()===i),current:g.getFullYear()===p&&g.getMonth()===i,disabled:f(n)&&u(b,n)<0||f(l)&&u(x,l)>0,focused:i===r.getMonth(),className:Y("h-(--p-cell) w-full",k[o]),onClick:()=>c(i),onKeyDown,children:m[i]},i)})},t))})}function YearGrid({size:o,month:t,chosen:r,minDate:s,maxDate:n,onMoveCursor:l,onPick:a}){const c=S(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-M,PageDown:M}[e.key];void 0!==o&&(e.preventDefault(),l(i(w(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(l=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(i=>{const d=c+4*l+i;return e(Cell,{size:o,label:String(d),selected:r.some(e=>e.getFullYear()===d),current:d===u,disabled:f(s)&&d<s.getFullYear()||f(n)&&d>n.getFullYear(),focused:d===t.getFullYear(),className:Y("h-(--p-cell) w-full",k[o]),onClick:()=>a(d),onKeyDown,children:d},d)})},l))})}function revealInColumn(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),r=o.getBoundingClientRect(),s=t.top-r.top-o.clientTop+o.scrollTop,n=s+t.height;s<o.scrollTop?o.scrollTop=s:n>o.scrollTop+o.clientHeight&&(o.scrollTop=n-o.clientHeight)}export function TimeGrid({size:r,density:s,locale:l,value:a,referenceDate:i,onChange:c,hour12:u,showSeconds:d,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:v,className:b}){const y=a??i,w=t.useRef(null),[D,N]=t.useMemo(()=>x(l),[l]);t.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const M=t.useMemo(()=>{const e=Math.ceil((u?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return u?o.map(e=>0===e?12:e):o},[u,m]),S=t.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,o)=>o*h),[h]),z=t.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,o)=>o*p),[p]),pad=e=>String(e).padStart(2,"0"),A=u?y.getHours()%12||12:y.getHours(),column=(o,t,s,n,l)=>e("div",{role:"listbox","aria-label":t,className:Y("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:s.map(t=>{const s=((e,o)=>C(y,"hour"===e?{hours:u?o%12+(y.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:y.getHours()%12+12*o}))(o,t),i=null!==a&&n(t),d=g?.(s,o)??!1;return e("button",{type:"button",role:"option","aria-selected":i,"aria-disabled":d||void 0,"data-chosen":i?"true":void 0,className:Y(B,H[r],P[r],k[r],"w-full shrink-0",d?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":i?"cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{d||c(s)},children:l(t)},t)})},o);return o("div",{ref:w,className:Y("flex","compact"===s?"gap-0.5":"gap-1",b),style:{"--p-cell":E[r]},children:[column("hour",v.hour,M,e=>e===A,e=>u?String(e):pad(e)),column("minute",v.minute,S,e=>e===y.getMinutes(),pad),d?column("second",v.second,z,e=>e===y.getSeconds(),pad):null,u?column("meridiem",v.meridiem,[0,1],e=>(y.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===a?"":n(l,{hour:"numeric",minute:"2-digit",...d?{second:"2-digit"}:{}}).format(a)})]})}