plass-ui 1.0.0 → 1.0.2

package/dist/components/panes/PlPanes.js

@@ -1,324 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { cx, transitionClasses } from '../../internal/styles.js';
-const PaneContext = /* @__PURE__ */ React.createContext({ basis: null });
-/**
- * The width of a handle, and the width of the target the pointer has to hit.
- *
- * A visible line one pixel wide is a target one pixel wide, which is not a
- * target. So the handle is a track several pixels across with the hairline drawn
- * down the middle of it — the same split a scrollbar makes between what is drawn
- * and what can be grabbed.
- */
-const handleTrackClasses = {
-    xs: 'basis-1',
-    sm: 'basis-1.5',
-    md: 'basis-2',
-    lg: 'basis-2.5',
-    xl: 'basis-3'
-};
-/** The same numbers, as the total the panes have to give up to the handles. */
-const handleTrackValues = {
-    xs: 4,
-    sm: 6,
-    md: 8,
-    lg: 10,
-    xl: 12
-};
-/** How far one arrow key press moves a handle. */
-const KEYBOARD_STEP = 16;
-/**
- * A CSS length, in pixels.
- *
- * Only the four units a split is ever written in are accepted; anything else
- * resolves to `undefined`, which every caller here reads as "no constraint"
- * rather than as zero. A bad string should leave a pane unbounded, not pin it
- * shut.
- */
-function toPixels(value, extent, root) {
-    if (value === undefined || value === null)
-        return undefined;
-    if (typeof value === 'number')
-        return (extent * value) / 100;
-    const match = /^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(value);
-    if (!match)
-        return undefined;
-    const amount = Number(match[1]);
-    if (Number.isNaN(amount))
-        return undefined;
-    switch (match[2]) {
-        case 'px':
-            return amount;
-        case '%':
-            return (extent * amount) / 100;
-        case 'rem':
-            return amount * parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
-        case 'em':
-            return amount * parseFloat((root && getComputedStyle(root).fontSize) || '16');
-        default:
-            return undefined;
-    }
-}
-/** Every pane's share of the space, summing to 1. */
-function initialFractions(constraints, extent, root) {
-    const sizes = constraints.map((pane) => toPixels(pane.defaultSize, extent, root));
-    const named = sizes.reduce((total, size) => total + (size ?? 0), 0);
-    const unnamed = sizes.filter((size) => size === undefined).length;
-    // Whatever is left after the named panes, split evenly. Negative when the
-    // caller asked for more than there is, which the clamp below turns into zero.
-    const share = unnamed > 0 ? Math.max(0, extent - named) / unnamed : 0;
-    const resolved = sizes.map((size) => Math.max(0, size ?? share));
-    const total = resolved.reduce((sum, size) => sum + size, 0);
-    if (total <= 0)
-        return resolved.map(() => 1 / Math.max(1, resolved.length));
-    return resolved.map((size) => size / total);
-}
-/**
- * A set of panes with draggable handles between them.
- *
- * The panes are sized in **fractions**, written out as
- * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
- * rest of this file follows from: a split described in percentages survives the
- * window being resized without a single line of JavaScript running, so the
- * component measures itself only twice — once on mount, to turn a `'240px'`
- * default into a fraction, and once at the start of each drag, to know what a
- * pixel of pointer movement is worth.
- *
- * The handles are interleaved here rather than written by the caller, so the
- * children of a `PlPanes` are just panes. That does mean the direct children have
- * to *be* `PlPane`s: the constraints are read off their props, and a pane wrapped
- * in something else is a pane with no minimum.
- */
-export const PlPanes = /* @__PURE__ */ React.forwardRef(function PlPanes({ orientation = 'horizontal', resizable = true, color = 'primary', size = 'md', onResize, onResizeEnd, className, style, children, ...props }, ref) {
-    const items = React.Children.toArray(children).filter(React.isValidElement);
-    const count = items.length;
-    const rootRef = React.useRef(null);
-    const setRootRef = React.useCallback((node) => {
-        rootRef.current = node;
-        if (typeof ref === 'function')
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    }, [ref]);
-    // The constraints are read during render and used inside pointer handlers that
-    // outlive it, so they go through a ref rather than through the closure.
-    const constraintsRef = React.useRef([]);
-    constraintsRef.current = items.map((item) => item.props);
-    const [stored, setFractions] = React.useState(null);
-    // A pane added or removed leaves the stored split a render behind the children
-    // — the effect below re-splits, but the render in between would be reading a
-    // share off the end of the list. Until the two agree, nobody has a size and
-    // every pane falls back to an even share.
-    const fractions = stored && stored.length === count ? stored : null;
-    const fractionsRef = React.useRef(null);
-    fractionsRef.current = fractions;
-    const horizontal = orientation === 'horizontal';
-    const gutter = handleTrackValues[size] * Math.max(0, count - 1);
-    /*
-     * One measurement, for one purpose: turning a `defaultSize` written as a
-     * length into a fraction. It is an observer rather than a single read because
-     * a split inside a closed `PlAccordion` or an unselected `PlTab` is zero wide when
-     * it mounts, and dividing by that would put every pane at nothing.
-     */
-    React.useEffect(() => {
-        const root = rootRef.current;
-        if (!root)
-            return;
-        const measure = () => {
-            const rect = root.getBoundingClientRect();
-            const extent = (horizontal ? rect.width : rect.height) - gutter;
-            if (extent <= 0)
-                return;
-            setFractions((previous) => previous && previous.length === count
-                ? previous
-                : initialFractions(constraintsRef.current, extent, root));
-        };
-        measure();
-        const observer = new ResizeObserver(measure);
-        observer.observe(root);
-        return () => observer.disconnect();
-    }, [count, horizontal, gutter]);
-    /**
-     * Everything a drag needs to know, measured at the moment it starts.
-     *
-     * A drag only ever moves the boundary between two panes, so their total is
-     * fixed and one pane's floor is the other's ceiling. Folding all four bounds
-     * into a single range on the first of the pair is what keeps every move to one
-     * clamp and one division.
-     */
-    function grip(index) {
-        const root = rootRef.current;
-        const current = fractionsRef.current;
-        if (!resizable || !root || !current || current[index + 1] === undefined)
-            return null;
-        const rect = root.getBoundingClientRect();
-        const extent = (horizontal ? rect.width : rect.height) - gutter;
-        if (extent <= 0)
-            return null;
-        const before = constraintsRef.current[index];
-        const after = constraintsRef.current[index + 1];
-        const start = current[index] * extent;
-        const pair = start + current[index + 1] * extent;
-        const lower = Math.max(toPixels(before?.minSize, extent, root) ?? 0, pair - (toPixels(after?.maxSize, extent, root) ?? pair));
-        const upper = Math.min(toPixels(before?.maxSize, extent, root) ?? pair, pair - (toPixels(after?.minSize, extent, root) ?? 0));
-        if (upper < lower)
-            return null;
-        return {
-            root,
-            current,
-            extent,
-            start,
-            pair,
-            resize(delta) {
-                const sized = Math.min(upper, Math.max(lower, start + delta));
-                const next = [...current];
-                next[index] = sized / extent;
-                next[index + 1] = (pair - sized) / extent;
-                setFractions(next);
-                onResize?.(next.map((fraction) => fraction * 100));
-                return next;
-            }
-        };
-    }
-    /**
-     * How to take a drag in flight apart, held for as long as one is running.
-     *
-     * A drag is torn down by the `pointerup` that ends it, and that event never
-     * arrives if the split goes away first — a route change, a closed accordion, a
-     * pane list that shrank. What is left behind is not only two listeners on a
-     * detached node: the drag takes the whole document's text selection away while
-     * it runs, and nothing else ever puts it back.
-     */
-    const teardownRef = React.useRef(null);
-    React.useEffect(() => () => teardownRef.current?.(), []);
-    function beginDrag(index, event) {
-        const held = grip(index);
-        if (!held)
-            return;
-        const handle = event.currentTarget;
-        handle.setPointerCapture(event.pointerId);
-        handle.dataset.dragging = 'true';
-        /*
-         * A drag across a page selects the text it passes over, and the obvious cure
-         * — `preventDefault` on the press — also stops the browser focusing the
-         * handle, which leaves the component focusing it by hand and every mouse
-         * press wearing a keyboard focus ring. Taking the selection off the document
-         * for the length of the drag fixes the selection without touching the focus.
-         *
-         * The property is written prefixed and through `setProperty`, because WebKit
-         * implements only `-webkit-user-select`: it has no `userSelect` on a style
-         * declaration, so `style.userSelect = 'none'` hangs a plain JS property off
-         * the object, changes nothing, and Safari selects text through the whole
-         * drag. Chromium and Firefox both read the prefixed name as the standard
-         * one. This is what Tailwind's own `select-none` emits, for the same reason.
-         */
-        const selection = document.body.style.getPropertyValue('-webkit-user-select');
-        document.body.style.setProperty('-webkit-user-select', 'none');
-        const origin = horizontal ? event.clientX : event.clientY;
-        // Positive is always "toward the end", so a drag under RTL moves the
-        // boundary the way the pointer went rather than the way the axis is numbered.
-        const towardsEnd = horizontal && getComputedStyle(held.root).direction === 'rtl' ? -1 : 1;
-        let latest = held.current;
-        const move = (moveEvent) => {
-            const position = horizontal ? moveEvent.clientX : moveEvent.clientY;
-            latest = held.resize((position - origin) * towardsEnd);
-        };
-        // Everything the drag took from outside itself, given back. Split from `end`
-        // because unmounting has to run this half and must not run the other: a
-        // component that disappeared did not finish resizing, and telling a caller it
-        // did would set state on the way out of the tree.
-        const release = () => {
-            teardownRef.current = null;
-            handle.removeEventListener('pointermove', move);
-            handle.removeEventListener('pointerup', end);
-            handle.removeEventListener('pointercancel', end);
-            delete handle.dataset.dragging;
-            // Removed rather than set back to '', so a page that never wrote the
-            // property inline is left with the declaration it actually had.
-            if (selection)
-                document.body.style.setProperty('-webkit-user-select', selection);
-            else
-                document.body.style.removeProperty('-webkit-user-select');
-        };
-        const end = () => {
-            release();
-            onResizeEnd?.(latest.map((fraction) => fraction * 100));
-        };
-        teardownRef.current = release;
-        handle.addEventListener('pointermove', move);
-        handle.addEventListener('pointerup', end);
-        handle.addEventListener('pointercancel', end);
-    }
-    function nudge(index, pixels) {
-        const held = grip(index);
-        if (!held)
-            return;
-        const next = held.resize(pixels);
-        // A key press is a whole gesture on its own — there is no "let go" to wait
-        // for, so the settled callback fires with it.
-        onResizeEnd?.(next.map((fraction) => fraction * 100));
-    }
-    const handleClassNames = cx('group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center', handleTrackClasses[size], transitionClasses, '[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0', resizable
-        ? cx(horizontal ? 'cursor-col-resize' : 'cursor-row-resize', 'hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)')
-        : '');
-    return (_jsx("div", { ref: setRootRef, className: cx('flex h-full w-full', horizontal ? 'flex-row' : 'flex-col', 
-        // A flex item refuses to go below its content's intrinsic size unless it
-        // is told to, which is what turns a pane holding a long line into a pane
-        // that cannot be dragged narrower.
-        'min-h-0 min-w-0', className), 
-        // Three slots rather than the whole `surfaceSlots` set: a split draws no
-        // sheet, so the family only ever shows up in the handle's hairline, the
-        // tint under a hovered handle and the focus ring.
-        style: {
-            '--p-accent': `var(--plass-${color}-accent)`,
-            '--p-soft': `var(--plass-${color}-soft)`,
-            '--p-ring': `var(--plass-${color}-ring)`,
-            ...style
-        }, ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx("div", { role: "separator", "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-valuenow": fractions ? Math.round(fractions[index - 1] * 100) : undefined, "aria-valuemin": 0, "aria-valuemax": 100, "aria-disabled": !resizable || undefined, tabIndex: resizable ? 0 : -1, className: handleClassNames, 
-                    // No `preventDefault` and no explicit focus: the browser focuses
-                    // the handle on a press by itself, and it knows that a press is
-                    // not a keystroke — which is what keeps the focus ring off a
-                    // handle somebody merely dragged. `beginDrag` takes the page's
-                    // text selection away for the length of the drag instead.
-                    onPointerDown: (event) => {
-                        if (event.button !== 0)
-                            return;
-                        beginDrag(index - 1, event);
-                    }, onKeyDown: (event) => {
-                        const back = horizontal ? 'ArrowLeft' : 'ArrowUp';
-                        const forward = horizontal ? 'ArrowRight' : 'ArrowDown';
-                        if (event.key !== back && event.key !== forward)
-                            return;
-                        event.preventDefault();
-                        nudge(index - 1, event.key === forward ? KEYBOARD_STEP : -KEYBOARD_STEP);
-                    }, children: _jsx("span", { "aria-hidden": "true", className: cx('pointer-events-none bg-(--plass-border)', transitionClasses, horizontal ? 'h-full w-px' : 'h-px w-full', resizable
-                            ? 'group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)'
-                            : '') }) })) : null, _jsx(PaneContext.Provider, { value: {
-                        basis: fractions
-                            ? `calc((100% - ${gutter}px) * ${fractions[index].toFixed(6)})`
-                            : null
-                    }, children: item })] }, item.key ?? index))) }));
-});
-/**
- * One region of a split.
- *
- * It carries no surface of its own on purpose: a split is layout, and the moment
- * a pane drew a sheet it would stop being usable as the thing a `PlCard`, a
- * `PlTable` or an editor is put inside. Put a `PlCard` in it when a surface is
- * wanted.
- *
- * `defaultSize`, `minSize` and `maxSize` are read by the `PlPanes` around it
- * rather than used here — a pane cannot know what "half" is, only the split can.
- */
-export const PlPane = /* @__PURE__ */ React.forwardRef(function PlPane(
-// The three sizing props are named here only so they are taken out of the
-// rest, which is spread onto a `<div>` — `defaultSize` on a div is an
-// attribute React does not know and would hand straight to the DOM.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-{ defaultSize, minSize, maxSize, className, style, children, ...props }, ref) {
-    const { basis } = React.useContext(PaneContext);
-    return (_jsx("div", { ref: ref, className: cx('relative min-h-0 min-w-0 overflow-auto', className), 
-        // `1 1 0%` before the split has measured itself, so a pane renders at an
-        // even share on the first paint instead of at nothing and then jumping.
-        style: { flex: basis ? `0 0 ${basis}` : '1 1 0%', ...style }, ...props, children: children }));
-});
+"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})});

