plass-ui 1.1.0 → 1.3.0

package/dist/components/stat/PlStat.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** Which way a change has to go to be good news. */
+export type PlStatDirection = 'up' | 'down';
+export interface PlStatProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** What the figure is of. The line above it. */
+    label?: React.ReactNode;
+    /**
+     * The figure itself, already formatted.
+     *
+     * A node rather than a number, and deliberately: how a figure is written —
+     * the currency, the grouping, the decimals, the locale — is the page's
+     * decision and `Intl.NumberFormat` already makes it. A component that took a
+     * number would have to guess at all four.
+     */
+    value?: React.ReactNode;
+    /** A line under the figure. What it is compared with, usually. */
+    description?: React.ReactNode;
+    /** A glyph beside the label. */
+    icon?: React.ReactNode;
+    /**
+     * How much it moved, as a percentage. Drawn with an arrow, and coloured by
+     * whether that is good news rather than by its sign.
+     */
+    change?: number;
+    /**
+     * What the change says, instead of the formatted percentage. For a figure
+     * that moved by a count rather than by a proportion — "+1,204 this week".
+     */
+    changeLabel?: React.ReactNode;
+    /**
+     * Which way is good news.
+     *
+     * `up` by default and worth setting on about a third of the figures a
+     * dashboard has: for churn, for a bounce rate, for a p95 latency, a rise is
+     * the bad one, and a component that painted it green would be reading the
+     * number and not the meaning.
+     * @default 'up'
+     */
+    improvesWhen?: PlStatDirection;
+    /** Draws a skeleton where the figure will be. */
+    loading?: boolean;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** The family the icon takes. @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * One figure, and what has happened to it.
+ *
+ * A row of these is the top of every dashboard, and the whole of what makes
+ * them worth a component rather than three `<div>`s is the **change**: a number
+ * on its own says what things are, and a number with a movement beside it says
+ * whether that is going anywhere.
+ *
+ * The colour of that movement is decided by `improvesWhen` and not by the
+ * sign, which is the one thing a naive version of this gets wrong. Churn going
+ * up is not good news, and a green arrow on it is a dashboard lying to
+ * somebody.
+ *
+ * It draws **no surface**. A figure sits in a `PlCard` or in a row of them, and
+ * a sheet inside a sheet is two sheets.
+ */
+export declare const PlStat: React.ForwardRefExoticComponent<PlStatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stat/PlStat.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as l}from"../skeleton/PlSkeleton.js";import{useDefaults as a}from"../../internal/defaults.js";import{controlSlots as n,cx as r,hasContent as i,metaTextClasses as c,stackGapClasses as o}from"../../internal/styles.js";const m={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:d,description:u,icon:p,change:x,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:j,className:b,style:k,children:y,...w},z){const L=a(),M=v??L.size??"md",P=N??L.color??"primary",S=j??L.density??"default",A=void 0!==x&&0!==x,W=(x??0)>0,$=A&&("up"===h?W:!W),B=void 0!==x||i(f);return t("div",{ref:z,className:r("flex flex-col","compact"===S?"gap-0.5":o[M],b),style:{...n(P,0,"ghost"),...k},...w,children:[i(s)||i(p)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",c[M]),children:[i(p)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:p}):null,s]}):null,t("div",{className:"flex items-baseline gap-2",children:[g?e(l,{shape:"line",size:M,color:P,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",m[M]),children:d}),B&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",c[M],A?$?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:W}):null,f??`${W?"+":""}${x}%`]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",c[M]),children:u}):null,y]})});

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

@@ -0,0 +1,2 @@
+export { PlStat } from './PlStat.js';
+export type { PlStatDirection, PlStatProps } from './PlStat.js';

