plass-ui 1.0.0 → 1.0.2

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

@@ -1,87 +1 @@
-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] }) }));
-});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{PlButton as t}from"../button/PlButton.js";import{Calendar as o,usePickerLabels as n}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as d,isDayOutside as m,isValidDate as u,localeWeekStart as p,mergeDateAndTime as f,startOfDay as h,startOfMonth as b,toISODate as y,today as D,withPlaceholder as g}from"../../internal/date.js";import{cx as j}from"../../internal/styles.js";export const PlDatePicker=/* @__PURE__ */l.forwardRef(function PlDatePicker({value:v,defaultValue:x,onValueChange:O,open:S,defaultOpen:k,onOpenChange:C,defaultMonth:z,minDate:P,maxDate:w,shouldDisableDate:M,locale:V,weekStartsOn:B,format:I={dateStyle:"medium"},placeholder:R,clearable:E=!1,showTodayButton:F=!0,closeOnSelect:N=!0,labels:T,name:q,size:A="md",color:G="primary",readOnly:H=!1,disabled:J=!1,startIcon:K,...L},Q){const U=n(T),W=B??p(V),[X,Y]=l.useState(x??null),Z=void 0!==v?v:X,[$,_]=l.useState(k??!1),ee=S??$,[ae,le]=l.useState(()=>b(u(Z)?Z:z??D()));l.useEffect(()=>{ee&&le(b(u(Z)?Z:z??D()))},[ee]);const setOpen=e=>{e&&(H||J)||(void 0===S&&_(e),C?.(e))},commit=e=>{void 0===v&&Y(e),O?.(e)},select=e=>{const a=u(Z)?f(e,Z):h(e);commit(a),le(b(a)),N&&setOpen(!1)},te=D(),oe=m(te,P,w)||(M?.(te)??!1),ne=F||E,re=l.useMemo(()=>g(c(V,I),R),[V,I,R]);return e(i,{...L,size:A,color:G,readOnly:H,disabled:J,triggerRef:Q,startIcon:K??e(r,{}),display:u(Z)?d(Z,V,I):R??"",samples:re,empty:!u(Z),clearable:E,onClear:()=>commit(null),open:ee,onOpenChange:setOpen,labels:U,hiddenValues:q?[{name:q,value:u(Z)?y(Z):""}]:void 0,children:a("div",{className:j("flex flex-col",ne&&"gap-1.5"),children:[e(o,{size:A,color:G,locale:V,weekStartsOn:W,month:ae,onMonthChange:le,selected:[Z],onSelect:select,minDate:P,maxDate:w,shouldDisableDate:M,labels:U,autoFocus:!0}),ne?a(s,{size:A,children:[E?e(t,{variant:"ghost",size:A,color:G,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:U.clear}):null,F?e(t,{variant:"ghost",size:A,color:G,density:"compact",disabled:oe,onClick:()=>select(te),children:U.today}):null]}):null]})})});

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

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

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

