plass-ui 1.7.0 → 1.8.1

package/dist/components/sparkline/PlSparkline.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
 import type { PlassChartCurve, PlassChartDatum, PlassColor, PlassSize } from '../../types.js';
-export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'>, Pick<ChartBaseProps, 'initialWidth'> {
     /** The values. `null` is a gap, exactly as it is on every other chart. */
     data: readonly PlassChartDatum[];
     /**
@@ -46,9 +47,20 @@ export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'d
     min?: number;
     /** And the top of it. */
     max?: number;
-    /** How wide. Fills its container by default. */
+    /**
+     * How wide. Fills its container by default.
+     *
+     * A number is the width the strip is drawn at from the first render, the
+     * server's included, so `initialWidth` only matters for any other length.
+     */
     width?: number | string;
-    /** A name for the strip, read out in place of it. */
+    /**
+     * A name for the strip, read out in place of it.
+     *
+     * An `aria-label` names the strip in its place and an `aria-labelledby`
+     * outranks both. With none of the three the strip is decoration, and is
+     * taken off the accessibility tree.
+     */
     label?: string;
 }
 /**

package/dist/components/sparkline/PlSparkline.js

@@ -1 +1 @@
-"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{areaPath as r,barMaxThickness as t,barPath as i,barRadius as n,extentOf as s,linePath as o,lineWidths as h,markerRadii as m,markGap as u,resolveColor as c,sparklineHeights as d,toValue as p,writeChartValue as f}from"../../internal/chart.js";import{useMeasuredWidth as v}from"../../internal/chart-frame.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */e.forwardRef(function PlSparkline({data:M,shape:g="line",curve:j="linear",size:w,color:$,endDot:N=!1,baseline:P,min:W,max:z,width:C,label:L,className:R,style:S,...B},D){const G=x(),I=w??G.size??"md",q=e.useRef(null),A=v(q),E=e.useId().replace(/:/g,""),F=e.useMemo(()=>M.map(p),[M]),H=d[I],J=h[I],K=m[I],O=s([F],!1),Q=W??(O?Math.min(O.min,P??O.min):0),T=z??(O?Math.max(O.max,P??O.max):1),U=T-Q||1,V="number"==typeof C?C:A,X=c($??"var(--plass-chart-1)"),Y="bar"===g?0:J/2+(N?K:0),Z=Math.max(1,H-2*Y),y=l=>Y+(1-(l-Q)/U)*Z,_=F.length>1?V/(F.length-1):V,ll=F.map((l,a)=>null===l.value?null:{x:a*_,y:y(l.value)}),al=(()=>{for(let l=F.length-1;l>=0;l--)if(null!==F[l].value)return l;return-1})(),el=al>=0?F[al].value:null,rl=null!==el&&el>=Q&&el<=T,tl=V/Math.max(1,F.length),il=Math.min(t[I]/2,Math.max(1,tl-u)),nl=y(Math.min(Math.max(Q,0),T)),barTop=l=>{const a=Math.min(y(l),nl);return Math.abs(y(l)-nl)<1?Math.min(a,H-1):a};return a("div",{ref:D,className:b("relative block",R??void 0),style:{width:C??"100%",height:H,...S},...B,children:[l("div",{ref:q,className:"absolute inset-0",children:V>0&&F.length>0?a("svg",{width:V,height:H,viewBox:`0 0 ${V} ${H}`,role:L?"img":"presentation","aria-label":L,"aria-hidden":!L||void 0,className:"block overflow-visible",children:[a("defs",{children:[l("clipPath",{id:`${E}-strip`,children:l("rect",{x:-V,y:0,width:3*V,height:H})}),"area"===g?a("linearGradient",{id:`${E}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${X} 32%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${X} 2%, transparent)`})]}):null]}),a("g",{clipPath:`url(#${E}-strip)`,children:["area"===g?l("path",{d:r(ll,H,j),fill:`url(#${E}-fill)`}):null,void 0!==P?l("line",{x1:0,x2:V,y1:y(P),y2:y(P),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===g?F.map((a,e)=>null===a.value?null:l("path",{d:i(e*tl+(tl-il)/2,barTop(a.value),il,Math.max(1,Math.abs(y(a.value)-nl)),n/2,a.value>=0?"up":"down"),fill:a.color??X},e)):l("path",{d:o(ll,j),fill:"none",stroke:X,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"})]}),N&&rl&&"bar"!==g?l("circle",{cx:ll[al].x,cy:ll[al].y,r:K,fill:X,stroke:"var(--plass-chart-gap)",strokeWidth:u}):null]}):null}),L?l("span",{className:k,children:F.map(l=>null===l.value?"—":f(l.value,void 0,G.locale)).join(", ")}):null]})});
+"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{areaPath as i,barMaxThickness as r,barPath as t,barRadius as n,extentOf as o,linePath as s,lineWidths as h,markerRadii as d,markGap as m,resolveColor as u,sparklineHeights as c,toValue as p,writeChartValue as f}from"../../internal/chart.js";import{useMeasuredSize as v}from"../../internal/chart-frame.js";import{useDefaults as b,useLocale as x}from"../../internal/defaults.js";import{cx as g,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */e.forwardRef(function PlSparkline({data:M,shape:w="line",curve:j="linear",size:$,color:N,endDot:P=!1,baseline:W,min:z,max:B,width:C,initialWidth:L,label:R,"aria-label":S,"aria-labelledby":D,"aria-describedby":G,className:I,style:q,...A},E){const F=b(),H=x(),J=$??F.size??"md",K=e.useRef(null),{width:O,guessed:Q}=v(K,L),T=e.useId().replace(/:/g,""),U=S||R,V=Boolean(D||U),X=e.useMemo(()=>M.map(p),[M]),Y=c[J],Z=h[J],_=d[J],ll=o([X],!1),al=z??(ll?Math.min(ll.min,W??ll.min):0),el=B??(ll?Math.max(ll.max,W??ll.max):1),il=el-al||1,rl="number"==typeof C,tl=rl?C:O,nl=u(N??"var(--plass-chart-1)"),ol="bar"===w?0:Z/2+(P?_:0),sl=Math.max(1,Y-2*ol),y=l=>ol+(1-(l-al)/il)*sl,hl=X.length>1?tl/(X.length-1):tl,dl=X.map((l,a)=>null===l.value?null:{x:a*hl,y:y(l.value)}),ml=(()=>{for(let l=X.length-1;l>=0;l--)if(null!==X[l].value)return l;return-1})(),ul=ml>=0?X[ml].value:null,cl=null!==ul&&ul>=al&&ul<=el,pl=tl/Math.max(1,X.length),fl=Math.min(r[J]/2,Math.max(1,pl-m)),vl=y(Math.min(Math.max(al,0),el)),barTop=l=>{const a=Math.min(y(l),vl);return Math.abs(y(l)-vl)<1?Math.min(a,Y-1):a};return a("div",{ref:E,className:g("relative block",I??void 0),style:{width:C??"100%",height:Y,...q},...A,children:[l("div",{ref:K,className:g("absolute inset-0",Q&&!rl&&"overflow-hidden"),children:tl>0&&X.length>0?a("svg",{width:tl,height:Y,viewBox:`0 0 ${tl} ${Y}`,role:V?"img":"presentation","aria-labelledby":D||void 0,"aria-label":U||void 0,"aria-describedby":V&&G||void 0,"aria-hidden":!V||void 0,className:"block overflow-visible",children:[a("defs",{children:[l("clipPath",{id:`${T}-strip`,children:l("rect",{x:-tl,y:0,width:3*tl,height:Y})}),"area"===w?a("linearGradient",{id:`${T}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${nl} 32%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${nl} 2%, transparent)`})]}):null]}),a("g",{clipPath:`url(#${T}-strip)`,children:["area"===w?l("path",{d:i(dl,Y,j),fill:`url(#${T}-fill)`}):null,void 0!==W?l("line",{x1:0,x2:tl,y1:y(W),y2:y(W),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===w?X.map((a,e)=>null===a.value?null:l("path",{d:t(e*pl+(pl-fl)/2,barTop(a.value),fl,Math.max(1,Math.abs(y(a.value)-vl)),n/2,a.value>=0?"up":"down"),fill:a.color??nl},e)):l("path",{d:s(dl,j),fill:"none",stroke:nl,strokeWidth:Z,strokeLinecap:"round",strokeLinejoin:"round"})]}),P&&cl&&"bar"!==w?l("circle",{cx:dl[ml].x,cy:dl[ml].y,r:_,fill:nl,stroke:"var(--plass-chart-gap)",strokeWidth:m}):null]}):null}),V?l("span",{className:k,children:X.map(l=>null===l.value?"—":f(l.value,void 0,H)).join(", ")}):null]})});

package/dist/components/stepper/PlStepper.d.ts

@@ -25,6 +25,17 @@ export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div
     orientation?: PlassResponsive<PlassOrientation>;
     /** How the line between two steps is drawn. @default 'solid' */
     connector?: PlStepConnector;
+    /**
+     * Keeps every step's panel in the document, hidden while `active` is on
+     * another step, rather than only the panel of the step it is on.
+     *
+     * For panels a search engine should read: the others are otherwise not in
+     * the HTML a server sends. A kept panel is `hidden`, so it is out of the
+     * layout, the focus order and the accessibility tree, and what it holds
+     * survives the reader stepping away from it. Off by default.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/stepper/PlStepper.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as p,focusRingClasses as m,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useLabels as w}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...y},w){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",$=m??C.color??"primary",P=f??C.density??"default",[I,A]=t.useState(s),L=n??I,R=t.useId(),T=t.useCallback(e=>{void 0===n&&A(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:P,orientation:k,color:$,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,P,k,$,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(g.Provider,{value:W,children:l("div",{ref:w,className:p("flex w-full flex-col",x),style:{...N($,0),...h},...y,children:[e("ol",{role:"list",className:p("m-0 flex w-full list-none p-0",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:p("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:$=!1,color:P,className:I,children:A,...L},R){const T=t.useContext(g),{index:B,last:M}=t.useContext(j),W=w(),q=T?.size??"md",D=T?.orientation??"horizontal",E=P??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!$&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:p("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],y,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:p("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:p("font-semibold",b[q],d[H],y),children:r}),u(z)?e("span",{className:p("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:p("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:p("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:p("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],m,y,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:p("flex items-center p-1",J?"flex-col":"flex-row",n[q],$?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:p("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",I),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:p("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:p(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],y)}):null]}),!J&&B===F&&u(A)?e("div",{role:"group","aria-labelledby":T?`${T.baseId}-${B}`:void 0,className:p("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:A}):null]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{bulletGapClasses as r,bulletSizeValues as s,bulletStatusClasses as o,connectorColorClasses as a,connectorStyleClasses as i,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as u,focusRingClasses as p,hasContent as f,iconClasses as m,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";import{useLabels as g}from"../../internal/labels.js";import{useResponsiveValue as y}from"../../internal/responsive.js";const k=/* @__PURE__ */t.createContext(null),z=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function followPanelFocus(){const e=new Map,l=new Map,t=new Map,n=new Map;let r=!1,s=null;const holdsFocus=e=>Boolean(e?.contains(e.ownerDocument.activeElement));return{step(e){let t=n.get(e);return t||(t=t=>{t?l.set(e,t):l.delete(e)},n.set(e,t)),t},ref(l){let n=t.get(l);return n||(n=t=>{t?e.set(l,t):(r||=holdsFocus(e.get(l)),e.delete(l))},t.set(l,n)),n},settle(t){const n=s,o=r||null!==n&&holdsFocus(e.get(n));s=t,r=!1,null!==n&&n!==t&&o&&(e.get(t)??l.get(t))?.focus()}}}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:r,defaultActive:s=0,onActiveChange:o,linear:a=!0,orientation:i,connector:c="solid",keepMounted:d=!1,size:p,color:m,density:x,className:h,style:b,children:N,...g},j){const S=y(i,"horizontal"),C=n(),M=p??C.size??"md",P=m??C.color??"primary",$=x??C.density??"default",[I,R]=t.useState(s),A=r??I,L=t.useId(),B=t.useCallback(e=>{void 0===r&&R(e),o?.(e)},[r,o]),[E]=t.useState(followPanelFocus);t.useLayoutEffect(()=>{E.settle(A)});const F=t.Children.toArray(N),T=F.length,D=t.useMemo(()=>({size:M,density:$,orientation:S,color:P,active:A,linear:a,connector:c,keepMounted:d,baseId:L,onSelect:B,panelRef:E.ref,stepRef:E.step}),[M,$,S,P,A,a,c,d,L,B,E]),W="horizontal"===S,panelAt=(l,t)=>{const n=F[l]?.props?.children;return f(n)?e("div",{ref:E.ref(l),role:"group","aria-labelledby":`${L}-${l}`,hidden:l!==A,tabIndex:-1,className:u("mt-4 outline-none",v[M]),children:n},t):null};return e(k.Provider,{value:D,children:l("div",{ref:j,className:u("flex w-full flex-col",h),style:{...w(P,0),...b},...g,children:[e("ol",{role:"list",className:u("m-0 flex w-full list-none p-0",W?"flex-row":"flex-col"),children:F.map((l,t)=>e(z.Provider,{value:{index:t,last:t===T-1},children:l},t))}),W?d?F.map((e,l)=>panelAt(l,l)):panelAt(A,A):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:n,description:y,bullet:j,status:S,optional:C,disabled:M=!1,color:P,className:$,children:I,...R},A){const L=t.useContext(k),{index:B,last:E}=t.useContext(z),F=g(),T=L?.size??"md",D=L?.orientation??"horizontal",W=P??L?.color??"primary",q=L?.active??null,G=L?.connector??"solid",H=L?.keepMounted??!1,J=S??c(B,q),K="horizontal"===D,O=!M&&null!==L&&(!L.linear||B<=L.active),Q="none"!==G&&!E,U=e("span",{"aria-hidden":"true",className:u("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",o[J],N,m),children:j??("complete"===J?e(StepTick,{}):B+1)}),V=l("span",{className:u("flex min-w-0 flex-col",K?"items-center text-center":""),children:[e("span",{id:L?`${L.baseId}-${B}`:void 0,className:u("font-semibold",b[T],d[J],N),children:n}),f(y)?e("span",{className:u("text-(--plass-muted-fg)",x[T]),children:y}):null,C?e("span",{className:u("text-(--plass-muted-fg) italic",x[T]),children:!0===C?F.optional:C}):null]}),X=l("span",{className:u("flex items-center",K?"flex-col":"flex-row",r[T]),children:[U,K?V:null]}),Y=O?l("button",{ref:L?.stepRef(B),type:"button","aria-current":"current"===J?"step":void 0,onClick:()=>L?.onSelect(B),className:u("flex cursor-pointer items-center bg-transparent p-1",K?"flex-col":"flex-row",r[T],h[T],p,N,"hover:bg-(--p-soft)"),children:[K?X:U,K?null:V]}):l("span",{"aria-current":"current"===J?"step":void 0,className:u("flex items-center p-1",K?"flex-col":"flex-row",r[T],M?"opacity-50":""),children:[K?X:U,K?null:V]});return l("li",{ref:A,className:u("relative flex min-w-0",K?"flex-1 flex-col items-center":"flex-col",$),style:{"--p-bullet":s[T],...w(W,0),"--p-fill":`var(--plass-${W}-fill)`,"--p-on-solid":`var(--plass-${W}-on-solid)`},...R,children:[l("span",{className:u("flex w-full",K?"flex-row items-start":"flex-col"),children:[Y,Q?e("span",{"aria-hidden":"true",className:u(K?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",i[G],a[J],N)}):null]}),K||B!==q&&!H||!f(I)?null:e("div",{ref:L?.panelRef(B),role:"group","aria-labelledby":L?`${L.baseId}-${B}`:void 0,hidden:B!==q,tabIndex:-1,className:u("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4 outline-none",v[T]),children:I})]})});

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as l}from"@base-ui/react/switch";import{Field as c}from"@base-ui/react/field";import{controlSlots as i,cx as n,fieldDescriptionClasses as d,focusRingClasses as h,hasContent as m,metaTextClasses as p,tickRowTextClasses as f}from"../../internal/styles.js";const u={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",h].join(" "),x=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),k=/* @__PURE__ */[x,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),w=/* @__PURE__ */[x,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),j=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),v=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:h,label:x,description:N,error:y,invalid:_,labelPlacement:T="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,...B},C){const H=s(),O=o(P),q=t??H.size??"md",D=h??H.color??"primary",E=m(y),F=_??E,G=F?"danger":D,L=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:C,className:n(g,u[q],O?j:R?w:k,$?.control),disabled:O,readOnly:R,...B,children:e(l.Thumb,{className:`${v} ${b[q]}`})})}),A=x||N?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===T?"flex-1":""].filter(Boolean).join(" "),children:[x?e(c.Label,{className:n(O?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:x}):null,N?e(c.Description,{className:n(d(q),$?.description),children:N}):null]}):null;return a(c.Root,{disabled:O,invalid:F,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...i(G,0,"solid"),...z},children:[e("div",{className:`flex items-start gap-2.5 ${f[q]}`,children:a(r,"start"===T?{children:[A,L]}:{children:[L,A]})}),e(c.Error,E?{match:!0,className:n(p[q],"text-(--p-accent)",$?.error),children:y}:{className:n(p[q],"text-(--p-accent)",$?.error)})]})});
+"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as l,useLabelReference as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as c}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{controlSlots as n,cx as d,fieldDescriptionClasses as h,focusRingClasses as m,hasContent as p,metaTextClasses as f,tickRowTextClasses as u}from"../../internal/styles.js";const b={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},g={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},x=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",m].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),w=/* @__PURE__ */[k,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),j=/* @__PURE__ */[k,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),v=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),y=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:m,label:k,description:N,error:_,invalid:T,labelPlacement:B="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,"aria-label":C,"aria-labelledby":H,...O},q){const D=s(),E=l(P),F=o(C,H),G=t??D.size??"md",L=m??D.color??"primary",A=p(_),I=T??A,J=I?"danger":L,K=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(c.Root,{ref:q,className:d(x,b[G],E?v:R?j:w,$?.control),disabled:E,readOnly:R,"aria-label":C,"aria-labelledby":F.labelledBy,...O,children:a(c.Thumb,{className:`${y} ${g[G]}`})})}),M=k||N?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===B?"flex-1":""].filter(Boolean).join(" "),children:[k?a(i.Label,{className:d(E?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:k}):null,N?a(i.Description,{className:d(h(G),$?.description),children:N}):null]}):null;return e(i.Root,{disabled:E,invalid:I,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...n(J,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2.5 ${u[G]}`,children:e(r,"start"===B?{children:[M,K]}:{children:[K,M]})}),a(i.Error,A?{match:!0,className:d(f[G],"text-(--p-accent)",$?.error),children:_}:{className:d(f[G],"text-(--p-accent)",$?.error)}),F.node]})});

package/dist/components/table/PlTable.d.ts

@@ -38,6 +38,8 @@ export interface PlTableColumn<Row> {
     render?: (row: Row, index: number) => React.ReactNode;
 }
 export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @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/tabs/PlTabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as u,hasContent as h,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",align:"center",fullWidth:!1}),j={solid:{horizontal:`${u} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${u} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)",k={start:"justify-start",center:"justify-center",end:"justify-end"};export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:u,children:m,...x},w){const{variant:y,size:j,density:P,align:N,fullWidth:C}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none",k[N],"font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",C?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:u,orientation:h,align:p="center",activateOnFocus:v=!1,loopFocus:g=!0,fullWidth:T=!1,wheel:k=!0,overscroll:C="contain",className:R,style:S,children:V,...W},E){const F=x(h,"horizontal"),O=l(),$=r??O.size??"md",B=i??O.color??"primary",L=n??O.density??"default",M=a.useMemo(()=>({variant:s,size:$,density:L,orientation:F,align:p,fullWidth:T}),[s,$,L,F,p,T]),I=a.useRef(null),H="horizontal"===F,q=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(I,H);y(I,{enabled:k&&H,overscroll:C});const A=[],D=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?D.push(e):null!=e&&!1!==e&&A.push(e)})};return sort(V),e(z.Provider,{value:M,children:t(o.Root,{ref:E,value:c,defaultValue:f,onValueChange:e=>u?.(e),orientation:F,className:["flex min-w-0","vertical"===F?"flex-row gap-4":"flex-col gap-4",R??""].filter(Boolean).join(" "),style:{...m(B,0),...S},...W,children:[t(o.List,{ref:I,activateOnFocus:v,loopFocus:g,className:["relative shrink-0",j[s][F],"solid"===s?b[$]:"",T&&H?"w-full":"",H?"plass-fade-x overflow-x-auto overflow-y-hidden":"",H?w(C,!0):""].filter(Boolean).join(" "),style:q.style,onScroll:q.onScroll,"data-overflow":q.state,children:[A,e(o.Indicator,{className:["pointer-events-none",P[s][F],N[s],d,"solid"===s?b[$]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ")})]}),D]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as r}from"@base-ui/react/tabs";import{useDirection as o}from"@base-ui/react/direction-provider";import{useDocumentDirection as s}from"../../internal/direction.js";import{controlHeightClasses as n,controlTextClasses as i,focusRingClasses as c,focusRingInsetClasses as d,forcedFieldEdgeClasses as u,forcedFillClasses as f,gapClasses as h,glassClasses as p,hasContent as v,iconClasses as b,paddingXClasses as m,radiusClasses as g,surfaceSlots as w,transitionClasses as x}from"../../internal/styles.js";import{useResponsiveValue as y}from"../../internal/responsive.js";import{overscrollClasses as z,useWheelScroll as j}from"../../internal/wheel.js";const T=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",align:"center",fullWidth:!1}),P={solid:{horizontal:`${p} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${u}`,vertical:`${p} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${u}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},k={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${p} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},C="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)",R={start:"justify-start",center:"justify-center",end:"justify-end"};export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:o,endIcon:s,disabled:c=!1,className:u,children:f,...p},w){const{variant:y,size:z,density:j,align:P,fullWidth:k}=a.useContext(T);return t(r.Tab,{ref:w,value:l,disabled:c,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none p-0",R[P],"font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",n[z],i[z],h[z],m[j][z],"solid"===y?g[z]:"",x,b,C,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",d,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",k?"flex-1":"",u??""].filter(Boolean).join(" "),...p,children:[v(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,f,v(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:o,children:s,...n},i){const{size:d}=a.useContext(T);return e(r.Panel,{ref:i,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",c,g[d],o??""].filter(Boolean).join(" "),...n,children:s})});function movesTheStrip(e,t){return e.some(e=>!(e.target===t&&"style"===e.attributeName))}export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:n="glass",size:i,color:c,density:d,value:u,defaultValue:h,onValueChange:p,orientation:v,align:b="center",activateOnFocus:m=!1,loopFocus:x=!0,fullWidth:C=!1,wheel:R=!0,overscroll:S="contain",className:$,style:E,children:L,...F},M){const O=y(v,"horizontal"),V=l(),W=i??V.size??"md",B=c??V.color??"primary",I=d??V.density??"default",D=a.useMemo(()=>({variant:n,size:W,density:I,orientation:O,align:b,fullWidth:C}),[n,W,I,O,b,C]),H=a.useRef(null),q="horizontal"===O,A=function useListOverflow(e,t){const[l,r]=a.useState({start:!1,end:!1,rtl:!1}),n=a.useCallback(t=>{const a=e.current;if(!a)return;const l=a.scrollWidth-a.clientWidth,o=Math.abs(a.scrollLeft),s=o>1,n=l-o>1;r(e=>{const a={start:s,end:n,rtl:t??e.rtl};return e.start===a.start&&e.end===a.end&&e.rtl===a.rtl?e:a})},[e]),i=a.useCallback(()=>{const t=e.current;t&&n("rtl"===getComputedStyle(t).direction)},[e,n]),c=a.useCallback(()=>n(),[n]),d=s(),u=o();a.useLayoutEffect(()=>{t&&i()},[t,i,d,u]);const f=a.useRef(null);a.useLayoutEffect(()=>{const a=e.current;if(!a||!t)return;const l=new MutationObserver(e=>{movesTheStrip(e,a)&&i()});return l.observe(a,{subtree:!0,childList:!0,characterData:!0,attributes:!0,attributeFilter:["class","style"]}),f.current=l,()=>{l.disconnect(),f.current=null}},[t,i,e]),a.useLayoutEffect(()=>{const t=e.current,a=f.current?.takeRecords();t&&a&&movesTheStrip(a,t)&&i()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(i);return l.observe(a),()=>l.disconnect()},[t,i,e]);const h=`${d} ${u} ${l.rtl}`;return t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:c,state:l.start?l.end?"both":"start":l.end?"end":"none",turn:h}:{style:void 0,onScroll:void 0,state:void 0,turn:h}}(H,q);j(H,{enabled:R&&q,overflows:void 0!==A.state&&"none"!==A.state,overscroll:S});const G=a.useMemo(()=>e(r.Indicator,{className:["pointer-events-none",k[n][O],N[n],f,"solid"===n?g[W]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ")}),[n,O,W,A.turn]),J=[],K=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?K.push(e):null!=e&&!1!==e&&J.push(e)})};return sort(L),e(T.Provider,{value:D,children:t(r.Root,{ref:M,value:u,defaultValue:h,onValueChange:e=>p?.(e),orientation:O,className:["flex min-w-0","vertical"===O?"flex-row gap-4":"flex-col gap-4",$??""].filter(Boolean).join(" "),style:{...w(B,0),...E},...F,children:[t(r.List,{ref:H,activateOnFocus:m,loopFocus:x,className:["relative shrink-0",P[n][O],"solid"===n?g[W]:"",C&&q?"w-full":"",q?"plass-fade-x overflow-x-auto overflow-y-hidden":"",q?z(S,!0):""].filter(Boolean).join(" "),style:A.style,onScroll:A.onScroll,"data-overflow":A.state,children:[J,G]}),K]})})});

