plass-ui 1.2.0 → 1.4.0

package/dist/components/panes/PlPanes.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * A pane's share of the split, as a percentage of the container or as a CSS
  * length.
@@ -17,7 +17,7 @@ export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * handles between them; `vertical` stacks them.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * Whether the handles between the panes can be dragged. Turn it off for a
      * split that is a layout rather than a control.

package/dist/components/panes/PlPanes.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as i}from"../../internal/styles.js";const s=/* @__PURE__ */n.createContext({basis:null}),o={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const i=Number(r[1]);if(!Number.isNaN(i))switch(r[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(n&&getComputedStyle(n).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */n.forwardRef(function PlPanes({orientation:l="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:p,className:f,style:g,children:h,...x},v){const b=n.Children.toArray(h).filter(n.isValidElement),y=b.length,w=n.useRef(null),z=n.useCallback(e=>{w.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]),P=n.useRef([]);P.current=b.map(e=>e.props);const[S,R]=n.useState(null),E=S&&S.length===y?S:null,k=n.useRef(null);k.current=E;const C="horizontal"===l,N=a[d]*Math.max(0,y-1);function grip(e){const t=w.current,n=k.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),i=(C?r.width:r.height)-N;if(i<=0)return null;const s=P.current[e],o=P.current[e+1],a=n[e]*i,l=a+n[e+1]*i,u=Math.max(toPixels(s?.minSize,i,t)??0,l-(toPixels(o?.maxSize,i,t)??l)),d=Math.min(toPixels(s?.maxSize,i,t)??l,l-(toPixels(o?.minSize,i,t)??0));return d<u?null:{root:t,current:n,extent:i,start:a,pair:l,resize(t){const r=Math.min(d,Math.max(u,a+t)),s=[...n];return s[e]=r/i,s[e+1]=(l-r)/i,R(s),m?.(s.map(e=>100*e)),s}}}n.useEffect(()=>{const e=w.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),n=(C?t.width:t.height)-N;n<=0||R(t=>t&&t.length===y?t:function initialFractions(e,t,n){const r=e.map(e=>toPixels(e.defaultSize,t,n)),i=r.reduce((e,t)=>e+(t??0),0),s=r.filter(e=>void 0===e).length,o=s>0?Math.max(0,t-i)/s:0,a=r.map(e=>Math.max(0,e??o)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(P.current,n,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[y,C,N]);const M=n.useRef(null);n.useEffect(()=>()=>M.current?.(),[]);const L=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",o[d],i,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",c?r(C?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:z,className:r("flex h-full w-full",C?"flex-row":"flex-col","min-h-0 min-w-0",f),style:{"--p-accent":`var(--plass-${u}-accent)`,"--p-soft":`var(--plass-${u}-soft)`,"--p-ring":`var(--plass-${u}-ring)`,...g},...x,children:b.map((o,a)=>t(n.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":C?"vertical":"horizontal","aria-valuenow":E?Math.round(100*E[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,tabIndex:c?0:-1,className:L,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const n=grip(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const s=C?t.clientX:t.clientY,o=C&&"rtl"===getComputedStyle(n.root).direction?-1:1;let a=n.current;const move=e=>{const t=C?e.clientX:e.clientY;a=n.resize((t-s)*o)},release=()=>{M.current=null,r.removeEventListener("pointermove",move),r.removeEventListener("pointerup",end),r.removeEventListener("pointercancel",end),delete r.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),p?.(a.map(e=>100*e))};M.current=release,r.addEventListener("pointermove",move),r.addEventListener("pointerup",end),r.addEventListener("pointercancel",end)}(a-1,e)},onKeyDown:e=>{const t=C?"ArrowLeft":"ArrowUp",n=C?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function nudge(e,t){const n=grip(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(a-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--plass-border)",i,C?"h-full w-px":"h-px w-full",c?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(s.Provider,{value:{basis:E?`calc((100% - ${N}px) * ${E[a].toFixed(6)})`:null},children:o})]},o.key??a))})});export const PlPane=/* @__PURE__ */n.forwardRef(function PlPane({defaultSize:t,minSize:i,maxSize:o,className:a,style:l,children:c,...u},d){const{basis:m}=n.useContext(s);return e("div",{ref:d,className:r("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{cx as i,transitionClasses as o}from"../../internal/styles.js";import{useResponsiveValue as s}from"../../internal/responsive.js";const a=/* @__PURE__ */r.createContext({basis:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:u,resizable:d=!0,color:m,size:p,onResize:f,onResizeEnd:g,className:h,style:v,children:x,...b},y){const w=s(u,"horizontal"),z=n(),P=m??z.color??"primary",S=p??z.size??"md",R=r.Children.toArray(x).filter(r.isValidElement),C=R.length,E=r.useRef(null),k=r.useCallback(e=>{E.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),N=r.useRef([]);N.current=R.map(e=>e.props);const[M,j]=r.useState(null),L=M&&M.length===C?M:null,$=r.useRef(null);$.current=L;const A="horizontal"===w,D=c[S]*Math.max(0,C-1);function grip(e){const t=E.current,r=$.current;if(!d||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(A?n.width:n.height)-D;if(i<=0)return null;const o=N.current[e],s=N.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,j(o),f?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=E.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(A?t.width:t.height)-D;r<=0||j(t=>t&&t.length===C?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(N.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[C,A,D]);const F=r.useRef(null);r.useEffect(()=>()=>F.current?.(),[]);const B=i("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[S],o,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",d?i(A?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:i("flex h-full w-full",A?"flex-row":"flex-col","min-h-0 min-w-0",h),style:{"--p-accent":`var(--plass-${P}-accent)`,"--p-soft":`var(--plass-${P}-soft)`,"--p-ring":`var(--plass-${P}-ring)`,...v},...b,children:R.map((n,s)=>t(r.Fragment,{children:[s>0?e("div",{role:"separator","aria-orientation":A?"vertical":"horizontal","aria-valuenow":L?Math.round(100*L[s-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,tabIndex:d?0:-1,className:B,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=t.currentTarget;n.setPointerCapture(t.pointerId),n.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=A?t.clientX:t.clientY,s=A&&"rtl"===getComputedStyle(r.root).direction?-1:1;let a=r.current;const move=e=>{const t=A?e.clientX:e.clientY;a=r.resize((t-o)*s)},release=()=>{F.current=null,n.removeEventListener("pointermove",move),n.removeEventListener("pointerup",end),n.removeEventListener("pointercancel",end),delete n.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),g?.(a.map(e=>100*e))};F.current=release,n.addEventListener("pointermove",move),n.addEventListener("pointerup",end),n.addEventListener("pointercancel",end)}(s-1,e)},onKeyDown:e=>{const t=A?"ArrowLeft":"ArrowUp",r=A?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=A&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);g?.(n.map(e=>100*e))}(s-1,i*n)},children:e("span",{"aria-hidden":"true",className:i("pointer-events-none bg-(--plass-border)",o,A?"h-full w-px":"h-px w-full",d?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(a.Provider,{value:{basis:L?`calc((100% - ${D}px) * ${L[s].toFixed(6)})`:null},children:n})]},n.key??s))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:o,className:s,style:l,children:c,...u},d){const{basis:m}=r.useContext(a);return e("div",{ref:d,className:i("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});

package/dist/components/pie-chart/PlPieChart.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
+import type { PlassChartCategory, PlassChartDatum } from '../../types.js';
+export interface PlPieChartProps extends ChartBaseProps {
+    /**
+     * The slices. Numbers, or points that carry their own name and colour.
+     *
+     * One series and not an array of them, because that is what a pie *is*: the
+     * slices are the entities here, so each one takes a palette slot of its own
+     * and the legend lists them rather than listing series.
+     */
+    data: readonly PlassChartDatum[];
+    /** What each slice is called. Points may carry their own `x` instead. */
+    categories?: readonly PlassChartCategory[];
+    /**
+     * - `pie` — a filled disc. The default.
+     * - `donut` — a ring, with room in the middle for the total.
+     * - `semi` — half a ring, opened along the bottom. For a gauge, or for a
+     *   dashboard tile that is wider than it is tall.
+     * @default 'pie'
+     */
+    shape?: 'pie' | 'donut' | 'semi';
+    /**
+     * Where the first slice starts, in degrees clockwise from twelve o'clock.
+     * Ignored by `semi`, which is defined by where it opens.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * What goes in the hole. A `donut` or a `semi` with nothing in the middle is
+     * a pie with a bite out of it; the total, or the one figure the chart is
+     * about, is what the ring was drawn around.
+     */
+    center?: React.ReactNode;
+    /**
+     * Writes each slice's share on it, where the slice is wide enough for the
+     * text to fit with room either side. A label that does not fit is dropped
+     * rather than clipped — the tooltip and the table still have it.
+     *
+     * The number written is the **share**, not the value: a share is what a pie
+     * is a picture of, and the value is one hover away.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+}
+/**
+ * Parts of a whole, at a glance.
+ *
+ * The narrowest chart in the library and the easiest one to misuse. An angle is
+ * a poor thing to compare — two slices within a few percent of each other are
+ * indistinguishable, and a reader cannot rank six of them — so the pie is right
+ * for exactly one question: *is one of these most of it?* Anything finer than
+ * that, and anything past six slices, is a [`PlBarChart`](./bar-chart).
+ *
+ * A slice's colour follows the slice and not its size, so a chart that is
+ * refiltered or resorted keeps every category the colour it had.
+ */
+export declare function PlPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;

package/dist/components/pie-chart/PlPieChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartDataTable as a,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,formatCategory as f,markGap as p,plotHeights as x,seriesColor as b,toValue as g}from"../../internal/chart.js";import{useDefaults as y}from"../../internal/defaults.js";import{numberFormatter as M}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as N,metaTextClasses as w}from"../../internal/styles.js";const I={pie:0,donut:.62,semi:.62};export function PlPieChart({data:P,categories:z,shape:k="pie",startAngle:A=0,center:S,valueLabels:$="none",height:L,format:B,locale:E,label:R,legend:C,tooltip:D,empty:O,size:_,variant:K="ghost",padded:V=!1,className:W,...q}){const F=y(),G=_??F.size??"md",H=E??F.locale,J=l.useRef(null),Q=d(J),T=j(),U=l.useId(),X=l.useCallback(e=>B?M(H,B).format(e):v(e,H),[B,H]),Y=l.useMemo(()=>P.map(g),[P]),Z=l.useMemo(()=>Y.map((e,t)=>({name:f(c(t,z,[Y]),H),data:[P[t]],color:e.color})),[Y,z,P,H]),ee=u(Z),[te,le]=l.useState(null),ae=Z.map((e,t)=>b(e,t)),ne=Y.reduce((e,t,l)=>ee.visible[l]&&null!==t.value?e+Math.abs(t.value):e,0),ie="semi"===k,re="number"==typeof L?L:x[G],se=h[G],oe=!1===C?{interactive:!1}:!0===C||void 0===C?{}:C,de=!1!==C&&Z.length>1,ue=oe.side??"bottom",me=!1===D?{mode:"none"}:!0===D||void 0===D?{}:D,ce="none"===me.mode,he=Q/2,ve=Math.max(0,Math.min(Q/2,ie?re:re/2)-2),fe=ie?Math.min(re,re/2+ve/2):re/2,pe=ve*I[k],xe=ne<=0||ve<=0,be=ve>0?Math.min(4,p/ve*(180/Math.PI)):0,ge=ie?180:360,ye=[];let Me=ie?-90:A;Y.forEach((e,t)=>{if(!ee.visible[t]||null===e.value||0===e.value)return;const l=Math.abs(e.value)/ne,a=l*ge;ye.push({index:t,start:Me,end:Me+a,value:e.value,share:l}),Me+=a});const je=null===te?[]:[{seriesIndex:te,name:Z[te]?.name,color:Y[te]?.color??ae[te],value:Y[te]?.value??null,formatted:`${X(Y[te]?.value??0)} · ${Math.round(10*(Math.abs(Y[te]?.value??0)/ne*100+Number.EPSILON))/10}%`,label:Y[te]?.label}];return t(r,{...q,size:G,variant:K,padded:V,className:W,legendSide:ue,legend:de?e(n,{series:Z,colors:ae,options:oe,visibility:ee,size:G,values:oe.showValue?Y.map(e=>null===e.value?void 0:X(e.value)):void 0}):null,table:xe?null:e(a,{id:U,caption:R,categories:Z.map(e=>e.name??""),series:[{name:R,data:P}],values:[Y],format:X,locale:H}),children:[t("div",{ref:J,role:"img",tabIndex:xe?void 0:0,"aria-label":R??T.chart,"aria-describedby":xe?void 0:U,onPointerLeave:()=>le(null),onBlur:()=>le(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=ye.map(e=>e.index);if(0===t.length)return;const l=null===te?-1:t.indexOf(te),a="ArrowRight"===e.key?l+1:l-1;le(t[(a+t.length)%t.length]),e.preventDefault()},className:N("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:re},children:[xe?e("div",{className:N("flex h-full items-center justify-center text-(--plass-muted-fg)",w[G]),children:O??T.empty}):Q>0?t("svg",{width:Q,height:re,viewBox:`0 0 ${Q} ${re}`,"aria-hidden":"true",className:"block",children:[ye.map(t=>{const l=null!==ee.hovered&&ee.hovered!==t.index||null!==te&&te!==t.index,a=t.end-t.start>2*be?be/2:0;return e("path",{d:m(he,fe,ve,pe,t.start+a,t.end-a),fill:Y[t.index].color??ae[t.index],opacity:l?.32:1,onPointerEnter:ce?void 0:()=>le(t.index),className:o},t.index)}),"all"===$?ye.map(t=>{const l=((t.start+t.end)/2-90)*(Math.PI/180),a=pe>0?(pe+ve)/2:.68*ve,n=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*a<2*se||ve-pe<1.6*se?null:e("text",{x:he+a*Math.cos(l),y:fe+a*Math.sin(l),textAnchor:"middle",dominantBaseline:"central",fontSize:se,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},t.index)}):null]}):null,S&&pe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:he-pe,top:fe-pe,width:2*pe,height:ie?pe:2*pe},children:S}):null,null===te||ce?null:me.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:me.render({index:te,category:Z[te]?.name??te,items:je})}):e(s,{heading:Z[te]?.name,items:je,x:he,y:8,flip:!1,size:G})]}),ce?null:e(i,{heading:null===te?void 0:Z[te]?.name,items:je})]})}

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

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

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

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

package/dist/components/pill/PlPill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{controlSlots as n,controlTextClasses as r,cx as o,focusRingClasses as i,gapClasses as a,glassClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as p,metaTextClasses as f,paddingXClasses as x,sheetBodyClasses as u,transitionClasses as h}from"../../internal/styles.js";const g={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${c} text-(--p-accent) bg-(--p-soft)`},v={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},b={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},w={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},y={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},N={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:c="solid",size:k="md",color:j="secondary",density:z="default",elevation:_=2,startIcon:P,endIcon:R,title:C,description:H,details:I,expanded:O=!1,position:$="static",side:B="top",className:E,style:F,children:S,onClick:q,...A},D){const G=l.useRef(null),[J,K]=l.useState(0);l.useEffect(()=>{const e=G.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>K(e.scrollHeight));return s.observe(e),K(e.scrollHeight),()=>s.disconnect()},[I]);const L=Boolean(q),M=x[z][k],Q=s(t,{children:[d(P)?e("span",{className:o("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",p[k]),children:P}):null,d(C)||d(H)||d(S)?s("span",{className:o("flex min-w-0 flex-1 flex-col items-center justify-center text-center",y[z][k]),children:[d(C)?e("span",{className:"max-w-full truncate",children:C}):null,d(H)?e("span",{className:o("max-w-full truncate font-normal",f[k],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:H}):null,S]}):null]});return s("div",{ref:D,className:o("inline-flex max-w-full flex-col overflow-hidden align-middle",w[k],"font-medium whitespace-nowrap select-none",r[k],g[c],h,m,L?`plass-glow ${v[c]}`:"",N[$][B],E),style:{...n(j,_,c),...F},...A,children:[s("div",{className:o("flex shrink-0 items-center py-1",b[k],a[k],L?"ps-0":M,d(R)?"pe-1":L?"pe-0":""),children:[L?e("button",{type:"button",className:o("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",a[k],M,i),onClick:q,children:Q}):Q,d(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:R}):null]}),d(I)?e("div",{className:o("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:O?J:0},inert:!O,children:e("div",{ref:G,className:o("whitespace-normal pb-2",M,u[k]),children:I})}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,controlTextClasses as o,cx as i,focusRingClasses as a,gapClasses as c,glassClasses as d,hasContent as m,iconClasses as p,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as u,sheetBodyClasses as h,transitionClasses as g}from"../../internal/styles.js";const v={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[d,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${d} text-(--p-accent) bg-(--p-soft)`},b={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},w={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},y={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},j={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:d="solid",size:k,color:z,density:_,elevation:P=2,startIcon:R,endIcon:C,title:H,description:I,details:O,expanded:$=!1,position:B="static",side:E="top",className:F,style:S,children:q,onClick:A,...D},G){const J=r(),K=k??J.size??"md",L=z??J.color??"secondary",M=_??J.density??"default",Q=l.useRef(null),[T,U]=l.useState(0);l.useEffect(()=>{const e=Q.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>U(e.scrollHeight));return s.observe(e),U(e.scrollHeight),()=>s.disconnect()},[O]);const V=Boolean(A),W=u[M][K],X=s(t,{children:[m(R)?e("span",{className:i("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",f[K]),children:R}):null,m(H)||m(I)||m(q)?s("span",{className:i("flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[M][K]),children:[m(H)?e("span",{className:"max-w-full truncate",children:H}):null,m(I)?e("span",{className:i("max-w-full truncate font-normal",x[K],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:I}):null,q]}):null]});return s("div",{ref:G,className:i("inline-flex max-w-full flex-col overflow-hidden align-middle",y[K],"font-medium whitespace-nowrap select-none",o[K],v[d],g,p,V?`plass-glow ${b[d]}`:"",j[B][E],F),style:{...n(L,P,d),...S},...D,children:[s("div",{className:i("flex shrink-0 items-center py-1",w[K],c[K],V?"ps-0":W,m(C)?"pe-1":V?"pe-0":""),children:[V?e("button",{type:"button",className:i("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[K],W,a),onClick:A,children:X}):X,m(C)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null]}),m(O)?e("div",{className:i("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:$?T:0},inert:!$,children:e("div",{ref:Q,className:i("whitespace-normal pb-2",W,h[K]),children:O})}):null]})});

package/dist/components/popconfirm/PlPopconfirm.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassSize, PlassSide } from '../../types.js';
+export interface PlPopconfirmProps {
+    /** What opens it. The element it is put on keeps everything it already had. */
+    trigger: React.ReactElement;
+    /** The question, as the heading that names the popup. */
+    title?: React.ReactNode;
+    /** A line under it. Say what happens. */
+    description?: React.ReactNode;
+    /** The word on the button that answers yes. @default 'Confirm' */
+    confirmLabel?: React.ReactNode;
+    /** The word on the button that answers no. @default 'Cancel' */
+    cancelLabel?: React.ReactNode;
+    /**
+     * What confirming does. **A promise is waited for**: the button shows its
+     * loading state until it settles and the popup closes only if it resolves, so
+     * a failed request leaves the question on screen instead of pretending.
+     *
+     * A rejection is caught and goes no further. Keeping the question up is the
+     * whole of what this component owes a failure; what the failure *means* is
+     * the caller's, and `onConfirm` is where to report it from.
+     */
+    onConfirm?: () => void | Promise<unknown>;
+    /** What cancelling does, beyond closing. */
+    onCancel?: () => void;
+    /** @default 'danger' */
+    color?: PlassColor;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** Which edge of the trigger it opens against. @default 'top' */
+    side?: PlassSide;
+    /** @default 'center' */
+    align?: PlassAlign;
+    /** How wide the sheet may get. @default 280 */
+    width?: number | string;
+    /** The popup is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Classes on the popup, alongside the component's own. */
+    className?: string;
+}
+/**
+ * A question asked where it was raised, rather than in the middle of the page.
+ *
+ * The difference from [`PlConfirmProvider`](../feedback/confirm) is not the
+ * words, it is **how much it interrupts**. A modal takes the page away and is
+ * right for the question that deserves that — deleting an account, discarding
+ * an hour of work. This is right for the row's own delete button: the question
+ * appears against the thing it is about, the rest of the table stays readable,
+ * and a reader who changes their mind presses Escape and is exactly where they
+ * were.
+ *
+ * The rule of thumb is what happens if they answer by accident. If the answer
+ * is "they can undo it", this is the one.
+ *
+ * `color` defaults to `danger` here and to `primary` on a `PlButton`, and that
+ * is not an inconsistency: nobody reaches for a popconfirm to ask whether to
+ * save.
+ */
+export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/PlPopconfirm.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:p,cancelLabel:d,onConfirm:f,onCancel:u,color:g,size:h,side:j="top",align:y="center",width:C=280,open:x,defaultOpen:P,onOpenChange:b,className:v}){const w=r(),z=s(),N=p??z.confirm,O=d??z.cancel,k=h??w.size??"md",L=g??"danger",[S,B]=t.useState(P??!1),F=x??S,[q,A]=t.useState(!1),setOpen=e=>{void 0===x&&B(e),b?.(e)};return e(n,{trigger:l,open:F,onOpenChange:e=>{q||(e||u?.(),setOpen(e))},title:c,description:m,side:j,align:y,width:C,color:L,size:k,showClose:!1,className:v,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:q,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(i,{color:L,size:k,density:"compact",loading:q,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){A(!0);try{await e,setOpen(!1)}catch{}finally{A(!1)}}else setOpen(!1)},children:N})]})})}

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

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

package/dist/components/popconfirm/index.js

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

package/dist/components/popover/PlPopover.d.ts

@@ -104,4 +104,4 @@ export declare const PlPopoverClose: React.ForwardRefExoticComponent<Omit<import
  * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
  * surface, the width ladder and the header.
  */
-export declare function PlPopover({ size, color, density, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;
+export declare function PlPopover({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel: closeLabelProp, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;

package/dist/components/popover/PlPopover.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Popover as a}from"@base-ui/react/popover";import{CloseIcon as l}from"../../internal/icons.js";import{cx as t,focusRingClasses as o,glassClasses as r,hasContent as i,metaTextClasses as n,radiusClasses as d,sheetBodyClasses as p,sheetHeaderGapClasses as c,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as h,surfaceSlots as u}from"../../internal/styles.js";const x={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v=/* @__PURE__ */[r,"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(" "),b={xs:8,sm:9,md:10,lg:11,xl:12},w=/* @__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)",o].join(" ");export const PlPopoverClose=a.Close;export function PlPopover({size:o="md",color:r="primary",density:y="default",trigger:N,title:k,description:j,children:O,side:P="bottom",align:_="center",sideOffset:C=6,alignOffset:z=0,arrow:L=!1,open:M,defaultOpen:T,onOpenChange:W,modal:A=!1,dismissible:B=!0,showClose:D=!1,closeLabel:E="Close",width:R,className:$,style:q,...F}){const G=m[y][o],H=f[y][o],I=b[o],J=i(k)||i(j);return s(a.Root,{open:M,defaultOpen:T,modal:A,onOpenChange:(e,s)=>{B||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?W?.(e):s.cancel()},children:[N?e(a.Trigger,{render:N}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:_,sideOffset:C,alignOffset:z,children:s(a.Popup,{className:t(v,d[o],p[o],g[o],G,H,void 0===R?x[o]:"",$),style:{...u(r,3),...void 0===R?null:{maxWidth:"number"==typeof R?`${R}px`:R},...q},...F,children:[L?e(a.Arrow,{className:t("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"),children:s("svg",{width:I,height:I/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,J||D?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:t("flex min-w-0 flex-1 flex-col",c[o]),children:[i(k)?e(a.Title,{className:t("m-0 font-semibold",h[o]),children:k}):null,i(j)?e(a.Description,{className:t("m-0 text-(--plass-muted-fg)",n[o]),children:j}):null]}),D?e(a.Close,{"aria-label":E,className:w,children:e(l,{})}):null]}):null,i(O)?e("div",{className:"min-w-0",children:O}):null]})})})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as o}from"../../internal/icons.js";import{cx as r,focusRingClasses as i,glassClasses as n,hasContent as d,metaTextClasses as p,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as g,sheetPaddingYClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as x,surfaceSlots as v}from"../../internal/styles.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=/* @__PURE__ */[n,"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(" "),y={xs:8,sm:9,md:10,lg:11,xl:12},N=/* @__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)",i].join(" ");export const PlPopoverClose=t.Close;export function PlPopover({size:i,color:n,density:j,trigger:k,title:O,description:P,children:_,side:z="bottom",align:C="center",sideOffset:L=6,alignOffset:M=0,arrow:T=!1,open:W,defaultOpen:A,onOpenChange:B,modal:D=!1,dismissible:E=!0,showClose:R=!1,closeLabel:$,width:q,className:F,style:G,...H}){const I=a(),J=l(),K=$??J.close,Q=i??I.size??"md",S=n??I.color??"primary",U=j??I.density??"default",V=g[U][Q],X=h[U][Q],Y=y[Q],Z=d(O)||d(P);return s(t.Root,{open:W,defaultOpen:A,modal:D,onOpenChange:(e,s)=>{E||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?B?.(e):s.cancel()},children:[k?e(t.Trigger,{render:k}):null,e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:z,align:C,sideOffset:L,alignOffset:M,children:s(t.Popup,{className:r(w,c[Q],m[Q],u[Q],V,X,void 0===q?b[Q]:"",F),style:{...v(S,3),...void 0===q?null:{maxWidth:"number"==typeof q?`${q}px`:q},...G},...H,children:[T?e(t.Arrow,{className:r("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"),children:s("svg",{width:Y,height:Y/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,Z||R?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:r("flex min-w-0 flex-1 flex-col",f[Q]),children:[d(O)?e(t.Title,{className:r("m-0 font-semibold",x[Q]),children:O}):null,d(P)?e(t.Description,{className:r("m-0 text-(--plass-muted-fg)",p[Q]),children:P}):null]}),R?e(t.Close,{"aria-label":K,className:N,children:e(o,{})}):null]}):null,d(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}

package/dist/components/portal/PlPortal.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * Somewhere in the document to put the children.
+ *
+ * Four shapes, and the last three exist because of the same fact: the element a
+ * portal targets is usually one React has not created yet when the prop is
+ * being built. A ref is `null` on the render that creates it, and a query
+ * finds nothing until the tree is in the document — so the target is resolved
+ * after mount rather than read off the props.
+ */
+export type PlPortalContainer = Element | DocumentFragment | React.RefObject<Element | null> | (() => Element | DocumentFragment | null) | null;
+export interface PlPortalProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Where the children go. `document.body` when it is not said.
+     *
+     * Takes an element, a fragment, a **ref**, or a function returning one of
+     * those. The ref and the function are resolved after mount, which is what
+     * lets a portal target something React itself renders.
+     */
+    container?: PlPortalContainer;
+    /**
+     * Renders in place instead of moving anything.
+     *
+     * **Decide it once, at mount.** A portalled subtree and an inline one are
+     * different children as far as React is concerned, so turning this on or off
+     * remounts everything inside and throws away what was in it: a half-filled
+     * form, a scroll position, a video that was playing. That is
+     * reconciliation rather than a shortcoming here, and no portal escapes it.
+     *
+     * It is a prop rather than an absence so that a caller can decide from
+     * something only they know — a subtree that is already inside a portal, an
+     * embed with no `document.body` worth reaching, a test that wants the markup
+     * where it was written.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<ul />}` for a portal
+     * whose target is a list, `render={<tbody />}` for one whose target is a
+     * table. Base UI's own escape hatch, and the answer to a wrapper that is the
+     * wrong element for where it landed.
+     */
+    render?: useRender.RenderProp;
+    /** What is moved. */
+    children?: React.ReactNode;
+}
+/**
+ * Children, rendered somewhere else in the document.
+ *
+ * `createPortal` with the three things this library has to add on top, and it
+ * is worth being clear that the first is the only real reason to reach for it.
+ *
+ * **It carries `plass-portal`.** Every surface the library sends through a
+ * portal — a modal, a drawer, a menu, a popover, a tooltip, a toast — lands with
+ * that class on it, because a portalled subtree leaves whatever element a host
+ * had scoped its CSS reset to and the class is how that host finds it again.
+ * A caller's own portal that did not carry it is the one subtree on the page
+ * the reset misses.
+ *
+ * **It renders nothing until it has mounted.** There is no `document` on a
+ * server, so the HTML that ships never contains a portalled subtree and the
+ * hydrating render does not either. That is not a limitation to work around —
+ * it is what a portal is — so anything that has to be in the server's HTML does
+ * not belong in one.
+ *
+ * **`container` is resolved after mount**, which is what lets it be a ref or a
+ * query. The element a portal targets is usually one React has not created yet
+ * at the moment the prop is written.
+ *
+ * What it does **not** do is carry the colour scheme. `styles.css` answers to a
+ * `.dark` or a `[data-theme]` on any ancestor, and a portal to `document.body`
+ * has left every ancestor it had — so a subtree pinned to one theme goes back
+ * to the page's. That is true of the library's own popups too, and the fix is
+ * the same for both: portal into an element that is inside the theme, with
+ * `container`.
+ */
+export declare const PlPortal: React.ForwardRefExoticComponent<PlPortalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/portal/PlPortal.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{createPortal as r}from"react-dom";import{useRender as t}from"@base-ui/react/use-render";import{cx as n}from"../../internal/styles.js";export const PlPortal=/* @__PURE__ */e.forwardRef(function PlPortal({container:o,disabled:c=!1,render:s,className:a,children:l,...u},i){const[d,m]=e.useState(null);e.useEffect(()=>{c||m(function resolveContainer(e){return"function"==typeof e?e()??document.body:e&&"current"in e?e.current??document.body:e??document.body}(o))},[o,c]);const f=t({render:s,ref:i,props:{className:n("plass-portal",a),children:l,...u}});return c?f:d?r(f,d):null});

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

@@ -0,0 +1,2 @@
+export { PlPortal } from './PlPortal.js';
+export type { PlPortalContainer, PlPortalProps } from './PlPortal.js';

package/dist/components/portal/index.js

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

package/dist/components/progress-box/PlProgressBox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{fillTransitionClasses as r,plateGapClasses as t,plateRadiusClasses as n,plateSizeClasses as i,progressAriaText as o,progressFraction as m,progressSlots as c,progressText as u,trackClasses as f}from"../../internal/progress.js";import{cx as d,metaTextClasses as p,stackGapClasses as x}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l="md",color:h="primary",count:g=4,value:y=null,min:b=0,max:v=100,label:w,showValue:N=!1,format:j,className:M,style:P,...k},V){const A=m(y,b,v),B=null===A,R=void 0!==j,T=Math.max(1,Math.floor(g));return a(s.Root,{ref:V,value:y??null,min:b,max:v,format:j,getAriaValueText:o(A,R),className:d("inline-flex flex-col",x[l],M),style:{...c(h),...P},...k,children:[w||N?a("div",{className:d("flex items-baseline gap-2",w?"justify-between":"justify-end",p[l]),children:[w?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(A,e,R)}):null]}):null,e(s.Track,{className:d("flex",t[l]),children:Array.from({length:T},(a,s)=>e("span",{className:d("relative overflow-hidden",f,i[l],n[l]),children:e("span",{"aria-hidden":"true",className:d("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",B?"plass-plate-wave w-full":r),style:B?{"--p-i":s}:{width:`${Math.min(100,Math.max(0,100*(A*T-s)))}%`}})},s))})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillTransitionClasses as t,plateGapClasses as i,plateRadiusClasses as n,plateSizeClasses as o,progressAriaText as m,progressFraction as c,progressSlots as u,progressText as f,trackClasses as d}from"../../internal/progress.js";import{cx as p,metaTextClasses as x,stackGapClasses as h}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l,color:g,count:y=4,value:b=null,min:j=0,max:v=100,label:w,showValue:N=!1,format:M,className:P,style:k,...V},z){const A=s(),B=l??A.size??"md",R=g??A.color??"primary",T=c(b,j,v),L=null===T,$=void 0!==M,q=Math.max(1,Math.floor(y));return a(r.Root,{ref:z,value:b??null,min:j,max:v,format:M,getAriaValueText:m(T,$),className:p("inline-flex flex-col",h[B],P),style:{...u(R),...k},...V,children:[w||N?a("div",{className:p("flex items-baseline gap-2",w?"justify-between":"justify-end",x[B]),children:[w?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>f(T,e,$)}):null]}):null,e(r.Track,{className:p("flex",i[B]),children:Array.from({length:q},(a,l)=>e("span",{className:p("relative overflow-hidden",d,o[B],n[B]),children:e("span",{"aria-hidden":"true",className:p("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",L?"plass-plate-wave w-full":t),style:L?{"--p-i":l}:{width:`${Math.min(100,Math.max(0,100*(T*q-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/PlProgressCircular.js

@@ -1 +1 @@
-"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{Progress as a}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as l,progressSlots as o,progressText as i,ringDiameters as n,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as f,metaTextClasses as u}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:d="md",color:p="primary",value:h=null,min:x=0,max:k=100,label:g,showValue:v=!1,format:y,className:$,style:w,...N},j){const P=l(h,x,k),b=null===P,C=void 0!==y,V=`${e.useId()}-fill`,D=n[d],I=c[d],L=D/2,R=L-I/2,W=2*Math.PI*R,_=b?`${.28*W} ${W}`:`${W}`,z=b?0:W*(1-P);return s(a.Root,{ref:j,value:h??null,min:x,max:k,format:y,getAriaValueText:t(P,C),className:m("inline-flex items-center",f[d],u[d],$),style:{...o(p),...w},...N,children:[s("svg",{className:m("shrink-0",b&&"plass-ring-spin"),width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:V,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:L,cy:L,r:R,stroke:"var(--plass-track)",strokeWidth:I}),r("circle",{cx:L,cy:L,r:R,stroke:`url(#${V})`,strokeWidth:I,strokeLinecap:"round",strokeDasharray:_,strokeDashoffset:z,transform:`rotate(-90 ${L} ${L})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),g?r(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:g}):null,v?r(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>i(P,r,C)}):null]})});
+"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as t}from"@base-ui/react/progress";import{progressAriaText as l,progressFraction as o,progressSlots as i,progressText as n,ringDiameters as c,ringStrokes as m}from"../../internal/progress.js";import{cx as f,gapClasses as u,metaTextClasses as d}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:p,color:h,value:x=null,min:k=0,max:g=100,label:v,showValue:y=!1,format:$,className:j,style:w,...N},P){const b=a(),C=p??b.size??"md",V=h??b.color??"primary",z=o(x,k,g),D=null===z,I=void 0!==$,L=`${e.useId()}-fill`,R=c[C],W=m[C],_=R/2,A=_-W/2,B=2*Math.PI*A,G=D?`${.28*B} ${B}`:`${B}`,M=D?0:B*(1-z);return s(t.Root,{ref:P,value:x??null,min:k,max:g,format:$,getAriaValueText:l(z,I),className:f("inline-flex items-center",u[C],d[C],j),style:{...i(V),...w},...N,children:[s("svg",{className:f("shrink-0",D&&"plass-ring-spin"),width:R,height:R,viewBox:`0 0 ${R} ${R}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:L,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:_,cy:_,r:A,stroke:"var(--plass-track)",strokeWidth:W}),r("circle",{cx:_,cy:_,r:A,stroke:`url(#${L})`,strokeWidth:W,strokeLinecap:"round",strokeDasharray:G,strokeDashoffset:M,transform:`rotate(-90 ${_} ${_})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),v?r(t.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,y?r(t.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(z,r,I)}):null]})});

package/dist/components/progress-linear/PlProgressLinear.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as a,fillTransitionClasses as t,progressAriaText as n,progressFraction as o,progressSlots as i,progressText as m,trackClasses as u}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as d}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s="md",color:p="primary",value:x=null,min:g=0,max:b=100,label:h,showValue:w=!1,format:j,className:v,style:N,...y},P){const k=o(x,g,b),L=null===k,V=void 0!==j;return l(r.Root,{ref:P,value:x??null,min:g,max:b,format:j,getAriaValueText:n(k,V),className:c("flex w-full flex-col",d[s],v),style:{...i(p),...N},...y,children:[h||w?l("div",{className:c("flex items-baseline gap-2",h?"justify-between":"justify-end",f[s]),children:[h?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:h}):null,w?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>m(k,e,V)}):null]}):null,e(r.Track,{className:c("relative w-full overflow-hidden rounded-full",u,a[s]),children:e(r.Indicator,{className:c("rounded-full [background-image:var(--p-fill)]",L?"plass-progress-sweep":`absolute top-0 ${t}`)})})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as a}from"@base-ui/react/progress";import{barThicknessClasses as t,fillTransitionClasses as o,progressAriaText as n,progressFraction as i,progressSlots as m,progressText as u,trackClasses as c}from"../../internal/progress.js";import{cx as f,metaTextClasses as d,stackGapClasses as p}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */r.forwardRef(function PlProgressLinear({size:r,color:x,value:g=null,min:b=0,max:h=100,label:j,showValue:w=!1,format:v,className:N,style:y,...P},k){const L=s(),V=r??L.size??"md",z=x??L.color??"primary",R=i(g,b,h),T=null===R,A=void 0!==v;return l(a.Root,{ref:k,value:g??null,min:b,max:h,format:v,getAriaValueText:n(R,A),className:f("flex w-full flex-col",p[V],N),style:{...m(z),...y},...P,children:[j||w?l("div",{className:f("flex items-baseline gap-2",j?"justify-between":"justify-end",d[V]),children:[j?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:j}):null,w?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(R,e,A)}):null]}):null,e(a.Track,{className:f("relative w-full overflow-hidden rounded-full",c,t[V]),children:e(a.Indicator,{className:f("rounded-full [background-image:var(--p-fill)]",T?"plass-progress-sweep":`absolute top-0 ${o}`)})})]})});

package/dist/components/radio-group/PlRadioGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as l}from"@base-ui/react/radio";import{RadioGroup as o}from"@base-ui/react/radio-group";import{Field as s}from"@base-ui/react/field";import{controlSlots as t,cx as i,focusRingClasses as c,glassClasses as d,hasContent as n,metaTextClasses as p,tickDotClasses as m,tickRowTextClasses as f,tickSizeClasses as u,transitionClasses as h}from"../../internal/styles.js";const b=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1}),g=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,c].join(" "),x=/* @__PURE__ */[d,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105"].join(" "),v=/* @__PURE__ */[d,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),N=/* @__PURE__ */[d,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:o,description:t,disabled:i=!1,className:c,style:d,...n},h){const k=r.useContext(b),y=n.readOnly??k.readOnly;return e(s.Root,{disabled:i,className:["flex flex-col",c??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${f[k.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:h,className:[g,u[k.size],i?N:y?v:x].join(" "),disabled:i,...n,children:e(l.Indicator,{className:`rounded-full bg-current ${m[k.size]}`})})}),o||t?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[o?e(s.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:o}):null,t?e(s.Description,{className:`${p[k.size]} text-(--plass-muted-fg)`,children:t}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:l="md",color:c="primary",orientation:d="vertical",label:m,description:f,error:u,invalid:h,disabled:g=!1,readOnly:x=!1,className:v,classNames:N,style:k,children:y,...j},R){const z=n(u),w=h??z,O=w?"danger":c,P=r.useMemo(()=>({size:l,color:O,readOnly:x}),[l,O,x]);return e(b.Provider,{value:P,children:a(s.Root,{disabled:g,invalid:w,className:["flex flex-col gap-1.5",v??""].filter(Boolean).join(" "),style:{...t(O,0,"solid"),...k},children:[m?e(s.Label,{className:i(p[l],"font-semibold",g?"text-(--plass-muted-fg)":"text-(--plass-fg)",N?.label),children:m}):null,f?e(s.Description,{className:i(p[l],"text-(--plass-muted-fg)",N?.description),children:f}):null,e(o,{ref:R,disabled:g,readOnly:x,className:i("flex","horizontal"===d?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",N?.control),...j,children:y}),e(s.Error,z?{match:!0,className:i(p[l],"text-(--p-accent)",N?.error),children:u}:{className:i(p[l],"text-(--p-accent)",N?.error)})]})})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as c,glassClasses as d,hasContent as p,metaTextClasses as m,tickDotClasses as u,tickRowTextClasses as f,tickSizeClasses as h,transitionClasses as b}from"../../internal/styles.js";const g=/* @__PURE__ */a.createContext({size:"md",color:"primary",readOnly:!1}),x=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,c].join(" "),v=/* @__PURE__ */[d,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105"].join(" "),k=/* @__PURE__ */[d,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),y=/* @__PURE__ */[d,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),N=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */a.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:c,...d},p){const b=a.useContext(g),j=d.readOnly??b.readOnly;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:c,children:r("div",{className:`flex items-start gap-2 ${f[b.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[x,h[b.size],i?y:j?k:v].join(" "),disabled:i,...d,children:e(o.Indicator,{keepMounted:!0,className:`${N} ${u[b.size]}`})})}),l||s?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`${m[b.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */a.forwardRef(function PlRadioGroup({size:o,color:c,orientation:d="vertical",label:u,description:f,error:h,invalid:b,disabled:x=!1,readOnly:v=!1,className:k,classNames:y,style:N,children:j,...R},z){const w=l(),O=o??w.size??"md",P=c??w.color??"primary",$=p(h),G=b??$,B=G?"danger":P,C=a.useMemo(()=>({size:O,color:B,readOnly:v}),[O,B,v]);return e(g.Provider,{value:C,children:r(t.Root,{disabled:x,invalid:G,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...N},children:[u?e(t.Label,{className:n(m[O],"font-semibold",x?"text-(--plass-muted-fg)":"text-(--plass-fg)",y?.label),children:u}):null,f?e(t.Description,{className:n(m[O],"text-(--plass-muted-fg)",y?.description),children:f}):null,e(s,{ref:z,disabled:x,readOnly:v,className:n("flex","horizontal"===d?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",y?.control),...R,children:j}),e(t.Error,$?{match:!0,className:n(m[O],"text-(--p-accent)",y?.error),children:h}:{className:n(m[O],"text-(--p-accent)",y?.error)})]})})});