package/dist/components/stat/index.js

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

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+/** The same three a `PlTimeline` draws, and the same marks. */
+export type PlStepStatus = PlassStepStatus;
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlStepConnector = PlassStepConnector;
+export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** Which step the reader is on. Use with `onActiveChange` for a controlled stepper. */
+    active?: number;
+    /** Which step it starts on, for an uncontrolled one. @default 0 */
+    defaultActive?: number;
+    onActiveChange?: (active: number) => void;
+    /**
+     * Whether a step ahead of the current one can be jumped to.
+     *
+     * On by default, because that is what makes it a process rather than a set of
+     * tabs: the third step of a sign-up cannot be filled in before the second.
+     * Turn it off for a review screen, where every step has already been answered
+     * and the reader is going back to check one.
+     * @default true
+     */
+    linear?: boolean;
+    /** @default 'horizontal' */
+    orientation?: PlassOrientation;
+    /** How the line between two steps is drawn. @default 'solid' */
+    connector?: PlStepConnector;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    children?: React.ReactNode;
+}
+export interface PlStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color'> {
+    /** What the step is called. */
+    label?: React.ReactNode;
+    /** A second line under it — what the step asks for. */
+    description?: React.ReactNode;
+    /**
+     * What is drawn in the bullet. The step's own number by default, and a tick
+     * once it is complete.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides where the sequence says this step is. For the one that failed
+     * validation while the reader was three steps further on.
+     */
+    status?: PlStepStatus;
+    /**
+     * Marks the step as skippable. `true` draws the word "Optional"; a node draws
+     * that node instead, which is how the word is translated.
+     */
+    optional?: boolean | React.ReactNode;
+    /** Cannot be reached, whatever `linear` says. */
+    disabled?: boolean;
+    /** Overrides the stepper's family for this one step. */
+    color?: PlassColor;
+    /** The panel this step shows while it is the current one. */
+    children?: React.ReactNode;
+}
+/**
+ * A process the reader is moving through, and where they are in it.
+ *
+ * It draws the same rail a [`PlTimeline`](../display/timeline) does — the same
+ * three bullet states, the same connector — and the difference is what the two
+ * are *for*, which is also the whole of when to reach for which. A timeline
+ * **reports**: it is an `<ol>` of text about a sequence that already happened,
+ * and nothing on it can be pressed. A stepper **is** the sequence: its steps are
+ * buttons, the current one owns a panel, and pressing one moves the reader.
+ *
+ * `active` is an index rather than a value, exactly as a timeline's is, because
+ * a stepper has no selection: everything before it is done, the step at it is
+ * where you are, everything after it is ahead.
+ */
+export declare const PlStepper: React.ForwardRefExoticComponent<PlStepperProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: a step that had to be told where it
+ * was would be one every caller could put in the wrong place, and `active={2}`
+ * would stop meaning anything. The stepper numbers its children as it walks
+ * them and hands each one its index through a context.
+ */
+export declare const PlStep: React.ForwardRefExoticComponent<PlStepProps & React.RefAttributes<HTMLLIElement>>;

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

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

@@ -0,0 +1,2 @@
+export { PlStep, PlStepper } from './PlStepper.js';
+export type { PlStepConnector, PlStepProps, PlStepStatus, PlStepperProps } from './PlStepper.js';

package/dist/components/stepper/index.js

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

