plass-ui 1.4.0 → 1.5.0

package/dist/components/confirm/PlConfirmProvider.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{PlButton as t}from"../button/PlButton.js";import{PlModal as i}from"../modal/PlModal.js";const l=/* @__PURE__ */o.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const[h,p]=o.useState(!1),[C,b]=o.useState(null),v=o.useRef(null),P=o.useRef([]),w=o.useCallback(e=>{const r=v.current;if(!r)return;r.resolve(e);const n=P.current.shift();if(n)return v.current=n,void b(n);v.current=null,p(!1)},[]),k=o.useCallback((e,r)=>new Promise(n=>{const o={kind:e,options:r,resolve:n};v.current?P.current.push(o):(v.current=o,b(o),p(!0))}),[]),x=o.useMemo(()=>({confirm:e=>k("confirm",e),alert:e=>k("alert",e).then(()=>{})}),[k]);o.useEffect(()=>()=>{v.current?.resolve(!1),P.current.forEach(e=>e.resolve(!1)),v.current=null,P.current=[]},[]);const z=C?.options,j="alert"===C?.kind,L="confirm"===(z?.initialFocus??"cancel")||j;return n(l.Provider,{value:x,children:[m,e(i,{open:h,onOpenChange:e=>{e||w(!1)},size:z?.size??c,color:z?.color??s,width:z?.width??f,dismissible:z?.dismissible??!0,title:z?.title,description:z?.description,actions:n(r,{children:[j?null:e(t,{variant:"ghost",color:"secondary",size:z?.size??c,autoFocus:!L,onClick:()=>w(!1),children:z?.cancelLabel??a??"Cancel"}),e(t,{color:z?.color??s,size:z?.size??c,autoFocus:L,onClick:()=>w(!0),children:z?.confirmLabel??(j?d??"OK":u??"Confirm")})]}),children:z?.children})]})}export function usePlConfirm(){const e=o.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{PlModal as t}from"../modal/PlModal.js";import{useLabels as i}from"../../internal/labels.js";const l=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const h=i(),[p,b]=n.useState(!1),[C,v]=n.useState(null),P=n.useRef(null),w=n.useRef([]),k=n.useRef(0),x=n.useCallback(e=>{const r=P.current;if(!r)return;r.resolve(e);const n=w.current.shift();if(n)return P.current=n,void v(n);P.current=null,b(!1)},[]),z=n.useCallback((e,r)=>new Promise(n=>{k.current+=1;const o={id:k.current,kind:e,options:r,resolve:n};P.current?w.current.push(o):(P.current=o,v(o),b(!0))}),[]),j=n.useMemo(()=>({confirm:e=>z("confirm",e),alert:e=>z("alert",e).then(()=>{})}),[z]);n.useEffect(()=>()=>{P.current?.resolve(!1),w.current.forEach(e=>e.resolve(!1)),P.current=null,w.current=[]},[]);const g=C?.options,L="alert"===C?.kind,F="confirm"===(g?.initialFocus??"cancel")||L;return r(l.Provider,{value:j,children:[m,e(t,{open:p,onOpenChange:e=>{e||x(!1)},size:g?.size??c,color:g?.color??s,width:g?.width??f,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[L?null:e(o,{variant:"ghost",color:"secondary",size:g?.size??c,autoFocus:!F,onClick:()=>x(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{color:g?.color??s,size:g?.size??c,autoFocus:F,onClick:()=>x(!0),children:g?.confirmLabel??(L?d??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})]})}export function usePlConfirm(){const e=n.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}

package/dist/components/container/PlContainer.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{measureSlots as s}from"../../internal/responsive.js";import{cx as n,sheetPaddingXClasses as a}from"../../internal/styles.js";export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e,padded:i=!0,size:o,density:l,centered:d=!0,render:m,className:c,children:f,...p},u){const y=r(),h=o??y.size??"md",j=l??y.density??"default",x=s(e),N=n("block w-full",x.className,d?"mx-auto":"",i?a[j][h]:"",c);return t({render:m,ref:u,props:{className:N,style:x.style,children:f,...p}})});
+"use client";import*as e from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{measureSlots as s}from"../../internal/responsive.js";import{cx as n,sheetPaddingXClasses as i}from"../../internal/styles.js";export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e,padded:o=!0,size:a,density:l,centered:d=!0,render:m,className:c,style:f,children:p,...u},y){const h=r(),j=a??h.size??"md",x=l??h.density??"default",N=s(e),b=n("block w-full",N.className,d?"mx-auto":"",o?i[x][j]:"",c);return t({render:m,ref:y,props:{className:b,style:f||N.style?{...N.style,...f}:void 0,children:p,...u}})});

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