package/dist/components/panes/index.js

@@ -1 +1 @@
-export { PlPane, PlPanes } from './PlPanes.js';
+export{PlPane,PlPanes}from"./PlPanes.js";

package/dist/components/pill/PlPill.js

@@ -1,154 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { controlSlots, controlTextClasses, cx, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, iconSizeClasses, metaTextClasses, paddingXClasses, sheetBodyClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The three materials, said the way a *control* says them — the surface takes
- * the tint, as on a `PlButton` and a `PlChip`, because a pill is the thing being
- * coloured rather than a sheet holding somebody else's content.
- */
-const restClasses = {
-    solid: 'text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]',
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--p-accent) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: `${glassClasses} text-(--p-accent) bg-(--p-soft)`
-};
-const hoverClasses = {
-    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)'
-};
-/**
- * The row's floor, as a minimum rather than as a height.
- *
- * The numbers are `controlHeightClasses`' — a collapsed pill lines up with a
- * `PlButton` of the same `size` beside it — but a pill carrying a description is
- * two lines tall and a fixed height would clip the second.
- */
-const rowMinHeightClasses = {
-    xs: 'min-h-5.5',
-    sm: 'min-h-6.5',
-    md: 'min-h-8',
-    lg: 'min-h-10',
-    xl: 'min-h-12'
-};
-/**
- * Exactly half the row's minimum height at every step — 22, 26, 32, 40 and 48px
- * — so a collapsed pill is a true stadium.
- *
- * Written as a length rather than as `rounded-full`, and the difference only
- * shows once the pill grows: `rounded-full` on a box that has taken a second
- * line, or opened its `details`, is a corner half its new height, and a corner
- * that big eats the first two words of every line. Pinning the radius to the
- * *row* is what lets the lozenge grow into a rounded rectangle with the same
- * corner it always had.
- */
-const pillRadiusClasses = {
-    xs: 'rounded-[0.6875rem]',
-    sm: 'rounded-[0.8125rem]',
-    md: 'rounded-[1rem]',
-    lg: 'rounded-[1.25rem]',
-    xl: 'rounded-[1.5rem]'
-};
-/**
- * The air either side of the middle, and the thing that makes this shape read as
- * the lozenge it is rather than as a wide `PlChip`.
- *
- * Roughly double the control padding at every step. The leading glyph and the
- * trailing slot are the pill's furniture; what it is *about* is the column
- * between them, and giving that column noticeably more room than either
- * neighbour is what puts the eye there first. `density` halves it, exactly as it
- * does everywhere else.
- */
-const centerPaddingClasses = {
-    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' }
-};
-/**
- * The leading box: a square the size of a standalone glyph, clipped round.
- *
- * `iconSizeClasses` rather than a ladder of its own, because that table already
- * answers the same question — how big is a glyph that is not riding on a label —
- * and the leading slot of a pill is exactly that.
- */
-const mediaClasses = 'flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover';
-/**
- * The description under the title.
- *
- * Mixed toward transparent rather than pointed at `--plass-muted-fg`: the middle
- * of a pill sits on the colour family's own fill as often as on a bare surface,
- * and a fixed grey that reads as secondary on white reads as dirt on `primary`.
- * Taking the ink that is already there and letting some of the surface through
- * is the one form of "one step quieter" that holds on all three materials.
- */
-const descriptionClasses = '[color:color-mix(in_oklab,currentColor_72%,transparent)]';
-/** Where a pinned pill hangs, and how far in from the edge. */
-const positionClasses = {
-    static: { top: '', bottom: '' },
-    sticky: { top: 'sticky top-3 z-20', bottom: 'sticky bottom-3 z-20' },
-    fixed: {
-        // Centred by stretching the box across the viewport and letting `mx-auto`
-        // shrink it back, not by translating it half its own width. The house rule
-        // against transforming a surface holds here too, and `auto` margins are
-        // direction-agnostic, so the lozenge stays centred under RTL.
-        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'
-    }
-};
-/**
- * A floating lozenge holding a small amount of live information.
- *
- * The shape is a **stadium**, which the house radius rule otherwise forbids:
- * every control is held just short of the 50% that would make it a pill, because
- * the flat run along its top and bottom edge is what still reads as a sheet with
- * the corners cut off it. This is the exception the rule is drawn against, and
- * it works for the same reason the rule does — this is not a sheet lying on the
- * page. It is an object hovering over one, and an object hovering over the page
- * should not look as though it was cut from the same material.
- *
- * `details` is revealed by animating a measured height, exactly as a
- * `PlAccordion` panel is: nothing is transformed and no text is resampled, the
- * pill is simply a window that opens. The measurement is a `ResizeObserver`
- * rather than a hardcoded height, so a details area whose content changes —
- * which is what live information does — grows with it.
- */
-export const PlPill = /* @__PURE__ */ React.forwardRef(function PlPill({ variant = 'solid', size = 'md', color = 'secondary', density = 'default', elevation = 2, startIcon, endIcon, title, description, details, expanded = false, position = 'static', side = 'top', className, style, children, onClick, ...props }, ref) {
-    const detailsRef = React.useRef(null);
-    const [detailsHeight, setDetailsHeight] = React.useState(0);
-    React.useEffect(() => {
-        const element = detailsRef.current;
-        if (!element || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(() => setDetailsHeight(element.scrollHeight));
-        observer.observe(element);
-        setDetailsHeight(element.scrollHeight);
-        return () => observer.disconnect();
-    }, [details]);
-    const interactive = Boolean(onClick);
-    const padX = paddingXClasses[density][size];
-    const row = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: cx(mediaClasses, iconSizeClasses[size]), children: startIcon })) : null, hasContent(title) || hasContent(description) || hasContent(children) ? (_jsxs("span", { className: cx('flex min-w-0 flex-1 flex-col items-center justify-center text-center', centerPaddingClasses[density][size]), children: [hasContent(title) ? _jsx("span", { className: "max-w-full truncate", children: title }) : null, hasContent(description) ? (_jsx("span", { className: cx('max-w-full truncate font-normal', metaTextClasses[size], descriptionClasses), children: description })) : null, children] })) : null] }));
-    return (_jsxs("div", { ref: ref, className: cx('inline-flex max-w-full flex-col overflow-hidden align-middle', pillRadiusClasses[size], 'font-medium whitespace-nowrap select-none', controlTextClasses[size], restClasses[variant], transitionClasses, iconClasses, interactive ? `plass-glow ${hoverClasses[variant]}` : '', positionClasses[position][side], className), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [_jsxs("div", { className: cx(
-                // `min-h` rather than a fixed height: one line keeps the stadium the
-                // radius ladder is cut for, and a title with a description under it
-                // grows into a rounded rectangle instead of being clipped. `py-1`
-                // costs nothing in the one-line case — the minimum is taller than
-                // the line plus the padding — and is what keeps two lines off the
-                // edges.
-                'flex shrink-0 items-center py-1', rowMinHeightClasses[size], gapClasses[size], 
-                // With a pressable middle the padding belongs to the button, so its
-                // hit area covers the whole row rather than just the words.
-                interactive ? 'ps-0' : padX, hasContent(endIcon) ? 'pe-1' : interactive ? 'pe-0' : ''), children: [interactive ? (_jsx("button", { type: "button", className: cx('flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch', 
-                        // `inherit`, so the focus ring traces the lozenge's own corners
-                        // rather than drawing a second, squarer rectangle inside them.
-                        'rounded-[inherit]', gapClasses[size], padX, focusRingClasses), onClick: onClick, children: row })) : (row), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: endIcon })) : null] }), hasContent(details) ? (_jsx("div", { className: cx('overflow-hidden', '[transition:height_var(--plass-duration-slow)_var(--plass-ease)]', 'motion-reduce:[transition-duration:0ms]'), style: { height: expanded ? detailsHeight : 0 }, 
-                // `inert` rather than `aria-hidden`: a collapsed panel is a
-                // zero-height box that its content is still perfectly focusable
-                // inside, and `aria-hidden` alone would leave a keyboard reader
-                // tabbing into something their screen reader has been told does not
-                // exist.
-                inert: !expanded, children: _jsx("div", { ref: detailsRef, className: cx('whitespace-normal pb-2', padX, sheetBodyClasses[size]), children: details }) })) : null] }));
-});
+"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]})});