package/dist/components/rating/PlRating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{StarIcon as n,StarOutlineIcon as r}from"../../internal/icons.js";import{controlSlots as l,cx as i,focusWithinRingClasses as s,gapClasses as o,iconSizeClasses as c,radiusClasses as d,srOnlyClasses as u,transitionClasses as m}from"../../internal/styles.js";const h="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:p,defaultValue:f=0,onValueChange:y,count:b=5,precision:x=1,icon:v,emptyIcon:g,clearable:N=!0,readOnly:M=!1,disabled:w=!1,name:j,required:L=!1,size:P="md",color:k="warning",label:R="Rating",valueLabel:V=defaultValueLabel,className:q,style:C,onPointerLeave:I,...S},A){const $=t.useId(),z=j??$,[E,F]=t.useState(f),O=void 0!==p,B=O?p:E,[D,G]=t.useState(null),H=Math.max(1,Math.floor(b)),J=x>0&&x<=1?x:1,K=Math.round(1/J),Q=Math.max(0,Math.min(H,D??B)),change=e=>{O||F(e),y?.(e)},T=Array.from({length:H},(t,l)=>{const o=Math.max(0,Math.min(1,Q-l));return a("span",{className:i("relative inline-flex shrink-0",c[P],d.xs,M||w?"":s),children:[e("span",{className:i(h,c[P],"text-(--p-empty)"),children:g??e(r,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*o+"%"},children:e("span",{className:i(h,c[P],"text-(--p-accent)",m),children:v??e(n,{})})}),M?null:Array.from({length:K},(a,t)=>{const n=Number((l+(t+1)*J).toFixed(4));return e("label",{className:i("absolute inset-y-0",w?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/K+"%",width:100/K+"%"},onPointerEnter:()=>{w||G(n)},children:e("input",{type:"radio",className:u,name:z,value:n,checked:B===n,disabled:w,required:L,"aria-label":V(n,H),onChange:()=>change(n),onClick:()=>{N&&B===n&&change(0)}})},n)})]},l)}),U=i("inline-flex items-center align-middle",o[P],w?"cursor-not-allowed opacity-50 saturate-[0.35]":"",q),W={...l(k,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...C};return e("div",M?{ref:A,role:"img","aria-label":V(Math.max(0,Math.min(H,B)),H),className:U,style:W,onPointerLeave:I,...S,children:T}:{ref:A,role:"radiogroup","aria-label":R,"aria-disabled":w||void 0,"aria-required":L||void 0,className:U,style:W,onPointerLeave:e=>{G(null),I?.(e)},...S,children:T})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{StarIcon as l,StarOutlineIcon as i}from"../../internal/icons.js";import{controlSlots as s,cx as o,focusWithinRingClasses as c,gapClasses as d,iconSizeClasses as m,radiusClasses as u,srOnlyClasses as f,transitionClasses as h}from"../../internal/styles.js";const p="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:b,defaultValue:y=0,onValueChange:x,count:v=5,precision:g=1,icon:N,emptyIcon:M,clearable:j=!0,readOnly:w=!1,disabled:L=!1,name:P,required:k=!1,size:V,color:q,label:C,valueLabel:I=defaultValueLabel,className:R,style:S,onPointerLeave:z,...A},$){const E=r(),F=n(),O=C??F.rating,B=V??E.size??"md",D=q??E.color??"warning",G=t.useId(),H=P??G,[J,K]=t.useState(y),Q=void 0!==b,T=Q?b:J,[U,W]=t.useState(null),X=Math.max(1,Math.floor(v)),Y=g>0&&g<=1?g:1,Z=Math.round(1/Y),_=Math.max(0,Math.min(X,U??T)),change=e=>{Q||K(e),x?.(e)},ee=Array.from({length:X},(t,r)=>{const n=Math.max(0,Math.min(1,_-r));return a("span",{className:o("relative inline-flex shrink-0",m[B],u.xs,w||L?"":c),children:[e("span",{className:o(p,m[B],"text-(--p-empty)"),children:M??e(i,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:o(p,m[B],"text-(--p-accent)",h),children:N??e(l,{})})}),w?null:Array.from({length:Z},(a,t)=>{const n=Number((r+(t+1)*Y).toFixed(4));return e("label",{className:o("absolute inset-y-0",L?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/Z+"%",width:100/Z+"%"},onPointerEnter:()=>{L||W(n)},children:e("input",{type:"radio",className:f,name:H,value:n,checked:T===n,disabled:L,required:k,"aria-label":I(n,X),onChange:()=>change(n),onClick:()=>{j&&T===n&&change(0)}})},n)})]},r)}),ae=o("inline-flex items-center align-middle",d[B],L?"cursor-not-allowed opacity-50 saturate-[0.35]":"",R),te={...s(D,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...S};return e("div",w?{ref:$,role:"img","aria-label":I(Math.max(0,Math.min(X,T)),X),className:ae,style:te,onPointerLeave:z,...A,children:ee}:{ref:$,role:"radiogroup","aria-label":O,"aria-disabled":L||void 0,"aria-required":k||void 0,className:ae,style:te,onPointerLeave:e=>{W(null),z?.(e)},...A,children:ee})});

