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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignItems, PlassJustify, PlassOrientation, PlassResponsive } from '../../types.js';
+export interface PlFlexProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the children run. `horizontal` is a row, `vertical` is a column.
+     *
+     * Responsive: `direction={{ xs: 'vertical', md: 'horizontal' }}` stacks on a
+     * phone and lines up on a laptop, which is most of what this component is
+     * for.
+     * @default 'horizontal'
+     */
+    direction?: PlassResponsive<PlassOrientation>;
+    /**
+     * Runs the children the other way along that axis — the last one first.
+     *
+     * It reverses the **painting order and nothing else**: the DOM order is what
+     * a screen reader reads and what the Tab key walks, and neither of them
+     * changes here. Use it for a visual arrangement, never to reorder content.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The gap between children, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: PlassResponsive<number>;
+    /** The gap between rows only. Falls back to `spacing`. */
+    rowSpacing?: PlassResponsive<number>;
+    /** The gap between columns only. Falls back to `spacing`. */
+    columnSpacing?: PlassResponsive<number>;
+    /** How the box distributes the space its children did not use, along the axis. */
+    justify?: PlassJustify;
+    /** How the children sit against each other across the axis. @default 'stretch' */
+    alignItems?: PlassAlignItems;
+    /** Where the lines sit when the box is longer across than its content. */
+    alignContent?: PlassJustify;
+    /**
+     * Whether children that run out of room continue on the next line.
+     *
+     * `false` by default, which is what a flex box already does — a row that
+     * wraps is a decision rather than the absence of one, and the opposite
+     * default would silently reflow a toolbar somebody sized to fit.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Lays the box out **inline**, so it sits in a line of text and is only as
+     * wide as its children.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<ul />}`,
+     * `render={<nav />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** What is laid out. */
+    children?: React.ReactNode;
+}
+/**
+ * A row or a column, and the gap between the things in it.
+ *
+ * This is the layout box with no arithmetic in it — the one to reach for when
+ * the answer is "these, side by side, with a gap". A [PlGrid](./grid) divides a
+ * row into columns and needs a `PlGridItem` to take them; here the children
+ * are whatever they are and the box only decides which way they run.
+ *
+ * **`direction` is responsive and resolves in CSS**, which is the whole reason
+ * it is worth a component rather than three Tailwind classes. `{ xs:
+ * 'vertical', md: 'horizontal' }` is a form that stacks on a phone and lines up
+ * on a laptop, decided by the stylesheet — so a server renders it correctly at
+ * every width, and dragging a window costs no re-render. It is also the only
+ * way to say that in a project that imports `plass-ui/styles.css` and has no
+ * Tailwind of its own.
+ *
+ * It draws **nothing**: no surface, no padding, no `variant`, `color`, `size`
+ * or `density`. A flex box is the arrangement of the surfaces inside it, and
+ * `spacing` — the space *between* children — is the only measurement it owns.
+ */
+export declare const PlFlex: React.ForwardRefExoticComponent<PlFlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/flex/PlFlex.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as i,justifyClasses as a,spacingValue as l}from"../../internal/grid.js";import{responsiveSlots as t,withBaseline as o}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";export const PlFlex=/* @__PURE__ */e.forwardRef(function PlFlex({direction:e,reverse:p=!1,spacing:c,rowSpacing:f,columnSpacing:m,justify:g,alignItems:u,alignContent:x,wrap:d=!1,inline:y=!1,render:w,className:j,style:v,children:h,...F},N){const P=s("plass-flex",y?"inline-flex":"flex",d?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",g?a[g]:"",u?i[u]:"",x?n[x]:"",j);return r({render:w,ref:N,props:{className:P,style:{...t("dir",o(e,"horizontal"),e=>function directionValue(e,r){const n="vertical"===e?"column":"row";return r?`${n}-reverse`:n}(e,p)),...t("gap-x",o(m??c,2),l),...t("gap-y",o(f??c,2),l),...v},children:h,...F}})});

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

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

package/dist/components/flex/index.js

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

