plass-ui 1.2.0 → 1.4.0

package/dist/components/timeline-chart/PlTimelineChart.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import type { PlassChartCategory, PlassTimelineSeries } from '../../types.js';
+export interface PlTimelineChartProps extends Omit<CartesianChartProps, 'series' | 'categories' | 'legend'> {
+    /**
+     * One row per series, and the spans on it. A row's name is what the axis
+     * says down the left-hand side.
+     */
+    series: readonly PlassTimelineSeries[];
+    /**
+     * Where the time axis starts and ends. Taken from the spans otherwise, and
+     * rounded outward to a date a calendar has a name for.
+     */
+    min?: PlassChartCategory;
+    max?: PlassChartCategory;
+    /**
+     * How thick a bar may get, in pixels. Below the cap the bars fill their share
+     * of the row; above it the leftover stays as air.
+     * @default the `size` ladder — 24 at `md`
+     */
+    barSize?: number;
+    /**
+     * Cuts the corners off a span.
+     *
+     * Both ends, unlike a [`PlBarChart`](./bar-chart), where the baseline end stays
+     * square. A span grows from nothing: neither of its ends is a zero, so
+     * neither is the one the reader is measuring from.
+     * @default true
+     */
+    rounded?: boolean;
+}
+/**
+ * Work against time — a row per thing, a bar per stretch of it.
+ *
+ * The two axes are a set of rows and a calendar, which makes this a
+ * [`PlBarChart`](./bar-chart) turned on its side with the baseline taken away:
+ * every bar starts where its own data says rather than at zero, so what the
+ * chart is about is *when* rather than *how much*.
+ *
+ * Not to be confused with [`PlTimeline`](../display/timeline), which is a list of
+ * steps and draws no axis at all. That one is for a sequence of events; this
+ * one is for how long each of them took.
+ */
+export declare function PlTimelineChart({ series, min, max, barSize, rounded, size: sizeProp, density: densityProp, xAxis, yAxis, locale: localeProp, ...props }: PlTimelineChartProps): React.JSX.Element;

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

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

package/dist/components/timeline-chart/index.d.ts

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

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

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

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: closeLabelProp, 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{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})]})}

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 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]})});

