plass-ui 0.0.1 → 1.0.0

package/dist/components/date-picker/PlDatePicker.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+import { Calendar, usePickerLabels } from '../../internal/calendar.js';
+import { CalendarIcon } from '../../internal/icons.js';
+import { PickerFooter, PickerShell } from '../../internal/picker.js';
+import { displaySamples, formatDate, isDayOutside, isValidDate, localeWeekStart, mergeDateAndTime, startOfDay, startOfMonth, toISODate, today, withPlaceholder } from '../../internal/date.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * One day, chosen from a calendar.
+ *
+ * The trigger is a `PlTextField`'s shell wearing a calendar glyph, on purpose
+ * and for the reason a `PlSelect`'s is: a form where the date field is a
+ * different height, radius or material from the fields around it is a form that
+ * looks assembled.
+ *
+ * What the calendar is actually for is the header. A picker that only steps a
+ * month at a time puts a birthday thirty years back a hundred and eighty clicks
+ * away, so the month name and the year are each a button that opens a grid of
+ * its own — twelve months, then twelve years at a time. Any month of the year on
+ * screen is two clicks; any year at all is three.
+ *
+ * There is no typing into the trigger. Parsing a date out of free text is
+ * locale-dependent in a way that cannot be done honestly without a date library,
+ * and a field that understands `27/7/26` in one browser and not in the next is
+ * worse than one that never claimed to.
+ */
+export const PlDatePicker = /* @__PURE__ */ React.forwardRef(function PlDatePicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, defaultMonth, minDate, maxDate, shouldDisableDate, locale, weekStartsOn, format = { dateStyle: 'medium' }, placeholder, clearable = false, showTodayButton = true, closeOnSelect = true, labels: labelOverrides, name, size = 'md', color = 'primary', readOnly = false, disabled = false, startIcon, ...shell }, ref) {
+    const labels = usePickerLabels(labelOverrides);
+    const firstDay = weekStartsOn ?? localeWeekStart(locale);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? null);
+    // `null` is a value a controlled picker legitimately holds — an emptied one —
+    // so the test is against `undefined` and never against falsiness.
+    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? uncontrolledOpen;
+    const [month, setMonth] = React.useState(() => startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
+    // Opening puts the calendar back on the chosen day. Without this, a picker
+    // left on 2019 while browsing stays there the next time it is opened, which
+    // reads as the control having forgotten its own value.
+    React.useEffect(() => {
+        if (open) {
+            setMonth(startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
+        }
+        // Only when the popup opens — following `value` here would drag the
+        // calendar out from under someone typing into a form elsewhere.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const setOpen = (next) => {
+        // A read-only picker does not open. What it holds is something to read, and
+        // a calendar whose every cell was inert would be a menu of nothing.
+        if (next && (readOnly || disabled)) {
+            return;
+        }
+        if (openProp === undefined) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    };
+    const commit = (next) => {
+        if (valueProp === undefined) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    };
+    const select = (date) => {
+        // The day changes; the time of day, if the value had one, does not. A
+        // picker bound to a field that also carries a time should not silently
+        // reset it to midnight every time the day is corrected.
+        const next = isValidDate(value) ? mergeDateAndTime(date, value) : startOfDay(date);
+        commit(next);
+        setMonth(startOfMonth(next));
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    };
+    const now = today();
+    const todayBlocked = isDayOutside(now, minDate, maxDate) || (shouldDisableDate?.(now) ?? false);
+    const hasFooter = showTodayButton || clearable;
+    // Holds the trigger open at the width of the longest date it could show, so
+    // choosing the 1st after the 28th does not shrink the field.
+    const samples = React.useMemo(() => withPlaceholder(displaySamples(locale, format), placeholder), [locale, format, placeholder]);
+    return (_jsx(PickerShell, { ...shell, size: size, color: color, readOnly: readOnly, disabled: disabled, triggerRef: ref, startIcon: startIcon ?? _jsx(CalendarIcon, {}), display: isValidDate(value) ? formatDate(value, locale, format) : (placeholder ?? ''), samples: samples, empty: !isValidDate(value), clearable: clearable, onClear: () => commit(null), open: open, onOpenChange: setOpen, labels: labels, hiddenValues: name ? [{ name, value: isValidDate(value) ? toISODate(value) : '' }] : undefined, children: _jsxs("div", { className: cx('flex flex-col', hasFooter && 'gap-1.5'), children: [_jsx(Calendar, { size: size, color: color, locale: locale, weekStartsOn: firstDay, month: month, onMonthChange: setMonth, selected: [value], onSelect: select, minDate: minDate, maxDate: maxDate, shouldDisableDate: shouldDisableDate, labels: labels, autoFocus: true }), hasFooter ? (_jsxs(PickerFooter, { size: size, children: [clearable ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", onClick: () => {
+                                commit(null);
+                                setOpen(false);
+                            }, children: labels.clear })) : null, showTodayButton ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", disabled: todayBlocked, onClick: () => select(now), children: labels.today })) : null] })) : null] }) }));
+});

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { PlDatePicker } from './PlDatePicker.js';
+export type { PlDatePickerProps, PlPickerLabels } from './PlDatePicker.js';

package/dist/components/date-picker/index.js

@@ -0,0 +1 @@
+export { PlDatePicker } from './PlDatePicker.js';

package/dist/components/date-range-picker/PlDateRangePicker.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { type PlassPickerLabels } from '../../internal/calendar.js';
+import { type PlassPickerShellProps } from '../../internal/picker.js';
+import type { PlassWeekday } from '../../types.js';
+/**
+ * Two ends, either of which may be missing.
+ *
+ * An object rather than a `[Date, Date]` tuple, and rather than two props. A
+ * range is one value — it is chosen in one gesture, cleared in one gesture and
+ * validated as a whole — and the two names are what stop a caller writing the
+ * end into the start. Half a range is a real state: it is what the picker holds
+ * between the first click and the second.
+ */
+export interface PlDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** A named range offered as a shortcut beside the calendars. */
+export interface PlDateRangePreset {
+    label: React.ReactNode;
+    /**
+     * The range it stands for. A function when it depends on today, which is
+     * almost always — "the last 7 days" computed at module scope is a range that
+     * would be wrong for anyone who left the tab open overnight.
+     */
+    value: PlDateRange | (() => PlDateRange);
+}
+export interface PlDateRangePickerProps extends PlassPickerShellProps {
+    /** The chosen range. Use with `onValueChange` for a controlled picker. */
+    value?: PlDateRange | null;
+    defaultValue?: PlDateRange | null;
+    /** Always called with an object. A cleared range is `{ start: null, end: null }`. */
+    onValueChange?: (value: PlDateRange) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the left calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /** Blocks individual days that are inside the range but still not available. */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, and how the trigger writes the dates. Defaults to the browser's.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: PlassWeekday;
+    /** @default { dateStyle: 'medium' } */
+    format?: Intl.DateTimeFormatOptions;
+    /**
+     * How many months are on screen at once. Two is the default because a range
+     * that crosses a month boundary is the ordinary case, not the exception.
+     * @default 2
+     */
+    monthCount?: 1 | 2;
+    /** Shown in each half of the trigger while that end is unchosen. */
+    startPlaceholder?: React.ReactNode;
+    endPlaceholder?: React.ReactNode;
+    /** Shortcuts listed beside the calendars — "Last 7 days", "This month". */
+    presets?: readonly PlDateRangePreset[];
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Closes the popup once both ends are chosen. @default true */
+    closeOnSelect?: boolean;
+    /** The strings the picker says. Every one has an English default. */
+    labels?: Partial<PlassPickerLabels>;
+    /**
+     * Identifies the field when a form is submitted. Two hidden inputs of the
+     * same name, so the two ends arrive as `FormData.getAll(name)`.
+     */
+    name?: string;
+}
+/**
+ * A span between two days.
+ *
+ * Two months side by side, because a range that crosses a month boundary is the
+ * ordinary case and a one-month picker makes it a two-step navigation problem.
+ * The two panels are one calendar in two halves: the left one has no forward
+ * stepper, the right one has no back stepper, and either header's month and year
+ * buttons move both.
+ *
+ * The band between the ends is drawn as the pointer moves, before the second
+ * click lands. That preview is the whole affordance — without it the first click
+ * has no visible consequence and the control looks broken for the second or so
+ * between the two.
+ */
+export declare const PlDateRangePicker: React.ForwardRefExoticComponent<PlDateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/date-range-picker/PlDateRangePicker.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+import { Calendar, usePickerLabels } from '../../internal/calendar.js';
+import { ArrowRightIcon, CalendarIcon } from '../../internal/icons.js';
+import { PickerFooter, PickerShell } from '../../internal/picker.js';
+import { WidthSizer } from '../../internal/sizer.js';
+import { addMonths, compareDay, displaySamples, formatDate, isValidDate, localeWeekStart, startOfDay, startOfMonth, toISODate, today, withPlaceholder } from '../../internal/date.js';
+import { cx, gapClasses, metaTextClasses } from '../../internal/styles.js';
+const EMPTY = { start: null, end: null };
+/**
+ * A span between two days.
+ *
+ * Two months side by side, because a range that crosses a month boundary is the
+ * ordinary case and a one-month picker makes it a two-step navigation problem.
+ * The two panels are one calendar in two halves: the left one has no forward
+ * stepper, the right one has no back stepper, and either header's month and year
+ * buttons move both.
+ *
+ * The band between the ends is drawn as the pointer moves, before the second
+ * click lands. That preview is the whole affordance — without it the first click
+ * has no visible consequence and the control looks broken for the second or so
+ * between the two.
+ */
+export const PlDateRangePicker = /* @__PURE__ */ React.forwardRef(function PlDateRangePicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, defaultMonth, minDate, maxDate, shouldDisableDate, locale, weekStartsOn, format = { dateStyle: 'medium' }, monthCount = 2, startPlaceholder, endPlaceholder, presets, clearable = false, closeOnSelect = true, labels: labelOverrides, name, size = 'md', color = 'primary', readOnly = false, disabled = false, startIcon, ...shell }, ref) {
+    const labels = usePickerLabels(labelOverrides);
+    const firstDay = weekStartsOn ?? localeWeekStart(locale);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? EMPTY);
+    const value = valueProp !== undefined ? (valueProp ?? EMPTY) : uncontrolledValue;
+    const start = isValidDate(value.start) ? value.start : null;
+    const end = isValidDate(value.end) ? value.end : null;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? uncontrolledOpen;
+    // The first of the two clicks. Held here rather than in `value` so a
+    // controlled caller is never handed a range with only one end — half a
+    // selection is this component's business, not the form's.
+    const [anchor, setAnchor] = React.useState(null);
+    const [preview, setPreview] = React.useState(null);
+    const [month, setMonth] = React.useState(() => startOfMonth(start ?? defaultMonth ?? today()));
+    React.useEffect(() => {
+        if (open) {
+            setMonth(startOfMonth(start ?? defaultMonth ?? today()));
+        }
+        else {
+            // An abandoned half-selection does not survive the popup closing.
+            setAnchor(null);
+            setPreview(null);
+        }
+        // Only when the popup opens — following `start` here would drag the calendar
+        // out from under someone typing into a form elsewhere.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const setOpen = (next) => {
+        if (next && (readOnly || disabled)) {
+            return;
+        }
+        if (openProp === undefined) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    };
+    const commit = (next) => {
+        if (valueProp === undefined) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    };
+    const select = (date) => {
+        const day = startOfDay(date);
+        // The first click of a new selection — either there is no anchor, or the
+        // range is already complete and this click starts over.
+        if (anchor === null) {
+            setAnchor(day);
+            setPreview(day);
+            commit({ start: day, end: null });
+            return;
+        }
+        // The second. Clicking backwards is not a mistake to be rejected, it is the
+        // same range typed in the other order.
+        const [from, to] = compareDay(day, anchor) < 0 ? [day, anchor] : [anchor, day];
+        setAnchor(null);
+        setPreview(null);
+        commit({ start: from, end: to });
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    };
+    const applyPreset = (preset) => {
+        const range = typeof preset.value === 'function' ? preset.value() : preset.value;
+        setAnchor(null);
+        setPreview(null);
+        commit(range);
+        if (isValidDate(range.start)) {
+            setMonth(startOfMonth(range.start));
+        }
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    };
+    // What the band is drawn between: the finished range, or the anchor and
+    // whatever the pointer is currently over.
+    const bandStart = anchor ?? start;
+    const bandEnd = anchor !== null ? preview : end;
+    const write = (date, fallback) => isValidDate(date) ? (formatDate(date, locale, format)) : (_jsx("span", { className: "text-(--plass-muted-fg)", children: fallback ?? '' }));
+    const secondMonth = addMonths(month, 1);
+    const twoUp = monthCount === 2;
+    // Every date either half could show, so neither end of the trigger changes
+    // width as the range is filled in.
+    const dateSamples = React.useMemo(() => displaySamples(locale, format), [locale, format]);
+    // Which end the next click will fill. The trigger says the same thing with its
+    // two halves, but the trigger is behind the popup while the popup is up, so
+    // the footer is the only place that can say it where it will be read.
+    const hint = anchor !== null ? labels.end : start === null ? labels.start : null;
+    const calendarProps = {
+        size,
+        color,
+        locale,
+        weekStartsOn: firstDay,
+        selected: [start, end, anchor],
+        rangeStart: bandStart,
+        rangeEnd: bandEnd,
+        onSelect: select,
+        onPreviewChange: (date) => {
+            if (anchor !== null) {
+                setPreview(date ?? anchor);
+            }
+        },
+        minDate,
+        maxDate,
+        shouldDisableDate,
+        // With both panels showing six full weeks, the 1st of August is a trailing
+        // day of the July panel *and* the first day of the August one. Two cells
+        // with the same name in one popup is ambiguous to a pointer and outright
+        // broken to a screen reader.
+        showOutsideDays: false,
+        labels
+    };
+    return (_jsx(PickerShell, { ...shell, size: size, color: color, readOnly: readOnly, disabled: disabled, triggerRef: ref, startIcon: startIcon ?? _jsx(CalendarIcon, {}), display: _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: write(start, startPlaceholder) }), _jsx(WidthSizer, { samples: withPlaceholder(dateSamples, startPlaceholder) })] }), _jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center text-(--plass-muted-fg) rtl:rotate-180", children: _jsx(ArrowRightIcon, {}) }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: write(end, endPlaceholder) }), _jsx(WidthSizer, { samples: withPlaceholder(dateSamples, endPlaceholder) })] })] }), empty: start === null && end === null, clearable: clearable, onClear: () => commit(EMPTY), open: open, onOpenChange: setOpen, labels: labels, hiddenValues: name
+            ? [
+                { name, value: start ? toISODate(start) : '' },
+                { name, value: end ? toISODate(end) : '' }
+            ]
+            : undefined, children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: cx('flex items-stretch', gapClasses[size]), children: [presets && presets.length > 0 ? (_jsx("div", { className: cx('flex max-h-[calc(var(--p-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5', '[border-color:var(--plass-divider)]'), children: presets.map((preset, index) => (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", className: "justify-start whitespace-nowrap", onClick: () => applyPreset(preset), children: preset.label }, index))) })) : null, _jsx(Calendar, { ...calendarProps, month: month, onMonthChange: setMonth, showNextButton: !twoUp, autoFocus: true }), twoUp ? (_jsx(Calendar, { ...calendarProps, month: secondMonth, 
+                            // The right panel is a month ahead, so moving it means moving the
+                            // pair. Both headers drive one number.
+                            onMonthChange: (next) => setMonth(addMonths(next, -1)), showPreviousButton: false })) : null] }), clearable || hint !== null ? (_jsxs(PickerFooter, { size: size, children: [hint !== null ? (_jsx("span", { className: cx('me-auto text-(--plass-muted-fg)', metaTextClasses[size]), children: hint })) : null, clearable ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", onClick: () => {
+                                setAnchor(null);
+                                setPreview(null);
+                                commit(EMPTY);
+                                setOpen(false);
+                            }, children: labels.clear })) : null] })) : null] }) }));
+});

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { PlDateRangePicker } from './PlDateRangePicker.js';
+export type { PlDateRange, PlDateRangePickerProps, PlDateRangePreset } from './PlDateRangePicker.js';