@@ -1,152 +1 @@
-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] }) }));
-});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlButton as n}from"../button/PlButton.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as d,compareDay as m,displaySamples as p,formatDate as h,isValidDate as f,localeWeekStart as v,startOfDay as x,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as D}from"../../internal/styles.js";const S={start:null,end:null};export const PlDateRangePicker=/* @__PURE__ */a.forwardRef(function PlDateRangePicker({value:C,defaultValue:O,onValueChange:P,open:k,defaultOpen:z,onOpenChange:M,defaultMonth:R,minDate:B,maxDate:V,shouldDisableDate:E,locale:I,weekStartsOn:F,format:q={dateStyle:"medium"},monthCount:A=2,startPlaceholder:G,endPlaceholder:H,presets:J,clearable:K=!1,closeOnSelect:L=!0,labels:Q,name:T,size:U="md",color:W="primary",readOnly:X=!1,disabled:Y=!1,startIcon:Z,...$},_){const ee=s(Q),le=F??v(I),[ae,ne]=a.useState(O??S),te=void 0!==C?C??S:ae,se=f(te.start)?te.start:null,re=f(te.end)?te.end:null,[oe,ie]=a.useState(z??!1),ce=k??oe,[ue,de]=a.useState(null),[me,pe]=a.useState(null),[he,fe]=a.useState(()=>g(se??R??w()));a.useEffect(()=>{ce?fe(g(se??R??w())):(de(null),pe(null))},[ce]);const setOpen=e=>{e&&(X||Y)||(void 0===k&&ie(e),M?.(e))},commit=e=>{void 0===C&&ne(e),P?.(e)},ve=ue??se,xe=null!==ue?me:re,write=(l,a)=>f(l)?h(l,I,q):e("span",{className:"text-(--plass-muted-fg)",children:a??""}),ge=d(he,1),be=2===A,we=a.useMemo(()=>p(I,q),[I,q]),ye=null!==ue?ee.end:null===se?ee.start:null,Ne={size:U,color:W,locale:I,weekStartsOn:le,selected:[se,re,ue],rangeStart:ve,rangeEnd:xe,onSelect:e=>{const l=x(e);if(null===ue)return de(l),pe(l),void commit({start:l,end:null});const[a,n]=m(l,ue)<0?[l,ue]:[ue,l];de(null),pe(null),commit({start:a,end:n}),L&&setOpen(!1)},onPreviewChange:e=>{null!==ue&&pe(e??ue)},minDate:B,maxDate:V,shouldDisableDate:E,showOutsideDays:!1,labels:ee};return e(c,{...$,size:U,color:W,readOnly:X,disabled:Y,triggerRef:_,startIcon:Z??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(se,G)}),e(u,{samples:y(we,G)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:write(re,H)}),e(u,{samples:y(we,H)})]})]}),empty:null===se&&null===re,clearable:K,onClear:()=>commit(S),open:ce,onOpenChange:setOpen,labels:ee,hiddenValues:T?[{name:T,value:se?b(se):""},{name:T,value:re?b(re):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[U]),children:[J&&J.length>0?e("div",{className:N("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:J.map((l,a)=>e(n,{variant:"ghost",size:U,color:W,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;de(null),pe(null),commit(l),f(l.start)&&fe(g(l.start)),L&&setOpen(!1)})(l),children:l.label},a))}):null,e(t,{...Ne,month:he,onMonthChange:fe,showNextButton:!be,autoFocus:!0}),be?e(t,{...Ne,month:ge,onMonthChange:e=>fe(d(e,-1)),showPreviousButton:!1}):null]}),K||null!==ye?l(i,{size:U,children:[null!==ye?e("span",{className:N("me-auto text-(--plass-muted-fg)",D[U]),children:ye}):null,K?e(n,{variant:"ghost",size:U,color:W,density:"compact",onClick:()=>{de(null),pe(null),commit(S),setOpen(!1)},children:ee.clear}):null]}):null]})})});

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

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

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