@@ -61,7 +61,11 @@ export interface PlDataTableColumn<Row> {
      * @default 'start'
      */
     align?: PlTableAlign;
-    /** Renders the cell. Without it the cell is `row[key]` rendered as-is. */
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is.
+     *
+     * `index` is the row's position in `rows`, not its place on the screen.
+     */
     render?: (row: Row, index: number) => React.ReactNode;
     /**
      * What this column *is*, for the sort and the search.
@@ -100,9 +104,13 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     /**
      * 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.
+     * It defaults to the row's position in `rows`, which survives a sort, a
+     * search and a page, and does not survive `rows` changing: a row added at the
+     * top moves every other row's key, so a selection made before it belongs to
+     * different rows after it.
+     *
+     * `index` here, and in every other callback, is that position in `rows`, not
+     * the row's place on the screen.
      */
     getRowKey?: (row: Row, index: number) => React.Key;
     /** Shown above the grid, and read out as the table's accessible name. */
@@ -117,7 +125,10 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     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. */
+    /**
+     * Makes rows activatable. Also turns on the hover treatment. `index` is the
+     * row's position in `rows`.
+     */
     onRowClick?: (row: Row, index: number) => void;
     /** The sorted column and its direction. Pass it to control the sort. */
     sort?: PlDataTableSort | null;
@@ -143,7 +154,10 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     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. */
+    /**
+     * Keeps a row out of the selection — a total line, a row already spent.
+     * `index` is the row's position in `rows`.
+     */
     isRowSelectable?: (row: Row, index: number) => boolean;
     /** How the rows are handed out. @default 'scroll' */
     paging?: PlDataTablePaging;

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

@@ -1 +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]})}
+"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 n}from"../pagination/index.js";import{PlSkeleton as l}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 w,paddingXValues as k,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:ne,onSelectedChange:le,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(),we=m(),ke=y??xe.size??"md",Ce=T??xe.color??"primary",Ne=D??xe.density??"default",Se=F??we.empty,[je,ze]=r.useState(V),[Me,Pe]=r.useState(Z),[$e,_e]=r.useState(ne??[]),[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=r.useMemo(()=>I.map((e,t)=>({row:e,index:t})),[I]),Ge=g(Te),Je=r.useMemo(()=>{if(!Ke||""===Ge)return Fe;const e=K.filter(e=>!e.unsearchable);return Fe.filter(({row:t})=>h(e.map(e=>qe(e,t))).includes(Ge))},[Fe,K,Ge,Ke,qe]),Le=r.useMemo(()=>{if(!He||null===Be)return Je;const e=K.find(e=>e.key===Be.key);if(!e)return Je;const t="asc"===Be.direction?1:-1;return[...Je].sort((r,a)=>e.compare?e.compare(r.row,a.row)*t:o(qe(e,r.row),qe(e,a.row),t))},[Je,K,Be,He,qe]),Oe=Ie?Le.length:pe??Le.length,Qe=Math.max(1,Math.ceil(Oe/ie)),Ue=Math.min(Math.max(ce??Ae,1),Qe),Ve=r.useMemo(()=>{if("pages"!==oe||!Ie)return Le;const[e,t]=d(Le.length,Ue,ie);return Le.slice(e,t)},[Le,oe,Ie,Ue,ie]),We=r.useMemo(()=>Ve.map(({row:e,index:t})=>Ee(e,t)),[Ve,Ee]),Xe=r.useRef(null);function goPage(e){void 0===ce&&Re(e),e!==Ue&&ue?.(e)}const selectable=(e,t)=>"none"!==re&&(!se||se(e,t)),goSelected=e=>{void 0===ae&&_e(e);const t=new Set(e);le?.(e,I.filter((e,r)=>t.has(Ee(e,r))))},Ye=We.filter(e=>De.includes(e)),Ze=Ve.filter(({row:e,index:t})=>selectable(e,t)).map(({row:e,index:t})=>Ee(e,t)),et=Ze.length>0&&Ye.length===Ze.length,tt=k[Ne][ke],rt=z[Ne][ke],at=Boolean(Q),nt=J||at,lt=void 0!==O,st="none"!==re,ot=K.length+(st?1:0),it={padding:`${rt} ${tt}`,border:0,background:"none"},ct={...it,...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=>({...it,borderTop:0===e?0:_}),dt={padding:`${rt} ${tt}`,display:"flex",alignItems:"center",justifyContent:"space-between",gap:"0.75rem"},ut=X||x(ge),pt="pages"===oe&&Qe>1||x(fe);return t("div",{className:v("overflow-hidden",C[ke],N[p],ve),style:{...j(Ce,H),...ye},...be,children:[x(q)?e("div",{"aria-hidden":"true",className:v(w[ke],"font-semibold text-(--plass-muted-fg)"),style:{...it,borderBottom:_,textAlign:"start"},children:q}):null,ut?t("div",{style:{...dt,borderBottom:_},children:[X?e(s,{size:ke,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??we.search,"aria-label":we.search,className:"min-w-0 flex-1"}):e("span",{}),x(ge)?e("div",{className:v("flex items-center",b[ke]),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[ke],"text-(--plass-fg)"),style:A,"aria-busy":he||void 0,children:[x(q)?e("caption",{className:S,children:q}):null,t("colgroup",{children:[st?e("col",{style:{width:R[ke]}}):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:[st?e("th",{scope:"col",className:v(L&&"sticky top-0 z-10"),style:ct,children:"multiple"===re?e(a,{size:ke,color:Ce,checked:et,indeterminate:Ye.length>0&&!et,onCheckedChange:()=>{const e=De.filter(e=>!Ze.includes(e));goSelected(et?e:[...e,...Ze])},disabled:0===Ze.length,"aria-label":we.selectAll}):e("span",{className:S,children:we.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:{...ct,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:ot},(t,a)=>e("td",{style:bodyCellStyle(r),children:e(l,{size:ke,color:Ce})},a))},r)):0===Ve.length?e("tr",{className:$,children:e("td",{colSpan:ot,className:"text-(--plass-muted-fg)",style:{...it,padding:`2rem ${tt}`,textAlign:"center"},children:Se})}):Ve.map(({row:r,index:n},l)=>{const s=Ee(r,n),o=De.includes(s),c=selectable(r,n);return t("tr",{"aria-selected":st?o:void 0,className:v($,G&&l%2==1&&"[--p-row:var(--plass-stripe)]",o&&"[--p-row:var(--p-soft)]",nt&&"hover:[--p-row:var(--p-soft)]",at&&M),style:{backgroundColor:"var(--p-row)"},tabIndex:at?0:void 0,onClick:Q?()=>Q(r,n):void 0,onKeyDown:Q?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Q(r,n)))}:void 0,children:[st?e("td",{style:bodyCellStyle(l),children:e(a,{size:ke,color:Ce,checked:o,disabled:!c,onCheckedChange:(e,t)=>((e,t)=>{if("single"===re)return goSelected(De.includes(e)?[]:[e]),void(Xe.current=e);if(t&&null!==Xe.current&&Xe.current!==e){const t=i(We,Xe.current,e).filter(e=>Ze.includes(e));return void goSelected([...De.filter(e=>!t.includes(e)),...t])}Xe.current=e,goSelected(De.includes(e)?De.filter(t=>t!==e):[...De,e])})(s,Boolean(t.event.shiftKey)),onClick:e=>e.stopPropagation(),"aria-label":we.selectRow})}):null,K.map(t=>e("td",{style:{...bodyCellStyle(l),textAlign:t.align??"start"},children:t.render?t.render(r,n):r[t.key]},t.key))]},s)})})]})}),pt?t("div",{style:{...dt,borderTop:_},children:[e("span",{className:v(w[ke],"text-(--plass-muted-fg)"),children:x(fe)?fe:`${Ve.length} / ${Oe}`}),"pages"===oe?e(n,{size:ke,color:Ce,density:Ne,count:Qe,page:Ue,onPageChange:goPage}):null]}):null]})}

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

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

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

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

