plass-ui 1.7.0 → 1.8.1

package/dist/components/checkbox/PlCheckbox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Checkbox as n}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,cx as l,fieldDescriptionClasses as d,focusRingClasses as c,forcedCheckedClasses as p,forcedDisabledCheckedClasses as h,glassClasses as m,hasContent as f,metaTextClasses as u,tickRadiusClasses as k,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",x,c].join(" "),j=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),N=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),y=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),C=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",h,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),M=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:c,label:p,description:h,error:m,invalid:x,disabled:j=!1,readOnly:_=!1,className:w,classNames:L,style:z,...B},D){const H=o(),R=t(j),O=a??H.size??"md",P=c??H.color??"primary",T=f(m),W=x??T,E=W?"danger":P,G=l(v,g[O],k[O],R?C:_?y:N,L?.control);return r(s.Root,{disabled:R,invalid:W,className:["inline-flex flex-col gap-1 align-top",w??""].filter(Boolean).join(" "),style:{...i(E,0,"solid"),...z},children:[r("div",{className:`flex items-start gap-2 ${b[O]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:D,className:G,disabled:R,readOnly:_,...B,children:e(n.Indicator,{keepMounted:!0,className:M,children:B.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),p||h?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p?e(s.Label,{className:l(R?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",L?.label),children:p}):null,h?e(s.Description,{className:l(d(O),L?.description),children:h}):null]}):null]}),e(s.Error,T?{match:!0,className:l(u[O],"text-(--p-accent)",L?.error),children:m}:{className:l(u[O],"text-(--p-accent)",L?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDisabled as t,useLabelReference as o}from"../../internal/form.js";import{useDefaults as l}from"../../internal/defaults.js";import{Checkbox as n}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlSlots as s,cx as d,fieldDescriptionClasses as c,focusRingClasses as p,forcedCheckedClasses as h,forcedDisabledCheckedClasses as m,glassClasses as f,hasContent as b,metaTextClasses as u,tickRadiusClasses as k,tickRowTextClasses as g,tickSizeClasses as x,transitionClasses as v}from"../../internal/styles.js";const j=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",v,p].join(" "),y=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),N=/* @__PURE__ */[f,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",h,y].join(" "),C=/* @__PURE__ */[f,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",h,y].join(" "),M=/* @__PURE__ */[f,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",m,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),_=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */r.forwardRef(function PlCheckbox({size:r,color:p,label:h,description:m,error:f,invalid:v,disabled:y=!1,readOnly:w=!1,className:L,classNames:z,style:B,"aria-label":D,"aria-labelledby":H,...R},O){const P=l(),T=t(y),W=o(D,H),E=r??P.size??"md",G=p??P.color??"primary",I=b(f),$=v??I,q=$?"danger":G,A=d(j,x[E],k[E],T?M:w?C:N,z?.control);return a(i.Root,{disabled:T,invalid:$,className:["inline-flex flex-col gap-1 align-top",L??""].filter(Boolean).join(" "),style:{...s(q,0,"solid"),...B},children:[a("div",{className:`flex items-start gap-2 ${g[E]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:O,className:A,disabled:T,readOnly:w,"aria-label":D,"aria-labelledby":W.labelledBy,...R,children:e(n.Indicator,{keepMounted:!0,className:_,children:R.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),h||m?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h?e(i.Label,{className:d(T?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",z?.label),children:h}):null,m?e(i.Description,{className:d(c(E),z?.description),children:m}):null]}):null]}),e(i.Error,I?{match:!0,className:d(u[E],"text-(--p-accent)",z?.error),children:f}:{className:d(u[E],"text-(--p-accent)",z?.error)}),W.node]})});

package/dist/components/chip/PlChip.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a chip is a token sitting *on*
      * something else, so it is raised even less often than a `PlButton`.

package/dist/components/chip/PlChip.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{FadedContext as t}from"../../internal/form.js";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i}from"../../internal/icons.js";import{textOf as d}from"../../internal/text.js";import{chipRemoveClasses as p,controlHeightClasses as c,controlSlots as m,controlTextClasses as g,disabledClasses as b,disabledLookClasses as f,focusRingClasses as h,forcedEdgeClasses as u,gapClasses as v,glassClasses as x,hasContent as j,iconClasses as w,paddingXClasses as y,radiusClasses as k,transitionClasses as $}from"../../internal/styles.js";const C={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},N={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${u}`,glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},I={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},P={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},z=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",$,w].join(" "),B=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",h,"disabled:cursor-not-allowed"].join(" ");export const PlChip=/* @__PURE__ */o.forwardRef(function PlChip({variant:h="glass",size:u,color:x,density:w,elevation:$=0,startIcon:M,endIcon:D,count:F,onDelete:L,deleteLabel:R,selected:q=!1,disabled:A=!1,className:E,style:G,children:H,onClick:J,onPointerMove:K,...O},Q){const S=n(),T=a(),U=d(H).trim(),V=R??(U?T.removeItem(U):T.remove),W=u??S.size??"md",X=x??S.color??"primary",Y=w??S.density??"default",Z=o.useContext(t),_=Boolean(J),ee=_&&!A,se=o.useId(),le=o.useId(),oe=C[W],te=y[Y][oe],re=[z,c[oe],g[oe],v[oe],k[oe],A?(Z?f:b)[h]:N[h],!A&&q?I[h]:"",ee?`plass-glow ${P[h]}`:"",_?"ps-0":te,L?"pe-1":_?"pe-0":"",E??""].filter(Boolean).join(" "),ne=l(s,{children:[M,j(H)?e("span",{id:le,className:"min-w-0 truncate leading-[normal]",children:H}):null,D,j(F)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===h?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:F}):null]});return l("span",{ref:Q,className:re,style:{...m(X,$,h),...G},"aria-disabled":!(!A||_)||void 0,onPointerMove:r(ee,K),...O,children:[_?e("button",{type:"button",disabled:A,"aria-pressed":q,className:`${B} ${v[oe]} ${te}`,onClick:J,children:ne}):ne,L?e("button",{type:"button",id:se,"aria-label":V,"aria-labelledby":void 0===R&&!U&&j(H)?`${se} ${le}`:void 0,disabled:A,className:p,onClick:L,children:e(i,{})}):null]})});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{FadedContext as t}from"../../internal/form.js";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i}from"../../internal/icons.js";import{textOf as d}from"../../internal/text.js";import{chipRemoveClasses as p,controlHeightClasses as c,controlSlots as m,controlTextClasses as g,disabledClasses as b,disabledLookClasses as f,focusRingClasses as h,forcedEdgeClasses as u,gapClasses as v,glassClasses as x,hasContent as j,iconClasses as w,paddingXClasses as y,radiusClasses as k,transitionClasses as $}from"../../internal/styles.js";const C={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},N={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${u}`,glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},I={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},P={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},z=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",$,w].join(" "),B=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit] py-0",h,"disabled:cursor-not-allowed"].join(" ");export const PlChip=/* @__PURE__ */o.forwardRef(function PlChip({variant:h="glass",size:u,color:x,density:w,elevation:$=0,startIcon:M,endIcon:D,count:F,onDelete:L,deleteLabel:R,selected:q=!1,disabled:A=!1,className:E,style:G,children:H,onClick:J,onPointerMove:K,...O},Q){const S=n(),T=a(),U=d(H).trim(),V=R??(U?T.removeItem(U):T.remove),W=u??S.size??"md",X=x??S.color??"primary",Y=w??S.density??"default",Z=o.useContext(t),_=Boolean(J),ee=_&&!A,se=o.useId(),le=o.useId(),oe=C[W],te=y[Y][oe],re=[z,c[oe],g[oe],v[oe],k[oe],A?(Z?f:b)[h]:N[h],!A&&q?I[h]:"",ee?`plass-glow ${P[h]}`:"",_?"ps-0":te,L?"pe-1":_?"pe-0":"",E??""].filter(Boolean).join(" "),ne=l(s,{children:[M,j(H)?e("span",{id:le,className:"min-w-0 truncate leading-[normal]",children:H}):null,D,j(F)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===h?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:F}):null]});return l("span",{ref:Q,className:re,style:{...m(X,$,h),...G},"aria-disabled":!(!A||_)||void 0,onPointerMove:r(ee,K),...O,children:[_?e("button",{type:"button",disabled:A,"aria-pressed":q,className:`${B} ${v[oe]} ${te}`,onClick:J,children:ne}):ne,L?e("button",{type:"button",id:se,"aria-label":V,"aria-labelledby":void 0===R&&!U&&j(H)?`${se} ${le}`:void 0,disabled:A,className:p,onClick:L,children:e(i,{})}):null]})});

package/dist/components/code-block/PlCodeBlock.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{CheckIcon as r,CodeIcon as a,CopyIcon as i}from"../../internal/icons.js";import{canonicalLanguage as s,highlight as c,plainLines as d}from"../../internal/highlight.js";import{cx as p,hasContent as m,metaTextClasses as u,radiusClasses as x,srOnlyClasses as f,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";export{registerLanguage}from"../../internal/highlight.js";const v={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},b={default:{xs:"py-2",sm:"py-3",md:"py-3.5",lg:"py-4",xl:"py-5"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-3.5"}},w={default:{xs:"px-2",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"}},N={default:{xs:"px-2.5 py-1",sm:"px-3.5 py-1",md:"px-4 py-1.5",lg:"px-4.5 py-2",xl:"px-5.5 py-2"},compact:{xs:"px-2 py-0.5",sm:"px-2.5 py-0.5",md:"px-3 py-1",lg:"px-3.5 py-1",xl:"px-4 py-1.5"}};export function markedLines(e,t,n){const l=new Set;if(void 0===e)return l;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const r=Number(o[1]),a=void 0===o[2]?r:Number(o[2]),i=Math.max(Math.min(r,a),t),s=Math.min(Math.max(r,a),n);for(let e=i;e<=s;e+=1)l.add(e)}else Number.isFinite(o)&&l.add(Math.trunc(o));return l}export const PlCodeBlock=/* @__PURE__ */n.forwardRef(function PlCodeBlock({code:k,language:L,theme:S="dark",size:j,color:M,density:C,elevation:T=0,highlight:_=!0,toolbar:F=!0,title:R,showLanguage:z=!0,copyable:A=!0,rawToggle:E=!1,highlightLines:H,lineNumbers:K=!1,startLine:B=1,prompt:D,wrap:I=!1,maxHeight:P,fontFamily:$,fontSize:q,lineHeight:G,letterSpacing:J,copyLabel:O,copiedLabel:Q,copyFailedLabel:U,rawLabel:V,codeLabel:W,onCopy:X,className:Y,style:Z,...ee},te){const ne=l(),le=j??ne.size??"md",oe=M??ne.color??"primary",re=C??ne.density??"default",ae=o(),ie=O??ae.copy,se=Q??ae.copied,ce=U??ae.copyFailed,de=V??ae.raw,pe=n.useMemo(()=>k.replace(/\r\n?/g,"\n").trimEnd(),[k]),me=s(L),[ue,xe]=n.useState(!1),[fe,ge]=n.useState(null),[he,ye]=n.useState(null),ve=_&&!ue&&null!==me;n.useEffect(()=>{if(!ve||!me)return void ye(null);let e=!1;return c(pe,me).then(t=>{e||ye(t?{source:pe,name:me,lines:t}:null)},()=>{e||ye(null)}),()=>{e=!0}},[pe,me,ve]);const be=n.useMemo(()=>ve&&he&&he.source===pe&&he.name===me?he.lines:d(pe),[ve,he,pe,me]),we=`${String(B+Math.max(be.length-1,0)).length}ch`,Ne=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(Ne.current),[]);const ke=n.useMemo(()=>markedLines(H,B,B+be.length-1),[H,B,be.length]),Le=n.useRef(null),Se=p("inline-flex shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent","px-1.5 py-1 text-(--p-code-dim) hover:text-(--p-code-fg) hover:bg-(--p-code-hover)",x.xs,u[le],"[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",y,"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),je=n.useId(),Me=F&&m(R),Ce="string"==typeof R&&R?R:me??W??ae.code;return t("div",{ref:te,className:p("plass-code flex min-w-0 flex-col overflow-hidden",x[le],"border bg-(--p-code-bg) text-(--p-code-fg) [border-color:var(--p-code-rule)]","[box-shadow:var(--p-elev)]",y,Y),"data-code-theme":S,"data-code-wrap":I?"true":void 0,style:{...g(oe,T),"--p-code-gutter":we,...$?{fontFamily:$}:null,...void 0===q?null:{fontSize:h(q)},...void 0===G?null:{lineHeight:G},...void 0===J?null:{letterSpacing:h(J)},...Z},...ee,children:[F&&(z||A||E||m(R))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--p-code-rule)]",N[re][le]),children:[m(R)?e("span",{id:je,className:p("min-w-0 truncate font-mono",u[le]),children:R}):null,z&&me?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--p-code-dim) uppercase select-none",u[le]),children:me}):null,e("span",{className:"flex-1"}),E&&_?e("button",{type:"button","aria-pressed":ue,"aria-label":de,title:de,onClick:()=>xe(e=>!e),className:p(Se,ue?"bg-(--p-code-hover) text-(--p-code-fg)":""),children:e(a,{})}):null,A?t("button",{type:"button",onClick:async()=>{const e=await async function writeToClipboard(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const n=document.execCommand("copy");return t.remove(),n}catch{return!1}}(pe);clearTimeout(Ne.current),ge(e),Ne.current=setTimeout(()=>ge(null),2e3),e&&X?.(pe)},className:Se,children:[e(fe?r:i,{}),e("span",{children:null===fe?ie:fe?se:ce})]}):null]}):null,e("div",{className:p("flex min-h-0 flex-col",v[le]),children:e("div",{role:"region","aria-labelledby":Me?je:void 0,"aria-label":Me?void 0:Ce,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=Le.current,n="undefined"==typeof window?null:window.getSelection();if(!t||!n)return;e.preventDefault();const l=document.createRange();l.selectNodeContents(t),n.removeAllRanges(),n.addRange(l)},className:p("min-h-0 overflow-auto",b[re][le],"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:-outline-offset-2"),style:void 0===P?void 0:{maxHeight:h(P)},children:e("pre",{ref:Le,className:p("m-0 bg-transparent p-0 font-mono",I?"w-full":"w-max min-w-full"),children:be.map((t,l)=>{const o=B+l;return e("div",{className:p("plass-code-line",w[re][le]),"data-line":K?o:void 0,"data-mark":ke.has(o)?"":void 0,"data-prompt":D&&t.length>0?D:void 0,children:e("code",{children:t.map((t,l)=>t.token?e("span",{className:t.token,children:t.text},l):e(n.Fragment,{children:t.text},l))})},l)})})})}),e("span",{"aria-live":"polite",className:f,children:null===fe?"":fe?se:ce})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{CheckIcon as r,CodeIcon as a,CopyIcon as i}from"../../internal/icons.js";import{canonicalLanguage as s,highlight as c,plainLines as d}from"../../internal/highlight.js";import{cx as p,hasContent as m,metaTextClasses as u,radiusClasses as x,srOnlyClasses as f,surfaceSlots as g,toLength as h,transitionClasses as y}from"../../internal/styles.js";export{registerLanguage}from"../../internal/highlight.js";const v={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},b={default:{xs:"py-2",sm:"py-3",md:"py-3.5",lg:"py-4",xl:"py-5"},compact:{xs:"py-1.5",sm:"py-2",md:"py-2.5",lg:"py-3",xl:"py-3.5"}},w={default:{xs:"px-2",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"}},N={default:{xs:"px-2.5 py-1",sm:"px-3.5 py-1",md:"px-4 py-1.5",lg:"px-4.5 py-2",xl:"px-5.5 py-2"},compact:{xs:"px-2 py-0.5",sm:"px-2.5 py-0.5",md:"px-3 py-1",lg:"px-3.5 py-1",xl:"px-4 py-1.5"}};export function markedLines(e,t,n){const o=new Set;if(void 0===e)return o;for(const l of Array.isArray(e)?e:[e])if("number"!=typeof l)for(const e of l.split(",")){const l=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!l)continue;const r=Number(l[1]),a=void 0===l[2]?r:Number(l[2]),i=Math.max(Math.min(r,a),t),s=Math.min(Math.max(r,a),n);for(let e=i;e<=s;e+=1)o.add(e)}else Number.isFinite(l)&&o.add(Math.trunc(l));return o}export const PlCodeBlock=/* @__PURE__ */n.forwardRef(function PlCodeBlock({code:k,language:L,theme:S="dark",size:j,color:C,density:M,elevation:T=0,highlight:_=!0,toolbar:A=!0,title:F,showLanguage:R=!0,copyable:z=!0,rawToggle:E=!1,highlightLines:H,lineNumbers:K=!1,startLine:B=1,prompt:D,wrap:I=!1,maxHeight:P,fontFamily:$,fontSize:q,lineHeight:G,letterSpacing:J,copyLabel:O,copiedLabel:Q,copyFailedLabel:U,rawLabel:V,codeLabel:W,onCopy:X,className:Y,style:Z,...ee},te){const ne=o(),oe=j??ne.size??"md",le=C??ne.color??"primary",re=M??ne.density??"default",ae=l(),ie=O??ae.copy,se=Q??ae.copied,ce=U??ae.copyFailed,de=V??ae.raw,pe=n.useMemo(()=>k.replace(/\r\n?/g,"\n").trimEnd(),[k]),me=s(L),[ue,xe]=n.useState(!1),[fe,ge]=n.useState(null),[he,ye]=n.useState(null),ve=_&&!ue&&null!==me;n.useEffect(()=>{if(!ve||!me)return void ye(null);const e=new AbortController,{signal:t}=e;return c(pe,me,t).then(e=>{t.aborted||ye(e?{source:pe,name:me,lines:e}:null)},()=>{t.aborted||ye(null)}),()=>e.abort()},[pe,me,ve]);const be=n.useMemo(()=>ve&&he&&he.source===pe&&he.name===me?he.lines:d(pe),[ve,he,pe,me]),we=`${String(B+Math.max(be.length-1,0)).length}ch`,Ne=n.useRef(void 0);n.useEffect(()=>()=>clearTimeout(Ne.current),[]);const ke=n.useMemo(()=>markedLines(H,B,B+be.length-1),[H,B,be.length]),Le=n.useRef(null),Se=p("inline-flex shrink-0 cursor-pointer items-center gap-1 border-0 bg-transparent","px-1.5 py-1 text-(--p-code-dim) hover:text-(--p-code-fg) hover:bg-(--p-code-hover)",x.xs,u[oe],"[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",y,"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),je=n.useId(),Ce=A&&m(F),Me="string"==typeof F&&F?F:me??W??ae.code;return t("div",{ref:te,className:p("plass-code flex min-w-0 flex-col overflow-hidden",x[oe],"border bg-(--p-code-bg) text-(--p-code-fg) [border-color:var(--p-code-rule)]","[box-shadow:var(--p-elev)]",y,Y),"data-code-theme":S,"data-code-wrap":I?"true":void 0,style:{...g(le,T),"--p-code-gutter":we,...$?{fontFamily:$}:null,...void 0===q?null:{fontSize:h(q)},...void 0===G?null:{lineHeight:G},...void 0===J?null:{letterSpacing:h(J)},...Z},...ee,children:[A&&(R||z||E||m(F))?t("div",{className:p("flex min-w-0 items-center gap-1 border-b [border-color:var(--p-code-rule)]",N[re][oe]),children:[m(F)?e("span",{id:je,className:p("min-w-0 truncate font-mono",u[oe]),children:F}):null,R&&me?e("span",{className:p("min-w-0 truncate font-mono tracking-wide text-(--p-code-dim) uppercase select-none",u[oe]),children:me}):null,e("span",{className:"flex-1"}),E&&_?e("button",{type:"button","aria-pressed":ue,"aria-label":de,title:de,onClick:()=>xe(e=>!e),className:p(Se,ue?"bg-(--p-code-hover) text-(--p-code-fg)":""),children:e(a,{})}):null,z?t("button",{type:"button",onClick:async()=>{const e=await async function writeToClipboard(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const n=document.execCommand("copy");return t.remove(),n}catch{return!1}}(pe);clearTimeout(Ne.current),ge(e),Ne.current=setTimeout(()=>ge(null),2e3),e&&X?.(pe)},className:Se,children:[e(fe?r:i,{}),e("span",{children:null===fe?ie:fe?se:ce})]}):null]}):null,e("div",{className:p("flex min-h-0 flex-col",v[oe]),children:e("div",{role:"region","aria-labelledby":Ce?je:void 0,"aria-label":Ce?void 0:Me,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=Le.current,n="undefined"==typeof window?null:window.getSelection();if(!t||!n)return;e.preventDefault();const o=document.createRange();o.selectNodeContents(t),n.removeAllRanges(),n.addRange(o)},className:p("min-h-0 overflow-auto",b[re][oe],"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:-outline-offset-2"),style:void 0===P?void 0:{maxHeight:h(P)},children:e("pre",{ref:Le,className:p("m-0 bg-transparent p-0 font-mono",I?"w-full":"w-max min-w-full"),children:be.map((t,o)=>{const l=B+o;return e("div",{className:p("plass-code-line",w[re][oe]),"data-line":K?l:void 0,"data-mark":ke.has(l)?"":void 0,"data-prompt":D&&t.length>0?D:void 0,children:e("code",{children:t.map((t,o)=>t.token?e("span",{className:t.token,children:t.text},o):e(n.Fragment,{children:t.text},o))})},o)})})})}),e("span",{"aria-live":"polite",className:f,children:null===fe?"":fe?se:ce})]})});

