plass-ui 1.2.0 → 1.3.0

package/dist/components/timeline/PlTimeline.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{cx as a,hasContent as s,iconClasses as o,metaTextClasses as n,sheetBodyClasses as i,sheetTitleClasses as d,surfaceSlots as p,transitionClasses as c}from"../../internal/styles.js";const m=/* @__PURE__ */r.createContext(null),u=/* @__PURE__ */r.createContext({index:0,last:!1}),x={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},f={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},b={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},g={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}},v={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},h={complete:"[background-image:var(--p-fill)] text-(--p-on-solid)",current:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]",upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"},y={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"},N={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export const PlTimelineItem=/* @__PURE__ */r.forwardRef(function PlTimelineItem({title:t,meta:_,bullet:w,status:z,color:P,connector:j="solid",className:C,children:T,...k},I){const R=r.useContext(m),{index:$,last:A}=r.useContext(u),M=R?.size??"md",q=R?.density??"default",B=R?.orientation??"vertical",D=P??R?.color??"primary",E=R?.active??null,F=z??(null===E?"upcoming":$<E?"complete":$===E?"current":"upcoming"),G="horizontal"===B,H="none"!==j&&!A,J=e("span",{"aria-hidden":"true",className:a("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",h[F],c,o),children:w}),K=H?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",G?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[j],y[F],c)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[s(t)||s(_)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[s(t)?e("span",{className:a("font-semibold",d[M],N[F],c),children:t}):null,s(_)?e("span",{className:a("text-(--plass-muted-fg)",n[M]),children:_}):null]}):null,s(T)?e("div",{className:a("text-(--plass-muted-fg)",i[M]),children:T}):null]});return l("li",{ref:I,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",A?"":g[q][M]):a("flex",f[M],A?"":b[q][M]),C),style:{"--p-bullet":x[M],...p(D,0),"--p-fill":`var(--plass-${D}-fill)`,"--p-on-solid":`var(--plass-${D}-on-solid)`},...k,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */r.forwardRef(function PlTimeline({active:l,size:s="md",color:o="primary",density:n="default",orientation:i="vertical",render:d,className:c,style:x,children:f,...b},g){const v=r.Children.toArray(f),h=v.length,y=r.useMemo(()=>({size:s,density:n,orientation:i,color:o,active:l??null}),[s,n,i,o,l]),N=t({render:d??e("ol",{}),ref:g,props:{role:"list",className:a("flex","horizontal"===i?"flex-row":"flex-col",c),style:{...p(o,0),...x},children:v.map((l,r)=>e(u.Provider,{value:{index:r,last:r===h-1},children:l},r)),...b}});return e(m.Provider,{value:y,children:N})});
+"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{useRender as s}from"@base-ui/react/use-render";import{cx as a,hasContent as n,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";const N=/* @__PURE__ */t.createContext(null),g=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},j={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:w,status:P,color:C,connector:T="solid",className:_,children:I,...R},$){const k=t.useContext(N),{index:A,last:M}=t.useContext(g),q=k?.size??"md",B=k?.density??"default",D=k?.orientation??"vertical",E=C??k?.color??"primary",F=P??h(A,k?.active??null),G="horizontal"===D,H="none"!==T&&!M,J=e("span",{"aria-hidden":"true",className:a("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",x[F],m,i),children:w}),K=H?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",G?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[F],m)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[n(r)||n(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[n(r)?e("span",{className:a("font-semibold",p[q],y[F],m),children:r}):null,n(s)?e("span",{className:a("text-(--plass-muted-fg)",o[q]),children:s}):null]}):null,n(I)?e("div",{className:a("text-(--plass-muted-fg)",c[q]),children:I}):null]});return l("li",{ref:$,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",M?"":j[B][q]):a("flex",u[q],M?"":z[B][q]),_),style:{"--p-bullet":f[q],...d(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...R,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:n,color:i,density:o,orientation:c="vertical",render:p,className:m,style:u,children:f,...x},b){const v=r(),h=n??v.size??"md",y=i??v.color??"primary",z=o??v.density??"default",j=t.Children.toArray(f),w=j.length,P=t.useMemo(()=>({size:h,density:z,orientation:c,color:y,active:l??null}),[h,z,c,y,l]),C=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===c?"flex-row":"flex-col",m),style:{...d(y,0),...u},children:j.map((l,t)=>e(g.Provider,{value:{index:t,last:t===w-1},children:l},t)),...x}});return e(N.Provider,{value:P,children:C})});

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