@@ -60,7 +60,10 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
      * @default true
      */
     showList?: boolean;
-    /** Accessible name of a file's remove button. Receives the file's name. */
+    /**
+     * Accessible name of a file's remove button. Receives the file's name.
+     * @default `Remove {name}`, from the label pack
+     */
     removeLabel?: (name: string) => string;
     /** Stretches to the width of the container. @default true */
     fullWidth?: boolean;

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{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]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Field as l}from"@base-ui/react/field";import{useDefaults as t}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as o,useFormReport as n}from"../../internal/form.js";import{CloseIcon as i}from"../../internal/icons.js";import{useLabels as c}from"../../internal/labels.js";import{controlTextLeadingClasses as d,disabledClasses as p,focusRingClasses as u,gapClasses as f,glassClasses as m,hasContent as h,iconClasses as v,metaTextClasses as b,radiusClasses as g,readOnlyFilterClasses as x,sheetTitleClasses as y,stackGapClasses as j,surfaceSlots as k,transitionClasses as $}from"../../internal/styles.js";const N={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"}},w={solid:/* @__PURE__ */[m,"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__ */[m,"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)]"},z={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:m="glass",size:C,color:I,density:B,elevation:L=0,accept:D,multiple:F=!1,maxSize:M,maxFiles:T,value:_,defaultValue:R,onFilesChange:W,onReject:P,label:S,description:E,error:V,invalid:A,title:O,hint:q,icon:U,showList:G=!0,removeLabel:H,fullWidth:Y=!0,disabled:J=!1,readOnly:K=!1,required:Q=!1,name:X,id:Z,className:ee,style:re,...se},le){const te=t(),ae=c(),oe=H??ae.removeItem,ne=C??te.size??"md",ie=I??te.color??"primary",ce=B??te.density??"default",de=s.useRef(null),pe=s.useRef(null),ue=s.useRef(null);s.useImperativeHandle(le,()=>de.current);const[fe,me]=s.useState(()=>[...R??[]]),he=s.useMemo(()=>_?[..._]:fe,[_,fe]),ve=s.useRef(0),[be,ge]=s.useState(!1),xe=h(V),ye=A??xe,je=ye?"danger":ie,ke=J||K,$e=s.useId(),Ne=`${$e}-error`,we=`${$e}-label`,ze=Z??`${$e}-zone`,Ce=s.useCallback(e=>{const r=de.current;if(!r||"undefined"==typeof DataTransfer)return;const s=new DataTransfer;for(const r of e)s.items.add(r);r.files=s.files},[]);s.useEffect(()=>{Ce(he)},[he,Ce]),n(X,()=>[...he],!J);const Ie=s.useCallback(e=>{_||me(e),W?.(e)},[W,_]),Be=s.useCallback(e=>{const r=[],s=[],l=F?T??Number.POSITIVE_INFINITY:1,t=F?he.length:0;for(const a of e)D&&!matchesAccept(a,D)?s.push({file:a,reason:"type"}):void 0!==M&&a.size>M?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[D,he.length,T,M,F]),Le=s.useCallback(e=>{const{kept:r,rejections:s}=Be(e);s.length>0&&P?.(s),r.length>0&&Ie(F?[...he,...r]:r)},[Be,Ie,he,F,P]),browse=()=>{ke||de.current?.click()},De=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",N[ce][ne],g[ne],f[ne],$,v,u,J?`${p[m]} border-2 border-dashed`:K?`${w[m]} ${x} cursor-default`:w[m],ke?"":z[m],be&&!ke?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r(l.Root,{name:X,disabled:J,invalid:ye,className:["flex-col align-top",j[ne],Y?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...k(je,L),...re},...se,children:[h(S)?e("span",{id:we,className:[b[ne],"font-semibold",J?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:S}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{ke||(e.preventDefault(),ve.current+=1,ge(!0))},onDragOver:e=>{ke||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{ke||(ve.current=Math.max(0,ve.current-1),0===ve.current&&ge(!1))},onDrop:e=>{ke||(e.preventDefault(),ve.current=0,ge(!1),Le(Array.from(e.dataTransfer.files)))},children:[e(l.Validity,{children:({validity:s})=>{const l=!1===s.valid,t=!xe&&l&&!J&&!0!==A,a=[h(E)||xe?$e:null,t?Ne:null].filter(Boolean).join(" ")||void 0;return r("button",{ref:pe,type:"button",id:ze,"aria-labelledby":h(S)?`${we} ${ze}`:void 0,disabled:J,"aria-describedby":a,"aria-invalid":ye||l||void 0,className:De,onClick:browse,onBlur:()=>o(ue.current),children:[void 0===U?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):h(U)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:U}):null,e("span",{className:`font-semibold ${y[ne]}`,children:O??ae.filePickerTitle}),h(q)?e("span",{className:`text-(--plass-muted-fg) ${b[ne]}`,children:q}):null]})}}),e("input",{ref:de,type:"file",name:X,accept:D,multiple:F,disabled:ke,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{Le(Array.from(e.target.files??[])),Ce(he)}})]}),G&&he.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${j[ne]} m-0 list-none p-0`,children:he.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",g.xs,d[ne],"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 ${b[ne]}`,children:formatFileSize(s.size)}),ke?null:e("button",{type:"button","aria-label":oe(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",u].join(" "),onClick:()=>Ie(he.filter((e,r)=>r!==l)),children:e(i,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null,h(E)&&!xe?e("span",{id:$e,className:`${b[ne]} text-(--plass-muted-fg)`,children:E}):null,xe?e("span",{id:$e,className:`${b[ne]} text-(--p-accent)`,children:V}):e(l.Error,{id:Ne,className:`${b[ne]} text-(--p-accent)`}),e(a,{ref:ue,value:he.map(e=>e.name),required:Q&&!K,disabled:J,standIn:()=>pe.current})]})});

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -27,6 +27,9 @@ export interface PlFloatingBottomNavigationProps extends Omit<PlassStyleProps, '
     /**
      * Keeps the bar clear of the home indicator on a phone, by adding
      * `env(safe-area-inset-bottom)` to the gap under it.
+     *
+     * A browser gives a page that inset only when its viewport meta tag has
+     * `viewport-fit=cover`. Without it, this adds nothing.
      * @default true
      */
     safeArea?: boolean;

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),b={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),I=l??E.size??"md",L=n??E.color??"primary",O=c??E.density??"default",[S,V]=s.useState(f),W=void 0!==u,D=W?u:S,H=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=H.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,D,a,I,O,P,q]),s.useEffect(()=>{const e=H.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{W||V(e),m?.(e)},[W,m]),J=s.useMemo(()=>({value:D??null,change:G,size:I,disabled:P}),[D,G,I,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[I]:b[I],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(L,p,"solid"),...F},children:e(v.Provider,{value:J,children:t("div",{ref:H,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[O][I],y[O][I],g),children:[null!=D?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(v),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","forced-colors:border-2 forced-colors:[border-color:Highlight]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),H=l??E.size??"md",I=n??E.color??"primary",L=c??E.density??"default",[O,S]=s.useState(f),V=void 0!==u,W=V?u:O,D=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=D.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return a.hidden=!0,void a.removeAttribute("data-ready");a.hidden=!1;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,W,a,H,L,P,q]),s.useEffect(()=>{const e=D.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{V||S(e),m?.(e)},[V,m]),J=s.useMemo(()=>({value:W??null,change:G,size:H,disabled:P}),[W,G,H,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[H]:v[H],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(I,p,"solid"),...F},children:e(b.Provider,{value:J,children:t("div",{ref:D,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[L][H],y[L][H],g),children:[null!=W?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:v,children:h,onClick:x,...y},w){const N=s.useContext(b),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",v),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});

package/dist/components/form/PlForm.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as m,sheetSectionGapClasses as t}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:o="onSubmit",errors:i,onSubmit:s,size:a="md",className:n,children:l,...c},f){return r(e,{ref:f,validationMode:o,errors:i,onFormSubmit:r=>s?.(r),className:m("flex flex-col",t[a],n),...c,children:l})});
+"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{FormReportContext as t}from"../../internal/form.js";import{cx as i,sheetSectionGapClasses as m}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:n="onSubmit",errors:s,onSubmit:a,size:l="md",className:f,children:c,...u},d){const[p]=o.useState(()=>new Map);return r(t.Provider,{value:p,children:r(e,{ref:d,validationMode:n,errors:s,onFormSubmit:r=>{if(!a)return;const o={...r};for(const[r,e]of p)o[r]=e();a(o)},className:i("flex flex-col",m[l],f),...u,children:c})})});

package/dist/components/gallery/PlGallery.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PlImageFit, PlImageFlip, PlImageLetterbox, PlImagePlaceholder, PlImagePosition, PlImageRotation } from '../image/PlImage.js';
 import type { PlassColor, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * How the tiles are arranged.
@@ -43,6 +44,25 @@ export interface PlGalleryItem {
      * `ratio`, and comes out as a grid of squares in a masonry's clothing.
      */
     ratio?: number | string;
+    /**
+     * Turns the picture clockwise, a quarter at a time, as `PlImage`'s `rotate`
+     * does.
+     *
+     * `ratio` stays the file's own proportion. A picture on its side is laid out
+     * on its side in `masonry` and `justified`, and in the viewer; a `grid` tile
+     * keeps the gallery's shape, because that is the shape of the layout.
+     * @default 0
+     */
+    rotate?: PlImageRotation;
+    /** Mirrors the picture, as `PlImage`'s `flip` does. @default 'none' */
+    flip?: PlImageFlip;
+    /** Where the picture sits in its tile, as `PlImage`'s `position`. @default 'center' */
+    position?: PlImagePosition | (string & {});
+    /**
+     * A small copy of the picture to stand in while the file arrives, as
+     * `PlImage`'s `placeholder` takes one.
+     */
+    placeholder?: PlImagePlaceholder;
     /** How many columns the tile takes in `quilted`. @default 1 */
     cols?: number;
     /** How many rows the tile takes in `quilted`. @default 1 */
@@ -93,10 +113,28 @@ export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'
     rowHeight?: number;
     /** Rounds the tiles. @default true */
     rounded?: boolean;
+    /**
+     * How every picture fills its tile, as `PlImage`'s `fit`.
+     * @default 'cover'
+     */
+    fit?: PlImageFit;
+    /**
+     * What fills a tile where `fit` leaves it empty, as `PlImage`'s `letterbox`:
+     * `blur`, or a CSS `background`.
+     * @default 'none'
+     */
+    letterbox?: PlImageLetterbox | (string & {});
+    /**
+     * When the pictures are fetched. `eager` for a gallery at the top of the
+     * page, where lazy tiles would arrive late.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
     /**
      * Where a tile's `title` and `description` go. `below` puts them under the
      * picture, `overlay` writes them across the foot of it, and `hover` is
-     * `overlay` that arrives with the pointer.
+     * `overlay` that arrives with the pointer. `none` draws no caption, and then
+     * neither is read out.
      * @default 'none'
      */
     caption?: PlGalleryCaption;
@@ -125,7 +163,7 @@ export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'
     label?: string;
     /**
      * How a tile and the viewer's counter say where in the set they are.
-     * @default (index, total) => `${index} of ${total}`
+     * @default `{index} of {total}`, from the label pack
      */
     itemLabel?: (index: number, total: number) => string;
     /** What is drawn when `items` is empty. Nothing at all by default. */

package/dist/components/gallery/PlGallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{dealColumns as r,ratioOf as o}from"../../internal/gallery.js";import{responsiveSlots as n,withBaseline as m}from"../../internal/responsive.js";import{usePlBreakpointValue as p}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as d,hasContent as u,metaTextClasses as f,radiusClasses as g,surfaceSlots as h,toLength as x,transitionClasses as v}from"../../internal/styles.js";import{PlImage as y}from"../image/PlImage.js";const b=/* @__PURE__ */a.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),w={xs:2,sm:3,lg:4},_={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},j={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:scale-106 group-focus-visible/tile:[&_img]:scale-106"};export const PlGallery=/* @__PURE__ */a.forwardRef(function PlGallery({items:z,layout:k="grid",columns:M,gap:$="md",ratio:q=1,rowHeight:P=220,rounded:G=!0,caption:S="none",hover:C="lift",preview:I=!1,onItemSelect:R,label:A,itemLabel:B,empty:F,size:L,color:V,className:H,classNames:W,style:D,...E},J){const K=s(),O=L??K.size??"md",Q=V??K.color??"primary",T=i(),U=A??T.gallery,X=B??((e,l)=>`${e} of ${l}`),[Y,Z]=a.useState(null),ee=m(M??w,2),le=Math.max(1,p(ee)??2),te="string"==typeof $&&$ in _?_[$]:x($)??_.md,ae=G?g[O]:"",se=o(q,1),tile=(a,s,i)=>{const r=u(a.title)||u(a.description),o="none"!==S&&r,n="overlay"===S||"hover"===S,m=e(y,{src:a.src,alt:a.alt,ratio:"grid"===k?q:"quilted"===k?"auto":a.ratio??q,fit:"cover",rounded:!1,size:O,color:Q,className:c("size-full",W?.image)}),p=o?l("div",{className:c("min-w-0",n?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===S?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",W?.caption),children:[u(a.title)?e("span",{className:c("truncate font-medium",f[O],n?"":"text-(--plass-fg)",W?.title),children:a.title}):null,u(a.description)?e("span",{className:c("truncate",f[O],n?"text-white/80":"text-(--plass-muted-fg)",W?.description),children:a.description}):null]}):null,g=l("span",{className:c("relative block overflow-hidden",ae,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",j[C],N[C],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]"),children:[m,n?p:null]}),h=n||!o?g:l(t,{children:[g,p]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":"",W?.item),style:i,children:I||R?e("button",{type:"button","aria-label":`${a.alt} — ${X(s+1,z.length)}`,className:c("block w-full bg-transparent p-0 text-start",I?"cursor-zoom-in":"cursor-pointer",d,v,ae,"justified"===k?"flex-1":""),onClick:()=>(e=>{R?.(z[e],e),I&&Z(e)})(s),children:h}):h},a.id??a.src)};let ie;if("masonry"===k){const l=z.map(e=>o(e.ratio,se));ie=r(l,le).map((l,t)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:te},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:te},children:l.map(e=>tile(z[e],e,{}))})},t))}else ie="justified"===k?z.map((e,l)=>{const t=o(e.ratio,se);return tile(e,l,{flexGrow:t,flexBasis:t*P+"px",maxWidth:"100%"})}):z.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===z.length&&u(F)?e(t,{children:F}):l(t,{children:[e("ul",{ref:J,role:"list","aria-label":U,className:c("plass-gallery m-0 list-none p-0","justified"===k?"flex flex-wrap":"","masonry"===k?"flex items-start":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",H),style:{gap:te,...h(Q,0),...n("cols",ee,e=>String(Math.max(1,Math.round(e)))),..."quilted"===k?{gridAutoRows:`${P}px`,gridAutoFlow:"dense"}:null,...D},...E,children:ie}),I?e(a.Suspense,{fallback:null,children:e(b,{items:z,index:Y,onIndexChange:Z,size:O,color:Q,label:U,itemLabel:X})}):null]})});
+"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as i from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{isTurned as o,masonryRows as s,ratioOf as n,shownRatio as d}from"../../internal/gallery.js";import{responsiveSlots as m,withBaseline as p}from"../../internal/responsive.js";import{usePlBreakpointValue as u}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as g,hasContent as f,metaTextClasses as h,radiusClasses as v,surfaceSlots as x,toLength as y,transitionClasses as b}from"../../internal/styles.js";import{PlImage as w}from"../image/PlImage.js";const j=/* @__PURE__ */i.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),_={xs:2,sm:3,lg:4},$={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},z={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:[transform:scale(1.06)] group-focus-visible/tile:[&_img]:[transform:scale(1.06)]"};export const PlGallery=/* @__PURE__ */i.forwardRef(function PlGallery({items:R,layout:k="grid",columns:M,gap:q="md",ratio:P=1,rowHeight:S=220,rounded:C=!0,fit:G="cover",letterbox:I,loading:T="lazy",caption:B="none",hover:F="lift",preview:A=!1,onItemSelect:L,label:V,itemLabel:H,empty:W,size:D,color:E,className:J,classNames:K,style:O,...Q},U){const X=r(),Y=D??X.size??"md",Z=E??X.color??"primary",ee=a(),le=V??ee.gallery,te=H??ee.galleryItem,ie=i.useId(),[re,ae]=i.useState(null),oe=p(M??_,2),se=Math.max(1,u(oe)??2),ne="string"==typeof q&&q in $?$[q]:y(q)??$.md,de=C?v[Y]:"",me=n(P,1),tile=(i,r,a,s)=>{const m=f(i.title)||f(i.description),p="none"!==B&&m,u="overlay"===B||"hover"===B,v=`${ie}-${r}-title`,x=`${ie}-${r}-description`,y=p?[f(i.title)?v:null,f(i.description)?x:null].filter(Boolean).join(" "):void 0,j=e(w,{src:i.src,alt:i.alt,ratio:"grid"===k?P:"quilted"===k?"auto":o(i.rotate)?d(n(i.ratio,me),i.rotate):i.ratio??P,fit:G,letterbox:I,loading:T,rotate:i.rotate,flip:i.flip,position:i.position,placeholder:i.placeholder,rounded:!1,size:Y,color:Z,className:c("size-full",K?.image)}),_=p?l("div",{style:void 0===s||u?void 0:{gridRow:String(s)},className:c("min-w-0",u?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===B?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",K?.caption),children:[f(i.title)?e("span",{id:v,className:c("truncate font-medium",h[Y],u?"":"text-(--plass-fg)",K?.title),children:i.title}):null,f(i.description)?e("span",{id:x,className:c("truncate",h[Y],u?"text-white/80":"text-(--plass-muted-fg)",K?.description),children:i.description}):null]}):null,$=l("span",{style:void 0===s?void 0:{gridRow:`1 / span ${"below"===B?s-1:s}`},className:c("relative block overflow-hidden",de,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",z[F],N[F],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]"),children:[j,u?_:null]}),M=u||!p?$:l(t,{children:[$,_]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":void 0===s?"":"grid",K?.item),style:a,children:A||L?e("button",{type:"button","aria-label":`${i.alt} — ${te(r+1,R.length)}`,"aria-describedby":y,className:c(void 0===s?"block":"grid","w-full bg-transparent p-0 text-start",A?"cursor-zoom-in":"cursor-pointer",g,b,de,"justified"===k?"flex-1":""),style:void 0===s?void 0:{gridRow:`1 / span ${s}`,gridTemplateRows:"subgrid"},onClick:()=>(e=>{L?.(R[e],e),A&&ae(e)})(r),children:M}):M},i.id??i.src)};let pe,ue;if("masonry"===k){const e=R.map(e=>d(n(e.ratio,me),e.rotate)),{tracks:l,tiles:t}=s(e,se,"below"===B);ue=l.map(e=>"caption"===e?"auto":"gap"===e?ne:`${Number((100*e).toFixed(2))}fr`).join(" "),pe=R.map((e,l)=>{const{column:i,start:r,end:a}=t[l];return tile(e,l,{gridColumn:String(i),gridRow:`${r} / ${a}`,gridTemplateRows:"subgrid"},a-r)})}else pe="justified"===k?R.map((e,l)=>{const t=d(n(e.ratio,me),e.rotate);return tile(e,l,{flexGrow:t,flexBasis:t*S+"px",maxWidth:"100%"})}):R.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===R.length&&f(W)?e(t,{children:W}):l(t,{children:[e("ul",{ref:U,role:"list","aria-label":le,className:c("plass-gallery m-0 list-none p-0","justified"===k?"plass-gallery-justified flex flex-wrap":"","masonry"===k?"grid":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",J),style:{gap:"masonry"===k?`0 ${ne}`:ne,...x(Z,0),...m("cols",oe,e=>String(Math.max(1,Math.round(e)))),..."masonry"===k?{gridTemplateColumns:`repeat(${se}, minmax(0, 1fr))`,gridTemplateRows:ue}:null,..."quilted"===k?{gridAutoRows:`${S}px`,gridAutoFlow:"dense"}:null,...O},...Q,children:pe}),A?e(i.Suspense,{fallback:null,children:e(j,{items:R,index:re,onIndexChange:ae,size:Y,color:Z,label:le,itemLabel:te})}):null]})});

package/dist/components/gallery/PlGalleryViewer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useLabels as t}from"../../internal/labels.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,metaTextClasses as i}from"../../internal/styles.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";export function PlGalleryViewer({items:o,index:c,onIndexChange:m,size:u,color:d,label:p,itemLabel:f}){const x=t(),v=null!==c,h=null===c?void 0:o[c],g=null===c||c<=0,b=null===c||c>=o.length-1,go=e=>{e>=0&&e<o.length&&m(e)};return e(r,{open:v,onOpenChange:e=>{e||m(null)},tone:"glass",dismissible:!0,size:u,color:d,label:p,onKeyDown:e=>{null===c||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(c+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(c-1)))},children:l("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[l("div",{className:"relative flex items-center justify-center",children:[h?e("img",{src:h.full??h.src,alt:h.alt,className:"max-h-[80vh] max-w-[90vw] object-contain"},h.id??h.src):null,o.length>1?l("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.previous,disabled:g,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(n,{})}),onClick:()=>go((c??0)-1)}),e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.next,disabled:b,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(n,{})}),onClick:()=>go((c??0)+1)})]}):null]}),h&&(h.title||h.description)?l("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[h.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:h.title}):null,h.description?e("span",{className:s("truncate text-(--plass-muted-fg)",i[u]),children:h.description}):null]}):null,o.length>1?e("p",{className:s("m-0 text-center text-(--plass-muted-fg)",i[u]),"aria-live":"polite",children:f((c??0)+1,o.length)}):null]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useLabels as n}from"../../internal/labels.js";import{isTurned as r,ratioOf as i,shownRatio as a}from"../../internal/gallery.js";import{ChevronIcon as s}from"../../internal/icons.js";import{poseStyle as o,quartersOf as c}from"../../internal/image.js";import{cx as m,metaTextClasses as u}from"../../internal/styles.js";import{PlIconButton as d}from"../icon-button/PlIconButton.js";import{PlOverlay as f}from"../overlay/PlOverlay.js";function turnedFrame(e){if(void 0===e.ratio)return{aspectRatio:"1",width:"min(90vw, 80vh)",containerType:"size"};const t=a(i(e.ratio,1),e.rotate);return{aspectRatio:String(t),width:`min(90vw, calc(80vh * ${t}))`,containerType:"size"}}export function PlGalleryViewer({items:i,index:a,onIndexChange:p,size:v,color:h,label:x,itemLabel:g}){const y=n(),b=null!==a,w=null===a?void 0:i[a],j=null===a||a<=0,N=null===a||a>=i.length-1,k=l.useRef(null),z=l.useRef(null),R=l.useRef(null),go=e=>{if(e<0||e>=i.length)return;const t=document.activeElement;e===i.length-1&&t===z.current?R.current=k.current:0===e&&t===k.current&&(R.current=z.current),p(e)};return l.useLayoutEffect(()=>{R.current?.focus(),R.current=null},[a]),e(f,{open:b,onOpenChange:e=>{e||p(null)},tone:"glass",dismissible:!0,size:v,color:h,label:x,onKeyDown:e=>{null===a||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(a+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(a-1)))},children:t("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[w?e("span",{className:"relative block",style:r(w.rotate)?turnedFrame(w):void 0,children:e("img",{src:w.full??w.src,alt:w.alt,className:m("block object-contain",r(w.rotate)?"":"max-h-[80vh] max-w-[90vw]"),style:o(c(w.rotate??0),w.flip??"none")??void 0})},w.id??w.src):null,i.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(d,{variant:"solid",elevation:1,size:v,color:h,ref:k,label:y.previous,disabled:j,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(s,{})}),onClick:()=>go((a??0)-1)}),e(d,{variant:"solid",elevation:1,size:v,color:h,ref:z,label:y.next,disabled:N,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(s,{})}),onClick:()=>go((a??0)+1)})]}):null]}),w&&(w.title||w.description)?t("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[w.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:w.title}):null,w.description?e("span",{className:m("truncate text-(--plass-muted-fg)",u[v]),children:w.description}):null]}):null,i.length>1?e("p",{className:m("m-0 text-center text-(--plass-muted-fg)",u[v]),"aria-live":"polite",children:g((a??0)+1,i.length)}):null]})})}