package/dist/components/collapsible/PlCollapsible.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCollapsibleProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a fold is part of the page it is set
      * into, not a panel floating over it.

package/dist/components/collapsible/PlCollapsible.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as o,hasContent as d,iconClasses as p,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as h,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */l.forwardRef(function PlCollapsible({variant:l="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:$,title:z,subtitle:F,startIcon:M,action:R,trigger:T,indicator:U=!0,truncate:I=!1,disabled:q=!1,padded:A=!0,hiddenUntilFound:B=!1,keepMounted:D=!1,className:E,style:G,children:H,...J},K){const L=s(),Q=j??L.size??"md",S=k??L.color??"primary",V=C??L.density??"default",W=h[V][Q],X=x[V][Q],Y=I?"truncate":"";return t(a.Root,{ref:K,open:_,defaultOpen:P,onOpenChange:e=>$?.(e),disabled:q,className:i("flex flex-col overflow-hidden",m[Q],b[l],v,E),style:{...N(S,O),...G},...J,children:[T?e(a.Trigger,{render:T}):t("div",{className:"flex w-full items-center",children:[t(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",W,X,o[Q],v,p,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[d(M)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,t("span",{className:i("flex min-w-0 flex-1 flex-col",u[Q]),children:[d(z)?e("span",{className:i("plass-title font-semibold",Y,g[Q]),children:z}):null,d(F)?e("span",{className:i("text-(--plass-muted-fg)",Y,c[Q]),children:F}):null]}),U?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),d(R)?e("span",{className:i("flex shrink-0 items-center",W),children:R}):null]}),e(a.Panel,{hiddenUntilFound:B,keepMounted:D,className:i("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[Q],A?`${W} ${w[V][Q]} ${y[V][Q]}`:""),children:H})})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as o,hasContent as d,iconClasses as p,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as h,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */l.forwardRef(function PlCollapsible({variant:l="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:$,title:z,subtitle:F,startIcon:M,action:R,trigger:T,indicator:U=!0,truncate:I=!1,disabled:q=!1,padded:A=!0,hiddenUntilFound:B=!1,keepMounted:D,className:E,style:G,children:H,...J},K){const L=s(),Q=j??L.size??"md",S=k??L.color??"primary",V=C??L.density??"default",W=h[V][Q],X=x[V][Q],Y=I?"truncate":"";return t(a.Root,{ref:K,open:_,defaultOpen:P,onOpenChange:e=>$?.(e),disabled:q,className:i("flex flex-col overflow-hidden",m[Q],b[l],v,E),style:{...N(S,O),...G},...J,children:[T?e(a.Trigger,{render:T}):t("div",{className:"flex w-full items-center",children:[t(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",W,X,o[Q],v,p,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[d(M)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,t("span",{className:i("flex min-w-0 flex-1 flex-col",u[Q]),children:[d(z)?e("span",{className:i("plass-title font-semibold",Y,g[Q]),children:z}):null,d(F)?e("span",{className:i("text-(--plass-muted-fg)",Y,c[Q]),children:F}):null]}),U?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),d(R)?e("span",{className:i("flex shrink-0 items-center",W),children:R}):null]}),e(a.Panel,{hiddenUntilFound:B,keepMounted:D,className:i("h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[Q],A?`${W} ${w[V][Q]} ${y[V][Q]}`:""),children:H})})]})});