package/dist/components/toggle/PlToggleGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{ToggleGroup as l}from"@base-ui/react/toggle-group";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},a=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const PlToggleGroup=/* @__PURE__ */o.forwardRef(function PlToggleGroup({variant:s,size:d,color:u,density:c,elevation:f,value:m,defaultValue:h,onValueChange:p,multiple:g=!1,orientation:v="horizontal",disabled:x,loopFocus:b=!0,fullWidth:z=!1,className:j,children:V,...w},y){const G=o.useMemo(()=>({variant:s,size:d,color:u,density:c,elevation:f,disabled:x}),[s,d,u,c,f,x]);return e(i.Provider,{value:G,children:e(l,{ref:y,value:m,defaultValue:h,onValueChange:e=>p?.(e),multiple:g,orientation:v,disabled:x,loopFocus:b,className:t(a,"vertical"===v?"flex-col":"flex-row",n[v],"glass"===(s??"glass")?r[v]:"",z?"flex w-full [&>*]:flex-1":"",j),...w,children:V})})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as l from"react";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{ButtonGroupContext as r,groupBaseClasses as a,groupJoinClasses as t,groupOverlapClasses as i}from"../../internal/button-group.js";import{cx as s}from"../../internal/styles.js";export const PlToggleGroup=/* @__PURE__ */l.forwardRef(function PlToggleGroup({variant:n,size:u,color:c,density:f,elevation:d,value:m,defaultValue:p,onValueChange:g,multiple:v=!1,orientation:h="horizontal",disabled:x,loopFocus:b=!0,fullWidth:j=!1,className:V,children:w,...y},z){const G=l.useMemo(()=>({variant:n,size:u,color:c,density:f,elevation:d,disabled:x}),[n,u,c,f,d,x]);return e(r.Provider,{value:G,children:e(o,{ref:z,value:m,defaultValue:p,onValueChange:e=>g?.(e),multiple:v,orientation:h,disabled:x,loopFocus:b,className:s(a,"vertical"===h?"flex-col":"flex-row",t[h],"glass"===(n??"glass")?i[h]:"",j?"flex w-full [&>*]:flex-1":"",V),...y,children:w})})});

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/tour/PlTour.d.ts

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassDensity, PlassSide, PlassSize } from '../../types.js';
+/**
+ * What a step is about.
+ *
+ * Three forms, and the first is the one to reach for. A **ref** is checked by
+ * the compiler and survives a rename; a **selector** is a string that can stop
+ * matching the moment somebody renames a class, and the tour would go on
+ * running with the hole over an empty piece of background. The selector is here
+ * because it is the only form that works when the target belongs to something
+ * this page does not render — a third-party widget, a page rendered by a
+ * framework's router — and the **getter** is for the case where finding it is
+ * more than one query.
+ */
+export type PlTourTarget = string | React.RefObject<Element | null> | (() => Element | null | undefined);
+/** One stop on the tour. */
+export interface PlTourStep {
+    /**
+     * What this step is about. Left out, the step is centred over the page with
+     * nothing cut out of the dimming — which is what a welcome step and a closing
+     * step are.
+     */
+    target?: PlTourTarget;
+    /** The step's heading. */
+    title?: React.ReactNode;
+    /** What it says. */
+    content?: React.ReactNode;
+    /** Which edge of the target the card sits on. @default 'bottom' */
+    side?: PlassSide;
+    /** Where along that edge. @default 'center' */
+    align?: PlassAlign;
+    /**
+     * How far the cut-out is grown past the target, in pixels.
+     *
+     * A control with a focus ring wants a few, so the ring is inside the light
+     * rather than cut in half by its edge; a whole panel wants none.
+     * @default 6
+     */
+    padding?: number;
+    /** The cut-out's corner radius, in pixels. Defaults to the size's own. */
+    radius?: number;
+}
+/** The parts of a tour a caller can reach past the card itself. */
+export interface PlTourClassNames {
+    /**
+     * The dimming, which is a sibling of the card rather than something inside
+     * it and so has no other way in.
+     */
+    mask?: string;
+    /** The heading. */
+    title?: string;
+    /** The body. */
+    content?: string;
+    /** The × in the corner. */
+    close?: string;
+    /** The row holding the counter and the buttons. */
+    footer?: string;
+}
+export interface PlTourProps {
+    /** The stops, in order. */
+    steps: readonly PlTourStep[];
+    /** Whether the tour is running. Pass it with `onOpenChange` to control one. */
+    open?: boolean;
+    /** Whether it starts running, when the tour keeps that itself. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which stop, counted from `0`. Pass it with `onStepChange` to control one. */
+    step?: number;
+    /** Which one it starts on, when the tour keeps that itself. @default 0 */
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    /** Called when the last step's button is pressed, before the tour closes. */
+    onFinish?: () => void;
+    /**
+     * Dims the page and cuts the target out of the dimming.
+     *
+     * Off, the card is the only thing the tour draws, which is right for a tour
+     * over a page the reader is meant to keep working in.
+     * @default true
+     */
+    mask?: boolean;
+    /** Draws the Skip button beside the counter. @default true */
+    skippable?: boolean;
+    /** Whether Escape and the × end the tour. @default true */
+    dismissible?: boolean;
+    /** Scrolls each target into view as the tour reaches it. @default true */
+    scrollIntoView?: boolean;
+    /** The Previous button. Defaults to the locale's word. */
+    previousLabel?: React.ReactNode;
+    /** The Next button. */
+    nextLabel?: React.ReactNode;
+    /** What Next becomes on the last step. */
+    doneLabel?: React.ReactNode;
+    /** The Skip button. */
+    skipLabel?: React.ReactNode;
+    /** Type scale and the card's width. */
+    size?: PlassSize;
+    /** Semantic colour role: the buttons, the focus ring and the ring round the light. */
+    color?: PlassColor;
+    /** The card's padding. Never the type scale. */
+    density?: PlassDensity;
+    /** Class names for the card. */
+    className?: string;
+    /** Class names for the parts around it. */
+    classNames?: PlTourClassNames;
+}
+/**
+ * A guided walk over a page that already exists — the three things a new reader
+ * has to be shown once, pointed at where they actually are.
+ *
+ * It is [`PlHowToSteps`](../surfaces/how-to-steps) turned inside out. That
+ * component puts the instructions *in* the page and the reader follows them;
+ * this one leaves the page as it is and stands over it. So a step says what it
+ * is about rather than describing it: what a tour points at is already on
+ * screen, and a second copy inside the card is a second copy to keep in step.
+ *
+ * ```tsx
+ * <PlTour
+ *   defaultOpen
+ *   steps={[
+ *     { target: filterRef, title: 'Narrow the list', content: 'Type here…' },
+ *     { target: '#export', title: 'Take it with you', side: 'left' }
+ *   ]}
+ * />
+ * ```
+ *
+ * **The dimming takes the pointer and the light does not.** The scrim is one
+ * element clipped to the whole viewport with the target cut out of it, and a
+ * clipped-away region is not hit-tested — so the control being pointed at can
+ * be used and nothing else can. That is the difference between a tour and a
+ * dialog with a picture of a control in it, and it falls out of the geometry
+ * rather than being a second mechanism that has to agree with it.
+ */
+export declare function PlTour({ steps, open, defaultOpen, onOpenChange, step, defaultStep, onStepChange, onFinish, mask, skippable, dismissible, scrollIntoView, previousLabel, nextLabel, doneLabel, skipLabel, size: sizeProp, color: colorProp, density: densityProp, className, classNames }: PlTourProps): React.JSX.Element | null;

package/dist/components/tour/PlTour.js

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

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

@@ -0,0 +1,2 @@
+export { PlTour } from './PlTour.js';
+export type { PlTourClassNames, PlTourProps, PlTourStep, PlTourTarget } from './PlTour.js';

package/dist/components/tour/index.js

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

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 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})]})});

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 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}))})});

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/tree-select/PlTreeSelect.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { type PlassPickerShellProps } from '../../internal/picker.js';
+import { type PlTreeNode } from '../tree/PlTree.js';
+/**
+ * One node of the tree a reader is choosing from.
+ *
+ * A `PlTree`'s node with two more answers on it, both of which only mean
+ * anything once the tree is behind a field: what a filter matches the node
+ * against, and whether the node is one of the answers or only the road to one.
+ */
+export interface PlTreeSelectNode extends PlTreeNode {
+    /**
+     * What a search matches against.
+     *
+     * `label` is a `ReactNode` and the text inside one is not something to guess
+     * at, so a node whose label is anything but a string says here what it can be
+     * found by. Falls back to the label when that is a string, and to the `id`
+     * when it is not.
+     */
+    searchLabel?: string;
+    /**
+     * Whether this node may itself be chosen.
+     *
+     * Defaults to `true` for a leaf and to `selectableBranches` for a node that
+     * has children. Set it either way to override both.
+     */
+    selectable?: boolean;
+    children?: readonly PlTreeSelectNode[];
+}
+export interface PlTreeSelectProps extends PlassPickerShellProps {
+    /** The whole tree, as data. */
+    items: readonly PlTreeSelectNode[];
+    /** The chosen ids. Use with `onValueChange` for a controlled picker. */
+    value?: readonly string[];
+    /** What starts chosen, for an uncontrolled one. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Whether more than one node may be held at once. @default false */
+    multiple?: boolean;
+    /**
+     * Whether a node that has children may itself be chosen.
+     *
+     * Off by default, which is the shape most of these trees have: the branches
+     * are the taxonomy and the leaves are the answers, and a "Europe" held
+     * alongside "France" is usually a data model nobody meant. A node's own
+     * `selectable` overrides it either way, and a branch that cannot be chosen
+     * still opens and closes — pressing it is how you get at what is under it.
+     * @default false
+     */
+    selectableBranches?: boolean;
+    /** 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;
+    /** Whether the popup is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Closes the popup as soon as a node is chosen. @default `!multiple` */
+    closeOnSelect?: boolean;
+    /**
+     * Offers a field above the tree that filters it.
+     *
+     * A match keeps its ancestors, because a node with its parents cut away is a
+     * node the reader cannot place — a "Seoul" under nothing at all does not say
+     * which taxonomy it came out of. Every branch a filter keeps is opened, since
+     * a match folded inside a shut parent is a match nobody was shown.
+     * @default false
+     */
+    searchable?: boolean;
+    /** The word in the filter field. @default 'Search' */
+    searchLabel?: string;
+    /** What the popup says when the filter matched nothing. @default 'Nothing here' */
+    emptyLabel?: string;
+    /** How the trigger writes what is held. Defaults to the labels, comma-joined. */
+    format?: (chosen: PlTreeSelectNode[]) => React.ReactNode;
+    /** Identifies the field when a form is submitted. One hidden input per value. */
+    name?: string;
+}
+/**
+ * A value chosen out of a hierarchy rather than out of a list.
+ *
+ * The gap between a `PlSelect` and a `PlTree`: the first is a flat list behind
+ * a field, the second is a hierarchy that shows what it holds but has no field
+ * to put it in. A category, a folder, a region and an org chart node are all
+ * chosen from a shape a flat list flattens away.
+ *
+ * It is the two of them composed and almost nothing else — the trigger is the
+ * same `PickerShell` all four pickers wear, and what is in the popup is a
+ * `PlTree` with a `PlTextField` over it. What it adds is the arithmetic between
+ * them: which nodes a query keeps, which branches that opens, and which of the
+ * ids coming back out of the tree are answers rather than roads.
+ */
+export declare const PlTreeSelect: React.ForwardRefExoticComponent<PlTreeSelectProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { PlTreeSelect } from './PlTreeSelect.js';
+export type { PlTreeSelectNode, PlTreeSelectProps } from './PlTreeSelect.js';

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

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