plass-ui 0.0.1 → 1.0.1

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

@@ -0,0 +1,73 @@
+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';
+/** The strings a picker says that `Intl` has no opinion about. */
+export type PlPickerLabels = PlassPickerLabels;
+export interface PlDatePickerProps extends PlassPickerShellProps {
+    /** The chosen day. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    /** The day the picker starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    /** Whether the calendar is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. @default this one */
+    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 —
+     * weekends, holidays, a room that is already booked.
+     */
+    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 date. Defaults to the browser's.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: PlassWeekday;
+    /**
+     * How the trigger writes the chosen date. Passed straight to `Intl`, so
+     * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     * @default { dateStyle: 'medium' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Offers the shortcut to today in the footer. @default true */
+    showTodayButton?: boolean;
+    /** Closes the popup as soon as a day is 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, as `YYYY-MM-DD`. */
+    name?: string;
+}
+/**
+ * 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 declare const PlDatePicker: React.ForwardRefExoticComponent<PlDatePickerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+"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.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 @@
+"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.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 @@
+"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.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>>;

package/dist/components/divider/PlDivider.js

@@ -0,0 +1 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export { PlDivider } from './PlDivider.js';
+export type { PlDividerProps, PlDividerTextAlign } from './PlDivider.js';

package/dist/components/divider/index.js

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

package/dist/components/drawer/PlDrawer.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import type { PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * How the panel relates to the page.
+ *
+ * - `overlay` — it is opened, it floats over the page on a scrim, it holds the
+ *   focus, and it is dismissed. The navigation drawer behind a hamburger, the
+ *   filter panel beside a table.
+ * - `inline` — it is part of the layout and the page is laid out around it. No
+ *   scrim, no portal, no focus trap, nothing to dismiss. The sidebar that is
+ *   simply there.
+ *
+ * A separate axis from `variant`, which already means the weight of a surface
+ * across the whole library and would be a second spelling of nothing.
+ */
+export type PlDrawerMode = 'overlay' | 'inline';
+/**
+ * A drawer takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for `PlModal`'s reason: the three materials answer
+ * "how much does this surface assert itself against the page", and a panel that
+ * has taken an edge of the window has answered it. There is no `elevation`
+ * either — an `overlay` drawer floats and carries a shadow at the top of the
+ * ladder, an `inline` one is part of the layout and carries none, and neither
+ * is a decision worth offering.
+ */
+export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * Which edge the panel is attached to. Physical rather than logical, the way
+     * `PlassSide` is everywhere: a drawer along the top of the window is along the
+     * top in every writing direction.
+     * @default 'left'
+     */
+    side?: PlassSide;
+    /** @default 'overlay' */
+    mode?: PlDrawerMode;
+    /** The drawer is shown. Use with `onOpenChange` for a controlled drawer. */
+    open?: boolean;
+    /**
+     * Whether the drawer starts open, for an uncontrolled one.
+     *
+     * Defaults to `false` in `overlay` mode and `true` in `inline` mode, because
+     * a fixed sidebar that had to be opened before it appeared would not be a
+     * fixed sidebar.
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the drawer, wired up by Base UI.
+     *
+     * `overlay` only. An `inline` drawer is not opened — it is in the layout — so
+     * a trigger there would have nothing to do and is not rendered.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the element that names the drawer. */
+    title?: React.ReactNode;
+    /** A line under the title, and the drawer's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row, held against the foot of the panel while the body scrolls.
+     * Laid out end-aligned, so a pair of buttons needs no wrapper of its own —
+     * and `PlDrawerClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Scores the panel between the header, the body and the actions with a
+     * hairline instead of separating them with space. Worth turning on the moment
+     * the body scrolls: the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner. On in `overlay` mode, where the panel has taken
+     * the page and the way out should not have to be remembered; off in `inline`
+     * mode, where a × that closes a fixed sidebar with nothing to reopen it is a
+     * one-way door.
+     */
+    showClose?: boolean;
+    /** Accessible name of the × button. Never drawn. @default 'Close' */
+    closeLabel?: string;
+    /**
+     * How far the panel reaches in from its edge: a **width** for `left` and
+     * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
+     *
+     * Left alone, a side panel takes the width its `size` implies and a top or
+     * bottom panel is as tall as what is in it, up to 85% of the window.
+     */
+    extent?: number | string;
+    /**
+     * Rounds the two corners on the edge that faces the page — the top and bottom
+     * of a side panel, the inner pair of a top or bottom one. The corners against
+     * the window edge are always square, because a corner cut off something that
+     * has no visible end is a corner cut off nothing.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside. `overlay` only.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether pressing Escape or clicking the scrim closes the drawer. Turn it off
+     * for the drawer that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out. `overlay` only.
+     * @default true
+     */
+    dismissible?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+export type PlDrawerCloseProps = React.ComponentPropsWithoutRef<typeof BaseUIDialog.Close>;
+/**
+ * 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 declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * 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 declare function PlDrawer({ side, mode, size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, modal, dismissible, className, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/PlDrawer.js

@@ -0,0 +1 @@
+"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.d.ts

@@ -0,0 +1,2 @@
+export { PlDrawer, PlDrawerClose } from './PlDrawer.js';
+export type { PlDrawerCloseProps, PlDrawerMode, PlDrawerProps } from './PlDrawer.js';

package/dist/components/drawer/index.js

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

package/dist/components/file-picker/PlFilePicker.d.ts

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/** Why a file was turned away. One reason per file, in the order they are checked. */
+export type PlFileRejectionReason = 'type' | 'size' | 'count';
+export interface PlFileRejection {
+    file: File;
+    reason: PlFileRejectionReason;
+}
+export interface PlFilePickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'title' | 'children'> {
+    /**
+     * Drop shadow depth. `0` is the default — a dropzone is cut into the page
+     * rather than floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Which files the browser's own picker offers, in the `accept` grammar —
+     * `'image/*,.pdf'`. Dropped files are checked against it too, which the
+     * attribute alone does not do.
+     */
+    accept?: string;
+    /** Whether more than one file may be chosen. @default false */
+    multiple?: boolean;
+    /** The largest a single file may be, in bytes. */
+    maxSize?: number;
+    /**
+     * How many files may be held at once. Implies `multiple`, and is checked
+     * against what is already chosen rather than against one drop.
+     */
+    maxFiles?: number;
+    /** The chosen files. Use with `onFilesChange` for a controlled picker. */
+    value?: readonly File[];
+    /** The initially chosen files, for an uncontrolled one. */
+    defaultValue?: readonly File[];
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Called with everything that was turned away, and why. Without it a rejected
+     * file disappears silently, which is the single worst thing a dropzone does.
+     */
+    onReject?: (rejections: PlFileRejection[]) => void;
+    /** Label above the box. */
+    label?: React.ReactNode;
+    /** Helper text below the box. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the picker invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** The line inside the box. Defaults to an English sentence. */
+    title?: React.ReactNode;
+    /** The line under it — what is accepted, how big, how many. */
+    hint?: React.ReactNode;
+    /** The glyph above the title. Pass `null` for a box with no picture in it. */
+    icon?: React.ReactNode;
+    /**
+     * Lists the chosen files under the box, each with a way to remove it.
+     * @default true
+     */
+    showList?: boolean;
+    /** Accessible name of a file's remove button. Receives the file's name. */
+    removeLabel?: (name: string) => string;
+    /** Stretches to the width of the container. @default true */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The files are shown but cannot be added to or removed. */
+    readOnly?: boolean;
+    /** Whether a file must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    id?: string;
+}
+/**
+ * `1.4 MB`, in the units a person reading a file list expects.
+ *
+ * Base 1000 rather than 1024, and `MB` rather than `MiB`: it is the number
+ * every operating system's file browser shows, and a picker that disagrees with
+ * the Finder about how big the file is has picked a fight it cannot win.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * A box you drop files on, or click to open the file dialog.
+ *
+ * There is no Base UI primitive under this, and the fallback the library allows
+ * — plain React and DOM — is the right one: a dropzone is a `<div>` listening
+ * for four drag events and an `<input type="file">` it clicks for you. There is
+ * no popup to position, no focus to trap and no roving anything.
+ *
+ * What that leaves is the part every hand-rolled dropzone gets wrong. The drag
+ * counter is one: `dragenter` and `dragleave` both fire as the pointer crosses
+ * a *child* of the zone, so a zone that toggles a boolean flickers the whole
+ * time a file is dragged across its own contents. Counting them is the fix. The
+ * other is `accept`, which the browser enforces on its own dialog and never on
+ * a drop, so a dropzone that only sets the attribute accepts anything the
+ * moment a file arrives by drag.
+ *
+ * The shell is a `<div>` and the pressable area inside it is a real `<button>`,
+ * with the file list outside that button — the remove buttons cannot be nested
+ * inside the browse button.
+ */
+export declare const PlFilePicker: React.ForwardRefExoticComponent<PlFilePickerProps & React.RefAttributes<HTMLInputElement>>;