package/dist/components/color-picker/PlColorPicker.d.ts

@@ -22,6 +22,8 @@ export interface PlColorPickerLabels {
 /** The English the picker uses for the parts nobody can read a name off. */
 export declare const defaultColorPickerLabels: PlColorPickerLabels;
 export interface PlColorPickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * The four parts of a labelled field, as every other one names them: the
      * `label`, the `control`, the `description` and the `error`. `className`

package/dist/components/color-picker/PlColorPicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useDisabled as n,useFieldsetDisabled as t,useFormReport as i}from"../../internal/form.js";import{CheckIcon as d}from"../../internal/icons.js";import{checkerBackground as c,clamp as h,cssColor as u,defaultSwatches as f,formatColor as p,parseColor as m,readableInk as v}from"../../internal/color.js";import{controlTextClasses as b,cx as g,fieldDescriptionClasses as x,focusRingClasses as y,metaTextClasses as w,radiusClasses as C,stackGapClasses as k,surfaceSlots as N}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},j={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},O={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},S={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},_={xs:10,sm:12,md:14,lg:16,xl:18},$=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),z=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:h((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:h((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:n,withAlpha:t,swatches:i,editable:f,size:b,disabled:x,readOnly:k,invalid:N,labels:I,className:T}){const D=x||k,M=_[b],A=-M/2,L=u({h:r.h,s:100,v:100}),V=u(r),q=i?i.flatMap(e=>{const a=m(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{if(D)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:g("flex flex-col",P[b],S[b],T),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":I.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{const a=arrowStep(e);if(D||!a)return;e.preventDefault();const o=h(r.s+a.x,0,100),n=h(r.v+a.y,0,100);o===r.s&&n===r.v||s({hsv:{h:r.h,s:o,v:n},alpha:l})},className:g($,j[b],C[b],y,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:L,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:z,style:{width:M,height:M,left:`${r.s}%`,top:100-r.v+"%",marginLeft:A,marginTop:A,backgroundColor:V}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(I.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:g($,O[b],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:z,style:{width:M,height:M,left:r.h/360*100+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:L}})}),t?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(I.alpha,100*l,100,e=>{const a=h(l+e/100,0,1);a!==l&&s({hsv:r,alpha:a})},e=>s({hsv:r,alpha:e})),className:g($,O[b],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:c,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${u(r,0)}, ${V})`}}),e("span",{className:z,style:{width:M,height:M,left:100*l+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:u(r,l)}})]}):null,f?a("div",{className:g("flex items-center",S[b]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:M+6,height:M+6,...c},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:u(r,l)}})}),e("input",{type:"text",value:o,disabled:x,readOnly:k,spellCheck:!1,autoComplete:"off","aria-label":I.value,onChange:e=>n(e.target.value),className:g("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",C.xs,w[b],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,q.length>0?e("div",{role:"group","aria-label":I.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:o})=>{const n=p(o.hsv,o.alpha,"hex")===p(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":n,onClick:()=>s(o),className:g("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",y,"[outline:none]",D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:u(o.hsv,o.alpha)},children:n?e("span",{style:{color:v(o.hsv)},children:e(d,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const I={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:d,defaultValue:h="#1a58d1",onValueChange:v,format:y="hex",alpha:C=!1,swatches:P=f,inline:j=!1,editable:O=!0,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D=!1,disabled:M=!1,readOnly:A=!1,fullWidth:L=!1,clearable:V=!1,name:q,open:B,defaultOpen:H=!1,onOpenChange:K,labels:R,variant:E="glass",size:W,color:U,density:X,elevation:Y=0,className:F,classNames:G,style:J,...Q},Z){const ee=l(),ae=W??ee.size??"md",re=U??ee.color??"primary",le=X??ee.density??"default",se=r.useMemo(()=>({...defaultColorPickerLabels,...R}),[R]),[oe,ne]=r.useState(h),te=d??oe,[ie,de]=r.useState(H),ce=B??ie,[he,ue]=r.useState(()=>m(te)??{hsv:I,alpha:1}),[fe,pe]=r.useState(()=>te),me=p(he.hsv,C?he.alpha:1,y),ve=""===te;r.useEffect(()=>{const e=m(te);e?p(e.hsv,C?e.alpha:1,y)!==me&&(pe(te),ue(e)):pe(te)},[te,me,C,y]);const commit=(e,a)=>{ue(e);const r=p(e.hsv,C?e.alpha:1,y);pe(a??r),void 0===d&&ne(r),v?.(r)},[be,ge]=r.useState(null),xe=r.useCallback(e=>{ge(e),"function"==typeof Z?Z(e):Z&&(Z.current=e)},[Z]),ye=t(be),we=n(M)||ye,Ce=T??Boolean(z),ke=r.useId(),Ne=e(ColorPanel,{hsv:he.hsv,alphaValue:he.alpha,onChange:commit,text:fe,onTextChange:e=>{pe(e);const a=m(e);a&&commit(a,e)},withAlpha:C,swatches:P,editable:O,size:ae,disabled:we,readOnly:A,invalid:j&&Ce,labels:se,className:j?G?.control:void 0});i(q,()=>ve?"":me,j&&!we);const Pe=q?e("input",{type:"hidden",name:q,value:ve?"":me,disabled:we}):null;if(j){const r=Ce?"danger":re,l=[$?`${ke}-description`:null,z?`${ke}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:xe,role:"group","aria-labelledby":S?`${ke}-label`:void 0,"aria-describedby":l,className:g("flex flex-col",k[ae],F),style:{...N(r,Y),...J},...Q,children:[S?e("span",{id:`${ke}-label`,className:g(w[ae],"font-semibold",we?"text-(--plass-muted-fg)":"text-(--plass-fg)",G?.label),children:S}):null,Ne,$?e("span",{id:`${ke}-description`,className:g(x(ae),G?.description),children:$}):null,z?e("span",{id:`${ke}-error`,className:g(w[ae],"text-(--p-accent)",G?.error),children:z}):null,Pe]})}return e("div",{ref:xe,className:L?"w-full":"inline-block",...Q,children:e(o,{variant:E,size:ae,color:re,density:le,elevation:Y,style:J,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D,disabled:M,readOnly:A,fullWidth:L,className:F,classNames:G,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:c,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":u(he.hsv,C?he.alpha:1)}})}),display:ve?se.empty:me,samples:widthSamples(y,C),empty:ve,clearable:V,onClear:()=>{void 0===d&&ne(""),pe(""),v?.("")},open:ce,onOpenChange:e=>{void 0===B&&de(e),K?.(e)},labels:{...s,clear:se.clear},name:q,formValue:ve?"":me,children:e("div",{className:b[ae],children:Ne})})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useDisabled as n,useFieldsetDisabled as t,useFormReport as i}from"../../internal/form.js";import{CheckIcon as d}from"../../internal/icons.js";import{checkerBackground as c,clamp as h,cssColor as u,defaultSwatches as f,formatColor as p,parseColor as m,readableInk as b}from"../../internal/color.js";import{controlTextClasses as v,cx as g,fieldDescriptionClasses as x,focusRingClasses as y,metaTextClasses as w,radiusClasses as C,stackGapClasses as k,surfaceSlots as N}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},j={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},O={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},S={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},_={xs:10,sm:12,md:14,lg:16,xl:18},$=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),z=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:h((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:h((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:n,withAlpha:t,swatches:i,editable:f,size:v,disabled:x,readOnly:k,invalid:N,labels:I,className:T}){const D=x||k,M=_[v],A=-M/2,L=u({h:r.h,s:100,v:100}),V=u(r),q=i?i.flatMap(e=>{const a=m(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{if(D)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:g("flex flex-col",P[v],S[v],T),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":I.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{const a=arrowStep(e);if(D||!a)return;e.preventDefault();const o=h(r.s+a.x,0,100),n=h(r.v+a.y,0,100);o===r.s&&n===r.v||s({hsv:{h:r.h,s:o,v:n},alpha:l})},className:g($,j[v],C[v],y,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:L,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:z,style:{width:M,height:M,left:`${r.s}%`,top:100-r.v+"%",marginLeft:A,marginTop:A,backgroundColor:V}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(I.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:g($,O[v],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:z,style:{width:M,height:M,left:r.h/360*100+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:L}})}),t?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(I.alpha,100*l,100,e=>{const a=h(l+e/100,0,1);a!==l&&s({hsv:r,alpha:a})},e=>s({hsv:r,alpha:e})),className:g($,O[v],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:c,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${u(r,0)}, ${V})`}}),e("span",{className:z,style:{width:M,height:M,left:100*l+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:u(r,l)}})]}):null,f?a("div",{className:g("flex items-center",S[v]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:M+6,height:M+6,...c},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:u(r,l)}})}),e("input",{type:"text",value:o,disabled:x,readOnly:k,spellCheck:!1,autoComplete:"off","aria-label":I.value,onChange:e=>n(e.target.value),className:g("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",C.xs,w[v],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,q.length>0?e("div",{role:"group","aria-label":I.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:o})=>{const n=p(o.hsv,o.alpha,"hex")===p(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":n,onClick:()=>s(o),className:g("flex aspect-square items-center justify-center rounded-full border p-0","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",y,"[outline:none]",D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:u(o.hsv,o.alpha)},children:n?e("span",{style:{color:b(o.hsv)},children:e(d,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const I={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:d,defaultValue:h="#1a58d1",onValueChange:b,format:y="hex",alpha:C=!1,swatches:P=f,inline:j=!1,editable:O=!0,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D=!1,disabled:M=!1,readOnly:A=!1,fullWidth:L=!1,clearable:V=!1,name:q,open:B,defaultOpen:H=!1,onOpenChange:K,labels:R,variant:E="glass",size:W,color:U,density:X,elevation:Y=0,className:F,classNames:G,style:J,"aria-label":Q,"aria-labelledby":Z,...ee},ae){const re=l(),le=W??re.size??"md",se=U??re.color??"primary",oe=X??re.density??"default",ne=r.useMemo(()=>({...defaultColorPickerLabels,...R}),[R]),[te,ie]=r.useState(h),de=d??te,[ce,he]=r.useState(H),ue=B??ce,[fe,pe]=r.useState(()=>m(de)??{hsv:I,alpha:1}),[me,be]=r.useState(()=>de),ve=p(fe.hsv,C?fe.alpha:1,y),ge=""===de;r.useEffect(()=>{const e=m(de);e?p(e.hsv,C?e.alpha:1,y)!==ve&&(be(de),pe(e)):be(de)},[de,ve,C,y]);const commit=(e,a)=>{pe(e);const r=p(e.hsv,C?e.alpha:1,y);be(a??r),void 0===d&&ie(r),b?.(r)},[xe,ye]=r.useState(null),we=r.useCallback(e=>{ye(e),"function"==typeof ae?ae(e):ae&&(ae.current=e)},[ae]),Ce=t(xe),ke=n(M)||Ce,Ne=T??Boolean(z),Pe=r.useId(),je=e(ColorPanel,{hsv:fe.hsv,alphaValue:fe.alpha,onChange:commit,text:me,onTextChange:e=>{be(e);const a=m(e);a&&commit(a,e)},withAlpha:C,swatches:P,editable:O,size:le,disabled:ke,readOnly:A,invalid:j&&Ne,labels:ne,className:j?G?.control:void 0});i(q,()=>ge?"":ve,j&&!ke);const Oe=q?e("input",{type:"hidden",name:q,value:ge?"":ve,disabled:ke}):null;if(j){const r=Ne?"danger":se,l=[$?`${Pe}-description`:null,z?`${Pe}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:we,role:"group","aria-label":Q,"aria-labelledby":Z??(S&&!Q?`${Pe}-label`:void 0),"aria-describedby":l,className:g("flex flex-col",k[le],F),style:{...N(r,Y),...J},...ee,children:[S?e("span",{id:`${Pe}-label`,className:g(w[le],"font-semibold",ke?"text-(--plass-muted-fg)":"text-(--plass-fg)",G?.label),children:S}):null,je,$?e("span",{id:`${Pe}-description`,className:g(x(le),G?.description),children:$}):null,z?e("span",{id:`${Pe}-error`,className:g(w[le],"text-(--p-accent)",G?.error),children:z}):null,Oe]})}return e("div",{ref:we,className:L?"w-full":"inline-block",...ee,children:e(o,{"aria-label":Q,"aria-labelledby":Z,variant:E,size:le,color:se,density:oe,elevation:Y,style:J,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D,disabled:M,readOnly:A,fullWidth:L,className:F,classNames:G,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:c,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ge?"transparent":u(fe.hsv,C?fe.alpha:1)}})}),display:ge?ne.empty:ve,samples:widthSamples(y,C),empty:ge,clearable:V,onClear:()=>{void 0===d&&ie(""),be(""),b?.("")},open:ue,onOpenChange:e=>{void 0===B&&he(e),K?.(e)},labels:{...s,clear:ne.clear},name:q,formValue:ge?"":ve,children:e("div",{className:v[le],children:je})})})});

package/dist/components/combobox/PlCombobox.d.ts

@@ -25,6 +25,8 @@ export interface PlComboboxOption {
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
 export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**
@@ -160,5 +162,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/PlCombobox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{FadedContext as t,useDisabled as s}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Combobox as i}from"@base-ui/react/combobox";import{Field as o}from"@base-ui/react/field";import{PlChip as c}from"../chip/PlChip.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as p,PlusIcon as u}from"../../internal/icons.js";import{hotKeyHandler as h}from"../../internal/keys.js";import{useFieldLight as b}from"../../internal/glow.js";import{FieldNotch as f,floatControlClassName as g,notchShellStyle as v,resolveNotch as x}from"../../internal/notch.js";import{chipRemoveClasses as y,controlHeightClasses as w,controlTextLeadingClasses as N,cx as j,disabledClasses as C,fieldDescriptionClasses as L,fieldReadOnlyClasses as I,fieldRestClasses as S,fieldSlots as z,focusWithinRingClasses as _,forcedHighlightedClasses as O,gapClasses as P,glassClasses as V,hasContent as A,iconClasses as M,metaTextClasses as k,paddingXClasses as R,radiusClasses as F,stackGapClasses as T,surfaceSlots as $,targetClasses as q,transitionClasses as D}from"../../internal/styles.js";const E=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",D,M].join(" "),K=_,G={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},H=/* @__PURE__ */[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),W=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",D,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",O,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),B=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","enabled:hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed"].join(" "),J=/* @__PURE__ */j(q,B),Q=[];function toArray(e){return null==e?Q:Array.isArray(e)?e:[e]}export function PlCombobox({variant:_="glass",size:O,color:V,density:M,elevation:q=0,items:D,multiple:Q,value:U,defaultValue:X,onValueChange:Y,onInputValueChange:Z,allowCustom:ee=!0,customLabel:ae,clearable:le=!1,emptyMessage:te,limit:se,placeholder:ne,label:re,labelPlacement:ie,description:oe,error:ce,invalid:de,startIcon:me,fullWidth:pe=!1,disabled:ue=!1,readOnly:he=!1,required:be=!1,name:fe,open:ge,defaultOpen:ve,onOpenChange:xe,openLabel:ye,clearLabel:we,removeLabel:Ne,inputRef:je,id:Ce,className:Le,hotKeys:Ie,classNames:Se,style:ze,..._e}){const Oe=n(),Pe=s(ue),Ve=r(),Ae=ye??Ve.open,Me=we??Ve.clear,ke=te??Ve.empty,Re=Ne??Ve.removeItem,Fe=O??Oe.size??"md",Te=V??Oe.color??"primary",$e=M??Oe.density??"default",qe=ie??Oe.labelPlacement??"top",{notched:De,float:Ee}=x(qe,re,A(me)),Ke=A(ce),Ge=de??Ke,He=Ge?"danger":Te,We=!0===Q,Be=l.useMemo(()=>D.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[D]),[Je,Qe]=l.useState(()=>toArray(X)),Ue=void 0===U?Je:toArray(U),[Xe,Ye]=l.useState(""),Ze=l.useMemo(()=>new Map(Be.map(e=>[e.value,e])),[Be]),ea=l.useCallback(e=>Ze.get(e)??{value:e,label:String(e),custom:!0},[Ze]),aa=Xe.trim(),la=aa.toLocaleLowerCase(),ta=""===aa||Be.some(e=>e.label.toLocaleLowerCase()===la||String(e.value).toLocaleLowerCase()===la)||Ue.some(e=>String(e).toLocaleLowerCase()===la),sa=!ee||he||Pe||ta?null:aa,na=l.useMemo(()=>null===sa?Be:[...Be,{value:sa,label:sa,custom:!0}],[Be,sa]),ra=l.useMemo(()=>i.createItems(na,{getValue:e=>e.value,getLabel:e=>e.label}),[na]),ia=We?Ue:Ue[0]??null,oa=!Pe&&!he,ca=b(oa),da=j(E,De?"":K,N[Fe],F[Fe],P[Fe],We?G[Fe]:w[Fe],`${R[$e][Fe]} pe-1.5`,Pe?C[_]:he?I[_]:S[_],oa?"plass-glow":""),ma=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(i.Input,{ref:je,placeholder:Ee?ne||" ":ne,onKeyDown:h(Ie,void 0),className:j(ma,We&&"min-w-16",We&&a&&"ms-1.5",Ee&&!a&&g)}),pa=e(o.Label,{className:j(k[Fe],"font-semibold",Pe?"text-(--plass-muted-fg)":"text-(--plass-fg)",Se?.label),children:re});return a(o.Root,{disabled:Pe,invalid:Ge,className:j("flex-col align-top",T[Fe],pe?"flex w-full":"inline-flex",Le),style:{...z(He,q),...ze},..._e,children:[A(re)&&!De?pa:null,a(i.Root,{id:Ce,name:fe,items:ra,multiple:We,value:ia,onValueChange:e=>{const a=toArray(e);0===a.length&&0===Ue.length||function commit(e){void 0===U&&Qe(e),Y?.(We?e:e[0]??null)}(a)},onInputValueChange:e=>{Ye(e),Z?.(e)},open:ge,defaultOpen:ve,onOpenChange:e=>xe?.(e),autoHighlight:!0,itemToStringLabel:String,itemToStringValue:String,limit:se,disabled:Pe,readOnly:he,required:be,children:[e(f,{notched:De,size:Fe,density:$e,variant:_,disabled:Pe,readOnly:he,float:Ee,label:pa,children:a(i.InputGroup,{style:De?v:void 0,...ca,className:j(da,Se?.control),children:[me?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:me}):null,We?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Provider,{value:Pe,children:e(i.Value,{children:t=>a(l.Fragment,{children:[t.map(ea).map(a=>e(i.Chip,{render:e(c,{variant:"glass",size:Fe,color:He,density:"compact",disabled:Pe,endIcon:he||Pe?null:e(i.ChipRemove,{"aria-label":Re(a.label),className:y,children:e(p,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})})}):renderInput(!1),!le||he||Pe?null:e(i.Clear,{"aria-label":Me,className:J,children:e(p,{})}),e(i.Trigger,{"aria-label":Ae,"aria-labelledby":void 0,className:B,children:e(i.Icon,{className:j("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"),children:e(m,{})})})]})}),e(i.Portal,{children:e(i.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(i.Popup,{className:j(H,F[Fe],N[Fe]),style:$(He,3),children:[e(i.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:ke}),e(i.List,{children:t=>e(i.Item,{value:t.value,disabled:t.disabled,className:W,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(u,{})}),e("span",{className:"truncate",children:ae?ae(t.label):Ve.addCustom(t.label)})]}):a(l.Fragment,{children:[e(i.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),oe?e(o.Description,{className:j(L(Fe),Se?.description),children:oe}):null,e(o.Error,Ke?{match:!0,className:j(k[Fe],"text-(--p-accent)",Se?.error),children:ce}:{className:j(k[Fe],"text-(--p-accent)",Se?.error)})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{FadedContext as t,controlNaming as s,useDisabled as r}from"../../internal/form.js";import{useDefaults as n,useRuntimeLocale as i}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{Combobox as c}from"@base-ui/react/combobox";import{Field as d}from"@base-ui/react/field";import{PlChip as m}from"../chip/PlChip.js";import{CheckIcon as p,ChevronIcon as u,CloseIcon as h,PlusIcon as b}from"../../internal/icons.js";import{hotKeyHandler as f}from"../../internal/keys.js";import{useFieldLight as g}from"../../internal/glow.js";import{FieldNotch as v,floatControlClassName as y,notchShellStyle as x,resolveNotch as w}from"../../internal/notch.js";import{chipRemoveClasses as N,controlHeightClasses as j,controlTextLeadingClasses as C,cx as L,disabledClasses as I,fieldDescriptionClasses as S,fieldReadOnlyClasses as z,fieldRestClasses as _,fieldSlots as O,focusWithinRingClasses as P,forcedHighlightedClasses as V,gapClasses as A,glassClasses as M,hasContent as k,iconClasses as R,metaTextClasses as F,paddingXClasses as T,radiusClasses as $,stackGapClasses as q,surfaceSlots as D,targetClasses as E,transitionClasses as K}from"../../internal/styles.js";const G=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",K,R].join(" "),H=P,W={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},B=/* @__PURE__ */[M,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),J=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",K,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",V,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),Q=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center p-0","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","enabled:hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed"].join(" "),U=/* @__PURE__ */L(E,Q),X=[];function toArray(e){return null==e?X:Array.isArray(e)?e:[e]}export function PlCombobox({variant:P="glass",size:V,color:M,density:R,elevation:E=0,items:K,multiple:X,value:Y,defaultValue:Z,onValueChange:ee,onInputValueChange:ae,allowCustom:le=!0,customLabel:te,clearable:se=!1,emptyMessage:re,limit:ne,placeholder:ie,label:oe,labelPlacement:ce,description:de,error:me,invalid:pe,startIcon:ue,fullWidth:he=!1,disabled:be=!1,readOnly:fe=!1,required:ge=!1,name:ve,open:ye,defaultOpen:xe,onOpenChange:we,openLabel:Ne,clearLabel:je,removeLabel:Ce,inputRef:Le,id:Ie,className:Se,hotKeys:ze,classNames:_e,style:Oe,"aria-label":Pe,"aria-labelledby":Ve,...Ae}){const Me=n(),ke=i(void 0),Re=r(be),Fe=o(),Te=Ne??Fe.open,$e=je??Fe.clear,qe=re??Fe.empty,De=Ce??Fe.removeItem,Ee=V??Me.size??"md",Ke=M??Me.color??"primary",Ge=R??Me.density??"default",He=ce??Me.labelPlacement??"top",{notched:We,float:Be}=w(He,oe,k(ue)),Je=k(me),Qe=pe??Je,Ue=Qe?"danger":Ke,Xe=!0===X,Ye=l.useMemo(()=>K.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[K]),[Ze,ea]=l.useState(()=>toArray(Z)),aa=void 0===Y?Ze:toArray(Y),[la,ta]=l.useState(""),sa=l.useMemo(()=>new Map(Ye.map(e=>[e.value,e])),[Ye]),ra=l.useCallback(e=>sa.get(e)??{value:e,label:String(e),custom:!0},[sa]),na=la.trim(),ia=na.toLocaleLowerCase(ke),oa=""===na||Ye.some(e=>e.label.toLocaleLowerCase(ke)===ia||String(e.value).toLocaleLowerCase(ke)===ia)||aa.some(e=>String(e).toLocaleLowerCase(ke)===ia),ca=!le||fe||Re||oa?null:na,da=l.useMemo(()=>null===ca?Ye:[...Ye,{value:ca,label:ca,custom:!0}],[Ye,ca]),ma=l.useMemo(()=>c.createItems(da,{getValue:e=>e.value,getLabel:e=>e.label}),[da]),pa=Xe?aa:aa[0]??null,ua=!Re&&!fe,ha=g(ua),ba=L(G,We?"":H,C[Ee],$[Ee],A[Ee],Xe?W[Ee]:j[Ee],`${T[Ge][Ee]} pe-1.5`,Re?I[P]:fe?z[P]:_[P],ua?"plass-glow":""),fa=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent p-0 [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(c.Input,{ref:Le,placeholder:Be?ie||" ":ie,...s(Pe,Ve),onKeyDown:f(ze,void 0),className:L(fa,Xe&&"min-w-16",Xe&&a&&"ms-1.5",Be&&!a&&y)}),ga=e(d.Label,{className:L(F[Ee],"font-semibold",Re?"text-(--plass-muted-fg)":"text-(--plass-fg)",_e?.label),children:oe});return a(d.Root,{disabled:Re,invalid:Qe,className:L("flex-col align-top",q[Ee],he?"flex w-full":"inline-flex",Se),style:{...O(Ue,E),...Oe},...Ae,children:[k(oe)&&!We?ga:null,a(c.Root,{id:Ie,name:ve,items:ma,multiple:Xe,value:pa,onValueChange:e=>{const a=toArray(e);0===a.length&&0===aa.length||function commit(e){void 0===Y&&ea(e),ee?.(Xe?e:e[0]??null)}(a)},onInputValueChange:e=>{ta(e),ae?.(e)},open:ye,defaultOpen:xe,onOpenChange:e=>we?.(e),autoHighlight:!0,itemToStringLabel:String,itemToStringValue:String,limit:ne,locale:ke,disabled:Re,readOnly:fe,required:ge,children:[e(v,{notched:We,size:Ee,density:Ge,variant:P,disabled:Re,readOnly:fe,float:Be,label:ga,children:a(c.InputGroup,{style:We?x:void 0,...ha,className:L(ba,_e?.control),children:[ue?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ue}):null,Xe?e(c.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Provider,{value:Re,children:e(c.Value,{children:t=>a(l.Fragment,{children:[t.map(ra).map(a=>e(c.Chip,{render:e(m,{variant:"glass",size:Ee,color:Ue,density:"compact",disabled:Re,endIcon:fe||Re?null:e(c.ChipRemove,{"aria-label":De(a.label),className:N,children:e(h,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})})}):renderInput(!1),!se||fe||Re?null:e(c.Clear,{"aria-label":$e,className:U,children:e(h,{})}),e(c.Trigger,{"aria-label":Te,"aria-labelledby":void 0,className:Q,children:e(c.Icon,{className:L("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"),children:e(u,{})})})]})}),e(c.Portal,{children:e(c.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(c.Popup,{className:L(B,$[Ee],C[Ee]),style:D(Ue,3),children:[e(c.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:qe}),e(c.List,{children:t=>e(c.Item,{value:t.value,disabled:t.disabled,className:J,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(b,{})}),e("span",{className:"truncate",children:te?te(t.label):Fe.addCustom(t.label)})]}):a(l.Fragment,{children:[e(c.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(p,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),de?e(d.Description,{className:L(S(Ee),_e?.description),children:de}):null,e(d.Error,Je?{match:!0,className:L(F[Ee],"text-(--p-accent)",_e?.error),children:me}:{className:L(F[Ee],"text-(--p-accent)",_e?.error)})]})}

package/dist/components/command-palette/PlCommandPalette.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Autocomplete as o}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,toLength as b,transitionClasses as v}from"../../internal/styles.js";const w=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */[h,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},P={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},z={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},C=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none",v,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:v,onSelect:M,shortcut:O="Mod+K",width:S,maxHeight:_=320,placeholder:H,emptyMessage:K,label:R,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=R??L.commandPalette,q=H??L.commandPalettePlaceholder,A=K??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=u??U,ee=a.useRef($);a.useEffect(()=>{ee.current&&!$&&Z(""),ee.current=$},[$]);const se=a.useCallback(e=>{void 0===u&&X(e),v?.(e)},[u,v]);n(!1===O?void 0:{[O]:()=>se(!0)},{whileTyping:!0});const ae=a.useMemo(()=>c.map(haystackOf),[c]),te=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>ae[a].includes(e))},[c,ae,Y]),le=a.useMemo(()=>te.length>100?te.slice(0,100):te,[te]),oe=te.length-le.length,re=b(S),ie=b(_);return e(r.Root,{open:$,onOpenChange:se,children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",w,T?.backdrop)}),e(r.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(r.Popup,{"aria-label":W,className:m(k,g[G],d[G],void 0===re?N[G]:"","self-start",I),style:{...y(J,3),...void 0===re?null:{maxWidth:re},...B},children:s(o.Root,{open:!0,mode:"list",items:le,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",z[G]),children:e(o.Input,{autoFocus:!0,placeholder:q,className:m("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",j[G])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:ie},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==le[l-1]?.group?e("div",{role:"presentation",className:m(z[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",f[G]),children:t.group}):null,s(o.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),M?.(e),se(!1))})(t),className:m(C,g[G],z[G],P["compact"===Q?"xs":G]),children:[x(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),x(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",f[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),oe>0?e("div",{className:m(z[G],"shrink-0 border-t py-2 text-(--plass-muted-fg) [border-color:var(--plass-glass-line)]",f[G]),children:L.chartMore(oe)}):null,e(o.Empty,{className:m(z[G],"py-6 text-center text-(--plass-muted-fg)",f[G]),children:A})]})})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Autocomplete as r}from"@base-ui/react/autocomplete";import{Dialog as o}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as f,metaTextClasses as x,radiusClasses as g,surfaceSlots as y,toLength as b,transitionClasses as v}from"../../internal/styles.js";const w=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */[h,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},P={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},z={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},C=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none",v,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:v,onSelect:M,shortcut:O="Mod+K",width:S,maxHeight:_=320,placeholder:H,emptyMessage:R,label:K,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=K??L.commandPalette,q=H??L.commandPalettePlaceholder,A=R??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=a.useRef(null),ee=u??U,se=a.useRef(ee);a.useEffect(()=>{se.current&&!ee&&Z(""),se.current=ee},[ee]);const ae=a.useCallback(e=>{void 0===u&&X(e),v?.(e)},[u,v]);n(!1===O?void 0:{[O]:()=>ae(!0)},{whileTyping:!0});const te=a.useMemo(()=>c.map(haystackOf),[c]),le=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>te[a].includes(e))},[c,te,Y]),re=a.useMemo(()=>le.length>100?le.slice(0,100):le,[le]),oe=le.length-re.length,ie=b(S),ne=b(_);return e(o.Root,{open:ee,onOpenChange:ae,children:s(o.Portal,{children:[e(o.Backdrop,{className:m("plass-portal",w,T?.backdrop)}),e(o.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(o.Popup,{initialFocus:$,"aria-label":W,className:m(k,g[G],d[G],void 0===ie?N[G]:"","self-start",I),style:{...y(J,3),...void 0===ie?null:{maxWidth:ie},...B},children:s(r.Root,{inline:!0,open:!0,mode:"list",items:re,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",z[G]),children:e(r.Input,{ref:$,placeholder:q,className:m("min-w-0 flex-1 bg-transparent p-0 [font:inherit] text-inherit [outline:none]","placeholder:text-(--plass-muted-fg) caret-(--p-accent)","selection:bg-(--p-soft-press)",j[G])})}),e(r.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:ne},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==re[l-1]?.group?e("div",{role:"presentation",className:m(z[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",x[G]),children:t.group}):null,s(r.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),M?.(e),ae(!1))})(t),className:m(C,g[G],z[G],P["compact"===Q?"xs":G]),children:[f(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),f(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",x[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),oe>0?e("div",{className:m(z[G],"shrink-0 border-t py-2 text-(--plass-muted-fg) [border-color:var(--plass-glass-line)]",x[G]),children:L.chartMore(oe)}):null,e(r.Empty,{className:m(z[G],"py-6 text-center text-(--plass-muted-fg)",x[G]),children:A})]})})})]})})}

package/dist/components/confirm/PlConfirmProvider.js

@@ -1 +1 @@
-"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,C]=n.useState(!1),[b,v]=n.useState(null),w=n.useRef(null),P=n.useRef([]),k=n.useRef(0),x=n.useCallback(e=>{const r=w.current;if(!r)return;r.resolve(e);const n=P.current.shift();if(n)return w.current=n,void v(n);w.current=null,C(!1)},[]),z=n.useCallback((e,r)=>new Promise(n=>{k.current+=1;const o={id:k.current,kind:e,options:r,resolve:n};w.current?P.current.push(o):(w.current=o,v(o),C(!0))}),[]),j=n.useMemo(()=>({confirm:e=>z("confirm",e),alert:e=>z("alert",e).then(()=>{})}),[z]);n.useEffect(()=>()=>{w.current?.resolve(!1),P.current.forEach(e=>e.resolve(!1)),w.current=null,P.current=[]},[]);const g=b?.options,L="alert"===b?.kind,F="confirm"===(g?.initialFocus??"cancel")||L;return r(l.Provider,{value:j,children:[m,e(t,{open:p,onOpenChange:e=>{e||x(!1)},showClose:!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)})]},b?.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}
+"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{useLabels as t}from"../../internal/labels.js";import{lazyPart as l}from"../../internal/lazy.js";const c=/* @__PURE__ */l(()=>import("../modal/PlModal.js").then(e=>e.PlModal));function ConfirmModal({open:r,...o}){const[t,l]=n.useState(!1);return n.useLayoutEffect(()=>{l(!0)},[]),e(c,{open:!0===r&&t,...o})}const i=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:l,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:f,width:d,children:m}){const h=t(),[p,w]=n.useState(!1),[C,b]=n.useState(null),v=n.useRef(null),k=n.useRef([]),P=n.useRef(0),z=n.useRef(null),j=n.useCallback(e=>{const r=v.current;if(!r)return;r.resolve(e);const n=k.current.shift();if(n)return v.current=n,void b(n);v.current=null,w(!1)},[]),x=n.useCallback((e,r)=>new Promise(n=>{P.current+=1;const o={id:P.current,kind:e,options:r,resolve:n};v.current?k.current.push(o):(v.current=o,b(o),w(!0))}),[]),E=n.useMemo(()=>({confirm:e=>x("confirm",e),alert:e=>x("alert",e).then(()=>{})}),[x]);n.useEffect(()=>function whenIdle(e){if("function"==typeof window.requestIdleCallback){const r=window.requestIdleCallback(e,{timeout:2e3});return()=>window.cancelIdleCallback(r)}const r=window.setTimeout(e,500);return()=>window.clearTimeout(r)}(c.preload),[]);const L=n.useCallback(()=>{const e=[v.current,...k.current];v.current=null,k.current=[],e.forEach(e=>e?.resolve(!1)),w(!1),b(null)},[]);n.useEffect(()=>()=>{v.current?.resolve(!1),k.current.forEach(e=>e.resolve(!1)),v.current=null,k.current=[]},[]);const g=C?.options,y="alert"===C?.kind,M="confirm"===(g?.initialFocus??"cancel")||y,R=n.useRef(!1);n.useLayoutEffect(()=>{p&&R.current&&z.current?.focus(),R.current=p},[p,C]);const I=C?e(n.Suspense,{fallback:null,children:e(ConfirmModal,{open:p,onUnavailable:L,onOpenChange:e=>{e||j(!1)},showClose:!1,role:"alertdialog",initialFocus:z,size:g?.size??l,color:g?.color??s,width:g?.width??d,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[y?null:e(o,{ref:M?void 0:z,variant:"ghost",color:"secondary",size:g?.size??l,onClick:()=>j(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{ref:M?z:void 0,color:g?.color??s,size:g?.size??l,onClick:()=>j(!0),children:g?.confirmLabel??(y?f??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})}):null;return r(i.Provider,{value:E,children:[m,I]})}export function usePlConfirm(){const e=n.useContext(i);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}

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

@@ -91,6 +91,8 @@ export interface PlDataTableColumn<Row> {
     unsearchable?: boolean;
 }
 export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onSelect'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a table is a grid set into the page
      * rather than a panel floating over it.

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import type { PlassPortalClassNames, PlassSide, PlassStyleProps } from '../../types.js';
+import type { PlassHeadingLevel, PlassPortalClassNames, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * How the panel relates to the page.
  *
@@ -57,6 +57,18 @@ export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' |
     trigger?: React.ReactElement;
     /** The heading. Rendered as the element that names the drawer. */
     title?: React.ReactNode;
+    /**
+     * The level of the heading `title` is, `1` to `6`.
+     *
+     * An `inline` drawer's title sits in the page's outline, and a heading has
+     * to sit one level under the one above it, or the outline skips a step. `2`
+     * fits a sidebar beside the page's `<h1>`; a panel inside a section headed by
+     * an `<h2>` wants `3`. An `overlay` drawer's title takes the level too and
+     * still names the dialog. Only the element changes: the type scale is the
+     * drawer's either way.
+     * @default 2
+     */
+    headingLevel?: PlassHeadingLevel;
     /** A line under the title, and the drawer's accessible description. */
     description?: React.ReactNode;
     /**
@@ -110,6 +122,19 @@ export interface PlDrawerProps extends Pick<PlassStyleProps, 'size' | 'color' |
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Keeps the drawer's content in the document while it is closed, hidden, out
+     * of the focus order and off the accessibility tree, rather than taking it
+     * out. `overlay` only.
+     *
+     * For a drawer that holds a site's navigation. A closed drawer is otherwise
+     * not in the document, and neither are its links — which is what a search
+     * engine finds on a phone, where the navigation is a drawer nobody has
+     * opened. Off by default, because a drawer's content is usually work that
+     * only needs doing once somebody opens it.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** The body. */
     children?: React.ReactNode;
 }
@@ -143,4 +168,4 @@ export declare const PlDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
  * focus to the trigger, and the inert page behind.
  */
-export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, extent, rounded, modal, dismissible, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;
+export declare function PlDrawer({ side, mode, size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, headingLevel: headingLevelProp, description, actions, dividers, showClose, closeLabel: closeLabelProp, extent, rounded, modal, dismissible, keepMounted, className, classNames, style, children, ...props }: PlDrawerProps): React.JSX.Element | null;