package/dist/components/text-field/PlTextField.d.ts

@@ -9,6 +9,8 @@ export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
  */
 type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
 export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/text-field/PlTextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDisabled as r}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{Field as a}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{Spinner as o}from"../../internal/icons.js";import{useFieldLight as c}from"../../internal/glow.js";import{FieldNotch as m,floatControlClassName as d,notchShellStyle as p,resolveNotch as f}from"../../internal/notch.js";import{hotKeyHandler as x}from"../../internal/keys.js";import{controlHeightClasses as u,controlTextLeadingClasses as h,cx as y,disabledClasses as b,fieldDescriptionClasses as g,fieldReadOnlyClasses as $,fieldRestClasses as j,fieldSlots as w,focusWithinRingClasses as v,gapClasses as N,hasContent as z,iconClasses as k,metaTextClasses as D,paddingXClasses as P,radiusClasses as K,stackGapClasses as O,transitionClasses as R}from"../../internal/styles.js";const T={xs:`${N.xs} ${K.xs} ${h.xs}`,sm:`${N.sm} ${K.sm} ${h.sm}`,md:`${N.md} ${K.md} ${h.md}`,lg:`${N.lg} ${K.lg} ${h.lg}`,xl:`${N.xl} ${K.xl} ${h.xl}`},B={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=/* @__PURE__ */["relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",R,k].join(" "),C=v,E=j,L=$;export const PlTextField=/* @__PURE__ */t.forwardRef(function PlTextField({variant:h="glass",size:$,color:j,density:v,elevation:N=0,multiline:k=!1,rows:K=3,resize:R="vertical",label:W,labelPlacement:q,description:A,error:G,invalid:H,startIcon:J,endIcon:M,loading:Q=!1,fullWidth:S=!1,readOnly:U=!1,disabled:V=!1,type:X="text",placeholder:Y,hotKeys:Z,onKeyDown:_,className:ee,classNames:le,style:te,...re},ne){const se=n(),ae=r(V),ie=$??se.size??"md",oe=j??se.color??"primary",ce=v??se.density??"default",me=q??se.labelPlacement??"top",{notched:de,float:pe}=f(me,W,z(J)),fe=z(G),xe=H??fe,ue=xe?"danger":oe,he=t.useRef(null),ye=t.useCallback(e=>{he.current=e,"function"==typeof ne?ne(e):ne&&(ne.current=e)},[ne]),be=!ae&&!U,ge=c(be),$e=[I,de?"":C,T[ie],k?`${B[ie]} items-start`:`${u[ie]} items-center`,P[ce][ie],ae?b[h]:U?L[h]:E[h],be?"plass-glow":""].filter(Boolean).join(" "),je=["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)","disabled:cursor-not-allowed",k?`block ${F[R]}`:"self-stretch",pe?d:""].join(" "),we="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",ve=e(a.Label,{className:y(D[ie],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",le?.label),children:W});return l(a.Root,{disabled:ae,invalid:xe,className:["flex-col align-top",O[ie],S?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...w(ue,N),...te},children:[z(W)&&!de?ve:null,e(m,{notched:de,size:ie,density:ce,variant:h,disabled:ae,readOnly:U,float:pe,label:ve,children:l("span",{className:y($e,le?.control),style:de?p:void 0,...ge,onPointerDown:e=>{ae||s(e.target,e.currentTarget,he.current)||(e.preventDefault(),he.current?.focus())},children:[J?e("span",{className:we,children:J}):null,e(i,{ref:ye,className:je,disabled:ae,readOnly:U,"aria-busy":Q||void 0,"data-loading":Q||void 0,onKeyDown:x(Z,_),placeholder:pe?Y||" ":Y,...k?{render:e("textarea",{rows:K})}:{type:X},...re}),Q?e("span",{className:we,children:e(o,{})}):M?e("span",{className:we,children:M}):null]})}),A?e(a.Description,{className:y(g(ie),le?.description),children:A}):null,e(a.Error,fe?{match:!0,className:y(D[ie],"text-(--p-accent)",le?.error),children:G}:{className:y(D[ie],"text-(--p-accent)",le?.error)})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{controlNaming as r,useDisabled as n}from"../../internal/form.js";import{useDefaults as a}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{Field as i}from"@base-ui/react/field";import{Input as o}from"@base-ui/react/input";import{Spinner as c}from"../../internal/icons.js";import{useFieldLight as m}from"../../internal/glow.js";import{FieldNotch as d,floatControlClassName as p,notchShellStyle as f,resolveNotch as x}from"../../internal/notch.js";import{hotKeyHandler as u}from"../../internal/keys.js";import{controlHeightClasses as h,controlTextLeadingClasses as y,cx as b,disabledClasses as g,fieldDescriptionClasses as $,fieldReadOnlyClasses as j,fieldRestClasses as w,fieldSlots as v,focusWithinRingClasses as N,gapClasses as z,hasContent as k,iconClasses as D,metaTextClasses as P,paddingXClasses as K,radiusClasses as O,stackGapClasses as R,transitionClasses as T}from"../../internal/styles.js";const B={xs:`${z.xs} ${O.xs} ${y.xs}`,sm:`${z.sm} ${O.sm} ${y.sm}`,md:`${z.md} ${O.md} ${y.md}`,lg:`${z.lg} ${O.lg} ${y.lg}`,xl:`${z.xl} ${O.xl} ${y.xl}`},F={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},I={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},C=/* @__PURE__ */["relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",T,D].join(" "),E=N,L=w,W=j;export const PlTextField=/* @__PURE__ */t.forwardRef(function PlTextField({variant:y="glass",size:j,color:w,density:N,elevation:z=0,multiline:D=!1,rows:O=3,resize:T="vertical",label:q,labelPlacement:A,description:G,error:H,invalid:J,startIcon:M,endIcon:Q,loading:S=!1,fullWidth:U=!1,readOnly:V=!1,disabled:X=!1,type:Y="text",placeholder:Z,hotKeys:_,onKeyDown:ee,className:le,classNames:te,style:re,"aria-label":ne,"aria-labelledby":ae,...se},ie){const oe=a(),ce=n(X),me=j??oe.size??"md",de=w??oe.color??"primary",pe=N??oe.density??"default",fe=A??oe.labelPlacement??"top",{notched:xe,float:ue}=x(fe,q,k(M)),he=k(H),ye=J??he,be=ye?"danger":de,ge=t.useRef(null),$e=t.useCallback(e=>{ge.current=e,"function"==typeof ie?ie(e):ie&&(ie.current=e)},[ie]),je=!ce&&!V,we=m(je),ve=[C,xe?"":E,B[me],D?`${F[me]} items-start`:`${h[me]} items-center`,K[pe][me],ce?g[y]:V?W[y]:L[y],je?"plass-glow":""].filter(Boolean).join(" "),Ne=["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)","disabled:cursor-not-allowed",D?`block ${I[T]}`:"self-stretch",ue?p:""].join(" "),ze="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",ke=e(i.Label,{className:b(P[me],"font-semibold",ce?"text-(--plass-muted-fg)":"text-(--plass-fg)",te?.label),children:q});return l(i.Root,{disabled:ce,invalid:ye,className:["flex-col align-top",R[me],U?"flex w-full":"inline-flex",le??""].filter(Boolean).join(" "),style:{...v(be,z),...re},children:[k(q)&&!xe?ke:null,e(d,{notched:xe,size:me,density:pe,variant:y,disabled:ce,readOnly:V,float:ue,label:ke,children:l("span",{className:b(ve,te?.control),style:xe?f:void 0,...we,onPointerDown:e=>{ce||s(e.target,e.currentTarget,ge.current)||(e.preventDefault(),ge.current?.focus())},children:[M?e("span",{className:ze,children:M}):null,e(o,{ref:$e,className:Ne,disabled:ce,readOnly:V,"aria-busy":S||void 0,"data-loading":S||void 0,onKeyDown:u(_,ee),placeholder:ue?Z||" ":Z,...D?{render:e("textarea",{rows:O})}:{type:Y},...r(ne,ae),...se}),S?e("span",{className:ze,children:e(c,{})}):Q?e("span",{className:ze,children:Q}):null]})}),G?e(i.Description,{className:b($(me),te?.description),children:G}):null,e(i.Error,he?{match:!0,className:b(P[me],"text-(--p-accent)",te?.error),children:H}:{className:b(P[me],"text-(--p-accent)",te?.error)})]})});

package/dist/components/text-link/PlTextLink.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as i}from"../../internal/labels.js";import{useRender as l}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0 [&_svg]:align-middle",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:v,size:h,newTab:k=!1,icon:g,startIcon:b,newTabLabel:j,render:x,className:y,style:_,children:w,...N},T){const L=i(),z=j??L.newTab,C=g??k,P=!0===C?n(k?a:o,{}):C,$=[u,h?t[h]:"",d[f],v?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${v??"primary"}-ring)`,...v?{"--p-accent":`var(--plass-${v}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return l({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,..._},children:r(e,{children:[b?n("span",{className:"me-[0.25em]",children:b}):null,w,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});
+"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as i}from"../../internal/labels.js";import{useRender as l}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0 [&_svg]:align-middle",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:s,underline:c="always",color:f,size:v,newTab:h=!1,icon:k,startIcon:g,newTabLabel:b,render:j,className:x,style:y,children:_,...w},N){const T=i(),L=b??T.newTab,z=k??h,C=!0===z?n(h?a:o,{}):z,P=[u,v?t[v]:"",d[c],f?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",x??""].filter(Boolean).join(" "),$={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${f??"primary"}-ring)`,...f?{"--p-accent":`var(--plass-${f}-accent)`}:null},{rel:B,target:F,...I}=w,R=F??(h?"_blank":void 0),q=h||"_blank"===R,A=m(R,B);return l({render:j??n("a",{}),ref:N,props:{href:s,target:R,className:P,style:{...$,...y},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,C?n("span",{className:"ms-[0.25em]",children:C}):null,q?r(e,{children:[" ",n("span",{className:p,children:L})]}):null]}),...I,rel:A}})});

package/dist/components/time-picker/PlTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as r}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */n.forwardRef(function PlTimePicker({value:j,defaultValue:v,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",oe=L??Z.density??"default",ne=r(E),le=P??m($),[te,se]=n.useState(v??null),re=void 0!==j?j:te,[ae,ie]=n.useState(z??!1),ce=w??ae,[de]=n.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&ie(e),k?.(e))},commit=e=>{void 0===j&&se(e),C?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=f(o,e);return!!(p(D)&&l<h(D))||!!(p(O)&&n>h(O))||(T?.(e,o)??!1)},[D,O,T]),me=n.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=n.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:oe,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(re)?u(re,$,me):F??"",samples:ge,empty:!p(re),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:ne,name:G,formValue:p(re)?g(re,M):"",children:o("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:oe,locale:$,value:p(re)?re:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:ne,autoFocus:!0}),fe?o(i,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ne.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:ne.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:ne.done})]}):null]})})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l,useLocale as t}from"../../internal/defaults.js";import{PlButton as s}from"../button/PlButton.js";import{TimeGrid as r,usePickerLabels as i}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as u,formatDate as m,isHour12 as p,isValidDate as h,secondsOfDay as f,timeUnitSpan as g,toISOTime as y,withPlaceholder as S,withTime as b}from"../../internal/date.js";import{cx as j}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */o.forwardRef(function PlTimePicker({value:v,defaultValue:C,onValueChange:w,open:z,defaultOpen:k,onOpenChange:x,referenceDate:D,minTime:O,maxTime:T,shouldDisableTime:P,hour12:M,showSeconds:V=!1,hourStep:B=1,minuteStep:I=1,secondStep:N=1,locale:R,format:F,placeholder:H,clearable:q=!1,showNowButton:A=!0,closeOnSelect:E=!1,labels:G,name:J,size:K,color:L,density:Q,readOnly:U=!1,disabled:W=!1,startIcon:X,...Y},Z){const $=l(),_=t(R),ee=K??$.size??"md",ne=L??$.color??"primary",oe=Q??$.density??"default",le=i(G),te=M??p(_),[se,re]=o.useState(C??null),ie=void 0!==v?v:se,[ae,ce]=o.useState(k??!1),de=z??ae,[ue]=o.useState(()=>D??new Date),setOpen=e=>{e&&(U||W)||(void 0===z&&ce(e),x?.(e))},commit=e=>{void 0===v&&re(e),w?.(e)},me=o.useCallback((e,n)=>{const[o,l]=g(n,e);return!!(h(O)&&l<f(O))||!!(h(T)&&o>f(T))||(P?.(e,n)??!1)},[O,T,P]),pe=o.useMemo(()=>F??{hour:"numeric",minute:"2-digit",...V?{second:"2-digit"}:{}},[F,V]),he=new Date,fe=b(D??ue,{hours:he.getHours(),minutes:he.getMinutes(),seconds:V?he.getSeconds():0}),ge=A||q||!E,ye=o.useMemo(()=>S(u(_,pe),H),[_,pe,H]);return e(d,{...Y,size:ee,color:ne,density:oe,readOnly:U,disabled:W,triggerRef:Z,startIcon:X??e(a,{}),display:h(ie)?m(ie,_,pe):H??"",samples:ye,empty:!h(ie),clearable:q,onClear:()=>commit(null),open:de,onOpenChange:setOpen,labels:le,name:J,formValue:h(ie)?y(ie,V):"",children:n("div",{className:j("flex flex-col",ge&&"gap-1.5"),children:[e(r,{size:ee,density:oe,locale:_,value:h(ie)?ie:null,referenceDate:D??ue,onChange:e=>{commit(e),E&&setOpen(!1)},hour12:te,showSeconds:V,hourStep:B,minuteStep:I,secondStep:N,shouldDisableTime:me,labels:le,autoFocus:!0}),ge?n(c,{size:ee,children:[q?e(s,{variant:"ghost",size:ee,color:ne,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:le.clear}):null,A?e(s,{variant:"ghost",size:ee,color:ne,density:"compact",disabled:me(fe,"second"),onClick:()=>{commit(fe),setOpen(!1)},children:le.now}):null,E?null:e(s,{variant:"solid",size:ee,color:ne,density:"compact",onClick:()=>setOpen(!1),children:le.done})]}):null]})})});

