plass-ui 1.3.0 → 1.4.0

package/dist/components/timeline/PlTimeline.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
-import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * How far along one item is. The same three a `PlStepper` draws, from
  * `internal/steps.ts`, because a haloed bullet must not mean two things.
@@ -33,7 +33,7 @@ export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol
      * only honest while every label is short.
      * @default 'vertical'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
     render?: useRender.RenderProp;
     children?: React.ReactNode;

package/dist/components/timeline/PlTimeline.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{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})});
+"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";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__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"}},w={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:N,status:P,color:C,connector:T="solid",className:_,children:I,...R},$){const k=t.useContext(g),{index:A,last:M}=t.useContext(j),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:N}),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?"":w[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,render:p,className:m,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=n??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===v?"flex-row":"flex-col",m),style:{...d(z,0),...u},children:P.map((l,t)=>e(j.Provider,{value:{index:t,last:t===C-1},children:l},t)),...x}});return e(g.Provider,{value:T,children:_})});

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: sizeProp, color: colorProp, density: densityProp, 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{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})]})}
+"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{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]})});
+"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/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{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})]})});
+"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.js

@@ -1 +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}))})});
+"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-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";