plass-ui 1.2.0 → 1.4.0

package/dist/components/data-table/PlDataTable.d.ts

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { type PlassSort, type PlassSortDirection } from '../../internal/data-table.js';
+import type { PlTableAlign } from '../table/index.js';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/** Which way a column runs when it is sorted. */
+export type PlDataTableSortDirection = PlassSortDirection;
+/** The column being sorted on, and its direction. */
+export type PlDataTableSort = PlassSort;
+/**
+ * How many rows may be ticked at once.
+ *
+ * `none` is the default. A table that draws a tick column it does nothing with
+ * has promised something it does not do.
+ */
+export type PlDataTableSelection = 'none' | 'single' | 'multiple';
+/**
+ * How the rows are handed out.
+ *
+ * - `scroll` — all of them, in one body. Pair it with `maxHeight` and the rows
+ *   scroll inside the sheet instead of the page growing.
+ * - `pages` — a slice at a time, with a pager in the footer. Right when a row's
+ *   position in the whole set is information, and the only honest option when
+ *   the rows are fetched a page at a time.
+ */
+export type PlDataTablePaging = 'scroll' | 'pages';
+/**
+ * The three things the table does to the rows, and the ones an application can
+ * take back.
+ *
+ * Naming a stage in `manual` means the rows arriving in `rows` have already had
+ * it done to them — by a server, usually — so the table reports the reader's
+ * intent and draws what it is given rather than doing the work twice.
+ */
+export type PlDataTableStage = 'sort' | 'search' | 'pages';
+/**
+ * A column: its heading, how to get a value out of a row, and how to draw one.
+ *
+ * The split between `value` and `render` is the shape of this type. `render`
+ * decides what a reader sees; `value` decides what the sort and the search see.
+ * Most columns need neither — the cell is `row[key]`, and that is what is
+ * compared and matched. A column that draws a `PlChip` needs `render`, and it
+ * needs `value` as well the moment it is sortable, because an element has no
+ * order and no text a search can look inside.
+ */
+export interface PlDataTableColumn<Row> {
+    /**
+     * Identifies the column — to `sort`, and unless `value` or `render` says
+     * otherwise, it names the property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    header?: React.ReactNode;
+    /**
+     * The column's default width. A number is pixels; a string is any CSS length.
+     *
+     * "Default" is meant: the table still balances its columns to fill the sheet.
+     */
+    width?: number | string;
+    /**
+     * Text alignment. Numbers usually want `end` so their digits line up.
+     * @default 'start'
+     */
+    align?: PlTableAlign;
+    /** Renders the cell. Without it the cell is `row[key]` rendered as-is. */
+    render?: (row: Row, index: number) => React.ReactNode;
+    /**
+     * What this column *is*, for the sort and the search.
+     *
+     * Defaults to `row[key]`. Give it whenever the cell is drawn rather than
+     * printed: a status column showing a chip sorts on the status, and a name
+     * column showing an avatar beside the name searches on the name.
+     */
+    value?: (row: Row) => unknown;
+    /**
+     * Puts the heading in the sort rotation: ascending, descending, then back to
+     * the order the rows arrived in.
+     * @default false
+     */
+    sortable?: boolean;
+    /** Orders two rows against each other, when `compareValues` is not enough. */
+    compare?: (a: Row, b: Row) => number;
+    /**
+     * Keeps this column out of the search. Right for a column of identifiers a
+     * reader never types, where a match is a row they cannot see the reason for.
+     * @default false
+     */
+    unsearchable?: boolean;
+}
+export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onSelect'> {
+    /**
+     * Drop shadow depth. `0` is the default — a table is a grid set into the page
+     * rather than a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The columns, in the order they appear. */
+    columns: readonly PlDataTableColumn<Row>[];
+    /** The rows, in the order they arrived in. */
+    rows: readonly Row[];
+    /**
+     * A stable key per row, and the one prop worth setting before any other.
+     *
+     * It defaults to the row's index, which is wrong for every table this
+     * component is for: sorting moves a row and its index stays behind, so a
+     * selection made before the sort belongs to different rows after it.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the grid, and read out as the table's accessible name. */
+    caption?: React.ReactNode;
+    /** What to show instead of rows when there are none left to show. */
+    empty?: React.ReactNode;
+    /** Tints every other row. @default false */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /** Pins the header while the rows scroll under it. @default true */
+    stickyHeader?: boolean;
+    /** A hard cap on the grid's height. A number is pixels; a string is a CSS length. */
+    maxHeight?: number | string;
+    /** Makes rows activatable. Also turns on the hover treatment. */
+    onRowClick?: (row: Row, index: number) => void;
+    /** The sorted column and its direction. Pass it to control the sort. */
+    sort?: PlDataTableSort | null;
+    /** Where the sort starts when the table keeps it itself. */
+    defaultSort?: PlDataTableSort | null;
+    /** Called with the sort a heading press asks for, `null` for the third press. */
+    onSortChange?: (sort: PlDataTableSort | null) => void;
+    /** Draws a field above the grid that narrows the rows to what was typed. */
+    searchable?: boolean;
+    /** The query. Pass it to control the field. */
+    search?: string;
+    /** Where the query starts when the table keeps it itself. */
+    defaultSearch?: string;
+    /** Called with what the reader typed. */
+    onSearchChange?: (search: string) => void;
+    /** The field's placeholder. Defaults to the locale's word for searching. */
+    searchPlaceholder?: string;
+    /** How many rows may be ticked at once. @default 'none' */
+    selection?: PlDataTableSelection;
+    /** The ticked rows, as their keys. Pass it to control the selection. */
+    selected?: readonly React.Key[];
+    /** Where the selection starts when the table keeps it itself. */
+    defaultSelected?: readonly React.Key[];
+    /** Called with the keys of every ticked row. */
+    onSelectedChange?: (selected: React.Key[], rows: Row[]) => void;
+    /** Keeps a row out of the selection — a total line, a row already spent. */
+    isRowSelectable?: (row: Row, index: number) => boolean;
+    /** How the rows are handed out. @default 'scroll' */
+    paging?: PlDataTablePaging;
+    /** How many rows a page holds. @default 10 */
+    pageSize?: number;
+    /** The page being read, counted from `1`. Pass it to control the pager. */
+    page?: number;
+    /** Where the pager starts when the table keeps it itself. */
+    defaultPage?: number;
+    /** Called with the page a pager press asks for. */
+    onPageChange?: (page: number) => void;
+    /**
+     * How many rows there are in total, when the table is only ever handed one
+     * page of them. Required for `manual` paging and ignored without it.
+     */
+    rowCount?: number;
+    /** The stages an application has already done to `rows` itself. */
+    manual?: readonly PlDataTableStage[];
+    /** Draws bars in place of the rows and marks the grid busy. @default false */
+    loading?: boolean;
+    /** Drawn in the toolbar, at the end. A filter, a button, a count of its own. */
+    toolbar?: React.ReactNode;
+    /** Drawn in the footer, at the start, in place of the row count. */
+    footer?: React.ReactNode;
+}
+/**
+ * A table that owns its rows: it sorts them, narrows them to what was typed,
+ * hands them out a page at a time and remembers which of them are ticked.
+ *
+ * `PlTable` is the one to reach for when the rows are already in the order they
+ * belong in — it renders on a server, which this cannot, because every one of
+ * these is a decision that has to be remembered between renders.
+ *
+ * ```tsx
+ * <PlDataTable
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'amount', header: 'Amount', align: 'end', sortable: true }
+ *   ]}
+ *   rows={invoices}
+ *   getRowKey={(row) => row.id}
+ *   searchable
+ *   selection="multiple"
+ *   paging="pages"
+ * />
+ * ```
+ *
+ * Every one of sort, search, selection and page is **controllable and
+ * uncontrolled by default**, so the ordinary table is the markup above and a
+ * table backed by a server is the same markup with `manual` and the four
+ * handlers. Nothing changes shape in between.
+ *
+ * Not a `forwardRef`, for `PlTable`'s reason: a component wrapped in
+ * `React.forwardRef` loses its type parameter, and `Row` is the whole point.
+ */
+export declare function PlDataTable<Row>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, columns, rows, getRowKey, caption, empty: emptyProp, striped, hoverable, stickyHeader, maxHeight, onRowClick, sort: sortProp, defaultSort, onSortChange, searchable, search: searchProp, defaultSearch, onSearchChange, searchPlaceholder, selection, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, paging, pageSize, page: pageProp, defaultPage, onPageChange, rowCount, manual, loading, toolbar, footer, className, style, ...props }: PlDataTableProps<Row>): React.JSX.Element;