package/dist/components/timeline-chart/PlTimelineChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,entryKeys as a,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as i,barRadius as l,formatTimeTicks as c,formatTimeValue as m,markGap as d,resolveColor as u,seriesColor as h,timeNeedsDate as x,timeScale as p,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as M}from"../../internal/styles.js";import{textOf as b}from"../../internal/text.js";import{useDefaults as y}from"../../internal/defaults.js";import{useLabels as k}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:u,rounded:M=!0,size:k,density:v,xAxis:w,yAxis:g,locale:j,...$}){const C=y(),T=k??C.size??"md",z=v??C.density??"default",A=j??C.locale,P=t.useMemo(()=>n.map(packRow),[n]),W=t.useMemo(()=>P.map(e=>e.spans),[P]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of W)for(const a of o)a&&(t=!0,e=Math.min(e,a.from),n=Math.max(n,a.to));return t?{min:e,max:n}:null},[W]),I=t.useMemo(()=>p(E,{min:f(r)??void 0,max:f(l)??void 0,tickCount:g?.tickCount}),[E,r,l,g?.tickCount]),R=t.useMemo(()=>c(I.ticks,I.unit,A),[I,A]),S=x(I.ticks,I.unit),B=t.useMemo(()=>n.map((e,n)=>h(e,n)),[n]),D=t.useMemo(()=>[{data:W.map(e=>e.some(Boolean)?1:null)}],[W]),N=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),F=t.useMemo(()=>a(n),[n]),q=u??i[T],G=t.useCallback(e=>{const n=[];return P.forEach((t,o)=>{const a=Math.min(q,Math.max(1,(e.band.band-d*(t.lanes-1))/t.lanes)),r=a*t.lanes+d*(t.lanes-1),s=e.plot.top+e.categoryPx(o)-r/2+a/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const i=e.valuePx(Math.max(t.from,e.scale.min)),l=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:o,index:r,key:F[o],x:(i+l)/2,y:s+t.lane*(a+d),r:a/2,rx:Math.max(0,(l-i)/2),ry:a/2})})}),n},[P,F,q]),H=t.useCallback(e=>{const n=W[e.series]?.[e.index];if(!n)return null;const t=n.span.label,o=null!=t,a={seriesIndex:e.series,color:n.color??B[e.series],value:n.to-n.from,formatted:`${m(n.from,I.unit,A,S)} – ${m(n.to,I.unit,A,S)}`};return{heading:o?t:N[e.series],items:[{...a,name:o?N[e.series]:void 0}],index:e.series,category:N[e.series],renderItems:[{...a,name:o&&b(t)||void 0}]}},[W,N,B,I.unit,A,S]);return e(o,{...$,series:D,categories:N,size:T,density:z,locale:A,horizontal:!0,scale:I,xAxis:w,yAxis:{tickFormat:(e,n)=>R[n]??"",...g},legend:!1,bandRatio:s[z],marks:G,markTooltip:H,table:t=>e(TimelineTable,{id:t,names:N,series:n,spans:W,scale:I,withDate:S,label:$.label,corner:w?.label,locale:A}),children:n=>e(Spans,{context:n,spans:W,colors:B,rounded:M})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?u(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:o,rounded:a}){const{marks:s,activeMark:i}=n,c=a?l:0;return e("g",{children:s.map(n=>{const a=t[n.series]?.[n.index];if(!a)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-m/2,width:d,height:m,rx:Math.min(c,d/2,m/2),fill:a.color??o[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:o,series:a,spans:r,scale:s,withDate:i,label:l,corner:c,locale:d}){const u=k(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==a[n].data[t]?.label));return n("table",{id:t,className:M,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:c??""}),h?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:u.start}),e("th",{scope:"col",children:u.end})]})}),e("tbody",{children:r.flatMap((t,r)=>t.map((t,l)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:o[r]}),h?e("td",{children:a[r].data[l]?.label??""}):null,e("td",{children:m(t.from,s.unit,d,i)}),e("td",{children:m(t.to,s.unit,d,i)})]},`${r}-${l}`):null))})]})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,entryKeys as o,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as i,barRadius as l,formatTimeTicks as m,formatTimeValue as c,markGap as d,resolveColor as u,seriesColor as h,timeNeedsDate as p,timeScale as x,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as M}from"../../internal/styles.js";import{textOf as b}from"../../internal/text.js";import{useDefaults as y,useLocale as k}from"../../internal/defaults.js";import{useLabels as w}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:u,rounded:M=!0,size:w,density:v,xAxis:g,yAxis:j,locale:$,...C}){const T=y(),z=w??T.size??"md",W=v??T.density??"default",A=k($),P=t.useMemo(()=>n.map(packRow),[n]),B=t.useMemo(()=>P.map(e=>e.spans),[P]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const a of B)for(const o of a)o&&(t=!0,e=Math.min(e,o.from),n=Math.max(n,o.to));return t?{min:e,max:n}:null},[B]),I=t.useMemo(()=>x(E,{min:f(r)??void 0,max:f(l)??void 0,tickCount:j?.tickCount}),[E,r,l,j?.tickCount]),R=t.useMemo(()=>m(I.ticks,I.unit,A),[I,A]),S=p(I.ticks,I.unit),D=t.useCallback(e=>c(e,I.unit,A,S),[I.unit,A,S]),N=t.useMemo(()=>n.map((e,n)=>h(e,n)),[n]),F=t.useMemo(()=>[{data:B.map(e=>e.some(Boolean)?1:null)}],[B]),V=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),q=t.useMemo(()=>o(n),[n]),G=t.useMemo(()=>B.map((e,n)=>{let t=1/0,a=-1/0;for(const n of e)n&&inWindow(n,I)&&(t=Math.min(t,n.from),a=Math.max(a,n.to));return{name:V[n],said:t>a?null:`${D(t)} – ${D(a)}`}}),[B,V,I,D]),H=u??i[z],J=t.useCallback(e=>{const n=[];return P.forEach((t,a)=>{const o=Math.min(H,Math.max(1,(e.band.band-d*(t.lanes-1))/t.lanes)),r=o*t.lanes+d*(t.lanes-1),s=e.plot.top+e.categoryPx(a)-r/2+o/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const i=e.valuePx(Math.max(t.from,e.scale.min)),l=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:a,index:r,key:q[a],x:(i+l)/2,y:s+t.lane*(o+d),r:o/2,rx:Math.max(0,(l-i)/2),ry:o/2})})}),n},[P,q,H]),K=t.useCallback(e=>{const n=B[e.series]?.[e.index];if(!n)return null;const t=n.span.label,a=null!=t,o={seriesIndex:e.series,color:n.color??N[e.series],value:n.to-n.from,formatted:`${c(n.from,I.unit,A,S)} – ${c(n.to,I.unit,A,S)}`};return{heading:a?t:V[e.series],items:[{...o,name:a?V[e.series]:void 0}],index:e.series,category:V[e.series],renderItems:[{...o,name:a&&b(t)||void 0}]}},[B,V,N,I.unit,A,S]);return e(a,{...C,series:F,categories:V,size:z,density:W,locale:A,horizontal:!0,scale:I,xAxis:g,yAxis:{tickFormat:(e,n)=>R[n]??"",...j},legend:!1,bandRatio:s[W],marks:J,markTooltip:K,summary:G,writeValue:D,table:(t,a)=>e(TimelineTable,{id:t,...a,names:V,series:n,spans:B,scale:I,withDate:S,corner:g?.label,locale:A}),children:n=>e(Spans,{context:n,spans:B,colors:N,rounded:M})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?u(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),a=-1===n?t.length:n;t[a]=e.to,e.lane=a}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:a,rounded:o}){const{marks:s,activeMark:i}=n,m=o?l:0;return e("g",{children:s.map(n=>{const o=t[n.series]?.[n.index];if(!o)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,c=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-c/2,width:d,height:c,rx:Math.min(m,d/2,c/2),fill:o.color??a[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,caption:a,labelledBy:o,names:r,series:s,spans:i,scale:l,withDate:m,corner:d,locale:u}){const h=w(),p=i.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,l)&&void 0!==s[n].data[t]?.label));return n("table",{id:t,className:M,"aria-labelledby":o,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:d??""}),p?e("th",{scope:"col",children:h.name}):null,e("th",{scope:"col",children:h.start}),e("th",{scope:"col",children:h.end})]})}),e("tbody",{children:i.flatMap((t,a)=>t.map((t,o)=>t&&inWindow(t,l)?n("tr",{children:[e("th",{scope:"row",children:r[a]}),p?e("td",{children:s[a].data[o]?.label??""}):null,e("td",{children:c(t.from,l.unit,u,m)}),e("td",{children:c(t.to,l.unit,u,m)})]},`${a}-${o}`):null))})]})}