package/dist/components/scatter-chart/PlScatterChart.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type MarkShape } from '../../internal/chart.js';
+export interface PlScatterChartProps extends CartesianChartProps {
+    /**
+     * What each mark is drawn as.
+     *
+     * - `auto` — the default. A circle while colour alone can carry identity, and
+     *   a shape per series from the fourth on, because past three it cannot: two
+     *   of the palette's hues are indistinguishable under deuteranopia, and a
+     *   shape is the one channel a dot has going spare.
+     * - `varied` — a shape per series always, in the fixed order circle, square,
+     *   triangle, diamond, cross. Reach for it when the chart will be printed or
+     *   read in greyscale.
+     * - one of the five names — every mark the same shape. On four or more series
+     *   this is opting out of the second channel; do it only when each series
+     *   carries a `color` of its own.
+     * @default 'auto'
+     */
+    shape?: MarkShape | 'varied' | 'auto';
+    /**
+     * The radius of a mark with no `z`, in pixels.
+     * @default the `size` ladder — 4 at `md`
+     */
+    pointRadius?: number;
+    /**
+     * The radius of the largest bubble, in pixels. Everything else is scaled
+     * under it by area.
+     * @default a twelfth of the chart's height
+     */
+    maxRadius?: number;
+}
+/**
+ * Two numbers per point, and whether they move together.
+ *
+ * Both axes measure, which is what makes this the only chart in the library
+ * with no categories: there is no column a mark belongs to and no order the
+ * points could be shuffled out of. A point with a `z` is drawn as a bubble and
+ * one without it as a dot, so a scatter and a bubble chart are the same
+ * component reading the same data — the third number is simply present or not.
+ *
+ * `x` must be a number or a `Date`. A string has no place on a number line, and
+ * a chart of named things against one measure is a
+ * [`PlBarChart`](./bar-chart).
+ */
+export declare function PlScatterChart({ shape, pointRadius, maxRadius, series, categories, size: sizeProp, xAxis, ...props }: PlScatterChartProps): React.JSX.Element;