package/dist/components/data-table/PlDataTable.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{PlCheckbox as a}from"../checkbox/index.js";import{PlPagination as l}from"../pagination/index.js";import{PlSkeleton as n}from"../skeleton/index.js";import{PlTextField as s}from"../text-field/index.js";import{compareValues as o,keysBetween as i,nextSort as c,pageBounds as d}from"../../internal/data-table.js";import{useDefaults as u}from"../../internal/defaults.js";import{ChevronIcon as p}from"../../internal/icons.js";import{useLabels as m}from"../../internal/labels.js";import{searchHaystack as h,searchText as g}from"../../internal/search.js";import{controlTextLeadingClasses as f,cx as v,focusRingInsetClasses as y,gapClasses as b,hasContent as x,metaTextClasses as k,paddingXValues as w,radiusClasses as C,sheetRestClasses as N,srOnlyClasses as S,surfaceSlots as j}from"../../internal/styles.js";import{cellPaddingYValues as z,clickableRowClasses as M,headRule as P,rowClasses as $,rowRule as _,tableStyle as A}from"../../internal/table.js";const R={xs:"2rem",sm:"2.25rem",md:"2.75rem",lg:"3rem",xl:"3.5rem"},B=/* @__PURE__ */v("inline-flex items-center gap-1 [outline:none]","font-semibold whitespace-nowrap text-inherit","[background:none] [border:0] [padding:0] [margin:0] cursor-pointer","hover:text-(--plass-fg) [transition:color_var(--plass-duration)_var(--plass-ease)]",y);function SortMark({direction:t}){return e("span",{"aria-hidden":"true",className:v("[&_svg]:size-[1em] [&_svg]:shrink-0","[transition:opacity_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]",null===t?"opacity-30":"opacity-100","asc"===t?"rotate-180":""),children:e(p,{})})}export function PlDataTable({variant:p="glass",size:y,color:T,density:D,elevation:H=0,columns:K,rows:I,getRowKey:E,caption:q,empty:F,striped:G=!1,hoverable:J=!1,stickyHeader:L=!0,maxHeight:O,onRowClick:Q,sort:U,defaultSort:V=null,onSortChange:W,searchable:X=!1,search:Y,defaultSearch:Z="",onSearchChange:ee,searchPlaceholder:te,selection:re="none",selected:ae,defaultSelected:le,onSelectedChange:ne,isRowSelectable:se,paging:oe="scroll",pageSize:ie=10,page:ce,defaultPage:de=1,onPageChange:ue,rowCount:pe,manual:me,loading:he=!1,toolbar:ge,footer:fe,className:ve,style:ye,...be}){const xe=u(),ke=m(),we=y??xe.size??"md",Ce=T??xe.color??"primary",Ne=D??xe.density??"default",Se=F??ke.empty,[je,ze]=r.useState(V),[Me,Pe]=r.useState(Z),[$e,_e]=r.useState(le??[]),[Ae,Re]=r.useState(de),Be=void 0===U?je:U,Te=Y??Me,De=ae??$e,He=!me?.includes("sort"),Ke=!me?.includes("search"),Ie=!me?.includes("pages"),Ee=r.useCallback((e,t)=>E?E(e,t):t,[E]),qe=r.useCallback((e,t)=>e.value?e.value(t):t[e.key],[]),Fe=g(Te),Ge=r.useMemo(()=>{if(!Ke||""===Fe)return I;const e=K.filter(e=>!e.unsearchable);return I.filter(t=>h(e.map(e=>qe(e,t))).includes(Fe))},[I,K,Fe,Ke,qe]),Je=r.useMemo(()=>{if(!He||null===Be)return Ge;const e=K.find(e=>e.key===Be.key);if(!e)return Ge;const t="asc"===Be.direction?1:-1;return[...Ge].sort((r,a)=>(e.compare?e.compare(r,a):o(qe(e,r),qe(e,a)))*t)},[Ge,K,Be,He,qe]),Le=Ie?Je.length:pe??Je.length,Oe=Math.max(1,Math.ceil(Le/ie)),Qe=Math.min(Math.max(ce??Ae,1),Oe),Ue=r.useMemo(()=>{if("pages"!==oe||!Ie)return Je;const[e,t]=d(Je.length,Qe,ie);return Je.slice(e,t)},[Je,oe,Ie,Qe,ie]),Ve=r.useMemo(()=>Ue.map(Ee),[Ue,Ee]),We=r.useRef(null);function goPage(e){void 0===ce&&Re(e),e!==Qe&&ue?.(e)}const selectable=(e,t)=>"none"!==re&&(!se||se(e,t)),goSelected=e=>{void 0===ae&&_e(e);const t=new Set(e);ne?.(e,I.filter((e,r)=>t.has(Ee(e,r))))},Xe=Ve.filter(e=>De.includes(e)),Ye=Ue.filter(selectable).map(Ee),Ze=Ye.length>0&&Xe.length===Ye.length,et=w[Ne][we],tt=z[Ne][we],rt=Boolean(Q),at=J||rt,lt=void 0!==O,nt="none"!==re,st=K.length+(nt?1:0),ot={padding:`${tt} ${et}`,border:0,background:"none"},it={...ot,...L?{boxShadow:"inset 0 -1px 0 var(--plass-border)",background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:{borderBottom:P}},bodyCellStyle=e=>({...ot,borderTop:0===e?0:_}),ct={padding:`${tt} ${et}`,display:"flex",alignItems:"center",justifyContent:"space-between",gap:"0.75rem"},dt=X||x(ge),ut="pages"===oe&&Oe>1||x(fe);return t("div",{className:v("overflow-hidden",C[we],N[p],ve),style:{...j(Ce,H),...ye},...be,children:[x(q)?e("div",{"aria-hidden":"true",className:v(k[we],"font-semibold text-(--plass-muted-fg)"),style:{...ot,borderBottom:_,textAlign:"start"},children:q}):null,dt?t("div",{style:{...ct,borderBottom:_},children:[X?e(s,{size:we,color:Ce,density:Ne,value:Te,onChange:e=>{return t=e.target.value,void 0===Y&&Pe(t),goPage(1),void ee?.(t);var t},placeholder:te??ke.search,"aria-label":ke.search,className:"min-w-0 flex-1"}):e("span",{}),x(ge)?e("div",{className:v("flex items-center",b[we]),children:ge}):null]}):null,e("div",{className:v("overflow-x-auto",lt&&"overflow-y-auto overscroll-contain"),style:lt?{maxHeight:O}:void 0,children:t("table",{className:v("text-start",f[we],"text-(--plass-fg)"),style:A,"aria-busy":he||void 0,children:[x(q)?e("caption",{className:S,children:q}):null,t("colgroup",{children:[nt?e("col",{style:{width:R[we]}}):null,K.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))]}),e("thead",{children:t("tr",{children:[nt?e("th",{scope:"col",className:v(L&&"sticky top-0 z-10"),style:it,children:"multiple"===re?e(a,{size:we,color:Ce,checked:Ze,indeterminate:Xe.length>0&&!Ze,onCheckedChange:()=>{const e=De.filter(e=>!Ye.includes(e));goSelected(Ze?e:[...e,...Ye])},disabled:0===Ye.length,"aria-label":ke.selectAll}):e("span",{className:S,children:ke.selectRow})}):null,K.map(r=>{const a=Be?.key===r.key?Be.direction:null;return e("th",{scope:"col",className:v("font-semibold whitespace-nowrap text-(--plass-muted-fg)",L&&"sticky top-0 z-10"),style:{...it,textAlign:r.align??"start"},"aria-sort":r.sortable?"asc"===a?"ascending":"desc"===a?"descending":"none":void 0,children:r.sortable?t("button",{type:"button",className:B,onClick:()=>(e=>{const t=c(Be,e);void 0===U&&ze(t),goPage(1),W?.(t)})(r.key),children:[r.header??r.key,e(SortMark,{direction:a})]}):r.header??r.key},r.key)})]})}),e("tbody",{children:he?Array.from({length:"pages"===oe?ie:5},(t,r)=>e("tr",{className:$,children:Array.from({length:st},(t,a)=>e("td",{style:bodyCellStyle(r),children:e(n,{size:we,color:Ce})},a))},r)):0===Ue.length?e("tr",{className:$,children:e("td",{colSpan:st,className:"text-(--plass-muted-fg)",style:{...ot,padding:`2rem ${et}`,textAlign:"center"},children:Se})}):Ue.map((r,l)=>{const n=Ee(r,l),s=De.includes(n),o=selectable(r,l);return t("tr",{"aria-selected":nt?s:void 0,className:v($,G&&l%2==1&&"[--p-row:var(--plass-stripe)]",s&&"[--p-row:var(--p-soft)]",at&&"hover:[--p-row:var(--p-soft)]",rt&&M),style:{backgroundColor:"var(--p-row)"},tabIndex:rt?0:void 0,onClick:Q?()=>Q(r,l):void 0,onKeyDown:Q?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Q(r,l)))}:void 0,children:[nt?e("td",{style:bodyCellStyle(l),children:e(a,{size:we,color:Ce,checked:s,disabled:!o,onCheckedChange:(e,t)=>((e,t)=>{if("single"===re)return goSelected(De.includes(e)?[]:[e]),void(We.current=e);if(t&&null!==We.current&&We.current!==e){const t=i(Ve,We.current,e).filter(e=>Ye.includes(e));return void goSelected([...De.filter(e=>!t.includes(e)),...t])}We.current=e,goSelected(De.includes(e)?De.filter(t=>t!==e):[...De,e])})(n,Boolean(t.event.shiftKey)),onClick:e=>e.stopPropagation(),"aria-label":ke.selectRow})}):null,K.map(t=>e("td",{style:{...bodyCellStyle(l),textAlign:t.align??"start"},children:t.render?t.render(r,l):r[t.key]},t.key))]},n)})})]})}),ut?t("div",{style:{...ct,borderTop:_},children:[e("span",{className:v(k[we],"text-(--plass-muted-fg)"),children:x(fe)?fe:`${Ue.length} / ${Le}`}),"pages"===oe?e(l,{size:we,color:Ce,density:Ne,count:Oe,page:Qe,onPageChange:goPage}):null]}):null]})}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { PlDataTable } from './PlDataTable.js';
+export type { PlDataTableColumn, PlDataTablePaging, PlDataTableProps, PlDataTableSelection, PlDataTableSort, PlDataTableSortDirection, PlDataTableStage } from './PlDataTable.js';