package/dist/components/switch/PlSwitch.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Switch as BaseUISwitch } from '@base-ui/react/switch';
-import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+import type { PlassAlign, PlassColor, PlassFieldClassNames, PlassSize } from '../../types.js';
 /** Which side of the track the label sits on. */
 export type PlSwitchLabelPlacement = Extract<PlassAlign, 'start' | 'end'>;
 type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
 export interface PlSwitchProps extends BaseSwitchProps {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/switch/PlSwitch.js

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

package/dist/components/tabs/PlTabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as l}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as s,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as r,glassClasses as c,hasContent as d,iconClasses as h,paddingXClasses as f,radiusClasses as u,surfaceSlots as p,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${c} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${c} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},x={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},g={solid:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},w="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:i,startIcon:c,endIcon:p,disabled:m=!1,className:x,children:g,...z},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(v);return t(l.Tab,{ref:y,value:i,disabled:m,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",o[j],s[j],r[j],f[N][j],"solid"===P?u[j]:"",b,h,w,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...z,children:[d(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null,g,d(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:o=!1,className:s,children:n,...r},c){const{size:d}=a.useContext(v);return e(l.Panel,{ref:c,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--plass-fg)",i,u[d],s??""].filter(Boolean).join(" "),...r,children:n})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:o="glass",size:s="md",color:i="primary",density:n="default",value:r,defaultValue:c,onValueChange:d,orientation:h="horizontal",activateOnFocus:f=!1,loopFocus:b=!0,fullWidth:w=!1,className:z,style:y,children:P,...j},N){const T=a.useMemo(()=>({variant:o,size:s,density:n,orientation:h,fullWidth:w}),[o,s,n,h,w]),k=[],C=[];return a.Children.forEach(P,e=>{a.isValidElement(e)&&e.type===PlTabPanel?C.push(e):null!=e&&!1!==e&&k.push(e)}),e(v.Provider,{value:T,children:t(l.Root,{ref:N,value:r,defaultValue:c,onValueChange:e=>d?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...p(i,0),...y},...j,children:[t(l.List,{activateOnFocus:f,loopFocus:b,className:["relative shrink-0",m[o][h],"solid"===o?u[s]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[k,e(l.Indicator,{className:["pointer-events-none",x[o][h],g[o],"solid"===o?u[s]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),C]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as i,focusRingClasses as n,focusRingInsetClasses as r,gapClasses as c,glassClasses as d,hasContent as h,iconClasses as f,paddingXClasses as u,radiusClasses as p,surfaceSlots as b,transitionClasses as v}from"../../internal/styles.js";const m=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),x={solid:{horizontal:`${d} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${d} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},g={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},w={solid:`${d} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},z="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:n,endIcon:d,disabled:b=!1,className:x,children:g,...w},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(m);return t(o.Tab,{ref:y,value:l,disabled:b,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[j],i[j],c[j],u[N][j],"solid"===P?p[j]:"",v,f,z,r,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...w,children:[h(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,g,h(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:i,...r},c){const{size:d}=a.useContext(m);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",n,p[d],s??""].filter(Boolean).join(" "),...r,children:i})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:i,color:n,density:r,value:c,defaultValue:d,onValueChange:h,orientation:f="horizontal",activateOnFocus:u=!1,loopFocus:v=!0,fullWidth:z=!1,className:y,style:P,children:j,...N},T){const k=l(),C=i??k.size??"md",V=n??k.color??"primary",B=r??k.density??"default",F=a.useMemo(()=>({variant:s,size:C,density:B,orientation:f,fullWidth:z}),[s,C,B,f,z]),R=[],W=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===PlTabPanel?W.push(e):null!=e&&!1!==e&&R.push(e)}),e(m.Provider,{value:F,children:t(o.Root,{ref:T,value:c,defaultValue:d,onValueChange:e=>h?.(e),orientation:f,className:["flex min-w-0","vertical"===f?"flex-row gap-4":"flex-col gap-4",y??""].filter(Boolean).join(" "),style:{...b(V,0),...P},...N,children:[t(o.List,{activateOnFocus:u,loopFocus:v,className:["relative shrink-0",x[s][f],"solid"===s?p[C]:"",z&&"horizontal"===f?"w-full":"","horizontal"===f?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[R,e(o.Indicator,{className:["pointer-events-none",g[s][f],w[s],"solid"===s?p[C]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),W]})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /** How the multiline control may be resized by the user. Ignored when single line. */
 export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
 /**
@@ -9,6 +9,17 @@ export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
  */
 type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
 export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it, and the one place in the library where a

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

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

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

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

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

@@ -1,17 +1,14 @@
 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';
 /**
- * How far along one item is.
- *
- * Three states rather than two, because "the one you are on" is not the same
- * claim as "done", and a sequence that cannot say which step is current is a
- * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
- * around it, an empty one — rather than three shades of the same thing.
+ * 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.
  */
-export type PlTimelineStatus = 'complete' | 'current' | 'upcoming';
+export type PlTimelineStatus = PlassStepStatus;
 /** How the line between two items is drawn. `none` leaves the gap open. */
-export type PlTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export type PlTimelineConnector = PlassStepConnector;
 export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
     /**
      * How far the sequence has got: the index of the item being worked on now.

package/dist/components/timeline/PlTimeline.js

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

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

@@ -18,6 +18,16 @@ export interface PlToastData {
     color?: PlassColor;
     variant?: PlassVariant;
     icon?: React.ReactNode | false;
+    /**
+     * Classes on this toast, alongside the ones the provider gives every toast.
+     *
+     * A toast has no element a caller can put a `className` on — it is raised
+     * from a click handler rather than written into a tree — so the class travels
+     * with the message, in the same `data` the colour and the variant do.
+     */
+    className?: string;
+    /** Inline styles on this toast, applied over the tokens it sets. */
+    style?: React.CSSProperties;
 }
 export interface PlToastOptions extends PlToastData {
     /**
@@ -119,4 +129,4 @@ export declare function usePlToast(): {
  * swipe, the F6 focus hotkey, and the live region that makes a message which
  * appeared out of nowhere reach a screen reader at all.
  */
-export declare function PlToastProvider({ variant, size, color, density, position, timeout, limit, width, closeLabel, children }: PlToastProviderProps): React.JSX.Element;
+export declare function PlToastProvider({ variant, size: sizeProp, color: colorProp, density: densityProp, position, timeout, limit, width, closeLabel, children }: PlToastProviderProps): React.JSX.Element;

package/dist/components/toast/PlToast.js

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

package/dist/components/toggle/PlToggle.js

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

package/dist/components/toolbar/PlToolbar.js

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

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

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

package/dist/components/tooltip/PlTooltip.js

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

package/dist/components/transfer/PlTransfer.js

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