package/dist/components/gauge-chart/PlGaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=kt<=0||0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0&&kt>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}

package/dist/components/heatmap-chart/PlHeatmapChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as a,ChartTooltipPanel as r,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as g,rampStep as p,rampSteps as w,squarify as v,textWidth as y,toValues as b,truncate as M}from"../../internal/chart.js";import{numberFormatter as $}from"../../internal/format.js";import{cx as j,metaTextClasses as k,srOnlyClasses as z}from"../../internal/styles.js";import{useLabels as A}from"../../internal/labels.js";import{useDefaults as N}from"../../internal/defaults.js";export function PlHeatmapChart({series:E,categories:S,shape:B="grid",scale:C="sequential",midpoint:I=0,min:D,max:L,valueLabels:P="none",height:R,format:_,locale:q,label:H,legend:K,tooltip:U,empty:W,size:F,variant:G="ghost",padded:J=!1,className:O,...Q}){const T=N(),V=F??T.size??"md",X=q??T.locale,Y=t.useRef(null),Z=d(Y),ee=A(),le=t.useId(),[te,ne]=t.useState(null),ie=t.useCallback(e=>_?$(X,_).format(e):c(e,X),[_,X]),ae=t.useMemo(()=>b(E),[E]),re=ae.reduce((e,l)=>Math.max(e,l.length),0),oe=t.useMemo(()=>Array.from({length:re},(e,l)=>h(l,S,ae)),[re,S,ae]),de=t.useMemo(()=>E.map((e,l)=>e.name??`${l+1}`),[E]),he=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ae)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[ae]),se=D??he?.min??0,ce=L??he?.max??1,me=t.useCallback(e=>p(e,se,ce,C,I),[se,ce,C,I]),ue="number"==typeof R?R:x[V]??220,xe=s[V],fe=!0===K||void 0===K||!1===K?{}:K,ge=!1!==K,pe=fe.side??"bottom",we=!1===U?{mode:"none"}:!0===U||void 0===U?{}:U,ve="none"===we.mode,ye=null===he||0===re||0===E.length,be=t.useMemo(()=>{if("treemap"===B||Z<=0)return{texts:[],band:0};const e=Math.min(150,.25*Z),l=de.map(l=>M(l,e,xe));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,xe)),0)+10}},[B,de,Z,xe]),Me="treemap"===B?0:xe+8,$e={left:be.band,width:Math.max(0,Z-be.band),height:Math.max(0,ue-Me)},je=t.useMemo(()=>{if($e.width<=0||$e.height<=0)return[];if("treemap"===B){const e=[];return ae.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),$e.width,$e.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:$e.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=$e.height/Math.max(1,E.length),l=$e.width/Math.max(1,re),t=[];return ae.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&t.push({row:i,index:a,cell:n,x:$e.left+a*l,y:i*e,width:l,height:e})})),t},[B,ae,E.length,re,$e.left,$e.width,$e.height]),ke=t.useCallback(e=>m(e.cell.x??S?.[e.index]??oe[e.index]??e.index,X),[S,oe,X]),ze=null===te?null:je.find(e=>e.row===te.row&&e.index===te.index)??null,Ae=null===ze?[]:[{seriesIndex:ze.row,color:ze.cell.color??f(me(ze.cell.value??0),C),value:ze.cell.value,formatted:ie(ze.cell.value??0),label:ze.cell.label}],Ne=Array.from({length:w},(e,l)=>f(l,C));return l(a,{...Q,size:V,variant:G,padded:J,className:O,legendSide:pe,legend:ge&&!ye?e(n,{steps:Ne,from:ie("diverging"===C?-reach(se,ce,I)+I:se),to:ie("diverging"===C?reach(se,ce,I)+I:ce),middle:"diverging"===C?ie(I):void 0,align:fe.align??"center",vertical:"left"===pe||"right"===pe,size:V}):null,table:ye?null:l("table",{id:le,className:z,children:[H?e("caption",{children:H}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),oe.map((l,t)=>e("th",{scope:"col",children:m(l,X)},t))]})}),e("tbody",{children:ae.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:de[n]}),oe.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ie(i.value)},n)})]},n))})]}),children:[l("div",{ref:Y,role:"img",tabIndex:ye?void 0:0,"aria-label":H??ee.chart,"aria-describedby":ye?void 0:le,onPointerLeave:()=>ne(null),onBlur:()=>ne(null),onKeyDown:e=>{if(ve||0===je.length)return;const l=null===te?-1:je.findIndex(e=>e.row===te.row&&e.index===te.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=je[Math.min(je.length-1,l+1)];ne({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=je[Math.max(0,(-1===l?je.length:l)-1)];ne({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ne(null)}e.preventDefault()},className:j("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:ue},children:[ye?e("div",{className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",k[V]),children:W??ee.empty}):Z>0?l("svg",{width:Z,height:ue,viewBox:`0 0 ${Z} ${ue}`,"aria-hidden":"true",className:"block",children:[je.map(t=>{const n=me(t.cell.value??0),i=te?.row===t.row&&te?.index===t.index,a=Math.max(0,t.width-u),r=Math.max(0,t.height-u);if(a<=0||r<=0)return null;const d=ie(t.cell.value??0),h="treemap"===B?"all"===P?[ke(t),d]:[ke(t)]:"all"===P?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,a,r/h.length,xe)),c=t.cell.color?"var(--plass-surface)":g(n,C);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:t.cell.color??f(n,C),opacity:i?1:.94,onPointerEnter:ve?void 0:()=>ne({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(xe+2),textAnchor:"middle",dominantBaseline:"central",fontSize:xe,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===B?void 0:"tabular-nums",children:M(l,t.width-8,xe)},n))]},`${t.row}-${t.index}`)}),"grid"===B?be.texts.map((l,t)=>e("text",{x:$e.left-8,y:(t+.5)*$e.height/Math.max(1,E.length),textAnchor:"end",dominantBaseline:"central",fontSize:xe,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===B?oe.map((l,t)=>{const n=$e.width/Math.max(1,re),i=m(l,X);return t%Math.max(1,Math.ceil((y(i,xe)+8)/Math.max(1,n)))!==0?null:e("text",{x:$e.left+(t+.5)*n,y:$e.height+xe,textAnchor:"middle",fontSize:xe,fill:"var(--plass-muted-fg)",children:i},`col-${t}`)}):null]}):null,ze&&!ve?we.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:ze.x+ze.width/2,top:ze.y},children:we.render({index:ze.index,category:ze.cell.x??oe[ze.index]??ze.index,items:Ae})}):e(r,{heading:`${de[ze.row]} · ${ke(ze)}`,items:Ae,x:ze.x+ze.width/2,y:ze.y,flip:ze.x+ze.width/2>.6*Z,size:V}):null]}),ve?null:e(i,{heading:ze?`${de[ze.row]} · ${ke(ze)}`:void 0,items:Ae})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as k}from"../../internal/chart.js";import{numberFormatter as A}from"../../internal/format.js";import{cx as $,metaTextClasses as j,srOnlyClasses as N}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:S,categories:C,shape:D="grid",scale:B="sequential",midpoint:I=0,min:L,max:P,valueLabels:R="none",height:U,format:_,locale:q,label:H,legend:K,tooltip:W,empty:F,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),[ne,ie]=t.useState(null),re=t.useCallback(e=>_?A(Y,_).format(e):c(e,Y),[_,Y]),ae=t.useMemo(()=>M(S),[S]),oe=ae.reduce((e,l)=>Math.max(e,l.length),0),de=t.useMemo(()=>Array.from({length:oe},(e,l)=>h(l,C,ae)),[oe,C,ae]),he=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),se=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ae)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[ae]),ce=L??se?.min??0,me=P??se?.max??1,ue=t.useCallback(e=>g(e,ce,me,B,I),[ce,me,B,I]),xe="number"==typeof U?U:x[X]??220,fe=s[X],pe=!0===K||void 0===K||!1===K?{}:K,ge=!1!==K,we=pe.side??"bottom",ve=!1===W?{mode:"none"}:!0===W||void 0===W?{}:W,ye="none"===ve.mode,be=null===se||0===oe||0===S.length,Me=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=he.map(l=>k(l,e,fe));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,fe)),0)+10}},[D,he,ee,fe]),ke="treemap"===D?0:fe+8,Ae={left:Me.band,width:Math.max(0,ee-Me.band),height:Math.max(0,xe-ke)},$e=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=de.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,fe)),0)}},[D,de,Y,fe]),je=b(oe,Ae.width,$e.widest+8),Ne=t.useMemo(()=>{if(Ae.width<=0||Ae.height<=0)return[];if("treemap"===D){const e=[];return ae.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),Ae.width,Ae.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ae.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ae.height/Math.max(1,S.length),l=Ae.width/Math.max(1,oe),t=[];return ae.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ae.left+r*l,y:i*e,width:l,height:e})})),t},[D,ae,S.length,oe,Ae.left,Ae.width,Ae.height]),ze=t.useCallback((e,l)=>m(e.x??C?.[l]??de[l]??l,Y),[C,de,Y]),Ee=t.useCallback(e=>ze(e.cell,e.index),[ze]),Se=null===ne?null:Ne.find(e=>e.row===ne.row&&e.index===ne.index)??null,Ce=null===Se?[]:[{seriesIndex:Se.row,color:Se.cell.color??f(ue(Se.cell.value??0),B),value:Se.cell.value,formatted:re(Se.cell.value??0),label:Se.cell.label}],De=Array.from({length:w},(e,l)=>f(l,B));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:we,legend:ge&&!be?e(n,{steps:De,from:re("diverging"===B?-reach(ce,me,I)+I:ce),to:re("diverging"===B?reach(ce,me,I)+I:me),middle:"diverging"===B?re(I):void 0,align:pe.align??"center",vertical:"left"===we||"right"===we,size:X}):null,table:be?null:l("table","treemap"===D?{id:te,className:N,children:[H?e("caption",{children:H}):null,ae.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:he[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:ze(t,n)}),e("td",{children:void 0!==t.label?t.label:re(t.value)})]},n))]},n))]}:{id:te,className:N,children:[H?e("caption",{children:H}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),de.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:ae.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:he[n]}),de.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":re(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:be?void 0:0,"aria-label":H??le.chart,"aria-describedby":be?void 0:te,onPointerLeave:()=>ie(null),onBlur:()=>ie(null),onKeyDown:e=>{if(ye||0===Ne.length)return;const l=null===ne?-1:Ne.findIndex(e=>e.row===ne.row&&e.index===ne.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ne[Math.min(Ne.length-1,l+1)];ie({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ne[Math.max(0,(-1===l?Ne.length:l)-1)];ie({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ie(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ne.length&&Ne[n].index!==Ne[l].index;)n+=t;n>=0&&n<Ne.length&&ie({row:Ne[n].row,index:Ne[n].index})}e.preventDefault()},className:$("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:xe},children:[be?e("div",{className:$("flex h-full items-center justify-center text-(--plass-muted-fg)",j[X]),children:F??le.empty}):ee>0?l("svg",{width:ee,height:xe,viewBox:`0 0 ${ee} ${xe}`,"aria-hidden":"true",className:"block",children:[Ne.map(t=>{const n=ue(t.cell.value??0),i=ne?.row===t.row&&ne?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=re(t.cell.value??0),h="treemap"===D?"all"===R?[Ee(t),d]:[Ee(t)]:"all"===R?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,r,a/h.length,fe)),c=t.cell.color?"var(--plass-surface)":p(n,B);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,B),opacity:i?1:.94,onPointerEnter:ye?void 0:()=>ie({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(fe+2),textAnchor:"middle",dominantBaseline:"central",fontSize:fe,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===D?void 0:"tabular-nums",children:k(l,t.width-8,fe)},n))]},`${t.row}-${t.index}`)}),"grid"===D?Me.texts.map((l,t)=>e("text",{x:Ae.left-8,y:(t+.5)*Ae.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:fe,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?$e.texts.map((l,t)=>{const n=Ae.width/Math.max(1,oe);return t%je!==0?null:e("text",{x:Ae.left+(t+.5)*n,y:Ae.height+fe,textAnchor:"middle",fontSize:fe,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,Se&&!ye?ve.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:Se.x+Se.width/2,top:Se.y},children:ve.render({index:Se.index,category:Se.cell.x??de[Se.index]??Se.index,items:Ce})}):e(a,{heading:`${he[Se.row]} · ${Ee(Se)}`,items:Ce,x:Se.x+Se.width/2,y:Se.y,flip:Se.x+Se.width/2>.6*ee,size:X}):null]}),ye?null:e(i,{heading:Se?`${he[Se.row]} · ${Ee(Se)}`:void 0,items:Ce})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}