package/dist/components/data-table/index.js

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

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

@@ -4,12 +4,36 @@ 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;
+/**
+ * The smallest unit the picker asks for.
+ *
+ * A birthday is a day, an expiry is a month and a model year is a year, and a
+ * control that makes someone answer a question it did not need the answer to —
+ * *which* day of December 2027 does this card expire? — is a control that will
+ * be answered wrongly.
+ */
+export type PlDatePickerPrecision = 'day' | 'month' | 'year';
 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;
+    /**
+     * How far down the picker goes: a day, a month or a year.
+     *
+     * The calendar opens on the grid for that unit and pressing a cell in it
+     * answers — a `month` picker never shows a day grid at all. The value is
+     * always a `Date`, normalised to the start of whatever was chosen: the 1st of
+     * the month, or the 1st of January.
+     *
+     * `minDate` and `maxDate` are then read at the same precision. A `minDate` of
+     * 15 July leaves July pickable on a `month` picker and hands back 1 July,
+     * because a bound on a control that returns a month is a bound on months.
+     * `shouldDisableDate` is day-granular and is not consulted at all.
+     * @default 'day'
+     */
+    precision?: PlDatePickerPrecision;
     /** Whether the calendar is open. Use with `onOpenChange` to control it. */
     open?: boolean;
     defaultOpen?: boolean;
