plass-ui 1.4.0 → 1.5.0

package/dist/components/toast/PlToast.js

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

package/dist/components/toggle/PlToggle.js

@@ -1 +1 @@
-"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Toggle as l}from"@base-ui/react/toggle";import{ButtonGroupContext as a}from"../../internal/button-group.js";import{controlHeightClasses as r,controlSlots as t,controlSquareClasses as p,controlTextClasses as i,disabledClasses as n,focusRingClasses as g,gapClasses as v,glassClasses as d,hasContent as h,iconClasses as x,paddingXClasses as c,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:`${r.xs} ${v.xs} ${m.xs} ${i.xs}`,sm:`${r.sm} ${v.sm} ${m.sm} ${i.sm}`,md:`${r.md} ${v.md} ${m.md} ${i.md}`,lg:`${r.lg} ${v.lg} ${m.lg} ${i.lg}`,xl:`${r.xl} ${v.xl} ${m.xl} ${i.xl}`},$={xs:`${p.xs} px-0`,sm:`${p.sm} px-0`,md:`${p.md} px-0`,lg:`${p.lg} px-0`,xl:`${p.xl} px-0`},u=/* @__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]",f,g,x].join(" "),w={solid:/* @__PURE__ */[d,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[d,"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"},j={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)"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[d,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},P={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__ */e.forwardRef(function PlToggle({variant:r,size:p,color:i,density:g,elevation:v,pressed:d,defaultPressed:x,onPressedChange:m,value:f,startIcon:T,endIcon:k,fullWidth:z=!1,disabled:C,className:E,style:I,children:M,onPointerMove:N,...B},R){const W=o(),X=e.useContext(a),Y=r??X?.variant??"glass",q=p??X?.size??W.size??"md",A=i??X?.color??W.color??"primary",D=g??X?.density??W.density??"default",F=v??X?.elevation??0,G=C??X?.disabled??!1,H=!h(M);return s(l,{ref:R,value:f,pressed:d,defaultPressed:x,onPressedChange:s=>m?.(s),disabled:G,className:s=>[u,b[q],H?$[q]:c[D][q],G?n[Y]:s.pressed?`${y[Y]} ${P[Y]}`:`${w[Y]} ${j[Y]}`,G?"":"plass-glow cursor-pointer",z?"w-full":"",E??""].filter(Boolean).join(" "),style:{...t(A,F,Y),...I},onPointerMove:s=>{const e=s.currentTarget;e.style.setProperty("--p-mx",`${s.nativeEvent.offsetX}px`),e.style.setProperty("--p-my",`${s.nativeEvent.offsetY}px`),N?.(s)},...B,children:[T,M,k]})});
+"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{followPointer as o}from"../../internal/glow.js";import{useDefaults as l}from"../../internal/defaults.js";import{Toggle as a}from"@base-ui/react/toggle";import{ButtonGroupContext as r}from"../../internal/button-group.js";import{controlHeightClasses as t,controlSlots as i,controlSquareClasses as p,controlTextClasses as g,disabledClasses as n,focusRingClasses as v,forcedEdgeClasses as d,forcedPressedClasses as h,gapClasses as x,glassClasses as c,hasContent as m,iconClasses as b,paddingXClasses as f,radiusClasses as $,transitionClasses as u}from"../../internal/styles.js";const w={xs:`${t.xs} ${x.xs} ${$.xs} ${g.xs}`,sm:`${t.sm} ${x.sm} ${$.sm} ${g.sm}`,md:`${t.md} ${x.md} ${$.md} ${g.md}`,lg:`${t.lg} ${x.lg} ${$.lg} ${g.lg}`,xl:`${t.xl} ${x.xl} ${$.xl} ${g.xl}`},j={xs:`${p.xs} px-0`,sm:`${p.sm} px-0`,md:`${p.md} px-0`,lg:`${p.lg} px-0`,xl:`${p.xl} px-0`},y=/* @__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]",u,v,b].join(" "),P={solid:/* @__PURE__ */[c,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",d].join(" "),glass:/* @__PURE__ */[c,"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"},k={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)"},z={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",h].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",h].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${h}`},C={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__ */e.forwardRef(function PlToggle({variant:t,size:p,color:g,density:v,elevation:d,pressed:h,defaultPressed:x,onPressedChange:c,value:b,startIcon:$,endIcon:u,fullWidth:T=!1,disabled:I,className:M,style:N,children:B,onPointerMove:R,...W},q){const A=l(),D=e.useContext(r),E=t??D?.variant??"glass",F=p??D?.size??A.size??"md",G=g??D?.color??A.color??"primary",H=v??D?.density??A.density??"default",J=d??D?.elevation??0,K=I??D?.disabled??!1,L=!m(B);return s(a,{ref:q,value:b,pressed:h,defaultPressed:x,onPressedChange:s=>c?.(s),disabled:K,className:s=>[y,w[F],L?j[F]:f[H][F],K?n[E]:s.pressed?`${z[E]} ${C[E]}`:`${P[E]} ${k[E]}`,K?"":"plass-glow cursor-pointer",T?"w-full":"",M??""].filter(Boolean).join(" "),style:{...i(G,J,E),...N},onPointerMove:s=>{o(s),R?.(s)},...W,children:[$,B,u]})});

package/dist/components/tooltip/PlTooltip.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Tooltip as o}from"@base-ui/react/tooltip";import{glassClasses as l,metaTextClasses as i,paddingXClasses as r,radiusClasses as n,surfaceSlots as d}from"../../internal/styles.js";export const PlTooltipProvider=o.Provider;const p=/* @__PURE__ */[l,"max-w-64 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)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),c={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},m={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:l,children:g,size:f,color:h,density:y,side:u="top",align:x="center",sideOffset:b=6,delay:v,closeDelay:j,arrow:w=!0,open:P,defaultOpen:z,onOpenChange:O,disabled:N=!1,className:T,style:B,...C}){const D=t(),L=f??D.size??"sm",M=h??D.color??"secondary",_=y??D.density??"default",k=m[L],A=e.useId(),[I,R]=e.useState(z??!1),S=P??I;return a(o.Root,{open:P,defaultOpen:z,onOpenChange:s=>{R(s),O?.(s)},children:[s(o.Trigger,{render:g,delay:v,closeDelay:j,disabled:N,"aria-describedby":S?A:void 0}),s(o.Portal,{children:s(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:u,align:x,sideOffset:b,children:a(o.Popup,{id:A,role:"tooltip",className:[p,n[L],r[_][L],c[L],i[L],T??""].filter(Boolean).join(" "),style:{...d(M,3),...B},...C,children:[w?s(o.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:a("svg",{width:k,height:k/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-line)"}),s("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)",transform:"translate(0 -1)"})]})}):null,l]})})})]})}
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as l}from"../../internal/picker.js";import{glassClasses as r,metaTextClasses as i,paddingXClasses as n,radiusClasses as p,surfaceSlots as d}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[r,"max-w-64 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)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[instant]:[transition-duration:0ms]"].join(" "),m={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},y={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:r,children:f,size:u,color:g,density:x,side:b="top",align:h="center",sideOffset:j=6,delay:v,closeDelay:P,arrow:O=!0,open:w,defaultOpen:z,onOpenChange:T,disabled:N=!1,className:C,style:D,..._}){const k=a(),A=u??k.size??"sm",B=g??k.color??"secondary",I=x??k.density??"default",R=y[A],S=o.useId(),[q,E]=o.useState(z??!1),F=w??q;return e(t.Root,{open:w,defaultOpen:z,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:f,delay:v,closeDelay:P,disabled:N,"aria-describedby":F?S:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:b,align:h,sideOffset:j,children:e(t.Popup,{id:S,role:"tooltip",className:[c,p[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...d(B,3),...D},..._,children:[O?s(l,{as:t.Arrow,size:R}):null,r]})})})]})}

package/dist/components/tour/PlTour.js

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

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

@@ -27,11 +27,20 @@ export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPr
     searchLabel?: string;
     /** What a list with nothing in it says. @default 'Nothing here' */
     emptyLabel?: string;
-    /** What the tick in a list's heading is announced as. @default 'Select all' */
+    /**
+     * What the tick in a list's heading is announced as, before the heading itself.
+     * @default 'Select all'
+     */
     selectAllLabel?: string;
     /** What the two arrows are announced as. */
     toTargetLabel?: string;
     toSourceLabel?: string;
+    /**
+     * What is announced once rows have moved, given how many and the name of the
+     * list they went to.
+     * @default `{count} items moved to {list}`, from the label pack
+     */
+    movedLabel?: (count: number, list: string) => string;
     /** How tall each list is. A number of pixels or any CSS length. @default 220 */
     height?: number | string;
     /** Nothing can be ticked or moved. */

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

package/dist/components/tree/PlTree.js

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

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 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}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:f,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=f??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===f&&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,hiddenValues:k?Q.map(e=>({name:k,value:e})):void 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("px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(h,{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{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("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))}})})]})})});

package/dist/components/typography/PlTypography.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),a={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"},c={1:"truncate",2:"line-clamp-2",3:"line-clamp-3",4:"line-clamp-4",5:"line-clamp-5",6:"line-clamp-6"};export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:s="body",color:h,weight:d,align:p,lines:b,gutter:u=!1,render:x,className:f,style:g,children:y,...v},k){const j=[r[s],o[d??m[s]],p?i[p]:"",b?c[b]??"line-clamp-6":"",u?a[s]:"",h?"text-(--p-accent)":n.has(s)?"text-(--plass-muted-fg)":"text-(--plass-fg)",f??""].filter(Boolean).join(" ");return t({render:x??e.createElement(l[s]),ref:k,props:{className:j,style:h?{"--p-accent":`var(--plass-${h}-accent)`,...g}:g,children:y,...v}})});
+"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};function clampClasses(e){return 1===e?"block truncate":"line-clamp-(--p-lines)"}export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:i="body",color:c,weight:h,align:d,lines:p,gutter:b=!1,render:u,className:x,style:f,children:g,...y},v){const k=p&&p>=1?Math.floor(p):void 0,j=[r[i],a[h??m[i]],d?s[d]:"",k?clampClasses(k):"",b?o[i]:"",c?"text-(--p-accent)":n.has(i)?"text-(--plass-muted-fg)":"text-(--plass-fg)",x??""].filter(Boolean).join(" ");return t({render:u??e.createElement(l[i]),ref:v,props:{className:j,style:c||k&&k>1?{...c?{"--p-accent":`var(--plass-${c}-accent)`}:null,...k&&k>1?{"--p-lines":k}:null,...f}:f,children:g,...y}})});

package/dist/components/window-pane/PlWindowPane.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as d,iconClasses as c}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as g,windowSlots as f}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const p=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(b,v){const{os:x="macos",title:z,icon:y,actions:N,controls:M=!0,size:C,color:E,accent:L=!1,transparency:S=0,active:k,elevation:R=2,position:j="static",draggable:I=!1,resizable:T=!1,width:D,height:P,minWidth:B=180,minHeight:W,offset:A,defaultOffset:H,onOffsetChange:O,onResize:X,open:$,defaultOpen:G=!0,onOpenChange:F,minimized:U,defaultMinimized:Y=!1,onMinimizedChange:_,maximized:q,defaultMaximized:K=!1,onMaximizedChange:J,scroll:Q=!0,minimizeLabel:V,maximizeLabel:Z,restoreLabel:ee,closeLabel:te,resizeLabel:ne,render:ie,className:oe,style:re,children:se,...ae}=b,le=w(),de=C??le.size??"md",ce=E??le.color??"primary",ue=s(),me=h(x),he=g(x,de),ge=i.useId(),[fe,we]=useLatched($,G,F),[pe,be]=useLatched(U,Y,_),[ve,xe]=useLatched(q,K,J),[ze,ye]=useLatched(A,H??{x:0,y:0},O),[Ne,Me]=i.useState(null),[Ce,Ee]=i.useState(!0),Le=k??Ce,[Se,ke]=i.useState(null),[Re,je]=i.useState(null),[Ie,Te]=i.useState(!1),[De,Pe]=i.useState(!1),[Be,We]=i.useState(fe);Be!==fe&&(We(fe),Pe(!fe)),i.useEffect(()=>{if(!De)return;const e=window.setTimeout(()=>Pe(!1),260);return()=>window.clearTimeout(e)},[De]);const Ae=i.useRef(null),He=i.useCallback(e=>{Ae.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]);i.useEffect(()=>{if(void 0!==k)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ee(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ee(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[k]);const Oe=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;Oe.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Te(!0);const finish=()=>{Oe.current=null,Te(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});Oe.current=()=>{s(),finish()}}i.useEffect(()=>()=>Oe.current?.(),[]);const Xe={width:Math.max(0,B),height:Math.max(he.bar,W??he.bar)};function resizeTo(e){Me(e),X?.(e)}const $e=m(x,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ge=$e.includes("maximize");i.useEffect(()=>{if(pe||null===Re)return;const e=window.setTimeout(()=>je(null),400);return()=>window.clearTimeout(e)},[pe,Re]);const Fe={minimize:V??ue.minimize,maximize:Z??ue.maximize,restore:ee??ue.restore,close:te??ue.close},Ue=e(u,{os:x,metrics:he,controls:$e,maximized:ve,active:Le,labels:Fe,onCommand:function command(e){"close"===e?we(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&ke(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Ne?.height??P)&&t)return je(t.getBoundingClientRect().height),void requestAnimationFrame(()=>be(!0));be(e)}(!pe):xe(!ve)}}),Ye=d(z)?e("span",{id:ge,className:"min-w-0 truncate",children:z}):null,_e=d(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,qe=t("div",{className:a("relative flex shrink-0 items-center select-none",c,I&&!ve?"cursor-grab active:cursor-grabbing":""),style:{height:he.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:he.weight,paddingInlineStart:he.padX,paddingInlineEnd:he.padEnd,gap:Math.round(.7*he.title),fontSize:he.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:me.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!I||ve)return;const t={...ze};beginGesture(e,(e,n)=>ye({x:t.x+e,y:t.y+n}))},onDoubleClick:Ge?()=>xe(!ve):void 0,children:["start"===me.controlsSide?Ue:null,"center"===me.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:he.controlsWidth($e.length)+2*he.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*he.title)},children:[_e,Ye]})}):t(n,{children:[_e,Ye]}),e("span",{className:"flex-1"}),d(N)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*he.title)},onPointerDown:e=>e.stopPropagation(),children:N}):null,"end"===me.controlsSide?Ue:null]}),Ke=ve?{left:0,top:0,width:"100%",height:"100%"}:{left:ze.x,top:ze.y,width:Ne?.width??D,height:pe?Se??he.bar:Ne?.height??P??Re??void 0},Je=o({render:ie,ref:He,props:{role:"group","aria-labelledby":Ye?ge:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",S>0?l:"",me.glass&&0===S?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",oe),"data-gesture":Ie?"":void 0,inert:!fe||void 0,style:{opacity:fe?void 0:0,...f({os:x,color:ce,accent:L,transparency:S,active:Le,elevation:R}),position:"static"===j?"relative":j,...Ke,borderRadius:ve?0:`${he.radius}px ${he.radius}px ${he.radiusBottom}px ${he.radiusBottom}px`,borderStyle:"solid",borderWidth:he.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...re},children:t(n,{children:[qe,e("div",{className:a("min-h-0 flex-1",Q?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:he.band.side,marginBottom:he.band.bottom,boxShadow:he.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:pe,children:se}),!T||ve||pe?null:p.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ne??ue.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ve)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:ze.x,y:ze.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:d,y:c}=o;r&&(n=Math.max(Xe.width,o.width+e)),l&&(i=Math.max(Xe.height,o.height+t)),s&&(n=Math.max(Xe.width,o.width-e),d=o.x+(o.width-n)),a&&(i=Math.max(Xe.height,o.height-t),c=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&ye({x:d,y:c})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Xe.width,i.width+e),height:Math.max(Xe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ae}});return fe||De?Je:null});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as g}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";import{inertProps as p}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(x,z){const{os:y="macos",title:N,icon:E,actions:L,controls:M=!0,size:S,color:C,accent:k=!1,transparency:T=0,active:I,elevation:j=2,position:R="static",draggable:D=!1,resizable:P=!1,width:O,height:W,minWidth:B=180,minHeight:H,offset:A,defaultOffset:G,onOffsetChange:X,onResize:$,open:_,defaultOpen:F=!0,onOpenChange:U,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:K,maximized:J,defaultMaximized:Q=!1,onMaximizedChange:V,scroll:Z=!0,minimizeLabel:ee,maximizeLabel:te,restoreLabel:ne,closeLabel:ie,resizeLabel:oe,render:re,className:se,style:ae,children:le,...ce}=x,de=w(),ue=S??de.size??"md",me=C??de.color??"primary",he=s(),fe=h(y),ge=f(y,ue),we=i.useId(),[pe,be]=useLatched(_,F,U),[ve,xe]=useLatched(Y,q,K),[ze,ye]=useLatched(J,Q,V),[Ne,Ee]=useLatched(A,G??{x:0,y:0},X),[Le,Me]=i.useState(null),[Se,Ce]=i.useState(!0),ke=I??Se,[Te,Ie]=i.useState(null),[je,Re]=i.useState(null),[De,Pe]=i.useState(!1),[Oe,We]=i.useState(!1),[Be,He]=i.useState(pe);Be!==pe&&(He(pe),We(!pe)),i.useEffect(()=>{if(!Oe)return;const e=window.setTimeout(()=>We(!1),260);return()=>window.clearTimeout(e)},[Oe]);const Ae=i.useRef(null),Ge=i.useCallback(e=>{Ae.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),Xe=i.useRef(null),$e=pe||Oe;i.useEffect(()=>{const e=Ae.current;if(!$e||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Xe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[$e]),i.useLayoutEffect(()=>{const e=Ae.current,t=document.activeElement;if(pe||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Xe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[pe]),i.useEffect(()=>{if(void 0!==I)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ce(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ce(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const _e=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;_e.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Pe(!0);const finish=()=>{_e.current=null,Pe(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});_e.current=()=>{s(),finish()}}i.useEffect(()=>()=>_e.current?.(),[]);const Fe={width:Math.max(0,B),height:Math.max(ge.bar,H??ge.bar)};function resizeTo(e){Me(e),$?.(e)}const Ue=m(y,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ye=Ue.includes("maximize");i.useEffect(()=>{if(ve||null===je)return;const e=window.setTimeout(()=>Re(null),400);return()=>window.clearTimeout(e)},[ve,je]);const qe={minimize:ee??he.minimize,maximize:te??he.maximize,restore:ne??he.restore,close:ie??he.close},Ke=e(u,{os:y,metrics:ge,controls:Ue,maximized:ze,active:ke,labels:qe,onCommand:function command(e){"close"===e?be(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Ie(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Le?.height??W)&&t)return Re(t.getBoundingClientRect().height),void requestAnimationFrame(()=>xe(!0));xe(e)}(!ve):ye(!ze)}}),Je=c(N)?e("span",{id:we,className:"min-w-0 truncate",children:N}):null,Qe=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,Ve=t("div",{className:a("relative flex shrink-0 items-center select-none",d,D&&!ze?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:ge.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:ge.weight,paddingInlineStart:ge.padX,paddingInlineEnd:ge.padEnd,gap:Math.round(.7*ge.title),fontSize:ge.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:fe.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!D||ze)return;const t={...Ne};beginGesture(e,(e,n)=>Ee({x:t.x+e,y:t.y+n}))},onDoubleClick:Ye?()=>ye(!ze):void 0,children:["start"===fe.controlsSide?Ke:null,"center"===fe.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:ge.controlsWidth(Ue.length)+2*ge.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*ge.title)},children:[Qe,Je]})}):t(n,{children:[Qe,Je]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*ge.title)},onPointerDown:e=>e.stopPropagation(),children:L}):null,"end"===fe.controlsSide?Ke:null]}),Ze=ze?{left:0,top:0,width:"100%",height:"100%"}:{left:Ne.x,top:Ne.y,width:Le?.width??O,height:ve?Te??ge.bar:Le?.height??W??je??void 0},et=o({render:re,ref:Ge,props:{role:"group","aria-labelledby":Je?we:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",T>0?l:"",fe.glass&&0===T?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",se),"data-gesture":De?"":void 0,...p(!pe),style:{opacity:pe?void 0:0,...g({os:y,color:me,accent:k,transparency:T,active:ke,elevation:j}),position:"static"===R?"relative":R,...Ze,borderRadius:ze?0:`${ge.radius}px ${ge.radius}px ${ge.radiusBottom}px ${ge.radiusBottom}px`,borderStyle:"solid",borderWidth:ge.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ae},children:t(n,{children:[Ve,e("div",{className:a("min-h-0 flex-1",Z?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:ge.band.side,marginBottom:ge.band.bottom,boxShadow:ge.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...p(ve),children:le}),!P||ze||ve?null:v.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?oe??he.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ze)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ne.x,y:Ne.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Fe.width,o.width+e)),l&&(i=Math.max(Fe.height,o.height+t)),s&&(n=Math.max(Fe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Fe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Ee({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Fe.width,i.width+e),height:Math.max(Fe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ce}});return pe||Oe?et:null});

package/dist/css/area-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <area-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/area-chart';
+@source '../components/box';

package/dist/css/back-top.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <back-top>. Needs `plass-ui/css/base.css` first. */
 @source '../components/back-top';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/bar-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <bar-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/bar-chart';
+@source '../components/box';

package/dist/css/calendar.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <calendar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/calendar';
+@source '../components/button';

package/dist/css/carousel.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <carousel>. Needs `plass-ui/css/base.css` first. */
 @source '../components/carousel';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/color-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <color-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/color-picker';
+@source '../components/button';

package/dist/css/combobox.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <combobox>. Needs `plass-ui/css/base.css` first. */
 @source '../components/combobox';
+@source '../components/chip';

package/dist/css/command-palette.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <command-palette>. Needs `plass-ui/css/base.css` first. */
 @source '../components/command-palette';
+@source '../components/hot-keys';

package/dist/css/confirm.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <confirm>. Needs `plass-ui/css/base.css` first. */
 @source '../components/confirm';
+@source '../components/button';
+@source '../components/modal';

package/dist/css/data-table.css

@@ -1,2 +1,7 @@
 /* Scan manifest for <data-table>. Needs `plass-ui/css/base.css` first. */
 @source '../components/data-table';
+@source '../components/button';
+@source '../components/checkbox';
+@source '../components/pagination';
+@source '../components/skeleton';
+@source '../components/text-field';

package/dist/css/date-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-picker';
+@source '../components/button';

package/dist/css/date-range-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-range-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-range-picker';
+@source '../components/button';

package/dist/css/date-time-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <date-time-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/date-time-picker';
+@source '../components/button';

package/dist/css/floating-action-button.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <floating-action-button>. Needs `plass-ui/css/base.css` first. */
 @source '../components/floating-action-button';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/gallery.css

@@ -1,2 +1,7 @@
 /* Scan manifest for <gallery>. Needs `plass-ui/css/base.css` first. */
 @source '../components/gallery';
+@source '../components/button';
+@source '../components/icon-button';
+@source '../components/image';
+@source '../components/overlay';
+@source '../components/skeleton';

package/dist/css/gauge-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <gauge-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/gauge-chart';
+@source '../components/box';

package/dist/css/heatmap-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <heatmap-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/heatmap-chart';
+@source '../components/box';

package/dist/css/icon-button.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <icon-button>. Needs `plass-ui/css/base.css` first. */
 @source '../components/icon-button';
+@source '../components/button';

package/dist/css/image.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <image>. Needs `plass-ui/css/base.css` first. */
 @source '../components/image';
+@source '../components/overlay';
+@source '../components/skeleton';

package/dist/css/line-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <line-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/line-chart';
+@source '../components/box';

package/dist/css/menubar.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <menubar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/menubar';
+@source '../components/menu';

package/dist/css/pagination.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <pagination>. Needs `plass-ui/css/base.css` first. */
 @source '../components/pagination';
+@source '../components/button';

package/dist/css/pie-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <pie-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/pie-chart';
+@source '../components/box';

package/dist/css/popconfirm.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <popconfirm>. Needs `plass-ui/css/base.css` first. */
 @source '../components/popconfirm';
+@source '../components/button';
+@source '../components/popover';

package/dist/css/scatter-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <scatter-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/scatter-chart';
+@source '../components/box';

package/dist/css/scroll-zone.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <scroll-zone>. Needs `plass-ui/css/base.css` first. */
 @source '../components/scroll-zone';
+@source '../components/button';
+@source '../components/icon-button';

package/dist/css/sidebar.css

@@ -1,2 +1,5 @@
 /* Scan manifest for <sidebar>. Needs `plass-ui/css/base.css` first. */
 @source '../components/sidebar';
+@source '../components/button';
+@source '../components/drawer';
+@source '../components/icon-button';

package/dist/css/sparkline.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <sparkline>. Needs `plass-ui/css/base.css` first. */
 @source '../components/sparkline';
+@source '../components/box';

package/dist/css/spoiler.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <spoiler>. Needs `plass-ui/css/base.css` first. */
 @source '../components/spoiler';
+@source '../components/button';

package/dist/css/stat.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <stat>. Needs `plass-ui/css/base.css` first. */
 @source '../components/stat';
+@source '../components/skeleton';

package/dist/css/time-picker.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <time-picker>. Needs `plass-ui/css/base.css` first. */
 @source '../components/time-picker';
+@source '../components/button';

package/dist/css/timeline-chart.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <timeline-chart>. Needs `plass-ui/css/base.css` first. */
 @source '../components/timeline-chart';
+@source '../components/box';

package/dist/css/tour.css

@@ -1,2 +1,3 @@
 /* Scan manifest for <tour>. Needs `plass-ui/css/base.css` first. */
 @source '../components/tour';
+@source '../components/button';

package/dist/css/transfer.css

@@ -1,2 +1,6 @@
 /* Scan manifest for <transfer>. Needs `plass-ui/css/base.css` first. */
 @source '../components/transfer';
+@source '../components/button';
+@source '../components/checkbox';
+@source '../components/icon-button';
+@source '../components/text-field';

package/dist/css/tree-select.css

@@ -1,2 +1,4 @@
 /* Scan manifest for <tree-select>. Needs `plass-ui/css/base.css` first. */
 @source '../components/tree-select';
+@source '../components/text-field';
+@source '../components/tree';

package/dist/hooks/usePlElementSize.d.ts

@@ -20,7 +20,10 @@ export interface PlElementSize {
  *
  * `null` until there is an element to measure, which is the honest answer on a
  * server and on the first render: guessing `0` there would let a caller divide
- * by it.
+ * by it. The ref is read again after every render, so an element that is
+ * attached later — `loading ? <Spinner /> : <div ref={box}>` — or swapped for
+ * another is measured from the moment it is there, and the answer goes back to
+ * `null` while there is none.
  *
  * @example
  * const box = React.useRef<HTMLDivElement>(null);

package/dist/hooks/usePlElementSize.js

@@ -1 +1 @@
-"use client";import*as t from"react";export function usePlElementSize(e){const[n,i]=t.useState(null);return t.useLayoutEffect(()=>{const t=e.current;if(!t)return;const read=()=>{const e=function contentBoxOf(t){const e=getComputedStyle(t),n=parseFloat(e.paddingInlineStart)+parseFloat(e.paddingInlineEnd),i=parseFloat(e.paddingBlockStart)+parseFloat(e.paddingBlockEnd);return{width:Math.max(0,t.clientWidth-n),height:Math.max(0,t.clientHeight-i)}}(t);i(t=>t?.width===e.width&&t.height===e.height?t:e)};if(read(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(read);return n.observe(t),()=>n.disconnect()},[e]),n}
+"use client";import*as e from"react";export function usePlElementSize(t){const[n,r]=e.useState(null),[i,o]=e.useState(null);return e.useLayoutEffect(()=>{t.current!==i&&o(t.current)}),e.useLayoutEffect(()=>{if(!i)return void r(null);const read=()=>{const e=function contentBoxOf(e){const t=getComputedStyle(e),n=parseFloat(t.paddingInlineStart)+parseFloat(t.paddingInlineEnd),r=parseFloat(t.paddingBlockStart)+parseFloat(t.paddingBlockEnd);return{width:Math.max(0,e.clientWidth-n),height:Math.max(0,e.clientHeight-r)}}(i);r(t=>t?.width===e.width&&t.height===e.height?t:e)};if(read(),"undefined"==typeof ResizeObserver)return;const e=new ResizeObserver(read);return e.observe(i),()=>e.disconnect()},[i]),n}

package/dist/hooks/usePlHotKeys.d.ts

@@ -55,7 +55,7 @@ export interface PlHotKeysOptions {
  * this way since it existed, with a private copy of the matcher — and an
  * application's own shortcuts are the reason it is public.
  *
- * Three rules it shares with the `hotKeys` prop:
+ * Five rules it shares with the `hotKeys` prop:
  *
  * - **A modifier is checked in both directions.** `Enter` does not fire on
  *   `Shift+Enter`, and `Mod+K` does not fire on `Mod+Shift+K`.
@@ -66,6 +66,10 @@ export interface PlHotKeysOptions {
  * - **These are chords rather than letters.** A single unmodified key is
  *   allowed and is sometimes right (`?` for help), but it is the case
  *   `whileTyping` is about.
+ * - **A chord names the key, not the character it types.** `Alt+K` answers
+ *   the `˚` Option+K types on a Mac, and `?` needs no `Shift+`.
+ * - **A key an input method is composing is left alone**, so the Enter that
+ *   commits a syllable fires nothing.
  *
  * The handlers are read fresh on every keystroke, so an inline object literal
  * costs nothing and a handler closing over current state is never stale. What

package/dist/hooks/usePlHotKeys.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{editsText as n,hasHardModifier as t,isTypingTarget as r,matchesHotKey as o}from"../internal/keys.js";export function usePlHotKeys(i,u={}){const{enabled:s=!0,target:f,whileTyping:c=!1}=u,l=e.useRef(i);e.useEffect(()=>{l.current=i});const d=Object.keys(i??{}).join("\n");e.useEffect(()=>{const e=function resolve(e){return void 0===e?"undefined"==typeof window?null:window:null===e?null:"current"in e?e.current:e}(f);if(!s||!e||""===d)return;const i=d.split("\n"),onKeyDown=e=>{const u=e;if(!u.defaultPrevented)for(const e of i)if(o(u,e)){if(!c&&!t(e)&&n(u.key)&&r(u.target))return;return u.preventDefault(),void l.current?.[e]?.()}};return e.addEventListener("keydown",onKeyDown),()=>e.removeEventListener("keydown",onKeyDown)},[d,f,s,c])}
+"use client";import*as e from"react";import{editsText as n,hasHardModifier as t,isComposingKey as r,isTypingTarget as o,matchesHotKey as i}from"../internal/keys.js";export function usePlHotKeys(u,s={}){const{enabled:f=!0,target:c,whileTyping:l=!1}=s,d=e.useRef(u);e.useEffect(()=>{d.current=u});const a=Object.keys(u??{}).join("\n");e.useEffect(()=>{const e=function resolve(e){return void 0===e?"undefined"==typeof window?null:window:null===e?null:"current"in e?e.current:e}(c);if(!f||!e||""===a)return;const u=a.split("\n"),onKeyDown=e=>{const s=e;if(!s.defaultPrevented&&!r(s))for(const e of u)if(i(s,e)){if(!l&&!t(e)&&n(s.key)&&o(s.target))return;return s.preventDefault(),void d.current?.[e]?.()}};return e.addEventListener("keydown",onKeyDown),()=>e.removeEventListener("keydown",onKeyDown)},[a,c,f,l])}