@@ -1,106 +1 @@
-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 })] })] }) }));
-});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{PlButton as o}from"../button/PlButton.js";import{Calendar as n,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as h,isHour12 as p,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as g,startOfMonth as y,timeUnitSpan as D,toISODateTime as v,today as C,withPlaceholder as j,withTime as k}from"../../internal/date.js";import{cx as w,gapClasses as x}from"../../internal/styles.js";export const PlDateTimePicker=/* @__PURE__ */l.forwardRef(function PlDateTimePicker({value:z,defaultValue:O,onValueChange:T,open:P,defaultOpen:M,onOpenChange:N,defaultMonth:V,minDate:B,maxDate:I,shouldDisableDate:R,shouldDisableTime:E,locale:F,weekStartsOn:q,format:A={dateStyle:"medium",timeStyle:"short"},hour12:G,showSeconds:H=!1,hourStep:J=1,minuteStep:K=1,secondStep:L=1,placeholder:Q,clearable:U=!1,showNowButton:W=!0,closeOnSelect:X=!1,labels:Y,name:Z,size:$="md",color:_="primary",density:ee="default",readOnly:te=!1,disabled:le=!1,startIcon:oe,...ne},ae){const se=s(Y),ie=q??S(F),re=G??p(F),[ce,de]=l.useState(O??null),me=void 0!==z?z:ce,[ue,he]=l.useState(M??!1),pe=P??ue,[fe,Se]=l.useState(()=>y(f(me)?me:V??C()));l.useEffect(()=>{pe&&Se(y(f(me)?me:V??C()))},[pe]);const setOpen=e=>{e&&(te||le)||(void 0===P&&he(e),N?.(e))},commit=e=>{void 0===z&&de(e),T?.(e)},be=l.useCallback((e,t)=>{const[l,o]=D(t,e),n=g(e).getTime();return!!(f(B)&&n+1e3*o<B.getTime())||!!(f(I)&&n+1e3*l>I.getTime())||(E?.(e,t)??!1)},[B,I,E]),ge=new Date,ye=k(ge,{seconds:H?ge.getSeconds():0}),De=h(ye,B,I)||(R?.(ye)??!1)||be(ye,"second"),ve=l.useMemo(()=>j(m(F,A),Q),[F,A,Q]);return e(d,{...ne,size:$,color:_,density:ee,readOnly:te,disabled:le,triggerRef:ae,startIcon:oe??e(i,{}),display:f(me)?u(me,F,A):Q??"",samples:ve,empty:!f(me),clearable:U,onClear:()=>commit(null),open:pe,onOpenChange:setOpen,labels:se,hiddenValues:Z?[{name:Z,value:f(me)?v(me,H):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",x[$]),children:[e(n,{size:$,color:_,locale:F,weekStartsOn:ie,month:fe,onMonthChange:Se,selected:[me],onSelect:e=>{const t=f(me)?b(e,me):g(e);commit(t),Se(y(t)),X&&setOpen(!1)},minDate:B,maxDate:I,shouldDisableDate:R,labels:se,autoFocus:!0}),e(r,{}),e(a,{size:$,density:ee,locale:F,value:f(me)?me:null,referenceDate:f(me)?me:C(),onChange:commit,hour12:re,showSeconds:H,hourStep:J,minuteStep:K,secondStep:L,shouldDisableTime:be,labels:se})]}),t(c,{size:$,children:[U?e(o,{variant:"ghost",size:$,color:_,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:se.clear}):null,W?e(o,{variant:"ghost",size:$,color:_,density:"compact",disabled:De,onClick:()=>{commit(ye),Se(y(ye))},children:se.now}):null,e(o,{variant:"solid",size:$,color:_,density:"compact",onClick:()=>setOpen(!1),children:se.done})]})]})})});

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

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

package/dist/components/divider/PlDivider.js

@@ -1,107 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Separator } from '@base-ui/react/separator';
-import { metaTextClasses } from '../../internal/styles.js';
-/**
- * The hairline itself. A border rather than a filled 1px box, so it lands on
- * the device pixel grid the same way every other edge in the library does.
- *
- * Its thickness is read from a slot rather than from a `border-2`-style utility
- * because a labelled divider draws the rule twice — the two stubs either side
- * of the label — and one custom property set on the root keeps both the same
- * without threading a value through each.
- */
-const lineClasses = '[border-color:var(--p-rule-color)]';
-/** Turns `2` into `2px` and leaves `'0.5rem'` alone. */
-function toLength(value) {
-    return typeof value === 'number' ? `${value}px` : value;
-}
-/**
- * How the line is split around an off-centre label: `[before, after]`. The short
- * side is a fixed stub rather than a small flex ratio, so the label sits the
- * same distance from the edge whatever the divider's length turns out to be.
- */
-const stubClasses = {
-    horizontal: {
-        start: ['w-4 shrink-0', 'flex-1'],
-        center: ['flex-1', 'flex-1'],
-        end: ['flex-1', 'w-4 shrink-0']
-    },
-    vertical: {
-        start: ['h-4 shrink-0', 'flex-1'],
-        center: ['flex-1', 'flex-1'],
-        end: ['flex-1', 'h-4 shrink-0']
-    }
-};
-/** Space between the label and the line on either side of it. */
-const labelGapClasses = {
-    xs: 'gap-1.5',
-    sm: 'gap-2',
-    md: 'gap-3',
-    lg: 'gap-3.5',
-    xl: 'gap-4'
-};
-/**
- * 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 const PlDivider = /* @__PURE__ */ React.forwardRef(function PlDivider({ orientation = 'horizontal', color, size = 'md', length, thickness, textAlign = 'center', className, style, children, ...props }, ref) {
-    const vertical = orientation === 'vertical';
-    const hasLabel = children !== undefined && children !== null && children !== false && children !== '';
-    const slots = {
-        '--p-rule-color': color ? `var(--plass-${color}-line)` : 'var(--plass-border)',
-        '--p-rule': toLength(thickness) ?? '1px'
-    };
-    // The long axis, and only when it was asked for: left alone, a horizontal
-    // divider is `w-full` and a vertical one stretches to its flex row, which are
-    // the two things a rule between two things should already do.
-    const span = toLength(length);
-    const sizing = span === undefined ? null : vertical ? { height: span } : { width: span };
-    const rootStyle = { ...slots, ...sizing, ...style };
-    if (!hasLabel) {
-        return (_jsx(Separator, { ref: ref, orientation: orientation, className: [
-                // The line is a single border edge; the box itself has no thickness,
-                // so a divider never adds a pixel of layout beyond the rule.
-                vertical
-                    ? `w-0 border-l [border-left-width:var(--p-rule)] ${span === undefined ? 'self-stretch' : ''}`
-                    : 'h-0 w-full border-t [border-top-width:var(--p-rule)]',
-                lineClasses,
-                className ?? ''
-            ]
-                .filter(Boolean)
-                .join(' '), style: rootStyle, ...props }));
-    }
-    const [before, after] = stubClasses[orientation][textAlign];
-    const edgeClasses = vertical
-        ? 'w-0 border-l [border-left-width:var(--p-rule)]'
-        : 'h-0 border-t [border-top-width:var(--p-rule)]';
-    return (_jsxs(Separator, { ref: ref, orientation: orientation, "aria-label": typeof children === 'string' ? children : undefined, className: [
-            'flex items-center',
-            vertical ? `w-auto flex-col ${span === undefined ? 'self-stretch' : ''}` : 'w-full',
-            labelGapClasses[size],
-            className ?? ''
-        ]
-            .filter(Boolean)
-            .join(' '), style: rootStyle, ...props, children: [_jsx("span", { "aria-hidden": "true", className: `${edgeClasses} ${before} ${lineClasses}` }), _jsx("span", { className: [
-                    'shrink-0 whitespace-nowrap text-(--plass-muted-fg)',
-                    metaTextClasses[size],
-                    // A vertical rule's label has to turn with it, or the line grows to
-                    // the width of the word and stops being a hairline.
-                    vertical ? '[writing-mode:vertical-rl]' : ''
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: children }), _jsx("span", { "aria-hidden": "true", className: `${edgeClasses} ${after} ${lineClasses}` })] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{metaTextClasses as o}from"../../internal/styles.js";const a="[border-color:var(--p-rule-color)]";function toLength(e){return"number"==typeof e?`${e}px`:e}const i={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},n={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const PlDivider=/* @__PURE__ */t.forwardRef(function PlDivider({orientation:t="horizontal",color:s,size:c="md",length:d,thickness:f,textAlign:p="center",className:h,style:u,children:m,...x},v){const w="vertical"===t,g=null!=m&&!1!==m&&""!==m,b={"--p-rule-color":s?`var(--plass-${s}-line)`:"var(--plass-border)","--p-rule":toLength(f)??"1px"},$=toLength(d),j={...b,...void 0===$?null:w?{height:$}:{width:$},...u};if(!g)return e(l,{ref:v,orientation:t,className:[w?"w-0 border-l [border-left-width:var(--p-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",a,h??""].filter(Boolean).join(" "),style:j,...x});const[k,y]=i[t][p],N=w?"w-0 border-l [border-left-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(l,{ref:v,orientation:t,"aria-label":"string"==typeof m?m:void 0,className:["flex items-center",w?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",n[c],h??""].filter(Boolean).join(" "),style:j,...x,children:[e("span",{"aria-hidden":"true",className:`${N} ${k} ${a}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",o[c],w?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:m}),e("span",{"aria-hidden":"true",className:`${N} ${y} ${a}`})]})});

package/dist/components/divider/index.js

@@ -1 +1 @@
-export { PlDivider } from './PlDivider.js';
+export{PlDivider}from"./PlDivider.js";