@@ -35,6 +59,9 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
     /**
      * How the trigger writes the chosen date. Passed straight to `Intl`, so
      * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     *
+     * The default follows `precision`: a medium date, a long month and year, or a
+     * bare year.
      * @default { dateStyle: 'medium' }
      */
     format?: Intl.DateTimeFormatOptions;
@@ -42,13 +69,20 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
     placeholder?: React.ReactNode;
     /** Offers the × that empties the control. @default false */
     clearable?: boolean;
-    /** Offers the shortcut to today in the footer. @default true */
+    /**
+     * Offers the shortcut to today in the footer — to this month or this year on
+     * a picker whose `precision` says so. @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`. */
+    /**
+     * Identifies the field when a form is submitted, as `YYYY-MM-DD` — or as
+     * `YYYY-MM` and `YYYY` at the two shorter precisions, which is what a native
+     * `<input type="month">` submits.
+     */
     name?: string;
 }
 /**
@@ -65,6 +99,11 @@ export interface PlDatePickerProps extends PlassPickerShellProps {
  * 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.
  *
+ * `precision` stops the drilling short. A card's expiry is a month and a model
+ * year is a year, and a control that makes someone answer a question it did not
+ * need the answer to is a control that will be answered wrongly — so a `month`
+ * picker's month grid is the last grid, and it has no day grid under it at all.
+ *
  * 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

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

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

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

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

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

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

package/dist/components/divider/PlDivider.js

@@ -1 +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 a,toLength as o}from"../../internal/styles.js";const i="[border-color:var(--p-rule-color)]",s={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:d,size:c="md",length:f,thickness:p,textAlign:h="center",className:m,style:u,children:x,...v},w){const b="vertical"===t,g=null!=x&&!1!==x&&""!==x,j={"--p-rule-color":d?`var(--plass-${d}-line)`:"var(--plass-border)","--p-rule":o(p)??"1px"},$=o(f),k={...j,...void 0===$?null:b?{height:$}:{width:$},...u};if(!g)return e(l,{ref:w,orientation:t,className:[b?"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)]",i,m??""].filter(Boolean).join(" "),style:k,...v});const[N,y]=s[t][h],z=b?"w-0 border-l [border-left-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",b?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",n[c],m??""].filter(Boolean).join(" "),style:k,...v,children:[e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[c],b?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${y} ${i}`})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Separator as i}from"@base-ui/react/separator";import{metaTextClasses as a,toLength as s}from"../../internal/styles.js";const o="[border-color:var(--p-rule-color)]",n={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"]}},d={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:c,size:f,length:p,thickness:h,textAlign:m="center",className:u,style:x,children:v,...w},b){const g=l(),j=f??g.size??"md",$="vertical"===t,k=null!=v&&!1!==v&&""!==v,N={"--p-rule-color":c?`var(--plass-${c}-line)`:"var(--plass-border)","--p-rule":s(h)??"1px"},y=s(p),z={...N,...void 0===y?null:$?{height:y}:{width:y},...x};if(!k)return e(i,{ref:b,orientation:t,className:[$?"w-0 border-s [border-inline-start-width:var(--p-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--p-rule)]",o,u??""].filter(Boolean).join(" "),style:z,...w});const[B,D]=n[t][m],P=$?"w-0 border-s [border-inline-start-width:var(--p-rule)]":"h-0 border-t [border-top-width:var(--p-rule)]";return r(i,{ref:b,orientation:t,"aria-label":"string"==typeof v?v:void 0,className:["flex items-center",$?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",d[j],u??""].filter(Boolean).join(" "),style:z,...w,children:[e("span",{"aria-hidden":"true",className:`${P} ${B} ${o}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--plass-muted-fg)",a[j],$?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${P} ${D} ${o}`})]})});

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

@@ -143,4 +143,4 @@ export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * 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, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
+export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/PlDrawer.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{Dialog as a}from"@base-ui/react/dialog";import{CloseIcon as r}from"../../internal/icons.js";import{cx as o,focusRingClasses as d,glassClasses as i,hasContent as t,metaTextClasses as n,sheetBodyClasses as p,sheetHeaderGapClasses as u,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-(--plass-z-portal) 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=a.Close;export function PlDrawer({side:d="left",mode:i="overlay",size:_="md",color:z="primary",density:$="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,classNames:J,style:K,children:M,...Q}){const S="overlay"===i,U="left"===d||"right"===d,W=V??S,X=c[$][_],Y=x[$][_],Z=R?`${X} ${Y}`:X,ss=t(B)||t(F),ls=t(L),es=void 0===A?null:{[U?"width":"height"]:"number"==typeof A?`${A}px`:A},as=o(j,p[_],y[d],E?v[d][_]:"",S?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",S?N:"",U?`h-full max-w-full ${void 0===A?b[_]:""}`:"w-full "+(void 0===A?"max-h-[85%]":""),R?"":`${Y} ${f[_]}`,I),rs=S?a.Title:"h2",os=S?a.Description:"p",ds=l(e,{children:[ss||W?l("div",{className:o("flex shrink-0 items-start gap-3",Z),children:[l("div",{className:o("flex min-w-0 flex-1 flex-col",u[_]),children:[t(B)?s(rs,{className:o("m-0 font-semibold",g[_]),children:B}):null,t(F)?s(os,{className:o("m-0 text-(--plass-muted-fg)",n[_]),children:F}):null]}),W?S?s(a.Close,{"aria-label":q,className:C,children:s(r,{})}):s("button",{type:"button","aria-label":q,className:C,onClick:()=>O?.(!1),children:s(r,{})}):null]}):null,t(M)?s("div",{className:o("min-h-0 flex-1 overflow-y-auto overscroll-contain",Z,R&&(ss||W)?m:"",R?"":"-my-1 py-1"),children:M}):null,ls?s("div",{className:o("flex shrink-0 flex-wrap items-center justify-end gap-2",Z,R?m:""),children:L}):null]});return S?l(a.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(a.Trigger,{render:T}):null,l(a.Portal,{children:[s(a.Backdrop,{className:o("plass-portal",k,J?.backdrop)}),s(a.Viewport,{className:o("plass-portal fixed inset-0 z-(--plass-z-portal) flex",w[d]),children:s(a.Popup,{className:as,style:{...h(z,3),...es,...K},...Q,children:ds})})]})]}):D??P??!0?s("div",{className:as,style:{...h(z,0),...es,...K},...Q,children:ds}):null}
+"use client";import{jsx as s,jsxs as l,Fragment as e}from"react/jsx-runtime";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Dialog as o}from"@base-ui/react/dialog";import{CloseIcon as d}from"../../internal/icons.js";import{cx as i,focusRingClasses as t,glassClasses as n,hasContent as p,metaTextClasses as u,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetLineClasses as f,sheetPaddingXClasses as x,sheetPaddingYClasses as g,sheetSectionGapClasses as h,sheetTitleClasses as b,surfaceSlots as v}from"../../internal/styles.js";const y={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},w={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)"}},j={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},N={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},k=/* @__PURE__ */[n,"relative flex flex-col overflow-hidden","text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[outline:none]"].join(" "),z=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),_=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",z].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)",t].join(" ");export const PlDrawerClose=o.Close;export function PlDrawer({side:t="left",mode:n="overlay",size:$,color:D,density:P,open:O,defaultOpen:T,onOpenChange:B,trigger:F,title:L,description:R,actions:V,dividers:q=!1,showClose:A,closeLabel:E,extent:G,rounded:H=!0,modal:I=!0,dismissible:J=!0,className:K,classNames:M,style:Q,children:S,...U}){const W=r(),X=a(),Y=E??X.close,Z=$??W.size??"md",ss=D??W.color??"primary",ls=P??W.density??"default",es="overlay"===n,rs="left"===t||"right"===t,as=A??es,os=x[ls][Z],ds=g[ls][Z],is=q?`${os} ${ds}`:os,ts=p(L)||p(R),ns=p(V),ps=void 0===G?null:{[rs?"width":"height"]:"number"==typeof G?`${G}px`:G},us=i(k,m[Z],j[t],H?w[t][Z]:"",es?"[box-shadow:var(--plass-shadow-4),var(--plass-gloss-glass)]":"[box-shadow:var(--plass-gloss-glass)]",es?z:"",rs?`h-full max-w-full ${void 0===G?y[Z]:""}`:"w-full "+(void 0===G?"max-h-[85%]":""),q?"":`${ds} ${h[Z]}`,K),ms=es?o.Title:"h2",cs=es?o.Description:"p",fs=l(e,{children:[ts||as?l("div",{className:i("flex shrink-0 items-start gap-3",is),children:[l("div",{className:i("flex min-w-0 flex-1 flex-col",c[Z]),children:[p(L)?s(ms,{className:i("m-0 font-semibold",b[Z]),children:L}):null,p(R)?s(cs,{className:i("m-0 text-(--plass-muted-fg)",u[Z]),children:R}):null]}),as?es?s(o.Close,{"aria-label":Y,className:C,children:s(d,{})}):s("button",{type:"button","aria-label":Y,className:C,onClick:()=>B?.(!1),children:s(d,{})}):null]}):null,p(S)?s("div",{className:i("min-h-0 flex-1 overflow-y-auto overscroll-contain",is,q&&(ts||as)?f:"",q?"":"-my-1 py-1"),children:S}):null,ns?s("div",{className:i("flex shrink-0 flex-wrap items-center justify-end gap-2",is,q?f:""),children:V}):null]});return es?l(o.Root,{open:O,defaultOpen:T,modal:I,disablePointerDismissal:!J,onOpenChange:(s,l)=>{J||s||"escape-key"!==l.reason?B?.(s):l.cancel()},children:[F?s(o.Trigger,{render:F}):null,l(o.Portal,{children:[s(o.Backdrop,{className:i("plass-portal",_,M?.backdrop)}),s(o.Viewport,{className:i("plass-portal fixed inset-0 z-(--plass-z-portal) flex",N[t]),children:s(o.Popup,{className:us,style:{...v(ss,3),...ps,...Q},...U,children:fs})})]})]}):O??T??!0?s("div",{className:us,style:{...v(ss,0),...ps,...Q},...U,children:fs}):null}