@@ -129,4 +129,4 @@ export declare function usePlToast(): {
  * swipe, the F6 focus hotkey, and the live region that makes a message which
  * appeared out of nowhere reach a screen reader at all.
  */
-export declare function PlToastProvider({ variant, size, color, density, position, timeout, limit, width, closeLabel, children }: PlToastProviderProps): React.JSX.Element;
+export declare function PlToastProvider({ variant, size: sizeProp, color: colorProp, density: densityProp, position, timeout, limit, width, closeLabel, children }: PlToastProviderProps): React.JSX.Element;

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{Toast as o}from"@base-ui/react/toast";import{CloseIcon as a,severityIcon as i}from"../../internal/icons.js";import{controlSlots as r,focusRingClasses as n,glassClasses as l,hasContent as c,iconClasses as p,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as g,sheetSectionGapClasses as v,sheetTitleClasses as x}from"../../internal/styles.js";const b={"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"},y={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[l,"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__ */[l,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},w={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=o.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:l,color:b,size:j,density:N,closeLabel:T,swipeDirection:M}){const z=e.data?.variant??l??"glass",O=e.data?.color??b,P=void 0===e.data?.icon?i(O):e.data.icon,k=w[z],$=c(e.title);return s(o.Root,{toast:e,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",h[N??"default"][j],g[N??"default"][j],m[j],v[j],u[j],y[z],p,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",n,"[outline:none]",e.data?.className??""].filter(Boolean).join(" "),style:{...r(O,3,z),...e.data?.style},children:[c(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 ${f[j]}`,children:[t(o.Title,{className:`plass-title font-semibold ${x[j]} ${k}`}),t(o.Description,{className:$&&"solid"!==z?"text-(--plass-muted-fg)":""})]}),t(o.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",n,d[j]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(o.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",n].join(" "),children:t(a,{})})})]})}function ToastViewport(s){const{toasts:e}=o.useToastManager(),{position:a,width:i,...r}=s,n=[a.startsWith("top")?"up":"down","left","right"];return t(o.Portal,{children:t(o.Viewport,{className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",b[a]].join(" "),children:e.map(s=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof i?`${i}px`:i},children:t(ToastItem,{toast:s,swipeDirection:n,...r})},s.id))})})}export function PlToastProvider({variant:e="glass",size:a="md",color:i="primary",density:r="default",position:n="bottom-end",timeout:l=5e3,limit:c=3,width:p=380,closeLabel:d="Close",children:m}){return s(o.Provider,{timeout:l,limit:c,children:[m,t(ToastViewport,{position:n,variant:e,size:a,color:i,density:r,width:p,closeLabel:d})]})}
+"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{Toast as a}from"@base-ui/react/toast";import{CloseIcon as i,severityIcon as r}from"../../internal/icons.js";import{controlSlots as n,focusRingClasses as l,glassClasses as c,hasContent as p,iconClasses as d,metaTextClasses as m,radiusClasses as u,sheetBodyClasses as f,sheetHeaderGapClasses as h,sheetPaddingXClasses as g,sheetPaddingYClasses as v,sheetSectionGapClasses as x,sheetTitleClasses as b}from"../../internal/styles.js";const y={"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"},w={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[c,"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__ */[c,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},j={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=a.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:c,size:y,density:N,closeLabel:T,swipeDirection:M}){const z=e.data?.variant??o??"glass",O=e.data?.color??c,P=void 0===e.data?.icon?r(O):e.data.icon,k=j[z],$=p(e.title);return s(a.Root,{toast:e,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",g[N??"default"][y],v[N??"default"][y],u[y],x[y],f[y],w[z],d,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",l,"[outline:none]",e.data?.className??""].filter(Boolean).join(" "),style:{...n(O,3,z),...e.data?.style},children:[p(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 ${h[y]}`,children:[t(a.Title,{className:`plass-title font-semibold ${b[y]} ${k}`}),t(a.Description,{className:$&&"solid"!==z?"text-(--plass-muted-fg)":""})]}),t(a.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",l,m[y]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(a.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",l].join(" "),children:t(i,{})})})]})}function ToastViewport(s){const{toasts:e}=a.useToastManager(),{position:o,width:i,...r}=s,n=[o.startsWith("top")?"up":"down","left","right"];return t(a.Portal,{children:t(a.Viewport,{className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",y[o]].join(" "),children:e.map(s=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof i?`${i}px`:i},children:t(ToastItem,{toast:s,swipeDirection:n,...r})},s.id))})})}export function PlToastProvider({variant:e="glass",size:i,color:r,density:n,position:l="bottom-end",timeout:c=5e3,limit:p=3,width:d=380,closeLabel:m="Close",children:u}){const f=o(),h=i??f.size??"md",g=r??f.color??"primary",v=n??f.density??"default";return s(a.Provider,{timeout:c,limit:p,children:[u,t(ToastViewport,{position:l,variant:e,size:h,color:g,density:v,width:d,closeLabel:m})]})}

package/dist/components/toggle/PlToggle.js

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

package/dist/components/toolbar/PlToolbar.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{cx as o,hasContent as a,radiusClasses as l,sheetPaddingXClasses as n,sheetPaddingYClasses as c,sheetRestClasses as d,sheetSectionGapClasses as m,surfaceSlots as p,transitionClasses as f}from"../../internal/styles.js";const b=d,x={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},v={top:"border-b [border-color:var(--plass-divider)]",bottom:"border-t [border-color:var(--plass-divider)]"};export const PlToolbar=/* @__PURE__ */s.forwardRef(function PlToolbar({variant:s="glass",size:d="md",color:u="primary",density:h="default",elevation:y=0,position:w="static",side:g="top",divider:k=!1,start:z,end:N,render:j,className:P,style:T,children:F,...R},q){const A=o("flex w-full min-w-0 items-center",n[h][d],c[h][d],m[d],"static"===w?l[d]:"",b[s],k?v[g]:"",x[w][g],f,P);return i({render:j??e("div",{}),ref:q,props:{className:A,style:{...p(u,y),...T},children:r(t,{children:[a(z)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:z}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:F}),a(N)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:N}):null]}),...R}})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as a,hasContent as l,radiusClasses as n,sheetPaddingXClasses as d,sheetPaddingYClasses as c,sheetRestClasses as m,sheetSectionGapClasses as p,surfaceSlots as f,transitionClasses as b}from"../../internal/styles.js";const x=m,u={static:{top:"",bottom:""},sticky:{top:"sticky top-0 z-20",bottom:"sticky bottom-0 z-20"},fixed:{top:"fixed inset-x-0 top-0 z-30",bottom:"fixed inset-x-0 bottom-0 z-30"}},v={top:"border-b [border-color:var(--plass-divider)]",bottom:"border-t [border-color:var(--plass-divider)]"};export const PlToolbar=/* @__PURE__ */s.forwardRef(function PlToolbar({variant:s="glass",size:m,color:y,density:h,elevation:w=0,position:z="static",side:g="top",divider:j=!1,start:k,end:N,render:P,className:T,style:F,children:R,...q},A){const B=i(),C=m??B.size??"md",D=y??B.color??"primary",E=h??B.density??"default",G=a("flex w-full min-w-0 items-center",d[E][C],c[E][C],p[C],"static"===z?n[C]:"",x[s],j?v[g]:"",u[z][g],b,T);return o({render:P??e("div",{}),ref:A,props:{className:G,style:{...f(D,w),...F},children:r(t,{children:[l(k)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:k}):null,e("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:R}),l(N)?e("div",{className:"flex min-w-0 shrink-0 items-center gap-2",children:N}):null]}),...q}})});

package/dist/components/tooltip/PlTooltip.d.ts

@@ -89,4 +89,4 @@ export type PlTooltipProviderProps = React.ComponentProps<typeof BaseUITooltip.P
  * this component wires both, and drops the reference while it is closed rather
  * than pointing at an element that is not in the document.
  */
-export declare function PlTooltip({ content, children, size, color, density, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style, ...props }: PlTooltipProps): React.JSX.Element;
+export declare function PlTooltip({ content, children, size: sizeProp, color: colorProp, density: densityProp, side, align, sideOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, disabled, className, style, ...props }: PlTooltipProps): React.JSX.Element;

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{Tooltip as t}from"@base-ui/react/tooltip";import{glassClasses as o,metaTextClasses as l,paddingXClasses as i,radiusClasses as r,surfaceSlots as n}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const d=/* @__PURE__ */[o,"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(" "),p={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},c={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:o,children:m,size:g="sm",color:h="secondary",density:f="default",side:y="top",align:u="center",sideOffset:x=6,delay:b,closeDelay:v,arrow:j=!0,open:w,defaultOpen:P,onOpenChange:O,disabled:z=!1,className:N,style:T,...B}){const C=c[g],D=e.useId(),[L,M]=e.useState(P??!1),_=w??L;return a(t.Root,{open:w,defaultOpen:P,onOpenChange:s=>{M(s),O?.(s)},children:[s(t.Trigger,{render:m,delay:b,closeDelay:v,disabled:z,"aria-describedby":_?D:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:y,align:u,sideOffset:x,children:a(t.Popup,{id:D,role:"tooltip",className:[d,r[g],i[f][g],p[g],l[g],N??""].filter(Boolean).join(" "),style:{...n(h,3),...T},...B,children:[j?s(t.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:C,height:C/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,o]})})})]})}
+"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]})})})]})}

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{PlCheckbox as t}from"../checkbox/PlCheckbox.js";import{PlIconButton as s}from"../icon-button/PlIconButton.js";import{PlTextField as r}from"../text-field/PlTextField.js";import{ArrowRightIcon as i}from"../../internal/icons.js";import{searchText as n}from"../../internal/search.js";import{cx as o,fieldRestClasses as c,hasContent as d,metaTextClasses as h,paddingXClasses as m,radiusClasses as u,surfaceSlots as b,toLength as f}from"../../internal/styles.js";const v={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},p={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function Panel({title:a,rows:s,ticked:i,onTick:n,onTickAll:d,search:f,onSearch:g,searchable:y,disabled:x,height:k,emptyLabel:w,searchLabel:S,selectAllLabel:L,style:N}){const{variant:T,size:j,color:A,density:C}=N,z=s.filter(e=>!e.disabled),P=z.filter(e=>i.has(e.value)),M=z.length>0&&P.length===z.length,V=P.length>0&&!M,_=m[C][j];return l("div",{className:o("flex min-w-0 flex-col overflow-hidden",c[T],u[j]),style:b(A,0),children:[l("div",{className:o("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",_,v[j]),children:[e(t,{size:j,color:A,checked:M,indeterminate:V,disabled:x||0===z.length,"aria-label":L,onCheckedChange:e=>d(!0===e)}),e("span",{className:o("min-w-0 flex-1 truncate font-medium",h[j]),children:a}),l("span",{className:o("shrink-0 tabular-nums text-(--plass-muted-fg)",h[j]),children:[P.length,"/",s.length]})]}),y?e("div",{className:o(_,v[j]),children:e(r,{size:j,color:A,density:C,fullWidth:!0,variant:"ghost",disabled:x,placeholder:S,"aria-label":S,value:f,onChange:e=>g(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:o("flex flex-col",_,v[j]),children:0===s.length?e("span",{className:o("text-(--plass-muted-fg)",h[j],p[j]),children:w}):s.map(l=>e(t,{size:j,color:A,className:p[j],label:l.label,checked:i.has(l.value),disabled:x||l.disabled,onCheckedChange:e=>n(l.value,!0===e)},l.value))})})]})}function narrow(e,l){const a=n(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||n(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:t,value:r,defaultValue:n,onValueChange:c,sourceLabel:h="Available",targetLabel:m="Selected",searchable:u=!1,searchLabel:b="Search",emptyLabel:v="Nothing here",selectAllLabel:p="Select all",toTargetLabel:g="Move to selected",toSourceLabel:y="Move to available",height:x=220,disabled:k=!1,variant:w="glass",size:S="md",color:L="primary",density:N="default",className:T,...j},A){const[C,z]=a.useState(n??[]),P=r??C,[M,V]=a.useState(()=>new Set),[_,B]=a.useState(""),[F,I]=a.useState(""),R=a.useMemo(()=>new Set(P),[P]),W=a.useMemo(()=>t.filter(e=>!R.has(e.value)),[t,R]),q=a.useMemo(()=>t.filter(e=>R.has(e.value)),[t,R]),tick=(e,l)=>{V(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},tickAll=(e,l)=>{V(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&&M.has(e.value));if(0===a.length)return;const s=new Set(a.map(e=>e.value)),i=l?t.filter(e=>R.has(e.value)||s.has(e.value)).map(e=>e.value):P.filter(e=>!s.has(e));V(e=>new Set([...e].filter(e=>!s.has(e)))),(e=>{void 0===r&&z(e),c?.(e)})(i)},D=narrow(W,_),E=narrow(q,F),G=D.some(e=>!e.disabled&&M.has(e.value)),H=E.some(e=>!e.disabled&&M.has(e.value)),J=f(x),K={variant:w,size:S,color:L,density:N},O="ghost"===w?"ghost":"glass";return l("div",{ref:A,className:o("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",T),...j,children:[e(Panel,{title:d(h)?h:"Available",rows:D,ticked:M,onTick:tick,onTickAll:e=>tickAll(D,e),search:_,onSearch:B,searchable:u,disabled:k,height:J,emptyLabel:v,searchLabel:b,selectAllLabel:p,style:K}),l("div",{className:"flex flex-col gap-2",children:[e(s,{size:S,color:L,variant:O,label:g,disabled:k||!G,onClick:()=>move(D,!0),icon:e(i,{})}),e(s,{size:S,color:L,variant:O,label:y,disabled:k||!H,onClick:()=>move(E,!1),icon:e("span",{className:"flex rotate-180",children:e(i,{})})})]}),e(Panel,{title:d(m)?m:"Selected",rows:E,ticked:M,onTick:tick,onTickAll:e=>tickAll(E,e),search:F,onSearch:I,searchable:u,disabled:k,height:J,emptyLabel:v,searchLabel:b,selectAllLabel:p,style:K})]})});
+"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{PlCheckbox as s}from"../checkbox/PlCheckbox.js";import{PlIconButton as r}from"../icon-button/PlIconButton.js";import{PlTextField as i}from"../text-field/PlTextField.js";import{ArrowRightIcon as n}from"../../internal/icons.js";import{searchText as o}from"../../internal/search.js";import{cx as c,fieldRestClasses as d,hasContent as h,metaTextClasses as m,paddingXClasses as u,radiusClasses as b,surfaceSlots as f,toLength as v}from"../../internal/styles.js";const p={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},g={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function Panel({title:a,rows:t,ticked:r,onTick:n,onTickAll:o,search:h,onSearch:v,searchable:y,disabled:x,height:k,emptyLabel:w,searchLabel:S,selectAllLabel:L,style:N}){const{variant:j,size:T,color:z,density:A}=N,C=t.filter(e=>!e.disabled),P=C.filter(e=>r.has(e.value)),M=C.length>0&&P.length===C.length,V=P.length>0&&!M,_=u[A][T];return l("div",{className:c("flex min-w-0 flex-col overflow-hidden",d[j],b[T]),style:f(z,0),children:[l("div",{className:c("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",_,p[T]),children:[e(s,{size:T,color:z,checked:M,indeterminate:V,disabled:x||0===C.length,"aria-label":L,onCheckedChange:e=>o(!0===e)}),e("span",{className:c("min-w-0 flex-1 truncate font-medium",m[T]),children:a}),l("span",{className:c("shrink-0 tabular-nums text-(--plass-muted-fg)",m[T]),children:[P.length,"/",t.length]})]}),y?e("div",{className:c(_,p[T]),children:e(i,{size:T,color:z,density:A,fullWidth:!0,variant:"ghost",disabled:x,placeholder:S,"aria-label":S,value:h,onChange:e=>v(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:c("flex flex-col",_,p[T]),children:0===t.length?e("span",{className:c("text-(--plass-muted-fg)",m[T],g[T]),children:w}):t.map(l=>e(s,{size:T,color:z,className:g[T],label:l.label,checked:r.has(l.value),disabled:x||l.disabled,onCheckedChange:e=>n(l.value,!0===e)},l.value))})})]})}function narrow(e,l){const a=o(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||o(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:s,value:i,defaultValue:o,onValueChange:d,sourceLabel:m="Available",targetLabel:u="Selected",searchable:b=!1,searchLabel:f="Search",emptyLabel:p="Nothing here",selectAllLabel:g="Select all",toTargetLabel:y="Move to selected",toSourceLabel:x="Move to available",height:k=220,disabled:w=!1,variant:S="glass",size:L,color:N,density:j,className:T,...z},A){const C=t(),P=L??C.size??"md",M=N??C.color??"primary",V=j??C.density??"default",[_,B]=a.useState(o??[]),F=i??_,[I,R]=a.useState(()=>new Set),[W,q]=a.useState(""),[D,E]=a.useState(""),G=a.useMemo(()=>new Set(F),[F]),H=a.useMemo(()=>s.filter(e=>!G.has(e.value)),[s,G]),J=a.useMemo(()=>s.filter(e=>G.has(e.value)),[s,G]),tick=(e,l)=>{R(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},tickAll=(e,l)=>{R(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&&I.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),r=l?s.filter(e=>G.has(e.value)||t.has(e.value)).map(e=>e.value):F.filter(e=>!t.has(e));R(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===i&&B(e),d?.(e)})(r)},K=narrow(H,W),O=narrow(J,D),Q=K.some(e=>!e.disabled&&I.has(e.value)),U=O.some(e=>!e.disabled&&I.has(e.value)),X=v(k),Y={variant:S,size:P,color:M,density:V},Z="ghost"===S?"ghost":"glass";return l("div",{ref:A,className:c("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",T),...z,children:[e(Panel,{title:h(m)?m:"Available",rows:K,ticked:I,onTick:tick,onTickAll:e=>tickAll(K,e),search:W,onSearch:q,searchable:b,disabled:w,height:X,emptyLabel:p,searchLabel:f,selectAllLabel:g,style:Y}),l("div",{className:"flex flex-col gap-2",children:[e(r,{size:P,color:M,variant:Z,label:y,disabled:w||!Q,onClick:()=>move(K,!0),icon:e(n,{})}),e(r,{size:P,color:M,variant:Z,label:x,disabled:w||!U,onClick:()=>move(O,!1),icon:e("span",{className:"flex rotate-180",children:e(n,{})})})]}),e(Panel,{title:h(u)?u:"Selected",rows:O,ticked:I,onTick:tick,onTickAll:e=>tickAll(O,e),search:D,onSearch:E,searchable:b,disabled:w,height:X,emptyLabel:p,searchLabel:f,selectAllLabel:g,style:Y})]})});

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** One node. A branch is a node with `children`; a leaf is one without. */
+export interface PlTreeNode {
+    /** What identifies it. Unique across the whole tree. */
+    id: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /** Its own children. An **empty array is a branch with nothing in it**, which
+     * is not the same as a leaf: the first opens and shows nothing, the second
+     * has no twisty at all. `undefined` is the leaf. */
+    children?: readonly PlTreeNode[];
+    /** In the tree but not selectable, and not a stop for the arrow keys. */
+    disabled?: boolean;
+}
+/** How many rows a click can leave selected. */
+export type PlTreeSelection = 'none' | 'single' | 'multiple';
+export interface PlTreeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** The whole tree, as data. */
+    items: readonly PlTreeNode[];
+    /** The ids of the branches that are open. Use with `onExpandedChange` to control them. */
+    expanded?: readonly string[];
+    /** The branches that start open, for an uncontrolled tree. */
+    defaultExpanded?: readonly string[];
+    onExpandedChange?: (expanded: string[]) => void;
+    /** The ids of the selected rows. Use with `onSelectedChange` to control them. */
+    selected?: readonly string[];
+    /** What starts selected, for an uncontrolled tree. */
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (selected: string[]) => void;
+    /**
+     * How many rows a click can leave selected.
+     *
+     * `single` by default. `none` makes the tree a browser rather than a
+     * chooser — every row still expands, and a click reports through
+     * `onItemClick` without anything staying lit.
+     * @default 'single'
+     */
+    selection?: PlTreeSelection;
+    /** Called when a row is clicked, selectable or not. */
+    onItemClick?: (node: PlTreeNode) => void;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * A hierarchy, opened one branch at a time.
+ *
+ * It takes its nodes as **data** rather than as children, which is the opposite
+ * of what most of this library does and is the right way round here for one
+ * reason: a tree is recursive, and recursion written in JSX is a component
+ * every caller has to write for themselves. `PlTable` takes its columns the
+ * same way and for the same reason.
+ *
+ * The keyboard is the ARIA tree pattern and it is most of what makes this a
+ * tree rather than a nested list: **one tab stop** for the whole thing, the up
+ * and down arrows walking the rows that are actually visible, and the left and
+ * right arrows opening a branch, stepping into it, and going back out to the
+ * parent. A tree where Tab walked four hundred rows would be one nobody reaches
+ * the end of.
+ */
+export declare const PlTree: React.ForwardRefExoticComponent<PlTreeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tree/PlTree.js

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

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

@@ -0,0 +1,2 @@
+export { PlTree } from './PlTree.js';
+export type { PlTreeNode, PlTreeProps, PlTreeSelection } from './PlTree.js';

package/dist/components/tree/index.js

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

package/dist/components/visually-hidden/PlVisuallyHidden.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export interface PlVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Brings the content back into the page while anything inside it has the
+     * focus, and clips it again as soon as the focus leaves.
+     *
+     * Off by default, because the ordinary use of this component is a name that
+     * is never meant to be seen. The exception is the one element that *must*
+     * appear when it is reached — a skip link — and there is no way for a caller
+     * to add it from the outside: the clip is `position: absolute`, so revealing
+     * it means putting the element back in the flow, which a `className` cannot
+     * do without also fighting the class it is trying to override.
+     *
+     * `:focus-within` rather than `:focus`, because the thing being tabbed to is
+     * almost always a link *inside* the box rather than the box itself — and
+     * `:focus-within` matches the element when it holds the focus too, so the
+     * narrower case is covered by the wider one.
+     * @default false
+     */
+    focusable?: boolean;
+    /**
+     * Renders something other than a `<span>`: `render={<div />}`,
+     * `render={<h2 />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content for a screen reader and for nobody else.
+ *
+ * It is not a styling escape hatch and it is not `display: none`. The two
+ * obvious ways to hide something — `hidden` and `opacity: 0` — are both wrong
+ * in the same place: the first takes the text off the accessibility tree along
+ * with the screen, which is the one thing this component exists to avoid, and
+ * the second leaves a clickable ghost the size of the words. A one-pixel
+ * clipped box is the only form that is absent to a sighted reader and present
+ * to every other kind.
+ *
+ * What it is for is the sentence a control cannot say out loud — the word
+ * "Close" on a button that draws an ✕, the unit after a number, the change of
+ * context on a link that says "read more". The library already reaches for this
+ * inside a dozen components; this is the same rule, spelled once, for the
+ * caller's own markup.
+ */
+export declare const PlVisuallyHidden: React.ForwardRefExoticComponent<PlVisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/visually-hidden/PlVisuallyHidden.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as i from"react";import{useRender as r}from"@base-ui/react/use-render";import{cx as s,srOnlyClasses as n}from"../../internal/styles.js";const o=/* @__PURE__ */["focus-within:static focus-within:size-auto","focus-within:overflow-visible focus-within:whitespace-normal","focus-within:[clip-path:none]"].join(" ");export const PlVisuallyHidden=/* @__PURE__ */i.forwardRef(function PlVisuallyHidden({focusable:i=!1,render:t,className:a,children:c,...l},f){return r({render:t??e("span",{}),ref:f,props:{className:s(n,i?o:"",a),children:c,...l}})});

package/dist/components/visually-hidden/index.d.ts

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

package/dist/components/visually-hidden/index.js

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

package/dist/css/back-top.css

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

package/dist/css/calendar.css

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

package/dist/css/confirm.css

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

package/dist/css/empty.css

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

package/dist/css/image.css

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

package/dist/css/popconfirm.css

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

package/dist/css/stat.css

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

package/dist/css/stepper.css

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

package/dist/css/tree.css

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

package/dist/css/visually-hidden.css

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

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { usePlBreakpoint, usePlBreakpointValue } from './usePlBreakpoint.js';
+export { usePlColorScheme } from './usePlColorScheme.js';
+export type { PlColorScheme, PlColorSchemeOptions, PlColorSchemeResult, PlResolvedColorScheme } from './usePlColorScheme.js';
+export { usePlHotKeys } from './usePlHotKeys.js';
+export type { PlHotKeysOptions, PlHotKeysTarget } from './usePlHotKeys.js';
+export { usePlMediaQuery } from './usePlMediaQuery.js';
+export { usePlReducedMotion } from './usePlReducedMotion.js';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{usePlBreakpoint,usePlBreakpointValue}from"./usePlBreakpoint.js";export{usePlColorScheme}from"./usePlColorScheme.js";export{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";

package/dist/hooks/usePlBreakpoint.d.ts

@@ -0,0 +1,38 @@
+import type { PlassBreakpoint, PlassResponsive } from '../types.js';
+/**
+ * Which rung of the breakpoint ladder the window is on.
+ *
+ * Four queries rather than one `innerWidth` read, and deliberately: a width
+ * measured in JavaScript is a number that has to be compared against a `rem`,
+ * and a `rem` is whatever the reader has set their font size to. `matchMedia`
+ * asks the same engine the stylesheet asks, so a component that switches at
+ * `md` here switches with the `md:` utilities beside it rather than a few
+ * pixels away from them.
+ *
+ * **`xs` is the server's answer**, and the first one a browser renders. See
+ * `usePlMediaQuery` for what follows from that.
+ */
+export declare function usePlBreakpoint(): PlassBreakpoint;
+/**
+ * A `PlassResponsive` value, resolved for the width the window is at.
+ *
+ * The same shape and the same rule as `PlGrid`'s own props: a bare value
+ * applies everywhere, and a map applies each entry **from its own breakpoint
+ * up**, so `{ xs: 1, md: 3 }` is `1` on a phone and `3` from 48rem. An entry
+ * cascades to the rungs above it, which is what keeps a responsive value to the
+ * breakpoints it actually names.
+ *
+ * It exists because there is a class of decision CSS cannot make — how many
+ * items to fetch, which of two components to mount, how many characters to
+ * truncate at — and writing it out by hand means repeating the ladder in
+ * numbers a stylesheet will later disagree with.
+ *
+ * `undefined` when the map named no rung at or below the current one:
+ * `{ lg: 3 }` on a phone is not `3`, and guessing a value the caller did not
+ * write would be worse than saying so.
+ *
+ * An object is read as a **map**, exactly as it is in a responsive prop — so a
+ * value that is itself an object has to be wrapped in a map to be passed
+ * through: `{ xs: { … } }`.
+ */
+export declare function usePlBreakpointValue<T>(value: PlassResponsive<T>): T | undefined;

package/dist/hooks/usePlBreakpoint.js

@@ -0,0 +1 @@
+"use client";import{breakpointMap as e,breakpoints as t}from"../internal/grid.js";import{useMediaQuery as r}from"../internal/media.js";export function usePlBreakpoint(){const e=r("(width >= 40rem)"),t=r("(width >= 48rem)"),i=r("(width >= 64rem)");return r("(width >= 80rem)")?"xl":i?"lg":t?"md":e?"sm":"xs"}export function usePlBreakpointValue(r){const i=usePlBreakpoint(),n=e(r);for(let e=t.indexOf(i);e>=0;e-=1){const r=n[t[e]];if(void 0!==r)return r}}

package/dist/hooks/usePlColorScheme.d.ts

@@ -0,0 +1,66 @@
+import { type PlColorScheme, type PlResolvedColorScheme } from '../internal/color-scheme.js';
+export type { PlColorScheme, PlResolvedColorScheme };
+export interface PlColorSchemeOptions {
+    /**
+     * What to use when nothing has been stored.
+     *
+     * `system` — follow the platform — and it should stay `system`: a library
+     * that pinned a page to light on first visit would be overruling a preference
+     * the reader has already expressed to their operating system.
+     * @default 'system'
+     */
+    defaultScheme?: PlColorScheme;
+    /**
+     * Where the choice is kept, in `localStorage`.
+     *
+     * Change it to scope the choice to one app on a shared origin. There is no
+     * way to turn storage off, because a toggle whose answer does not survive a
+     * reload is a toggle that looks broken.
+     * @default 'plass-color-scheme'
+     */
+    storageKey?: string;
+}
+export interface PlColorSchemeResult {
+    /** What the reader chose. `system` is the absence of a choice. */
+    scheme: PlColorScheme;
+    /** What the page is painted in, once `system` has been resolved. */
+    resolved: PlResolvedColorScheme;
+    /** Chooses one. Written to `<html>` and to storage, and every other caller of this hook hears about it. */
+    setScheme: (next: PlColorScheme) => void;
+    /**
+     * Light ⇄ dark, from whatever is currently *painted*.
+     *
+     * So the first press on a system-dark page gives light, which is what a
+     * reader pressing a toggle means. It leaves `system` behind, deliberately:
+     * they have now expressed a preference of their own.
+     */
+    toggle: () => void;
+}
+/**
+ * The dark mode toggle, and what it takes to make one that does not flash.
+ *
+ * The library's tokens already answer to `.dark` / `[data-theme]` on any
+ * ancestor and to `prefers-color-scheme` when neither is there, so a page that
+ * only ever follows the platform needs nothing at all — this is for the app that
+ * offers a **choice**, which needs three things the CSS cannot do on its own:
+ * somewhere to keep it, something to write it onto `<html>`, and a way to paint
+ * it before the first frame.
+ *
+ * The third one is not this hook. React runs after the document has been
+ * parsed, so a scheme applied from an effect is applied one paint too late and
+ * the reader sees a white flash. [`PlColorSchemeScript`](./PlColorSchemeScript)
+ * is the answer to that and belongs in `<head>`.
+ *
+ * ```tsx
+ * const { resolved, toggle } = usePlColorScheme();
+ *
+ * <PlIconButton label="Switch theme" icon={resolved === 'dark' ? <Sun /> : <Moon />} onClick={toggle} />
+ * ```
+ *
+ * **`storageKey` and `defaultScheme` are read once**, when the first component
+ * using that key mounts, and are ignored on every call after it. That is what
+ * makes two toggles on one page agree with each other — they share one store —
+ * and it means these two are decisions to make where the app is set up rather
+ * than props to compute. Changing them at runtime does nothing.
+ */
+export declare function usePlColorScheme(options?: PlColorSchemeOptions): PlColorSchemeResult;

package/dist/hooks/usePlColorScheme.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{DEFAULT_STORAGE_KEY as t,applyColorScheme as r,darkQuery as s,useColorSchemeStore as o}from"../internal/color-scheme.js";import{useMediaQuery as m}from"../internal/media.js";export function usePlColorScheme(c={}){const{defaultScheme:l="system",storageKey:a=t}=c,[i,n]=o(a,l),f=m(s),h="system"===i?f?"dark":"light":i;e.useEffect(()=>{r(i)},[i]);const u=e.useCallback(()=>{n("dark"===h?"light":"dark")},[h,n]);return{scheme:i,resolved:h,setScheme:n,toggle:u}}

package/dist/hooks/usePlHotKeys.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { PlassHotKeys } from '../types.js';
+/** Anything a listener can be attached to, plus the ref a React caller holds. */
+export type PlHotKeysTarget = Window | Document | HTMLElement | React.RefObject<HTMLElement | null> | null;
+export interface PlHotKeysOptions {
+    /**
+     * Whether the chords are bound at all. `false` removes the listener rather
+     * than making the handlers no-ops, so a shortcut that is off does not consume
+     * the key from whatever else wanted it.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * What the listener is attached to.
+     *
+     * `window` is the default and is what a global shortcut means. A ref, an
+     * element or `document` scopes the binding to a region — but note that a
+     * `keydown` only reaches an element that contains the focus, so scoping to a
+     * panel nobody has tabbed into binds nothing.
+     * @default window
+     */
+    target?: PlHotKeysTarget;
+    /**
+     * Whether a chord is answered while the focus is in a text field.
+     *
+     * Off by default, and this is the decision the hook exists to get right: a
+     * global `/` that jumps to search must not eat the slash out of a URL
+     * somebody is typing into a form.
+     *
+     * It is narrower than it sounds, and only two kinds of chord are ever held
+     * back. A chord carrying **`Mod`, `Ctrl`, `Meta` or `Alt` is answered either
+     * way**, because none of those can appear in a field's value — so the
+     * ordinary `Mod+K` needs nothing set here. Shift does not count as one:
+     * `Shift+A` is how a capital A is typed. And a key that **does nothing in a
+     * field** is answered either way too: `Escape` is the one that matters, since
+     * a panel that closes on Escape has to close from inside its own form.
+     *
+     * What is left is exactly the case this is for: a printable character, or one
+     * of the keys that edits or moves through text, pressed while the focus is in
+     * a field. Turn it on for a chord that belongs to the field the reader is in.
+     * @default false
+     */
+    whileTyping?: boolean;
+}
+/**
+ * Binds keyboard chords outside any one control.
+ *
+ * The map is the same `PlassHotKeys` a field's `hotKeys` prop takes and the
+ * chords are spelled the way `PlHotKeys` draws them, which is the whole point:
+ * a shortcut that is **displayed** on a key cap and a shortcut that is **bound**
+ * are one string rather than two that drift. `Mod` is Command on a Mac and
+ * Control everywhere else.
+ *
+ * `PlCommandPalette` is the hook's first caller — it has bound its own opener
+ * 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:
+ *
+ * - **A modifier is checked in both directions.** `Enter` does not fire on
+ *   `Shift+Enter`, and `Mod+K` does not fire on `Mod+Shift+K`.
+ * - **A chord that matches is consumed** — `preventDefault()`, so the browser's
+ *   own `Mod+K` search bar does not also open. Read from the other end, an
+ *   event that is **already** consumed is left alone: a field's own `hotKeys`
+ *   map wins over a page's.
+ * - **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.
+ *
+ * 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
+ * rebinds the listener is the **set of chords** changing, not the map's
+ * identity.
+ *
+ * @example
+ * usePlHotKeys({
+ *   'Mod+K': () => setPaletteOpen(true),
+ *   'Mod+S': save
+ * });
+ */
+export declare function usePlHotKeys(hotKeys: PlassHotKeys | undefined, options?: PlHotKeysOptions): void;

package/dist/hooks/usePlHotKeys.js

@@ -0,0 +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])}

package/dist/hooks/usePlMediaQuery.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether the window matches a CSS media query, as a boolean that re-renders
+ * when the answer changes.
+ *
+ * The library has always had this — it is how a `PlSidebar` knows it has become
+ * a drawer and how a `PlAnimate*` finds out that the reader asked for less
+ * motion — and it is public now because the alternative in application code is
+ * a `useState`, an effect and a listener that is nearly always subscribed one
+ * render too late.
+ *
+ * **The first answer in a browser is the server's answer.** There is no window
+ * to measure while the HTML is being generated, so this returns `false` on the
+ * server and through the hydrating render, and the real answer arrives in the
+ * render after that. Anything that has to be right in the *first* frame belongs
+ * in CSS — a Tailwind variant, or the `--plass-*` token that variant sets — and
+ * this hook is for the decisions CSS cannot make, like whether a component
+ * exists at all.
+ *
+ * @example
+ * const coarse = usePlMediaQuery('(pointer: coarse)');
+ */
+export declare function usePlMediaQuery(query: string): boolean;

package/dist/hooks/usePlMediaQuery.js

@@ -0,0 +1 @@
+"use client";import{useMediaQuery as e}from"../internal/media.js";export function usePlMediaQuery(r){return e(r)}