package/dist/components/toast/PlToast.d.ts

@@ -61,6 +61,8 @@ export interface PlToastOptions extends PlToastData {
     onRemove?: () => void;
 }
 export interface PlToastProviderProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** The default colour family. A single toast overrides it in `add`. */
     color?: PlassColor;
     /** @default 'bottom-end' */

package/dist/components/toast/PlToast.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as d,glassClasses as p,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as v,sheetHeaderGapClasses as g,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w,targetClasses as j,transitionClasses as N}from"../../internal/styles.js";const T={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},M={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",d].join(" "),glass:/* @__PURE__ */[p,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[p,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},z={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:e,variant:s,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:o,color:a,size:d,density:p,closeLabel:T,swipeDirection:O}){const P=s.data?.variant??o??"glass",k=s.data?.color??a,$=void 0===s.data?.icon?n(k):s.data.icon,D=z[P],L=m(s.title);return e(i.Root,{toast:s,swipeDirection:O,className:["pointer-events-auto flex w-full items-start",x[p??"default"][d],b[p??"default"][d],h[d],y[d],v[d],M[P],f,N,"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction]:[transform:translate(var(--toast-swipe-movement-x),var(--toast-swipe-movement-y))]","data-[limited]:hidden",c,"[outline:none]",s.data?.className??""].filter(Boolean).join(" "),style:{...l(k,3,P),...s.data?.style},children:[m($)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${D}`,children:$}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${g[d]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[d]} ${D}`}),t(i.Description,{className:L&&"solid"!==P?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",D||"text-inherit","hover:underline",c,u[d]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":T,className:[j,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(e){const{toasts:s}=i.useToastManager(),o=a(),{position:r,width:n,...l}=e,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",T[r]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:e,swipeDirection:c,...l})},e.id))})})}export function PlToastProvider({variant:s="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:d=5e3,limit:p=3,width:m=380,closeLabel:f,children:u}){const h=o(),v=a(),g=f??v.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return e(i.Provider,{timeout:d,limit:p,children:[u,t(ToastViewport,{position:c,variant:s,size:x,color:b,density:y,width:m,closeLabel:g})]})}
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as d,glassClasses as p,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as v,sheetHeaderGapClasses as g,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w,targetClasses as j,transitionClasses as N}from"../../internal/styles.js";const T={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},M={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",d].join(" "),glass:/* @__PURE__ */[p,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[p,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},z={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:e,variant:s,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:o,color:a,size:d,density:p,closeLabel:T,swipeDirection:O}){const P=s.data?.variant??o??"glass",k=s.data?.color??a,$=void 0===s.data?.icon?n(k):s.data.icon,D=z[P],L=m(s.title);return e(i.Root,{toast:s,swipeDirection:O,className:["pointer-events-auto flex w-full items-start",x[p??"default"][d],b[p??"default"][d],h[d],y[d],v[d],M[P],f,N,"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction]:[transform:translate(var(--toast-swipe-movement-x),var(--toast-swipe-movement-y))]","data-[limited]:hidden",c,"[outline:none]",s.data?.className??""].filter(Boolean).join(" "),style:{...l(k,3,P),...s.data?.style},children:[m($)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${D}`,children:$}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${g[d]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[d]} ${D}`}),t(i.Description,{className:L&&"solid"!==P?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2 py-0","font-medium underline-offset-2",D||"text-inherit","hover:underline",c,u[d]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":T,className:[j,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full p-0","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(e){const{toasts:s}=i.useToastManager(),o=a(),{position:r,width:n,...l}=e,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",T[r]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:e,swipeDirection:c,...l})},e.id))})})}export function PlToastProvider({variant:s="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:d=5e3,limit:p=3,width:m=380,closeLabel:f,children:u}){const h=o(),v=a(),g=f??v.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return e(i.Provider,{timeout:d,limit:p,children:[u,t(ToastViewport,{position:c,variant:s,size:x,color:b,density:y,width:m,closeLabel:g})]})}

package/dist/components/toggle/PlToggle.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as l}from"../../internal/glow.js";import{useDefaults as a}from"../../internal/defaults.js";import{Toggle as r}from"@base-ui/react/toggle";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{useDisabled as i}from"../../internal/form.js";import{controlHeightClasses as p,controlSlots as n,controlSquareClasses as g,controlTextClasses as v,disabledClasses as d,focusRingClasses as h,forcedEdgeClasses as m,forcedPressedClasses as x,gapClasses as c,glassClasses as f,hasContent as b,iconClasses as $,paddingXClasses as u,radiusClasses as j,transitionClasses as w}from"../../internal/styles.js";const y={xs:`${p.xs} ${c.xs} ${j.xs} ${v.xs}`,sm:`${p.sm} ${c.sm} ${j.sm} ${v.sm}`,md:`${p.md} ${c.md} ${j.md} ${v.md}`,lg:`${p.lg} ${c.lg} ${j.lg} ${v.lg}`,xl:`${p.xl} ${c.xl} ${j.xl} ${v.xl}`},P={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,h,$].join(" "),C={solid:/* @__PURE__ */[f,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",m].join(" "),glass:/* @__PURE__ */[f,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},N={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},T={solid:/* @__PURE__ */["text-(--p-on-solid) [--p-fill-on:1]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",x].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${x}`},k={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */o.forwardRef(function PlToggle({variant:p,size:g,color:v,density:h,elevation:m,pressed:x,defaultPressed:c,onPressedChange:f,value:$,startIcon:j,endIcon:w,fullWidth:I=!1,disabled:M,className:B,style:R,children:W,onPointerMove:q,...A},D){const E=a(),F=o.useContext(t),G=p??F?.variant??"glass",H=g??F?.size??E.size??"md",J=v??F?.color??E.color??"primary",K=h??F?.density??E.density??"default",L=m??F?.elevation??0,O=i(M??F?.disabled),Q=!b(W);return e(r,{ref:D,value:$,pressed:x,defaultPressed:c,onPressedChange:s=>f?.(s),disabled:O,className:s=>[z,y[H],Q?P[H]:u[K][H],O?d[G]:s.pressed?`${T[G]} ${k[G]}`:`${C[G]} ${N[G]}`,O?"":"plass-glow cursor-pointer",I?"w-full":"",B??""].filter(Boolean).join(" "),style:{...n(J,L,G),...R},onPointerMove:l(!O,q),...A,children:["solid"===G?s("span",{"aria-hidden":"true",className:"plass-fill-layer"}):null,j,W,w]})});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as l}from"../../internal/glow.js";import{useDefaults as a}from"../../internal/defaults.js";import{Toggle as r}from"@base-ui/react/toggle";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{useDisabled as i}from"../../internal/form.js";import{controlHeightClasses as p,controlSlots as n,controlSquareClasses as g,controlTextClasses as v,disabledClasses as d,focusRingClasses as h,forcedEdgeClasses as m,forcedPressedClasses as x,gapClasses as c,glassClasses as f,hasContent as b,iconClasses as $,paddingXClasses as u,radiusClasses as j,transitionClasses as w}from"../../internal/styles.js";const y={xs:`${p.xs} ${c.xs} ${j.xs} ${v.xs}`,sm:`${p.sm} ${c.sm} ${j.sm} ${v.sm}`,md:`${p.md} ${c.md} ${j.md} ${v.md}`,lg:`${p.lg} ${c.lg} ${j.lg} ${v.lg}`,xl:`${p.xl} ${c.xl} ${j.xl} ${v.xl}`},P={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center p-0","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,h,$].join(" "),C={solid:/* @__PURE__ */[f,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",m].join(" "),glass:/* @__PURE__ */[f,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},N={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},T={solid:/* @__PURE__ */["text-(--p-on-solid) [--p-fill-on:1]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",x].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${x}`},k={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */o.forwardRef(function PlToggle({variant:p,size:g,color:v,density:h,elevation:m,pressed:x,defaultPressed:c,onPressedChange:f,value:$,startIcon:j,endIcon:w,fullWidth:I=!1,disabled:M,className:B,style:R,children:W,onPointerMove:q,...A},D){const E=a(),F=o.useContext(t),G=p??F?.variant??"glass",H=g??F?.size??E.size??"md",J=v??F?.color??E.color??"primary",K=h??F?.density??E.density??"default",L=m??F?.elevation??0,O=i(M??F?.disabled),Q=!b(W);return e(r,{ref:D,value:$,pressed:x,defaultPressed:c,onPressedChange:s=>f?.(s),disabled:O,className:s=>[z,y[H],Q?P[H]:u[K][H],O?d[G]:s.pressed?`${T[G]} ${k[G]}`:`${C[G]} ${N[G]}`,O?"":"plass-glow cursor-pointer",I?"w-full":"",B??""].filter(Boolean).join(" "),style:{...n(J,L,G),...R},onPointerMove:l(!O,q),...A,children:["solid"===G?s("span",{"aria-hidden":"true",className:"plass-fill-layer"}):null,j,W,w]})});

package/dist/components/toolbar/PlToolbar.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
 export interface PlToolbarProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` — the default — is flat even when the bar is pinned:
      * a shadow under a header is a way of saying "there is content beneath this",

package/dist/components/tour/PlTour.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as i}from"../button/index.js";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as l}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as m,focusRingClasses as p,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as g,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z,targetClasses as j}from"../../internal/styles.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},C={xs:6,sm:8,md:10,lg:12,xl:14},L=/* @__PURE__ */[u,"relative flex flex-col","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)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),E=/* @__PURE__ */[j,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",p].join(" "),O={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:p,open:u,defaultOpen:j=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=o(),X=l(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,te]=s.useState(j),[se,ne]=s.useState(S),ie=u??ee,oe=Math.min(R??se,Math.max(0,p.length-1)),ae=p[oe],[le,re]=s.useState(null),setOpen=e=>{void 0===u&&te(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[me,pe]=s.useState(null);if(s.useLayoutEffect(()=>{pe(ie?resolve(ce):null)},[ie,ce,oe]),s.useEffect(()=>{if(!ie)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const t=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:t?"instant":"smooth"})}let t=0;const read=()=>{t=0;const s=e.getBoundingClientRect();re({at:oe,spot:c({top:s.top,left:s.left,width:s.width,height:s.height},de)})},schedule=()=>{0===t&&(t=requestAnimationFrame(read))};read();const s="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return s?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==t&&cancelAnimationFrame(t),s?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[ie,ce,de,oe,D]),0===p.length)return null;const ue=ie&&le?.at===oe?le.spot:null,fe=0===oe,he=oe===p.length-1,ge=b[$][Y],ve=w[$][Y],xe=_[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:ie,onOpenChange:(e,t)=>{(e||B||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?setOpen(e):t.cancel()},children:t(n.Portal,{children:[ie&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:m("plass-portal 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]",Q?.mask),style:{clipPath:d(ue,ae?.radius??C[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:me?ae?.side??"bottom":"bottom",align:me?ae?.align??"center":"center",sideOffset:me?10:centreOnAnchor,collisionPadding:12,anchor:me??O,children:t(n.Popup,{className:m(L,g[Y],v[Y],y[Y],N[Y],ge,ve,K),style:z(Z,3),children:[be?t("div",{className:"flex items-start gap-3",children:[t("div",{"aria-live":"polite","aria-atomic":"true",className:m("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:m("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:m("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:m(E,Q?.close),children:e(a,{})}):null]}):null,t("div",{className:m("flex items-center gap-2",Q?.footer),children:[t("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[oe+1," / ",p.length]}),t("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(i,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(i,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(oe-1),children:I??X.previous}),e(i,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(oe+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as i}from"../button/index.js";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as l}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as m,focusRingClasses as p,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as g,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z,targetClasses as j}from"../../internal/styles.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},C={xs:6,sm:8,md:10,lg:12,xl:14},L=/* @__PURE__ */[u,"relative flex flex-col","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)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),E=/* @__PURE__ */[j,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",p].join(" "),O={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:p,open:u,defaultOpen:j=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=o(),X=l(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,se]=t.useState(j),[te,ne]=t.useState(S),ie=u??ee,oe=Math.min(R??te,Math.max(0,p.length-1)),ae=p[oe],[le,re]=t.useState(null),setOpen=e=>{void 0===u&&se(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[me,pe]=t.useState(null);if(t.useLayoutEffect(()=>{pe(ie?resolve(ce):null)},[ie,ce,oe]),t.useEffect(()=>{if(!ie)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const s=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:s?"instant":"smooth"})}let s=0;const read=()=>{s=0;const t=e.getBoundingClientRect();re({at:oe,spot:c({top:t.top,left:t.left,width:t.width,height:t.height},de)})},schedule=()=>{0===s&&(s=requestAnimationFrame(read))};read();const t="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return t?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),t?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[ie,ce,de,oe,D]),0===p.length)return null;const ue=ie&&le?.at===oe?le.spot:null,fe=0===oe,he=oe===p.length-1,ve=b[$][Y],ge=w[$][Y],xe=_[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:ie,onOpenChange:(e,s)=>{(e||B||"escape-key"!==s.reason)&&(e||"outside-press"!==s.reason&&"focus-out"!==s.reason)?setOpen(e):s.cancel()},children:s(n.Portal,{children:[ie&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:m("plass-portal 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]",Q?.mask),style:{clipPath:d(ue,ae?.radius??C[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:me?ae?.side??"bottom":"bottom",align:me?ae?.align??"center":"center",sideOffset:me?10:centreOnAnchor,collisionPadding:12,anchor:me??O,children:s(n.Popup,{className:m(L,v[Y],g[Y],y[Y],N[Y],ve,ge,K),style:z(Z,3),children:[be?s("div",{className:"flex items-start gap-3",children:[s("div",{"aria-live":"polite","aria-atomic":"true",className:m("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:m("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:m("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:m(E,Q?.close),children:e(a,{})}):null]}):null,s("div",{className:m("flex items-center gap-2",Q?.footer),children:[s("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[oe+1," / ",p.length]}),s("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(i,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(i,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(oe-1),children:I??X.previous}),e(i,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(oe+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}

package/dist/components/transfer/PlTransfer.d.ts

@@ -10,6 +10,8 @@ export interface PlTransferItem {
     disabled?: boolean;
 }
 export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Everything that can be on either side, in the order the lists show it. */
     items: readonly PlTransferItem[];
     /** What is on the trailing side. Use with `onValueChange` for a controlled pair. */

package/dist/components/transfer/PlTransfer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as n}from"../checkbox/PlCheckbox.js";import{PlIconButton as i}from"../icon-button/PlIconButton.js";import{PlTextField as o}from"../text-field/PlTextField.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{searchText as d}from"../../internal/search.js";import{textOf as f}from"../../internal/text.js";import{cx as u,fieldRestClasses as m,hasContent as h,metaTextClasses as b,paddingXClasses as v,radiusClasses as p,srOnlyClasses as g,surfaceSlots as y,toLength as x}from"../../internal/styles.js";const k={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},w={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},S=/* @__PURE__ */a.memo(function Row({value:l,label:t,checked:r,disabled:s,size:i,color:o,onTick:c,rowRef:d}){const f=a.useCallback(e=>d(l,e),[d,l]),u=a.useCallback(e=>c(l,!0===e),[c,l]);return e(n,{ref:f,size:i,color:o,className:w[i],label:t,checked:r,disabled:s,onCheckedChange:u})});function Panel({title:a,rows:t,ticked:r,onTick:s,onTickAll:i,search:c,onSearch:d,searchable:f,disabled:h,height:g,emptyLabel:x,searchLabel:N,selectAllName:T,style:L,titleId:j,listRef:R,rowRef:A}){const{variant:C,size:z,color:P,density:I}=L,M=t.filter(e=>!e.disabled),O=M.filter(e=>r.has(e.value)),_=M.length>0&&O.length===M.length,B=O.length>0&&!_,V=v[I][z];return l("div",{className:u("flex min-w-0 flex-col overflow-hidden",m[C],p[z]),style:y(P,0),children:[l("div",{className:u("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,k[z]),children:[e(n,{size:z,color:P,checked:_,indeterminate:B,disabled:h||0===M.length,"aria-label":T,onCheckedChange:e=>i(!0===e)}),e("span",{id:j,className:u("min-w-0 flex-1 truncate font-medium",b[z]),children:a}),l("span",{className:u("shrink-0 tabular-nums text-(--plass-muted-fg)",b[z]),children:[O.length,"/",t.length]})]}),f?e("div",{className:u(V,k[z]),children:e(o,{size:z,color:P,density:I,fullWidth:!0,variant:"ghost",disabled:h,placeholder:N,"aria-label":N,value:c,onChange:e=>d(e.target.value)})}):null,e("div",{ref:R,role:"group","aria-labelledby":j,tabIndex:-1,className:u("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===g?void 0:{height:g},children:e("div",{className:u("flex flex-col",V,k[z]),children:0===t.length?e("span",{className:u("text-(--plass-muted-fg)",b[z],w[z]),children:x}):t.map(l=>e(S,{value:l.value,label:l.label,checked:r.has(l.value),disabled:h||!0===l.disabled,size:z,color:P,onTick:s,rowRef:A},l.value))})})]})}function nameOf(e,l){const a=f(e).trim();return""===a?l:a}function narrow(e,l){const a=d(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||d(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:n,value:o,defaultValue:d,onValueChange:f,sourceLabel:m,targetLabel:b,searchable:v=!1,searchLabel:p,emptyLabel:y,selectAllLabel:k,toTargetLabel:w,toSourceLabel:S,movedLabel:N,height:T=220,disabled:L=!1,variant:j="glass",size:R,color:A,density:C,className:z,...P},I){const M=r(),O=t(L),_=s(),B=m??_.transferAvailable,V=b??_.transferSelected,$=p??_.search,E=y??_.empty,F=void 0===k?_.transferSelectAll:e=>[k,e].filter(Boolean).join(" "),W=w??_.transferToSelected,q=S??_.transferToAvailable,D=N??_.transferMoved,G=R??M.size??"md",H=A??M.color??"primary",J=C??M.density??"default",[K,Q]=a.useState(d??[]),U=o??K,[X,Y]=a.useState(()=>new Set),Z=a.useMemo(()=>new Set(n.map(e=>e.value)),[n]);[...X].some(e=>!Z.has(e))&&Y(new Set([...X].filter(e=>Z.has(e))));const[ee,le]=a.useState(""),[ae,te]=a.useState(""),re=a.useId(),se=a.useRef(new Map),ne=a.useRef(null),ie=a.useRef(null),oe=a.useRef(null),[ce,de]=a.useState(null),fe=a.useCallback((e,l)=>{l?se.current.set(e,l):se.current.delete(e)},[]),ue=a.useMemo(()=>new Set(U),[U]),me=a.useMemo(()=>n.filter(e=>!ue.has(e.value)),[n,ue]),he=a.useMemo(()=>n.filter(e=>ue.has(e.value)),[n,ue]),be=a.useCallback((e,l)=>{Y(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},[]),tickAll=(e,l)=>{Y(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&X.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),r=l?n.filter(e=>ue.has(e.value)||t.has(e.value)).map(e=>e.value):U.filter(e=>!t.has(e));oe.current={ids:a.map(e=>e.value),toTarget:l},Y(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===o&&Q(e),f?.(e)})(r)};a.useLayoutEffect(()=>{const e=oe.current;if(!e)return;oe.current=null;const l=e.ids.filter(l=>ue.has(l)===e.toTarget),a=e.toTarget?ie.current:ne.current;if(0===l.length)return void a?.focus();(se.current.get(l[0])??a)?.focus();const t=e.toTarget?nameOf(V,_.transferSelected):nameOf(B,_.transferAvailable);de(e=>({key:(e?.key??0)+1,text:D(l.length,t)}))},[ue,X,_,D,B,V]);const ve=narrow(me,ee),pe=narrow(he,ae),ge=ve.some(e=>!e.disabled&&X.has(e.value)),ye=pe.some(e=>!e.disabled&&X.has(e.value)),xe=x(T),ke={variant:j,size:G,color:H,density:J},we=h(B)?B:_.transferAvailable,Se=h(V)?V:_.transferSelected,Ne="ghost"===j?"ghost":"glass";return l("div",{ref:I,className:u("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),...P,children:[e(Panel,{title:we,titleId:`${re}-source`,listRef:ne,rowRef:fe,rows:ve,ticked:X,onTick:be,onTickAll:e=>tickAll(ve,e),search:ee,onSearch:le,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(we,_.transferAvailable)),style:ke}),l("div",{className:"flex flex-col gap-2",children:[e(i,{size:G,color:H,variant:Ne,label:W,disabled:O||!ge,onClick:()=>move(ve,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(c,{})})}),e(i,{size:G,color:H,variant:Ne,label:q,disabled:O||!ye,onClick:()=>move(pe,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(c,{})})})]}),e(Panel,{title:Se,titleId:`${re}-target`,listRef:ie,rowRef:fe,rows:pe,ticked:X,onTick:be,onTickAll:e=>tickAll(pe,e),search:ae,onSearch:te,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(Se,_.transferSelected)),style:ke}),e("div",{className:g,"aria-live":"polite",children:ce?e("span",{children:ce.text},ce.key):null})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as n}from"../checkbox/PlCheckbox.js";import{PlIconButton as i}from"../icon-button/PlIconButton.js";import{PlTextField as o}from"../text-field/PlTextField.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{cachedSearchText as d,searchText as f}from"../../internal/search.js";import{textOf as u}from"../../internal/text.js";import{cx as m,fieldRestClasses as h,hasContent as b,metaTextClasses as v,paddingXClasses as p,radiusClasses as g,srOnlyClasses as y,surfaceSlots as x,toLength as k}from"../../internal/styles.js";const w={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},S={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},N=/* @__PURE__ */a.memo(function Row({value:l,label:t,checked:r,disabled:s,size:i,color:o,onTick:c,rowRef:d}){const f=a.useCallback(e=>d(l,e),[d,l]),u=a.useCallback(e=>c(l,!0===e),[c,l]);return e(n,{ref:f,size:i,color:o,className:S[i],label:t,checked:r,disabled:s,onCheckedChange:u})});function Panel({title:a,rows:t,ticked:r,onTick:s,onTickAll:i,search:c,onSearch:d,searchable:f,disabled:u,height:b,emptyLabel:y,searchLabel:k,selectAllName:T,style:L,titleId:j,listRef:R,rowRef:A}){const{variant:C,size:z,color:P,density:I}=L,M=t.filter(e=>!e.disabled),O=M.filter(e=>r.has(e.value)),_=M.length>0&&O.length===M.length,B=O.length>0&&!_,V=p[I][z];return l("div",{className:m("flex min-w-0 flex-col overflow-hidden",h[C],g[z]),style:x(P,0),children:[l("div",{className:m("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,w[z]),children:[e(n,{size:z,color:P,checked:_,indeterminate:B,disabled:u||0===M.length,"aria-label":T,onCheckedChange:e=>i(!0===e)}),e("span",{id:j,className:m("min-w-0 flex-1 truncate font-medium",v[z]),children:a}),l("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",v[z]),children:[O.length,"/",t.length]})]}),f?e("div",{className:m(V,w[z]),children:e(o,{size:z,color:P,density:I,fullWidth:!0,variant:"ghost",disabled:u,placeholder:k,"aria-label":k,value:c,onChange:e=>d(e.target.value)})}):null,e("div",{ref:R,role:"group","aria-labelledby":j,tabIndex:-1,className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===b?void 0:{height:b},children:e("div",{className:m("flex flex-col",V,w[z]),children:0===t.length?e("span",{className:m("text-(--plass-muted-fg)",v[z],S[z]),children:y}):t.map(l=>e(N,{value:l.value,label:l.label,checked:r.has(l.value),disabled:u||!0===l.disabled,size:z,color:P,onTick:s,rowRef:A},l.value))})})]})}function nameOf(e,l){const a=u(e).trim();return""===a?l:a}const T=/* @__PURE__ */d(e=>e.label);function narrow(e,l){const a=f(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||T(e).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:n,value:o,defaultValue:d,onValueChange:f,sourceLabel:u,targetLabel:h,searchable:v=!1,searchLabel:p,emptyLabel:g,selectAllLabel:x,toTargetLabel:w,toSourceLabel:S,movedLabel:N,height:T=220,disabled:L=!1,variant:j="glass",size:R,color:A,density:C,className:z,...P},I){const M=r(),O=t(L),_=s(),B=u??_.transferAvailable,V=h??_.transferSelected,$=p??_.search,E=g??_.empty,F=void 0===x?_.transferSelectAll:e=>[x,e].filter(Boolean).join(" "),W=w??_.transferToSelected,q=S??_.transferToAvailable,D=N??_.transferMoved,G=R??M.size??"md",H=A??M.color??"primary",J=C??M.density??"default",[K,Q]=a.useState(d??[]),U=o??K,[X,Y]=a.useState(()=>new Set),Z=a.useMemo(()=>new Set(n.map(e=>e.value)),[n]);[...X].some(e=>!Z.has(e))&&Y(new Set([...X].filter(e=>Z.has(e))));const[ee,le]=a.useState(""),[ae,te]=a.useState(""),re=a.useId(),se=a.useRef(new Map),ne=a.useRef(null),ie=a.useRef(null),oe=a.useRef(null),[ce,de]=a.useState(null),fe=a.useCallback((e,l)=>{l?se.current.set(e,l):se.current.delete(e)},[]),ue=a.useMemo(()=>new Set(U),[U]),me=a.useMemo(()=>n.filter(e=>!ue.has(e.value)),[n,ue]),he=a.useMemo(()=>n.filter(e=>ue.has(e.value)),[n,ue]),be=a.useCallback((e,l)=>{Y(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},[]),tickAll=(e,l)=>{Y(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&X.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),r=l?n.filter(e=>ue.has(e.value)||t.has(e.value)).map(e=>e.value):U.filter(e=>!t.has(e));oe.current={ids:a.map(e=>e.value),toTarget:l},Y(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===o&&Q(e),f?.(e)})(r)};a.useLayoutEffect(()=>{const e=oe.current;if(!e)return;oe.current=null;const l=e.ids.filter(l=>ue.has(l)===e.toTarget),a=e.toTarget?ie.current:ne.current;if(0===l.length)return void a?.focus();(se.current.get(l[0])??a)?.focus();const t=e.toTarget?nameOf(V,_.transferSelected):nameOf(B,_.transferAvailable);de(e=>({key:(e?.key??0)+1,text:D(l.length,t)}))},[ue,X,_,D,B,V]);const ve=narrow(me,ee),pe=narrow(he,ae),ge=ve.some(e=>!e.disabled&&X.has(e.value)),ye=pe.some(e=>!e.disabled&&X.has(e.value)),xe=k(T),ke={variant:j,size:G,color:H,density:J},we=b(B)?B:_.transferAvailable,Se=b(V)?V:_.transferSelected,Ne="ghost"===j?"ghost":"glass";return l("div",{ref:I,className:m("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),role:P["aria-label"]||P["aria-labelledby"]?"group":void 0,...P,children:[e(Panel,{title:we,titleId:`${re}-source`,listRef:ne,rowRef:fe,rows:ve,ticked:X,onTick:be,onTickAll:e=>tickAll(ve,e),search:ee,onSearch:le,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(we,_.transferAvailable)),style:ke}),l("div",{className:"flex flex-col gap-2",children:[e(i,{size:G,color:H,variant:Ne,label:W,disabled:O||!ge,onClick:()=>move(ve,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(c,{})})}),e(i,{size:G,color:H,variant:Ne,label:q,disabled:O||!ye,onClick:()=>move(pe,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(c,{})})})]}),e(Panel,{title:Se,titleId:`${re}-target`,listRef:ie,rowRef:fe,rows:pe,ticked:X,onTick:be,onTickAll:e=>tickAll(pe,e),search:ae,onSearch:te,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(Se,_.transferSelected)),style:ke}),e("div",{className:y,"aria-live":"polite",children:ce?e("span",{children:ce.text},ce.key):null})]})});

package/dist/components/tree/PlTree.d.ts

@@ -41,6 +41,18 @@ export interface PlTreeProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     selection?: PlTreeSelection;
     /** Called when a row is clicked, selectable or not. */
     onItemClick?: (node: PlTreeNode) => void;
+    /**
+     * Builds the rows of every branch, open or shut, and keeps a shut branch's
+     * rows in the document, hidden, rather than leaving them out.
+     *
+     * For a tree a search engine should read in full: a shut branch is otherwise
+     * not in the HTML a server sends. A kept row is out of the layout, the focus
+     * order and the accessibility tree, and the arrow keys still walk only the
+     * rows that are visible. Off by default, because it builds every row the
+     * data holds.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/tree/PlTree.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{Collapsible as l}from"@base-ui/react/collapsible";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as o,focusRingClasses as d,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["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"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const i of e)s.push({node:i,level:n}),i.children&&t.has(i.id)&&visibleRows(i.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:i,parent:l,tabStop:r,expanded:a,selected:o}){const{parents:d}=s.useContext(b);let c=null;for(let e=r;null!==e&&d.has(e);e=d.get(e))if(d.get(e)===l){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:i,isOpen:a.has(t.id),isSelected:o.has(t.id),tabStop:t.id===c?r:null,expanded:n?a:void 0,selected:n?o:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:i,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:R,selection:C,idPrefix:j,focus:M,actions:N}=s.useContext(b),E=void 0!==i.children;return n(t,{children:[n("div",{id:`${j}-${i.id}`,role:"treeitem","aria-level":f,"aria-expanded":E?y:void 0,"aria-selected":"none"===C?void 0:g,"aria-disabled":i.disabled||void 0,tabIndex:i.disabled?void 0:w===i.id?0:-1,onFocus:()=>M(i.id),onKeyDown:e=>{i.disabled||N.current?.keyDown(e,i,f)},onClick:()=>{i.disabled||N.current?.press(i)},className:o("flex cursor-pointer items-center select-none",c[D],x[R][D],a[D],u[D],d,m,p,i.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:o("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",E?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(r,{})}),i.icon?e("span",{className:"flex shrink-0 items-center",children:i.icon}):null,e("span",{className:"truncate",children:i.label})]}),k&&S?e(l.Root,{open:y,children:e(l.Panel,{role:"group",className:h,children:e(TreeRows,{items:i.children,level:f+1,parent:i.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:l,onExpandedChange:r,selected:a,defaultSelected:d,onSelectedChange:c,selection:p="single",onItemClick:u,size:m,color:h,density:v,className:x,style:y,...g},w){const k=i(),S=m??k.size??"md",D=h??k.color??"primary",R=v??k.density??"default",[C,j]=s.useState(l??[]),M=n??C,N=s.useMemo(()=>new Set(M),[M]),[E,I]=s.useState(d??[]),P=a??E,T=s.useMemo(()=>new Set(P),[P]),O=s.useMemo(()=>visibleRows(t,N),[t,N]),z=s.useMemo(()=>parentsOf(t),[t]),[A,$]=s.useState(null),_=s.useMemo(()=>O.filter(e=>!e.node.disabled),[O]),F=A&&_.some(e=>e.node.id===A)?A:_[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!N.has(e)?[...M.filter(t=>t!==e),e]:M.filter(t=>t!==e),void 0===n&&j(s),r?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?T.has(e.id)?P.filter(t=>t!==e.id):[...P,e.id]:[e.id];void 0===a&&I(t),c?.(t)})(e),u?.(e)},L=s.useId(),focusRow=e=>{$(e),document.getElementById(`${L}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=_.findIndex(e=>e.node.id===t.id),i=void 0!==t.children,l=N.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),_[s+1]&&focusRow(_[s+1].node.id);break;case"ArrowUp":e.preventDefault(),_[s-1]&&focusRow(_[s-1].node.id);break;case"ArrowRight":e.preventDefault(),i&&!l?toggle(t.id,!0):i&&_[s+1]?.level===n+1&&focusRow(_[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),i&&l){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(_[e].level<n){focusRow(_[e].node.id);break}break;case"Home":e.preventDefault(),_[0]&&focusRow(_[0].node.id);break;case"End":e.preventDefault(),_.length&&focusRow(_[_.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},B=s.useRef(null);s.useLayoutEffect(()=>{B.current={press,keyDown:onKeyDown}});const H=s.useMemo(()=>({size:S,density:R,selection:p,idPrefix:L,parents:z,focus:$,actions:B}),[S,R,p,L,z]);return e("div",{ref:w,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:o("flex flex-col",x),style:{...f(D,0),...y},...g,children:e(b.Provider,{value:H,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:F,expanded:N,selected:T})})})});
+"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{Collapsible as l}from"@base-ui/react/collapsible";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as r,cx as d,focusRingClasses as a,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["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"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const i of e)s.push({node:i,level:n}),i.children&&t.has(i.id)&&visibleRows(i.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:i,parent:l,tabStop:o,expanded:r,selected:d}){const{parents:a}=s.useContext(b);let c=null;for(let e=o;null!==e&&a.has(e);e=a.get(e))if(a.get(e)===l){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:i,isOpen:r.has(t.id),isSelected:d.has(t.id),tabStop:t.id===c?o:null,expanded:n?r:void 0,selected:n?d:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:i,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:M,selection:R,keepMounted:C,idPrefix:j,focus:N,actions:E}=s.useContext(b),I=void 0!==i.children;return n(t,{children:[n("div",{id:`${j}-${i.id}`,role:"treeitem","aria-level":f,"aria-expanded":I?y:void 0,"aria-selected":"none"===R?void 0:g,"aria-disabled":i.disabled||void 0,tabIndex:i.disabled?void 0:w===i.id?0:-1,onFocus:()=>N(i.id),onKeyDown:e=>{i.disabled||E.current?.keyDown(e,i,f)},onClick:()=>{i.disabled||E.current?.press(i)},className:d("flex cursor-pointer items-center select-none",c[D],x[M][D],r[D],u[D],a,m,p,i.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:d("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",I?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(o,{})}),i.icon?e("span",{className:"flex shrink-0 items-center",children:i.icon}):null,e("span",{className:"truncate",children:i.label})]}),k&&S?e(l.Root,{open:y,children:e(l.Panel,{role:"group",keepMounted:C,className:h,children:e(TreeRows,{items:i.children,level:f+1,parent:i.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:l,onExpandedChange:o,selected:r,defaultSelected:a,onSelectedChange:c,selection:p="single",onItemClick:u,keepMounted:m=!1,size:h,color:v,density:x,className:y,style:g,...w},k){const S=i(),D=h??S.size??"md",M=v??S.color??"primary",R=x??S.density??"default",[C,j]=s.useState(l??[]),N=n??C,E=s.useMemo(()=>new Set(N),[N]),[I,P]=s.useState(a??[]),T=r??I,O=s.useMemo(()=>new Set(T),[T]),z=s.useMemo(()=>visibleRows(t,E),[t,E]),A=s.useMemo(()=>parentsOf(t),[t]),[$,_]=s.useState(null),F=s.useMemo(()=>z.filter(e=>!e.node.disabled),[z]),L=$&&F.some(e=>e.node.id===$)?$:F[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!E.has(e)?[...N.filter(t=>t!==e),e]:N.filter(t=>t!==e),void 0===n&&j(s),o?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?O.has(e.id)?T.filter(t=>t!==e.id):[...T,e.id]:[e.id];void 0===r&&P(t),c?.(t)})(e),u?.(e)},B=s.useId(),focusRow=e=>{_(e),document.getElementById(`${B}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=F.findIndex(e=>e.node.id===t.id),i=void 0!==t.children,l=E.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),F[s+1]&&focusRow(F[s+1].node.id);break;case"ArrowUp":e.preventDefault(),F[s-1]&&focusRow(F[s-1].node.id);break;case"ArrowRight":e.preventDefault(),i&&!l?toggle(t.id,!0):i&&F[s+1]?.level===n+1&&focusRow(F[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),i&&l){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(F[e].level<n){focusRow(F[e].node.id);break}break;case"Home":e.preventDefault(),F[0]&&focusRow(F[0].node.id);break;case"End":e.preventDefault(),F.length&&focusRow(F[F.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},H=s.useRef(null);s.useLayoutEffect(()=>{H.current={press,keyDown:onKeyDown}});const K=s.useMemo(()=>({size:D,density:R,selection:p,keepMounted:m,idPrefix:B,parents:A,focus:_,actions:H}),[D,R,p,m,B,A]);return e("div",{ref:k,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:d("flex flex-col",y),style:{...f(M,0),...g},...w,children:e(b.Provider,{value:K,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:L,expanded:E,selected:O})})})});

package/dist/components/tree-select/PlTreeSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as f}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}function haystackOf(e){return i([e.searchLabel??("string"==typeof e.label?e.label:e.id)])}function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=haystackOf(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:h,defaultValue:m,onValueChange:u,multiple:p=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:y,open:x,defaultOpen:j,onOpenChange:C,placeholder:O,clearable:S=!1,closeOnSelect:T,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:k,size:E,color:I,density:L,readOnly:N=!1,disabled:V=!1,...F},R){const B=n(),W=E??B.size??"md",q=I??B.color??"primary",A=L??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=h??J,[U,X]=t.useState(j??!1),Y=x??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(V||N)||(void 0===x&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===h&&K(e),u?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?O??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...F,size:W,color:q,density:A,readOnly:N,disabled:V,triggerRef:R,display:oe,empty:0===ie.length,clearable:S,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:k,formValue:p?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(f,{items:le,size:W,color:q,density:A,selection:p?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!p){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((T??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),T&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),y?.(e))}})})]})})});
+"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{cachedSearchText as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as h}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}const f=/* @__PURE__ */i(e=>e.searchLabel??("string"==typeof e.label?e.label:e.id));function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=f(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:f,defaultValue:m,onValueChange:p,multiple:u=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:x,open:y,defaultOpen:j,onOpenChange:C,placeholder:S,clearable:T=!1,closeOnSelect:O,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:E,size:I,color:L,density:N,readOnly:V=!1,disabled:F=!1,...R},k){const B=n(),W=I??B.size??"md",q=L??B.color??"primary",A=N??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=f??J,[U,X]=t.useState(j??!1),Y=y??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(F||V)||(void 0===y&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===f&&K(e),p?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?S??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...R,size:W,color:q,density:A,readOnly:V,disabled:F,triggerRef:k,display:oe,empty:0===ie.length,clearable:T,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:E,formValue:u?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(h,{items:le,size:W,color:q,density:A,selection:u?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!u){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((O??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),O&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),x?.(e))}})})]})})});