plass-ui 1.0.0 → 1.0.1

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";

package/dist/components/drawer/PlDrawer.js

@@ -1,190 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import { CloseIcon } from '../../internal/icons.js';
-import { cx, focusRingClasses, glassClasses, hasContent, metaTextClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetLineClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
-/**
- * How wide a `left` or `right` panel is when nothing says otherwise.
- *
- * Its own ladder rather than `PlModal`'s `maxWidth`, and deliberately narrower
- * at every step: a modal is measured by how long a line of text is comfortable
- * inside it, and a drawer is measured by how much of the window it is willing
- * to take away from what it is a drawer *for*.
- *
- * A `top` or `bottom` panel has no entry here on purpose — its extent is its
- * content, capped at 85% of the window, because a bottom sheet holding three
- * rows should be three rows tall.
- */
-const extentClasses = {
-    xs: 'w-56',
-    sm: 'w-64',
-    md: 'w-80',
-    lg: 'w-96',
-    xl: 'w-[28rem]'
-};
-/**
- * The corners on the free edge, written out per side and per step because
- * Tailwind only ever sees class names that appear literally in the source.
- */
-const roundedClasses = {
-    left: {
-        xs: 'rounded-r-(--plass-radius-xs)',
-        sm: 'rounded-r-(--plass-radius-sm)',
-        md: 'rounded-r-(--plass-radius-md)',
-        lg: 'rounded-r-(--plass-radius-lg)',
-        xl: 'rounded-r-(--plass-radius-xl)'
-    },
-    right: {
-        xs: 'rounded-l-(--plass-radius-xs)',
-        sm: 'rounded-l-(--plass-radius-sm)',
-        md: 'rounded-l-(--plass-radius-md)',
-        lg: 'rounded-l-(--plass-radius-lg)',
-        xl: 'rounded-l-(--plass-radius-xl)'
-    },
-    top: {
-        xs: 'rounded-b-(--plass-radius-xs)',
-        sm: 'rounded-b-(--plass-radius-sm)',
-        md: 'rounded-b-(--plass-radius-md)',
-        lg: 'rounded-b-(--plass-radius-lg)',
-        xl: 'rounded-b-(--plass-radius-xl)'
-    },
-    bottom: {
-        xs: 'rounded-t-(--plass-radius-xs)',
-        sm: 'rounded-t-(--plass-radius-sm)',
-        md: 'rounded-t-(--plass-radius-md)',
-        lg: 'rounded-t-(--plass-radius-lg)',
-        xl: 'rounded-t-(--plass-radius-xl)'
-    }
-};
-/**
- * The hairline on the free edge only. A border all round would draw a line
- * along the window's own edge, where there is nothing on the other side of it
- * to be separated from.
- */
-const edgeClasses = {
-    left: 'border-r',
-    right: 'border-l',
-    top: 'border-b',
-    bottom: 'border-t'
-};
-/** Which end of the viewport the panel is pushed to, and along which axis. */
-const viewportClasses = {
-    left: 'flex-row justify-start',
-    right: 'flex-row justify-end',
-    top: 'flex-col justify-start',
-    bottom: 'flex-col justify-end'
-};
-/**
- * The sheet.
- *
- * Opacity only, exactly as on `PlModal`. A drawer that slid in would be
- * dragging its own text across the screen for the length of the transition, and
- * a panel is nothing but text and controls — this is the case the no-transform
- * rule was written for, not the exception to it. What says the panel came from
- * an edge is that it is *attached* to one: square against the window, cut on the
- * free side.
- */
-const panelClasses = /* @__PURE__ */ [
-    glassClasses,
-    'relative flex flex-col overflow-hidden',
-    'text-(--plass-fg) bg-(--plass-glass-press)',
-    '[border-color:var(--plass-glass-line)]',
-    '[outline:none]'
-].join(' ');
-const overlayShadowClasses = '[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]';
-const inlineShadowClasses = '[box-shadow:var(--plass-gloss-glass)]';
-const fadeClasses = /* @__PURE__ */ [
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-const backdropClasses = /* @__PURE__ */ [
-    'fixed inset-0 z-50 bg-(--plass-scrim)',
-    '[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
-    fadeClasses
-].join(' ');
-/** The × in the corner, shared by both modes. */
-const closeButtonClasses = /* @__PURE__ */ [
-    'flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center',
-    'rounded-full text-(--plass-muted-fg)',
-    '[&_svg]:size-[1.1em] [&_svg]:shrink-0',
-    '[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]',
-    'hover:bg-(--p-soft) hover:text-(--plass-fg)',
-    focusRingClasses
-].join(' ');
-/**
- * Closes the drawer it is inside.
- *
- * Exported for `PlModalClose`'s reason: an uncontrolled drawer has no `setOpen`
- * for its Cancel button to call. It is an `overlay` drawer's button — an
- * `inline` drawer is not a Base UI dialog and has nothing for this to talk to.
- *
- * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
- * `<PlDrawerClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
- */
-export const PlDrawerClose = BaseUIDialog.Close;
-/**
- * A panel attached to one edge of the window.
- *
- * Two things in one component, because they are the same panel: `overlay` is the
- * drawer you open — a scrim, a focus trap, Escape — and `inline` is the drawer
- * that is simply part of the page. Everything else about them is identical,
- * which is exactly why they should not be two components a caller has to switch
- * between when a sidebar becomes a hamburger at a breakpoint.
- *
- * The sections are props rather than compound sub-components, as on `PlCard` and
- * `PlModal`: the arrangement is fixed — heading, description, body, actions —
- * and what a caller wants to decide is what goes in each slot. The body is the
- * only part that scrolls, so the heading and the actions stay put.
- *
- * In `overlay` mode Base UI owns everything hard about it: the focus trap, the
- * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
- * focus to the trigger, and the inert page behind.
- */
-export function PlDrawer({ side = 'left', mode = 'overlay', size = 'md', color = 'primary', density = 'default', open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers = false, showClose, closeLabel = 'Close', extent, rounded = true, modal = true, dismissible = true, className, style, children, ...props }) {
-    const overlay = mode === 'overlay';
-    const along = side === 'left' || side === 'right';
-    const showCloseButton = showClose ?? overlay;
-    const insetX = sheetPaddingXClasses[density][size];
-    const insetY = sheetPaddingYClasses[density][size];
-    // With dividers the lines have to reach both edges, so the sheet gives up its
-    // padding and every section takes it on instead — the same trade PlCard makes.
-    const sectionClasses = dividers ? `${insetX} ${insetY}` : insetX;
-    const hasHeader = hasContent(title) || hasContent(description);
-    const hasActions = hasContent(actions);
-    const sizeStyle = extent === undefined
-        ? null
-        : { [along ? 'width' : 'height']: typeof extent === 'number' ? `${extent}px` : extent };
-    const panel = cx(panelClasses, sheetBodyClasses[size], edgeClasses[side], rounded ? roundedClasses[side][size] : '', overlay ? overlayShadowClasses : inlineShadowClasses, overlay ? fadeClasses : '', along
-        ? `h-full max-w-full ${extent === undefined ? extentClasses[size] : ''}`
-        : `w-full ${extent === undefined ? 'max-h-[85%]' : ''}`, dividers ? '' : `${insetY} ${sheetSectionGapClasses[size]}`, className);
-    // Base UI's parts carry the `aria-labelledby` / `aria-describedby` wiring an
-    // overlay drawer needs. An inline one is not a dialog and needs none, so it
-    // gets the plain tags rather than a dialog's parts outside a dialog.
-    const TitleTag = overlay ? BaseUIDialog.Title : 'h2';
-    const DescriptionTag = overlay ? BaseUIDialog.Description : 'p';
-    const contents = (_jsxs(_Fragment, { children: [hasHeader || showCloseButton ? (_jsxs("div", { className: cx('flex shrink-0 items-start gap-3', sectionClasses), children: [_jsxs("div", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx(TitleTag, { className: cx('m-0 font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(description) ? (_jsx(DescriptionTag, { className: cx('m-0 text-(--plass-muted-fg)', metaTextClasses[size]), children: description })) : null] }), showCloseButton ? (overlay ? (_jsx(BaseUIDialog.Close, { "aria-label": closeLabel, className: closeButtonClasses, children: _jsx(CloseIcon, {}) })) : (_jsx("button", { type: "button", "aria-label": closeLabel, className: closeButtonClasses, onClick: () => onOpenChange?.(false), children: _jsx(CloseIcon, {}) }))) : null] })) : null, hasContent(children) ? (_jsx("div", { className: cx('min-h-0 flex-1 overflow-y-auto overscroll-contain', sectionClasses, dividers && (hasHeader || showCloseButton) ? sheetLineClasses : '', 
-                // A scroll container clips at its padding box and a focus ring is
-                // drawn outside the control that owns it, so a field at the top or
-                // bottom of an unruled body would have its ring sliced off. The
-                // padding is room for the ring and the negative margin hands the
-                // space straight back, so nothing on the sheet moves.
-                dividers ? '' : '-my-1 py-1'), children: children })) : null, hasActions ? (_jsx("div", { className: cx('flex shrink-0 flex-wrap items-center justify-end gap-2', sectionClasses, dividers ? sheetLineClasses : ''), children: actions })) : null] }));
-    if (!overlay) {
-        // An inline drawer is in the flow, so "closed" is "not in the layout".
-        // There is nothing to animate on the way out: the page around it is what
-        // moves, and moving the page is not this component's to do.
-        if (!(open ?? defaultOpen ?? true)) {
-            return null;
-        }
-        return (_jsx("div", { className: panel, style: { ...surfaceSlots(color, 0), ...sizeStyle, ...style }, ...props, children: contents }));
-    }
-    return (_jsxs(BaseUIDialog.Root, { open: open, defaultOpen: defaultOpen, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
-            // `disablePointerDismissal` covers the click on the scrim; Escape has no
-            // prop of its own, so it is cancelled here by the reason it arrives
-            // with.
-            if (!dismissible && !next && details.reason === 'escape-key') {
-                details.cancel();
-                return;
-            }
-            onOpenChange?.(next);
-        }, children: [trigger ? _jsx(BaseUIDialog.Trigger, { render: trigger }) : null, _jsxs(BaseUIDialog.Portal, { children: [_jsx(BaseUIDialog.Backdrop, { className: `plass-portal ${backdropClasses}` }), _jsx(BaseUIDialog.Viewport, { className: cx('plass-portal fixed inset-0 z-50 flex', viewportClasses[side]), children: _jsx(BaseUIDialog.Popup, { className: panel, style: { ...surfaceSlots(color, 3), ...sizeStyle, ...style }, ...props, children: contents }) })] })] }));
-}
+"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{CloseIcon as a}from"../../internal/icons.js";import{cx as o,focusRingClasses as d,glassClasses as i,hasContent as t,metaTextClasses as n,sheetBodyClasses as u,sheetHeaderGapClasses as p,sheetLineClasses as m,sheetPaddingXClasses as c,sheetPaddingYClasses as x,sheetSectionGapClasses as f,sheetTitleClasses as g,surfaceSlots as h}from"../../internal/styles.js";const b={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},v={left:{xs:"rounded-r-(--plass-radius-xs)",sm:"rounded-r-(--plass-radius-sm)",md:"rounded-r-(--plass-radius-md)",lg:"rounded-r-(--plass-radius-lg)",xl:"rounded-r-(--plass-radius-xl)"},right:{xs:"rounded-l-(--plass-radius-xs)",sm:"rounded-l-(--plass-radius-sm)",md:"rounded-l-(--plass-radius-md)",lg:"rounded-l-(--plass-radius-lg)",xl:"rounded-l-(--plass-radius-xl)"},top:{xs:"rounded-b-(--plass-radius-xs)",sm:"rounded-b-(--plass-radius-sm)",md:"rounded-b-(--plass-radius-md)",lg:"rounded-b-(--plass-radius-lg)",xl:"rounded-b-(--plass-radius-xl)"},bottom:{xs:"rounded-t-(--plass-radius-xs)",sm:"rounded-t-(--plass-radius-sm)",md:"rounded-t-(--plass-radius-md)",lg:"rounded-t-(--plass-radius-lg)",xl:"rounded-t-(--plass-radius-xl)"}},y={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},w={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},j=/* @__PURE__ */[i,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),N=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["fixed inset-0 z-50 bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",N].join(" "),C=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",d].join(" ");export const PlDrawerClose=r.Close;export function PlDrawer({side:d="left",mode:i="overlay",size:_="md",color:$="primary",density:z="default",open:D,defaultOpen:P,onOpenChange:O,trigger:T,title:B,description:F,actions:L,dividers:R=!1,showClose:V,closeLabel:q="Close",extent:A,rounded:E=!0,modal:G=!0,dismissible:H=!0,className:I,style:J,children:K,...M}){const Q="overlay"===i,S="left"===d||"right"===d,U=V??Q,W=c[z][_],X=x[z][_],Y=R?`${W} ${X}`:W,Z=t(B)||t(F),ss=t(L),ls=void 0===A?null:{[S?"width":"height"]:"number"==typeof A?`${A}px`:A},es=o(j,u[_],y[d],E?v[d][_]:"",Q?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",Q?N:"",S?`h-full max-w-full ${void 0===A?b[_]:""}`:"w-full "+(void 0===A?"max-h-[85%]":""),R?"":`${X} ${f[_]}`,I),rs=Q?r.Title:"h2",as=Q?r.Description:"p",os=l(e,{children:[Z||U?l("div",{className:o("flex shrink-0 items-start gap-3",Y),children:[l("div",{className:o("flex min-w-0 flex-1 flex-col",p[_]),children:[t(B)?s(rs,{className:o("m-0 font-semibold",g[_]),children:B}):null,t(F)?s(as,{className:o("m-0 text-(--plass-muted-fg)",n[_]),children:F}):null]}),U?Q?s(r.Close,{"aria-label":q,className:C,children:s(a,{})}):s("button",{type:"button","aria-label":q,className:C,onClick:()=>O?.(!1),children:s(a,{})}):null]}):null,t(K)?s("div",{className:o("min-h-0 flex-1 overflow-y-auto overscroll-contain",Y,R&&(Z||U)?m:"",R?"":"-my-1 py-1"),children:K}):null,ss?s("div",{className:o("flex shrink-0 flex-wrap items-center justify-end gap-2",Y,R?m:""),children:L}):null]});return Q?l(r.Root,{open:D,defaultOpen:P,modal:G,disablePointerDismissal:!H,onOpenChange:(s,l)=>{H||s||"escape-key"!==l.reason?O?.(s):l.cancel()},children:[T?s(r.Trigger,{render:T}):null,l(r.Portal,{children:[s(r.Backdrop,{className:`plass-portal ${k}`}),s(r.Viewport,{className:o("plass-portal fixed inset-0 z-50 flex",w[d]),children:s(r.Popup,{className:es,style:{...h($,3),...ls,...J},...M,children:os})})]})]}):D??P??!0?s("div",{className:es,style:{...h($,0),...ls,...J},...M,children:os}):null}

package/dist/components/drawer/index.js

@@ -1 +1 @@
-export { PlDrawer, PlDrawerClose } from './PlDrawer.js';
+export{PlDrawer,PlDrawerClose}from"./PlDrawer.js";