package/dist/components/pill/index.js

@@ -1 +1 @@
-export { PlPill } from './PlPill.js';
+export{PlPill}from"./PlPill.js";

package/dist/components/popover/PlPopover.js

@@ -1,113 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover as BaseUIPopover } from '@base-ui/react/popover';
-import { CloseIcon } from '../../internal/icons.js';
-import { cx, focusRingClasses, glassClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
-/**
- * How wide the popup is allowed to get, per `size` — the same axis `PlModal`
- * folds its width into, one rung narrower at every step because a popover is a
- * detail beside a control rather than a sheet in the middle of the page.
- */
-const maxWidthClasses = {
-    xs: 'max-w-56',
-    sm: 'max-w-64',
-    md: 'max-w-80',
-    lg: 'max-w-96',
-    xl: 'max-w-lg'
-};
-/**
- * The sheet. The same frosted panel a `PlSelect` popup and a `PlModal` draw, and
- * for the same reason it carries the top of the shadow ladder: it is one of the
- * few surfaces in the library that is genuinely meant to float.
- */
-const popupClasses = /* @__PURE__ */ [
-    glassClasses,
-    '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]',
-    // Opacity only. A popup that scales or slides in drags its own text across the
-    // screen for the length of the transition, which is the one thing the house
-    // style is against — and unlike a control, this one is full of text.
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-/** The wedge, at roughly a third of the sheet's corner radius per step. */
-const arrowSizes = {
-    xs: 8,
-    sm: 9,
-    md: 10,
-    lg: 11,
-    xl: 12
-};
-/** The × in the corner, the same one a `PlModal` draws. */
-const closeButtonClasses = /* @__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)',
-    focusRingClasses
-].join(' ');
-/**
- * Closes the popover it is inside.
- *
- * Exported for `PlModalClose`'s reason: an uncontrolled popover has no `setOpen`
- * for its Cancel button to call, and making every popover controlled is a piece
- * of state per popover that exists only to answer a button.
- *
- * `render` is Base UI's own escape hatch, so a real Plass button dismisses:
- * `<PlPopoverClose render={<PlButton variant="ghost">Cancel</PlButton>} />`.
- */
-export const PlPopoverClose = BaseUIPopover.Close;
-/**
- * A sheet that opens beside the thing that opened it.
- *
- * The difference from a `PlTooltip` is that this one can be **reached**: it
- * stays up until it is dismissed, it can be entered with the pointer or the
- * keyboard, and what is inside it can be clicked and typed into. The difference
- * from a `PlModal` is that it does not take the page — it is anchored to a
- * control, and the page behind goes on working.
- *
- * Base UI owns everything hard about it: the anchoring and the flip at the
- * window edge, the click-outside and Escape, returning focus to the trigger, and
- * the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
- * surface, the width ladder and the header.
- */
-export function PlPopover({ size = 'md', color = 'primary', density = 'default', trigger, title, description, children, side = 'bottom', align = 'center', sideOffset = 6, alignOffset = 0, arrow = false, open, defaultOpen, onOpenChange, modal = false, dismissible = true, showClose = false, closeLabel = 'Close', width, className, style, ...props }) {
-    const insetX = sheetPaddingXClasses[density][size];
-    const insetY = sheetPaddingYClasses[density][size];
-    const arrowSize = arrowSizes[size];
-    const hasHeader = hasContent(title) || hasContent(description);
-    return (_jsxs(BaseUIPopover.Root, { open: open, defaultOpen: defaultOpen, modal: modal, onOpenChange: (next, details) => {
-            // Base UI has no `disablePointerDismissal` on a popover, so both ways
-            // out are cancelled here by the reason the change arrives with. An
-            // imperative close and a `PlPopoverClose` press still get through, which
-            // is what keeps `dismissible={false}` from being a trap.
-            if (!dismissible &&
-                !next &&
-                (details.reason === 'escape-key' ||
-                    details.reason === 'outside-press' ||
-                    details.reason === 'focus-out')) {
-                details.cancel();
-                return;
-            }
-            onOpenChange?.(next);
-        }, children: [trigger ? _jsx(BaseUIPopover.Trigger, { render: trigger }) : null, _jsx(BaseUIPopover.Portal, { children: _jsx(BaseUIPopover.Positioner, { className: "plass-portal z-50 [outline:none]", side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, children: _jsxs(BaseUIPopover.Popup, { className: cx(popupClasses, radiusClasses[size], sheetBodyClasses[size], sheetSectionGapClasses[size], insetX, insetY, width === undefined ? maxWidthClasses[size] : '', className), style: {
-                            ...surfaceSlots(color, 3),
-                            ...(width === undefined
-                                ? null
-                                : { maxWidth: typeof width === 'number' ? `${width}px` : width }),
-                            ...style
-                        }, ...props, children: [arrow ? (_jsx(BaseUIPopover.Arrow
-                            // Base UI positions the wedge and reports which side it ended up
-                            // on. It is drawn pointing down once and turned to match — a
-                            // rotation of a glyph, which is the one allowance the
-                            // no-transform rule makes.
-                            , { 
-                                // Base UI positions the wedge and reports which side it ended up
-                                // on. It is drawn pointing down once and turned to match — a
-                                // rotation of a glyph, which is the one allowance the
-                                // no-transform rule makes.
-                                className: cx('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: _jsxs("svg", { width: arrowSize, height: arrowSize / 2, viewBox: "0 0 10 5", "aria-hidden": "true", className: "block", children: [_jsx("path", { d: "M0 0h10L5 5z", fill: "var(--plass-glass-press)" }), _jsx("path", { d: "M0 0 5 5 10 0", fill: "none", stroke: "var(--plass-glass-line)", strokeWidth: "1", vectorEffect: "non-scaling-stroke" })] }) })) : null, hasHeader || showClose ? (_jsxs("div", { className: "flex shrink-0 items-start gap-3", children: [_jsxs("div", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx(BaseUIPopover.Title, { className: cx('m-0 font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(description) ? (_jsx(BaseUIPopover.Description, { className: cx('m-0 text-(--plass-muted-fg)', metaTextClasses[size]), children: description })) : null] }), showClose ? (_jsx(BaseUIPopover.Close, { "aria-label": closeLabel, className: closeButtonClasses, children: _jsx(CloseIcon, {}) })) : null] })) : null, hasContent(children) ? _jsx("div", { className: "min-w-0", children: children }) : null] }) }) })] }));
-}
+"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-50 [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]})})})]})}

package/dist/components/popover/index.js

@@ -1 +1 @@
-export { PlPopover, PlPopoverClose } from './PlPopover.js';
+export{PlPopover,PlPopoverClose}from"./PlPopover.js";