package/dist/components/empty/PlEmpty.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+export interface PlEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * The glyph or drawing above the words. Sized off `size`, so an icon set at
+     * `1em` fills it without being told a number.
+     */
+    icon?: React.ReactNode;
+    /** The one line that says what is not here. */
+    title?: React.ReactNode;
+    /** What to do about it. One or two sentences, never a paragraph. */
+    description?: React.ReactNode;
+    /** The way out — usually one `PlButton`. */
+    actions?: React.ReactNode;
+    /** @default 'md' */
+    size?: PlassSize;
+    /**
+     * The family the glyph takes.
+     *
+     * `secondary` by default, which is the whole difference between an empty
+     * state and an alert: nothing has gone wrong. Reach for `danger` when
+     * something has, and `success` for the end of a flow — which is what turns
+     * this into the "your order is confirmed" screen without a second component.
+     * @default 'secondary'
+     */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * The place where there is nothing.
+ *
+ * An empty list, a search that found nothing, a filter that excluded
+ * everything, a flow that has finished. All four are the same arrangement — a
+ * mark, a line, a sentence, a way out — which is why they are one component and
+ * not four, and why `color` is what tells them apart: `secondary` is "nothing
+ * here yet", `danger` is "something went wrong", `success` is "you are done".
+ *
+ * It **draws no surface**. An empty state is always inside something — a card,
+ * a table, a panel — and a sheet inside a sheet is two sheets. What it decides
+ * is the arrangement and the space around it.
+ *
+ * The one thing worth getting right is the **way out**. A screen that says
+ * "No projects" and stops is a dead end; the same screen with a "New project"
+ * button is the best moment in the whole flow to offer one.
+ */
+export declare const PlEmpty: React.ForwardRefExoticComponent<PlEmptyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty/PlEmpty.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as r,cx as n,hasContent as i,metaTextClasses as c,sheetPaddingYClasses as a,sheetTitleClasses as m,stackGapClasses as o}from"../../internal/styles.js";const x={xs:"text-2xl",sm:"text-3xl",md:"text-4xl",lg:"text-5xl",xl:"text-6xl"};export const PlEmpty=/* @__PURE__ */s.forwardRef(function PlEmpty({icon:s,title:d,description:f,actions:p,size:u,color:y,density:h,className:j,style:g,children:N,...v},w){const z=l(),E=u??z.size??"md",P=y??z.color??"secondary",b=h??z.density??"default";return t("div",{ref:w,className:n("flex flex-col items-center justify-center text-center",o[E],a[b][E],j),style:{...r(P,0,"ghost"),...g},...v,children:[i(s)?e("span",{"aria-hidden":"true",className:n("flex items-center justify-center text-(--p-accent) [&_svg]:size-[1em]",x[E]),children:s}):null,i(d)?e("p",{className:n("font-semibold text-(--plass-fg)",m[E]),children:d}):null,i(f)?e("p",{className:n("max-w-prose text-(--plass-muted-fg)",c[E]),children:f}):null,N,i(p)?e("div",{className:n("flex flex-wrap items-center justify-center gap-2"),children:p}):null]})});