package/dist/components/scatter-chart/PlScatterChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as s,formatCategory as i,markerRadii as o,markGap as c,markPath as n,markShapes as u,plotHeights as d,pointX as h}from"../../internal/chart.js";import{useDefaults as m}from"../../internal/defaults.js";import{cx as x,srOnlyClasses as f}from"../../internal/styles.js";export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:i,series:c,categories:x,size:f,xAxis:p,...b}){const v=m(),y=f??v.size??"md",g=l??o[y],z=i??Math.max(g+2,("number"==typeof b.height?b.height:d[y])/12),k=c.reduce((e,r)=>r.color?e:e+1,0),j="auto"===r||"varied"===r?"circle":r,M="varied"===r||"auto"===r&&k>3,w=a.useCallback(e=>M?u[e%u.length]:j,[M,j]),N=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((t,l)=>{e.visible[l]&&t.forEach((t,i)=>{if(null===t.value)return;const o=h(t,i,x);null!==o&&r.push({series:l,index:i,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?g:s(t.z,a,z,2)})})}),r},[x,g,z]);return e(t,{...b,series:c,categories:x,size:y,xScale:"value",xAxis:p,marks:N,markInset:z,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:n(w(r),5,5,4),fill:a})}),table:r=>e(ScatterTable,{id:r,series:c,categories:x,label:b.label,xLabel:p?.label,yLabel:b.yAxis?.label,locale:b.locale??v.locale,format:b.format}),children:r=>e(ScatterMarks,{context:r,shapeOf:w})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:s,values:i,colors:o,hovered:u,activeMark:d}=r,h=a.useMemo(()=>[...s].sort((e,r)=>r.r-e.r),[s]);return e("g",{children:h.map(r=>{const a=i[r.series]?.[r.index],s=null!==u&&u!==r.series,h=d?.series===r.series&&d?.index===r.index;return e("path",{d:n(t(r.series),r.x,r.y,r.r),fill:a?.color??o[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:c,opacity:s?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:h&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}function ScatterTable({id:t,series:l,categories:s,label:o,xLabel:c,yLabel:n,locale:u,format:d}){const h=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),m=l.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:t,className:x(f),children:[o?e("caption",{children:o}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:c??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:l.flatMap((a,t)=>a.data.map((l,o)=>{const c="object"==typeof l&&null!==l?l:null,n=c?c.y:"number"==typeof l?l:null,d=c?.x??s?.[o]??o;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:i(d,u)}),e("td",{children:null!==n&&Number.isFinite(n)?h.format(n):""}),m?e("td",{children:void 0===c?.z?"":h.format(c.z)}):null]},`${t}-${o}`)}))})]})}

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

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

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

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