package/dist/components/floating-action-button/PlFloatingActionButton.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { type PlButtonProps } from '../button/PlButton.js';
+import type { PlassCorner, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+export interface PlFloatingActionButtonProps extends Omit<PlButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /** The glyph. Sized in `em` against the button, exactly as a `startIcon` is. */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. It is the accessible name whether
+     * or not the words are drawn — a floating button is a disc with a mark in it
+     * nine times out of ten, and an unnamed one is the most common accessibility
+     * defect this pattern ships with.
+     */
+    label: string;
+    /**
+     * Draws the label beside the glyph.
+     *
+     * Worth turning on for the action a first-time reader would not guess from a
+     * glyph, and worth turning off again once they would.
+     * @default false
+     */
+    extended?: boolean;
+    /**
+     * Which corner of the window it sits in.
+     * @default 'bottom-end'
+     */
+    corner?: PlassCorner;
+    /**
+     * How far it stands off the two edges it is against. A number is pixels.
+     * @default '1.5rem'
+     */
+    offset?: number | string;
+    /**
+     * Whether it pins itself to the window at all.
+     *
+     * On by default, because that is what this component is. Turn it off to put
+     * the same button somewhere of your own — the end of a card, a toolbar — and
+     * keep the shape and the shadow.
+     * @default true
+     */
+    floating?: boolean;
+    /** @default 'solid' */
+    variant?: PlassVariant;
+    /**
+     * One step up the ladder from a `PlButton`'s default.
+     * @default 'lg'
+     */
+    size?: PlassSize;
+    /**
+     * How far off the page. `3` — the top of the ladder — and unlike every other
+     * default in the library it is not a compromise: this is the one control that
+     * genuinely floats over the content rather than resting on it.
+     * @default 3
+     */
+    elevation?: PlassElevation;
+}
+/**
+ * The one action a screen is about, floating over it.
+ *
+ * It is a [PlButton](./button) in a corner, and everything that makes it one is
+ * the button's: the three materials, the elevation ladder, the pointer light,
+ * `loading`, `readOnly` and `disabled`. What this adds is the **pinning**, the
+ * shape, and one rule.
+ *
+ * **`label` is required and is always the accessible name.** A floating button
+ * is a disc with a mark in it nine times out of ten, and `extended` decides
+ * only whether the words are also drawn — never whether they exist. An icon
+ * with no name is the defect this pattern ships with everywhere else.
+ *
+ * The icon-only form is a **disc**, which is [PlIconButton](./icon-button)'s
+ * deliberate exception to the radius rule: the flat run along a control's edge
+ * is there for a line of text to sit on, and a glyph has no line of text. The
+ * extended form is **not** a pill for exactly that reason — it has words along
+ * its edge, so it takes the house fillet like every other labelled control.
+ *
+ * **One per screen.** Two floating buttons in one corner is two primary
+ * actions, which is none; and a screen whose main action is already a button in
+ * the content does not want a second copy of it in the corner.
+ */
+export declare const PlFloatingActionButton: React.ForwardRefExoticComponent<PlFloatingActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/floating-action-button/PlFloatingActionButton.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import*as o from"react";import{PlButton as n}from"../button/PlButton.js";import{PlIconButton as e}from"../icon-button/PlIconButton.js";import{useDefaults as r}from"../../internal/defaults.js";import{cx as i,toLength as s}from"../../internal/styles.js";const a={"top-start":["Start","Start"],"top-end":["Start","End"],"bottom-start":["End","Start"],"bottom-end":["End","End"]};export const PlFloatingActionButton=/* @__PURE__ */o.forwardRef(function PlFloatingActionButton({icon:o,label:l,extended:c=!1,corner:m="bottom-end",offset:f,floating:d=!0,variant:u="solid",size:p,elevation:b=3,className:j,style:x,...B},g){const v=r(),z=p??v.size??"lg",[E,P]=a[m],S=s(f)??"1.5rem",y=d?{position:"fixed",[`insetBlock${E}`]:S,[`insetInline${P}`]:S}:{},I={ref:g,variant:u,size:z,elevation:b,className:i(d?"z-30":"",j),style:{...y,...x},...B};return c?t(n,{...I,startIcon:o,children:l}):t(e,{...I,icon:o,label:l})});

package/dist/components/floating-action-button/index.d.ts

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

package/dist/components/floating-action-button/index.js

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

package/dist/components/footer/PlFooter.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassResponsive, PlassSize, PlassVariant } from '../../types.js';
 /** How wide the content inside the sheet is allowed to get. */
-export type PlFooterWidth = PlassSize | 'none';
+export type PlFooterWidth = PlassMeasure;
 export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'color' | 'title'> {
     /**
      * How the bar sits in the page's scroll.
@@ -45,7 +46,7 @@ export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * spans the window. The same ladder `PlContainer`'s `maxWidth` uses.
      * @default 'none'
      */
-    maxWidth?: PlFooterWidth;
+    maxWidth?: PlassResponsive<PlFooterWidth>;
     /** The gutter and the air above and below. @default true */
     padded?: boolean;
     /**

package/dist/components/footer/PlFooter.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as i,sheetPaddingYClasses as l,sheetRestClasses as m,surfaceSlots as n,transitionClasses as d}from"../../internal/styles.js";const c=m,f={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:m="static",variant:x="glass",size:p,color:y,density:w,elevation:b=0,divider:v=!0,maxWidth:j="none",padded:g=!0,label:h,render:z,className:k,style:N,children:C,...F},P){const R=t(),W=p??R.size??"md",q=y??R.color??"primary",A=w??R.density??"default",{register:B}=r.useContext(s),D=r.useCallback(e=>{B("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[B,P]),E=a("w-full min-w-0",c[x],v?"border-t [border-color:var(--plass-divider)]":"",f[m],d,k);return o({render:z??e("footer",{}),ref:D,props:{"aria-label":h,className:E,style:{...n(q,b),...N},children:e("div",{className:a("w-full",g?a(i[A][W],l[A][W]):"","none"===j?"":a(u[j],"mx-auto")),children:C}),...F}})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{measureSlots as i}from"../../internal/responsive.js";import{cx as a,sheetPaddingXClasses as l,sheetPaddingYClasses as n,sheetRestClasses as d,surfaceSlots as m,transitionClasses as c}from"../../internal/styles.js";const f=d,p={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:d="static",variant:u="glass",size:y,color:x,density:b,elevation:v=0,divider:j=!0,maxWidth:h,padded:w=!0,label:z,render:N,className:g,style:k,children:C,...F},P){const R=i(h),W=t(),q=y??W.size??"md",A=x??W.color??"primary",B=b??W.density??"default",{register:D}=r.useContext(s),E=r.useCallback(e=>{D("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[D,P]),G=a("w-full min-w-0",f[u],j?"border-t [border-color:var(--plass-divider)]":"",p[d],c,g);return o({render:N??e("footer",{}),ref:E,props:{"aria-label":z,className:G,style:{...m(A,v),...k},children:e("div",{style:R.style,className:a("w-full",w?a(l[B][q],n[B][q]):"",R.className,void 0===h?"":"mx-auto"),children:C}),...F}})});