package/dist/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { PlDateRangePicker } from './PlDateRangePicker.js';

package/dist/components/date-time-picker/PlDateTimePicker.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type PlassPickerLabels } from '../../internal/calendar.js';
+import { type PlassPickerShellProps } from '../../internal/picker.js';
+import { type TimeUnit } from '../../internal/date.js';
+import type { PlassWeekday } from '../../types.js';
+export interface PlDateTimePickerProps extends PlassPickerShellProps {
+    /** The chosen moment. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. */
+    defaultMonth?: Date;
+    /**
+     * The earliest moment that may be chosen. Unlike a `PlDatePicker`'s, this one
+     * is read at full precision: the day it falls on stays available and the clock
+     * columns block the hours before it.
+     */
+    minDate?: Date | null;
+    /** The latest moment that may be chosen, likewise at full precision. */
+    maxDate?: Date | null;
+    shouldDisableDate?: (date: Date) => boolean;
+    shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
+    /**
+     * BCP 47 tag deciding the month and weekday names, whether the clock is on a
+     * 12-hour dial, and how the trigger writes the moment.
+     */
+    locale?: string;
+    weekStartsOn?: PlassWeekday;
+    /**
+     * How the trigger writes the chosen moment. Passed straight to `Intl`.
+     * @default { dateStyle: 'medium', timeStyle: 'short' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
+    hour12?: boolean;
+    showSeconds?: boolean;
+    hourStep?: number;
+    minuteStep?: number;
+    secondStep?: number;
+    placeholder?: React.ReactNode;
+    clearable?: boolean;
+    /** Offers the shortcut to this moment in the footer. @default true */
+    showNowButton?: boolean;
+    /**
+     * Closes the popup as soon as a day is chosen. `false` here and `true` on a
+     * `PlDatePicker`, because a moment is a day *and* a time and closing on the
+     * first of the two would leave the second unanswered.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    /** The strings the picker says. Every one has an English default. */
+    labels?: Partial<PlassPickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DDTHH:MM`. */
+    name?: string;
+}
+/**
+ * A day and a time, in one popup.
+ *
+ * Not a date picker that grew a clock and not a time picker that grew a
+ * calendar: the two panels sit side by side at exactly the same height — seven
+ * rows of cells each, which is why the calendar's grid and the clock's columns
+ * share the `--p-cell` ladder — so the popup is one rectangle rather than two of
+ * different sizes pushed together.
+ *
+ * The bounds do more work here than anywhere else. `minDate` is read at **full
+ * precision**, so a minimum of 09:30 on the 27th leaves the 27th selectable in
+ * the calendar and greys out the morning in the clock. That is the behaviour a
+ * "not before now" rule needs, and it is the one a day-granular check cannot
+ * give.
+ */
+export declare const PlDateTimePicker: React.ForwardRefExoticComponent<PlDateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/date-time-picker/PlDateTimePicker.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+import { Calendar, TimeGrid, usePickerLabels } from '../../internal/calendar.js';
+import { CalendarIcon } from '../../internal/icons.js';
+import { PickerDivider, PickerFooter, PickerShell } from '../../internal/picker.js';
+import { displaySamples, formatDate, isDayOutside, isHour12, isValidDate, localeWeekStart, mergeDateAndTime, startOfDay, startOfMonth, timeUnitSpan, toISODateTime, today, withPlaceholder, withTime } from '../../internal/date.js';
+import { cx, gapClasses } from '../../internal/styles.js';
+/**
+ * A day and a time, in one popup.
+ *
+ * Not a date picker that grew a clock and not a time picker that grew a
+ * calendar: the two panels sit side by side at exactly the same height — seven
+ * rows of cells each, which is why the calendar's grid and the clock's columns
+ * share the `--p-cell` ladder — so the popup is one rectangle rather than two of
+ * different sizes pushed together.
+ *
+ * The bounds do more work here than anywhere else. `minDate` is read at **full
+ * precision**, so a minimum of 09:30 on the 27th leaves the 27th selectable in
+ * the calendar and greys out the morning in the clock. That is the behaviour a
+ * "not before now" rule needs, and it is the one a day-granular check cannot
+ * give.
+ */
+export const PlDateTimePicker = /* @__PURE__ */ React.forwardRef(function PlDateTimePicker({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, defaultMonth, minDate, maxDate, shouldDisableDate, shouldDisableTime, locale, weekStartsOn, format = { dateStyle: 'medium', timeStyle: 'short' }, hour12: hour12Prop, showSeconds = false, hourStep = 1, minuteStep = 1, secondStep = 1, placeholder, clearable = false, showNowButton = true, closeOnSelect = false, labels: labelOverrides, name, size = 'md', color = 'primary', density = 'default', readOnly = false, disabled = false, startIcon, ...shell }, ref) {
+    const labels = usePickerLabels(labelOverrides);
+    const firstDay = weekStartsOn ?? localeWeekStart(locale);
+    const hour12 = hour12Prop ?? isHour12(locale);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? null);
+    const value = valueProp !== undefined ? valueProp : uncontrolledValue;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? uncontrolledOpen;
+    const [month, setMonth] = React.useState(() => startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
+    React.useEffect(() => {
+        if (open) {
+            setMonth(startOfMonth(isValidDate(value) ? value : (defaultMonth ?? today())));
+        }
+        // Only when the popup opens — following `value` here would drag the calendar
+        // out from under someone typing into a form elsewhere.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const setOpen = (next) => {
+        if (next && (readOnly || disabled)) {
+            return;
+        }
+        if (openProp === undefined) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    };
+    const commit = (next) => {
+        if (valueProp === undefined) {
+            setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+    };
+    /**
+     * Blocks a clock row whose whole span falls outside the bounds — the same span
+     * test a `PlTimePicker` makes, moved onto the absolute timeline so the check
+     * knows which day the columns are writing into.
+     */
+    const isTimeBlocked = React.useCallback((candidate, unit) => {
+        const [from, to] = timeUnitSpan(unit, candidate);
+        const midnight = startOfDay(candidate).getTime();
+        if (isValidDate(minDate) && midnight + to * 1000 < minDate.getTime()) {
+            return true;
+        }
+        if (isValidDate(maxDate) && midnight + from * 1000 > maxDate.getTime()) {
+            return true;
+        }
+        return shouldDisableTime?.(candidate, unit) ?? false;
+    }, [minDate, maxDate, shouldDisableTime]);
+    const selectDay = (date) => {
+        // The day changes, the clock does not. A picker that reset the time to
+        // midnight every time the date was corrected would make choosing a moment an
+        // ordered task, and nobody reads a popup in the order it was written.
+        const next = isValidDate(value) ? mergeDateAndTime(date, value) : startOfDay(date);
+        commit(next);
+        setMonth(startOfMonth(next));
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    };
+    const nowMoment = new Date();
+    const nowValue = withTime(nowMoment, { seconds: showSeconds ? nowMoment.getSeconds() : 0 });
+    const nowBlocked = isDayOutside(nowValue, minDate, maxDate) ||
+        (shouldDisableDate?.(nowValue) ?? false) ||
+        isTimeBlocked(nowValue, 'second');
+    // Holds the trigger open at the width of the longest moment it could show, so
+    // choosing an earlier one does not shrink the field.
+    const samples = React.useMemo(() => withPlaceholder(displaySamples(locale, format), placeholder), [locale, format, placeholder]);
+    return (_jsx(PickerShell, { ...shell, size: size, color: color, density: density, readOnly: readOnly, disabled: disabled, triggerRef: ref, 
+        // The calendar glyph alone, not both: a control cannot say two things at
+        // once, and the date is the part a reader scans for.
+        startIcon: startIcon ?? _jsx(CalendarIcon, {}), display: isValidDate(value) ? formatDate(value, locale, format) : (placeholder ?? ''), samples: samples, empty: !isValidDate(value), clearable: clearable, onClear: () => commit(null), open: open, onOpenChange: setOpen, labels: labels, hiddenValues: name
+            ? [{ name, value: isValidDate(value) ? toISODateTime(value, showSeconds) : '' }]
+            : undefined, children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: cx('flex items-stretch', gapClasses[size]), children: [_jsx(Calendar, { size: size, color: color, locale: locale, weekStartsOn: firstDay, month: month, onMonthChange: setMonth, selected: [value], onSelect: selectDay, minDate: minDate, maxDate: maxDate, shouldDisableDate: shouldDisableDate, labels: labels, autoFocus: true }), _jsx(PickerDivider, {}), _jsx(TimeGrid, { size: size, density: density, locale: locale, value: isValidDate(value) ? value : null, 
+                            // With no day chosen yet the clock writes onto today, and picking a
+                            // day afterwards keeps whatever time was set.
+                            referenceDate: isValidDate(value) ? value : today(), onChange: commit, hour12: hour12, showSeconds: showSeconds, hourStep: hourStep, minuteStep: minuteStep, secondStep: secondStep, shouldDisableTime: isTimeBlocked, labels: labels })] }), _jsxs(PickerFooter, { size: size, children: [clearable ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", onClick: () => {
+                                commit(null);
+                                setOpen(false);
+                            }, children: labels.clear })) : null, showNowButton ? (_jsx(PlButton, { variant: "ghost", size: size, color: color, density: "compact", disabled: nowBlocked, onClick: () => {
+                                commit(nowValue);
+                                setMonth(startOfMonth(nowValue));
+                            }, children: labels.now })) : null, _jsx(PlButton, { variant: "solid", size: size, color: color, density: "compact", onClick: () => setOpen(false), children: labels.done })] })] }) }));
+});

package/dist/components/date-time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { PlDateTimePicker } from './PlDateTimePicker.js';
+export type { PlDateTimePickerProps } from './PlDateTimePicker.js';

package/dist/components/date-time-picker/index.js

@@ -0,0 +1 @@
+export { PlDateTimePicker } from './PlDateTimePicker.js';

package/dist/components/divider/PlDivider.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+/** Where the label sits along a labelled divider. Ignored without a label. */
+export type PlDividerTextAlign = PlassAlign;
+export interface PlDividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * Which way the line runs. A vertical divider has no height of its own — it
+     * stretches to its flex parent, which is what a rule between two toolbar
+     * groups should do.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Semantic colour role, and — like `PlTextLink`'s — it has **no default**.
+     *
+     * Left out, the rule is the neutral hairline, which is the one that is
+     * visible on every ground the library has: a page wash, a glass sheet, a
+     * card. The sheet's own white hairline is white light on a translucent pane
+     * and disappears the moment a divider is set on something opaque, which is
+     * the same reason a checkbox's edge is drawn in the neutral one.
+     *
+     * Passing a family tints the rule instead, at the strength a hairline takes
+     * everywhere else in the library.
+     */
+    color?: PlassColor;
+    /** Type scale of the label. Nothing else on a divider has a size. */
+    size?: PlassSize;
+    /**
+     * How far the rule runs — the width of a horizontal divider, the height of a
+     * vertical one. A number is pixels; a string is any CSS length, so `'50%'`
+     * and `'12rem'` both work.
+     *
+     * `length` rather than `width`, because a divider is the one component whose
+     * long axis turns with `orientation`: a `width` that meant height half the
+     * time would be a worse name than a longer one.
+     *
+     * Left out, a horizontal divider is the full width of its container and a
+     * vertical one stretches to the height of the flex row it is in.
+     */
+    length?: number | string;
+    /**
+     * How thick the rule is. A number is pixels; a string is any CSS length.
+     * @default 1
+     */
+    thickness?: number | string;
+    /** A label set into the line — "OR" between two sign-in options. */
+    children?: React.ReactNode;
+    /**
+     * Where the label sits. `center` splits the line in half; `start` and `end`
+     * leave a short stub on the near side, so the label still reads as set *into*
+     * the rule rather than floating above it.
+     * @default 'center'
+     */
+    textAlign?: PlDividerTextAlign;
+}
+/**
+ * A rule between two things.
+ *
+ * With no children it is Base UI's `Separator` and nothing else — a real
+ * `role="separator"` with the right `aria-orientation`. With children the line
+ * breaks around the label.
+ *
+ * `separator` is not a name-from-content role, so a visible label does *not*
+ * become the accessible name on its own: a screen reader would announce a bare
+ * "separator" and read the word "OR" as loose text somewhere nearby. A string
+ * label is therefore copied into `aria-label`. Anything richer is left alone —
+ * only the caller knows which part of it is the name.
+ *
+ * There is no `variant` and no `elevation`, because a divider is not a surface.
+ * It is not made of glass, catches no light and casts no shadow — it is the
+ * absence of a surface, drawn.
+ */
+export declare const PlDivider: React.ForwardRefExoticComponent<PlDividerProps & React.RefAttributes<HTMLDivElement>>;