package/dist/components/empty/index.d.ts

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

package/dist/components/empty/index.js

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

package/dist/components/file-picker/PlFilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{CloseIcon as l}from"../../internal/icons.js";import{controlTextLeadingClasses as t,disabledClasses as a,focusRingClasses as o,gapClasses as n,glassClasses as i,hasContent as c,iconClasses as d,metaTextClasses as p,radiusClasses as u,readOnlyFilterClasses as f,sheetTitleClasses as m,stackGapClasses as h,surfaceSlots as v,transitionClasses as g}from"../../internal/styles.js";const b={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},x={solid:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[i,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},y={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:i="glass",size:k="md",color:N="primary",density:j="default",elevation:$=0,accept:w,multiple:z=!1,maxSize:C,maxFiles:I,value:L,defaultValue:B,onFilesChange:D,onReject:F,label:M,description:_,error:W,invalid:S,title:P,hint:R,icon:T,showList:A=!0,removeLabel:V=e=>`Remove ${e}`,fullWidth:E=!0,disabled:O=!1,readOnly:q=!1,required:U=!1,name:G,id:H,className:Y,style:J,...K},Q){const X=s.useRef(null);s.useImperativeHandle(Q,()=>X.current);const[Z,ee]=s.useState(()=>[...B??[]]),re=s.useMemo(()=>L?[...L]:Z,[L,Z]),se=s.useRef(0),[le,te]=s.useState(!1),ae=c(W),oe=S??ae,ne=oe?"danger":N,ie=O||q,ce=s.useId(),de=s.useCallback(e=>{L||ee(e),D?.(e)},[D,L]),pe=s.useCallback(e=>{const r=[],s=[],l=z?I??Number.POSITIVE_INFINITY:1,t=z?re.length:0;for(const a of e)w&&!matchesAccept(a,w)?s.push({file:a,reason:"type"}):void 0!==C&&a.size>C?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[w,re.length,I,C,z]),ue=s.useCallback(e=>{const{kept:r,rejections:s}=pe(e);s.length>0&&F?.(s),r.length>0&&de(z?[...re,...r]:r)},[pe,de,re,z,F]),fe=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",b[j][k],u[k],n[k],g,d,o,O?`${a[i]} border-2 border-dashed`:q?`${x[i]} ${f} cursor-default`:x[i],ie?"":y[i],le&&!ie?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",h[k],E?"flex w-full":"inline-flex",Y??""].filter(Boolean).join(" "),style:{...v(ne,$),...J},...K,children:[c(M)?e("span",{className:[p[k],"font-semibold",O?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:M}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{ie||(e.preventDefault(),se.current+=1,te(!0))},onDragOver:e=>{ie||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{ie||(se.current=Math.max(0,se.current-1),0===se.current&&te(!1))},onDrop:e=>{ie||(e.preventDefault(),se.current=0,te(!1),ue(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:H,disabled:O,"aria-describedby":c(_)||ae?ce:void 0,"aria-invalid":oe||void 0,className:fe,onClick:()=>{ie||X.current&&(X.current.value="",X.current.click())},children:[void 0===T?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):c(T)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:T}):null,e("span",{className:`font-semibold ${m[k]}`,children:P??"Drop files here, or click to browse"}),c(R)?e("span",{className:`text-(--plass-muted-fg) ${p[k]}`,children:R}):null]}),e("input",{ref:X,type:"file",name:G,accept:w,multiple:z,required:U&&0===re.length,disabled:ie,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ue(Array.from(e.target.files??[]))})]}),A&&re.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${h[k]} m-0 list-none p-0`,children:re.map((s,a)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",u.xs,t[k],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${p[k]}`,children:formatFileSize(s.size)}),ie?null:e("button",{type:"button","aria-label":V(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",o].join(" "),onClick:()=>de(re.filter((e,r)=>r!==a)),children:e(l,{})})]},`${s.name}-${s.size}-${s.lastModified}-${a}`))}):null,c(_)&&!ae?e("span",{id:ce,className:`${p[k]} text-(--plass-muted-fg)`,children:_}):null,ae?e("span",{id:ce,className:`${p[k]} text-(--p-accent)`,children:W}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{CloseIcon as t}from"../../internal/icons.js";import{controlTextLeadingClasses as a,disabledClasses as o,focusRingClasses as n,gapClasses as i,glassClasses as c,hasContent as d,iconClasses as p,metaTextClasses as u,radiusClasses as f,readOnlyFilterClasses as m,sheetTitleClasses as h,stackGapClasses as v,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const x={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},y={solid:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},k={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:c="glass",size:N,color:j,density:$,elevation:w=0,accept:z,multiple:C=!1,maxSize:I,maxFiles:L,value:B,defaultValue:D,onFilesChange:F,onReject:M,label:_,description:W,error:S,invalid:P,title:R,hint:T,icon:A,showList:V=!0,removeLabel:E=e=>`Remove ${e}`,fullWidth:O=!0,disabled:q=!1,readOnly:U=!1,required:G=!1,name:H,id:Y,className:J,style:K,...Q},X){const Z=l(),ee=N??Z.size??"md",re=j??Z.color??"primary",se=$??Z.density??"default",le=s.useRef(null);s.useImperativeHandle(X,()=>le.current);const[te,ae]=s.useState(()=>[...D??[]]),oe=s.useMemo(()=>B?[...B]:te,[B,te]),ne=s.useRef(0),[ie,ce]=s.useState(!1),de=d(S),pe=P??de,ue=pe?"danger":re,fe=q||U,me=s.useId(),he=s.useCallback(e=>{B||ae(e),F?.(e)},[F,B]),ve=s.useCallback(e=>{const r=[],s=[],l=C?L??Number.POSITIVE_INFINITY:1,t=C?oe.length:0;for(const a of e)z&&!matchesAccept(a,z)?s.push({file:a,reason:"type"}):void 0!==I&&a.size>I?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[z,oe.length,L,I,C]),ge=s.useCallback(e=>{const{kept:r,rejections:s}=ve(e);s.length>0&&M?.(s),r.length>0&&he(C?[...oe,...r]:r)},[ve,he,oe,C,M]),be=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",x[se][ee],f[ee],i[ee],b,p,n,q?`${o[c]} border-2 border-dashed`:U?`${y[c]} ${m} cursor-default`:y[c],fe?"":k[c],ie&&!fe?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",v[ee],O?"flex w-full":"inline-flex",J??""].filter(Boolean).join(" "),style:{...g(ue,w),...K},...Q,children:[d(_)?e("span",{className:[u[ee],"font-semibold",q?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:_}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{fe||(e.preventDefault(),ne.current+=1,ce(!0))},onDragOver:e=>{fe||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{fe||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ce(!1))},onDrop:e=>{fe||(e.preventDefault(),ne.current=0,ce(!1),ge(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:Y,disabled:q,"aria-describedby":d(W)||de?me:void 0,"aria-invalid":pe||void 0,className:be,onClick:()=>{fe||le.current&&(le.current.value="",le.current.click())},children:[void 0===A?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):d(A)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:A}):null,e("span",{className:`font-semibold ${h[ee]}`,children:R??"Drop files here, or click to browse"}),d(T)?e("span",{className:`text-(--plass-muted-fg) ${u[ee]}`,children:T}):null]}),e("input",{ref:le,type:"file",name:H,accept:z,multiple:C,required:G&&0===oe.length,disabled:fe,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ge(Array.from(e.target.files??[]))})]}),V&&oe.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${v[ee]} m-0 list-none p-0`,children:oe.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",f.xs,a[ee],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${u[ee]}`,children:formatFileSize(s.size)}),fe?null:e("button",{type:"button","aria-label":E(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",n].join(" "),onClick:()=>he(oe.filter((e,r)=>r!==l)),children:e(t,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null,d(W)&&!de?e("span",{id:me,className:`${u[ee]} text-(--plass-muted-fg)`,children:W}):null,de?e("span",{id:me,className:`${u[ee]} text-(--p-accent)`,children:S}):null]})});