plass-ui 1.0.0 → 1.0.2

package/dist/internal/icons.js

@@ -1,138 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The one thing in the library that moves on its own, and the only place that
- * is allowed: an indeterminate indicator that does not move is a decoration.
- *
- * Sized in `em` by `iconClasses`, like every other glyph inside a control, so
- * it tracks the label rather than carrying a size of its own.
- */
-export function Spinner() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "animate-spin", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }), _jsx("path", { d: "M14.5 8A6.5 6.5 0 0 0 8 1.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }));
-}
-/**
- * The disclosure chevron, drawn pointing **down**.
- *
- * One drawing for every direction: a PlAccordion's header, a PlSelect's
- * trigger, a PlPagination's stepper all want the same wedge turned a different
- * way. Turning it is the one allowance the no-transform rule makes — the rule
- * is about a control resampling its own label under the pointer, and a glyph
- * has no text in it to resample.
- */
-export function ChevronIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 6.5 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-/**
- * The arrow, drawn pointing **right**.
- *
- * One of the two marks a trail can put between its steps, and the one that says
- * "and then" out loud. It is turned back under RTL by whoever draws it rather
- * than being redrawn, the same allowance the chevron takes.
- */
-export function ArrowRightIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 8h10m-3.5-3.5L13 8l-3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-/** Three dots: the middle of something that has been folded away. */
-export function EllipsisIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "3.5", cy: "8", r: "1.15", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "8", r: "1.15", fill: "currentColor" }), _jsx("circle", { cx: "12.5", cy: "8", r: "1.15", fill: "currentColor" })] }));
-}
-/** The tick: a chosen option, a ticked menu item, a checked box. */
-export function CheckIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-6", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-/**
- * The two steppers' marks.
- *
- * A pair, and they stay one: a minus drawn at a different weight from the plus
- * beside it reads as two toolkits in one control.
- */
-export function MinusIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
-}
-export function PlusIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8 3.5v9M3.5 8h9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
-}
-/**
- * The ×.
- *
- * One drawing for every dismissal in the library — a file's remove button, an
- * alert's close, a modal's. Two copies of an × drift by half a pixel of stroke
- * weight, and then a page has two kinds of "close" on it.
- */
-export function CloseIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }));
-}
-/** The clock: something that has been started and has not finished. */
-export function ClockIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 4.5V8l2.4 1.6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-}
-/** The calendar: a page with a binding across the top. The pickers' glyph. */
-export function CalendarIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "2.25", y: "3.25", width: "11.5", height: "10.5", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M2.25 6.5h11.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M5.5 1.75v2.5M10.5 1.75v2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-}
-/** The chain: a link that stays on this page. */
-export function LinkIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-}
-/** The arrow leaving its box: a link that takes over a new tab. */
-export function ExternalLinkIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-}
-/** The neutral note: a circled `i` without the serif problem an `i` has at 16px. */
-function NoteIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 7.25v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "4.9", r: "0.85", fill: "currentColor" })] }));
-}
-/**
- * The filled dot a chosen radio row is marked with.
- *
- * A dot and not a tick, which is the distinction `PlCheckbox` and `PlRadioGroup`
- * make everywhere else: a tick says "and", a dot says "instead of".
- */
-export function DotIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("circle", { cx: "8", cy: "8", r: "3.25" }) }));
-}
-/**
- * A star, filled, in the same 16-unit box every other glyph here uses.
- *
- * `StarIcon` and `StarOutlineIcon` are the same five points traced twice —
- * once painted, once stroked — and they have to be, because `PlRating` lays one
- * over the other and clips the top copy to a fraction of the width. Two stars
- * of two shapes would show as a rim that does not line up with what is inside
- * it.
- */
-export function StarIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z" }) }));
-}
-/** The same five points, stroked. See `StarIcon`. */
-export function StarOutlineIcon() {
-    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) }));
-}
-/**
- * One drawing per colour family, and a piece of the design language rather than
- * a convenience.
- *
- * An alert that says "this went wrong" only in red says it only to some
- * readers, so the shape has to carry the meaning too — and that only holds if
- * every component uses the same shape for the same family.
- *
- * `primary` and `secondary` have no severity to draw, so they take the note the
- * informational one uses: three shapes for six families, because the three that
- * mean something are the three worth telling apart.
- *
- * A function and not the table of elements it reads like, because a table is
- * the one shape a bundler cannot take apart: six entries built at module load,
- * kept whole or not at all, and pulled into every component that touches the
- * file. A function declaration is dropped outright by anything that does not
- * call it, which is most of the library.
- */
-export function severityIcon(color) {
-    if (color === 'success') {
-        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-    }
-    if (color === 'warning') {
-        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), _jsx("path", { d: "M8 6.1v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "8", cy: "11.2", r: "0.85", fill: "currentColor" })] }));
-    }
-    if (color === 'danger') {
-        return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-    }
-    return _jsx(NoteIcon, {});
-}
+import{jsx as r,jsxs as e}from"react/jsx-runtime";export function Spinner(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[r("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),r("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export function ChevronIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 6.5 3.5 3.5 3.5-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function ArrowRightIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3 8h10m-3.5-3.5L13 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EllipsisIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"3.5",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"8",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"12.5",cy:"8",r:"1.15",fill:"currentColor"})]})}export function CheckIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m3.5 8.5 3 3 6-6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export function MinusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function PlusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M8 3.5v9M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function CloseIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 4.5 7 7m0-7-7 7",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function ClockIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 4.5V8l2.4 1.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function CalendarIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"2.25",y:"3.25",width:"11.5",height:"10.5",rx:"2",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M2.25 6.5h11.5",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M5.5 1.75v2.5M10.5 1.75v2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function LinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function ExternalLinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function NoteIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 7.25v4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"4.9",r:"0.85",fill:"currentColor"})]})}export function DotIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("circle",{cx:"8",cy:"8",r:"3.25"})})}export function StarIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z"})})}export function StarOutlineIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z",stroke:"currentColor",strokeWidth:"1.3",strokeLinejoin:"round"})})}export function severityIcon(o){return"success"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.25 8.25 1.9 1.9 3.6-3.9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}):"warning"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r("path",{d:"M8 6.1v3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"11.2",r:"0.85",fill:"currentColor"})]}):"danger"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}):r(NoteIcon,{})}

package/dist/internal/menu.js

@@ -1,18 +1 @@
-/**
- * What every row of a `PlMenu` inherits from the popup around it.
- *
- * A context rather than props threaded down, and a file of its own rather than
- * something exported from the component, for one reason: `PlMenu` and
- * `PlContextMenu` are two triggers onto the same surface, and a row written
- * inside either has to come out identical. A context declared in one of them
- * would make the other import from it.
- *
- * `size`, `color` and `density` belong to the *set*. A menu whose third row is
- * a size out is not a menu.
- */
-import * as React from 'react';
-export const MenuContext = /* @__PURE__ */ React.createContext({
-    size: 'md',
-    color: 'primary',
-    density: 'default'
-});
+import*as t from"react";export const MenuContext=/* @__PURE__ */t.createContext({size:"md",color:"primary",density:"default"});

package/dist/internal/picker.js

@@ -1,139 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Field } from '@base-ui/react/field';
-import { Popover } from '@base-ui/react/popover';
-import { CloseIcon } from './icons.js';
-import { WidthSizer } from './sizer.js';
-import { chipRemoveClasses, controlHeightClasses, controlTextLeadingClasses, cx, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusWithinRingClasses, gapClasses, glassClasses, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from './styles.js';
-/**
- * The shell all four pickers wear: a field-shaped trigger with a popup hanging
- * off it.
- *
- * It is here rather than in one of the components for the reason the calendar
- * is: four components need it, and none of them should have to import another.
- * What it draws is deliberately not new — the trigger is `fieldRestClasses`,
- * the same box a `PlTextField` and a `PlSelect`'s trigger are drawn on, to the
- * pixel. A form where the date field is a different height, radius or material
- * from the text field beside it is a form that looks assembled rather than
- * designed.
- *
- * The one thing the pickers do *not* offer is typing a date into the trigger.
- * Parsing a date out of free text is locale-dependent in a way that cannot be
- * done honestly without a date library, and a field that understands `27/7/26`
- * in one browser and not the next is worse than one that never claimed to. So
- * the trigger is a button, exactly as a select's is, and the calendar is where
- * the answer comes from.
- */
-/* ---------------------------------------------------------------------------
- * Colour
- * ------------------------------------------------------------------------- */
-/**
- * The popup's slots: a container's undyed sheet with the *control* fill added
- * back on top.
- *
- * Neither generator in `internal/styles` says this on its own, and the reason is
- * that a picker's popup is both things at once. It is a container — it holds a
- * grid of forty-two days, and dyeing the sheet under them would put every one of
- * them on a background it was not chosen against — and it also holds the one
- * filled token in the library that has to be found without being read, which is
- * the day you picked. So the sheet stays clear glass and the family arrives in
- * the two fill slots the chosen cell reads.
- */
-export function popupSlots(color, elevation) {
-    return {
-        ...surfaceSlots(color, elevation),
-        '--p-fill': `var(--plass-${color}-fill)`,
-        '--p-on-solid': `var(--plass-${color}-on-solid)`
-    };
-}
-/* ---------------------------------------------------------------------------
- * Surfaces
- * ------------------------------------------------------------------------- */
-/** The trigger's box. A `PlTextField`'s shell, unchanged. */
-const triggerShellClasses = /* @__PURE__ */ [
-    'group relative flex w-full items-center select-none',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusWithinRingClasses,
-    iconClasses
-].join(' ');
-/**
- * The popup. Like every floating surface in the library it carries a shadow by
- * default, at level 3 — as far as the ladder goes without hovering — because it
- * is genuinely off the page rather than merely on top of it.
- */
-export const pickerPopupClasses = /* @__PURE__ */ [
-    glassClasses,
-    '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 calendar that slid into place would move the cell the
-    // pointer was already reaching for.
-    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
-    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
-].join(' ');
-/** The popup's own padding, one track tighter than a control's. */
-export const popupPaddingClasses = {
-    xs: 'p-1.5',
-    sm: 'p-2',
-    md: 'p-2.5',
-    lg: 'p-3',
-    xl: 'p-3.5'
-};
-/**
- * A trigger, a label, the two lines of text under it, and a popup.
- *
- * Everything about it that is visible is a decision already made elsewhere: the
- * shell classes, the read-only and disabled treatments, the label's type scale
- * and the way `invalid` re-points the whole colour family at `danger` so the
- * edge, the ring and the message turn over together.
- */
-export function PickerShell({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, label, description, error, invalid, startIcon, fullWidth = false, disabled = false, readOnly = false, required = false, id, className, style, display, samples, empty, clearable = false, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }) {
-    const generatedId = React.useId();
-    const triggerId = id ?? `${generatedId}-trigger`;
-    const labelId = `${generatedId}-label`;
-    const descriptionId = `${generatedId}-description`;
-    const errorId = `${generatedId}-error`;
-    const hasError = error !== undefined && error !== null && error !== false && error !== '';
-    const isInvalid = invalid ?? hasError;
-    const family = isInvalid ? 'danger' : color;
-    const inert = disabled || readOnly;
-    const describedBy = [description ? descriptionId : null, hasError ? errorId : null].filter(Boolean).join(' ') ||
-        undefined;
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: cx('flex-col align-top', stackGapClasses[size], fullWidth ? 'flex w-full' : 'inline-flex', className), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [label ? (_jsx(Field.Label, { id: labelId, htmlFor: triggerId, className: cx(metaTextClasses[size], 'font-semibold', disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: label })) : null, _jsxs(Popover.Root, { open: open, onOpenChange: (next) => onOpenChange(next), children: [_jsxs("span", { className: cx(triggerShellClasses, controlHeightClasses[size], controlTextLeadingClasses[size], radiusClasses[size], gapClasses[size], paddingXClasses[density][size], 
-                        // An if/else rather than stacked variants: two Tailwind classes of
-                        // equal specificity resolve by their order in the generated sheet.
-                        disabled
-                            ? disabledClasses[variant]
-                            : readOnly
-                                ? fieldReadOnlyClasses[variant]
-                                : fieldRestClasses[variant]), children: [_jsxs(Popover.Trigger, { id: triggerId, ref: triggerRef, disabled: disabled, "aria-labelledby": label ? labelId : undefined, "aria-describedby": describedBy, "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, className: cx('flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit', gapClasses[size], '[outline:none]', inert ? 'cursor-default' : 'cursor-pointer'), children: [startIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: cx('w-full truncate', empty ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: display }), _jsx(WidthSizer, { samples: samples ?? [] })] })] }), clearable && !empty && !inert ? (_jsx("button", { type: "button", "aria-label": labels.clear, className: cx(chipRemoveClasses, 'text-(--plass-muted-fg)'), onClick: (event) => {
-                                    event.stopPropagation();
-                                    onClear();
-                                }, children: _jsx(CloseIcon, {}) })) : null] }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { className: "plass-portal z-50 [outline:none]", sideOffset: 6, align: "start", children: _jsx(Popover.Popup
-                            // Base UI is told to leave the focus alone so the calendar can take
-                            // it into the grid itself. Its own move would land on the popup
-                            // element and run *after* the grid's, undoing it.
-                            , { 
-                                // Base UI is told to leave the focus alone so the calendar can take
-                                // it into the grid itself. Its own move would land on the popup
-                                // element and run *after* the grid's, undoing it.
-                                initialFocus: false, className: cx(pickerPopupClasses, radiusClasses[size], popupPaddingClasses[size], controlTextLeadingClasses[size]), style: popupSlots(family, 3), children: children }) }) })] }), description ? (_jsx(Field.Description, { id: descriptionId, className: cx(metaTextClasses[size], 'text-(--plass-muted-fg)'), children: description })) : null, hasError ? (_jsx(Field.Error, { id: errorId, match: true, className: cx(metaTextClasses[size], 'text-(--p-accent)'), children: error })) : null, hiddenValues?.map((entry, index) => (_jsx("input", { type: "hidden", name: entry.name, value: entry.value }, index)))] }));
-}
-/* ---------------------------------------------------------------------------
- * The footer
- * ------------------------------------------------------------------------- */
-/**
- * The row of shortcuts under a picker's panel.
- *
- * A hairline above it rather than a gap, because the actions act on the panel
- * and a gap would read as a second popup stacked under the first.
- */
-export function PickerFooter({ size, children }) {
-    return (_jsx("div", { className: cx('flex items-center justify-end border-t pt-1.5', '[border-color:var(--plass-divider)]', gapClasses[size]), children: children }));
-}
-/** The vertical hairline between a calendar and the clock beside it. */
-export function PickerDivider() {
-    return _jsx("div", { "aria-hidden": "true", className: "w-px self-stretch bg-(--plass-divider)" });
-}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"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(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,style:B,display:E,samples:L,empty:T,clearable:V=!1,onClear:W,open:A,onOpenChange:G,labels:H,hiddenValues:J,children:K,triggerRef:M,...Q}){const U=s.useId(),X=I??`${U}-trigger`,Y=`${U}-label`,Z=`${U}-description`,ee=`${U}-error`,le=null!=z&&!1!==z&&""!==z,se=O??le,ae=se?"danger":x,re=S||q,te=[$?Z:null,le?ee:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:se,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(ae,k),...B},...Q,children:[C?e(a.Label,{id:Y,htmlFor:X,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:C}):null,l(r.Root,{open:A,onOpenChange:e=>G(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f]),children:[l(r.Trigger,{id:X,ref:M,disabled:S,"aria-labelledby":C?Y:void 0,"aria-describedby":te,"aria-required":D||void 0,"aria-invalid":se||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",re?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:E}),e(i,{samples:L??[]})]})]}),!V||T||re?null:e("button",{type:"button","aria-label":H.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),W()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(ae,3),children:K})})})]}),$?e(a.Description,{id:Z,className:d(b[g],"text-(--plass-muted-fg)"),children:$}):null,le?e(a.Error,{id:ee,match:!0,className:d(b[g],"text-(--p-accent)"),children:z}):null,J?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/progress.js

@@ -1,167 +1 @@
-/**
- * What the three progress indicators share.
- *
- * `PlProgressLinear`, `PlProgressCircular` and `PlProgressBox` are three shapes
- * answering one question — how far along is this, and is it moving at all — so
- * everything that is *not* the shape belongs here: the colour slots, the size
- * ladders, and the arithmetic that turns `value`/`min`/`max` into a fraction.
- *
- * What is left in each component is the shape, which is the point: it is the
- * only thing that genuinely differs.
- */
-/**
- * The slots an indicator reads.
- *
- * An indicator **is** the coloured thing — unlike a PlBox, which holds other
- * people's content — so it gets `--p-fill`, the family's own gradient, and the
- * filled part of a bar is made of exactly the same material as the button that
- * submits the form it is in.
- *
- * There is no elevation ladder and no `--p-lift` here, on purpose. An indicator
- * is cut *into* the surface it sits on, the way a groove is, and a groove does
- * not float.
- */
-export function progressSlots(color) {
-    return {
-        '--p-fill': `var(--plass-${color}-fill)`,
-        // The two ends of that gradient on their own, which only the ring needs: an
-        // SVG stroke cannot take a CSS gradient, so an arc has to build a
-        // `<linearGradient>` out of the same two stops the bar's fill is made of.
-        // Without them a ring would be a flat arc beside a swept bar.
-        '--p-solid': `var(--plass-${color}-solid)`,
-        '--p-solid-to': `var(--plass-${color}-solid-to)`,
-        '--p-accent': `var(--plass-${color}-accent)`,
-        '--p-soft': `var(--plass-${color}-soft)`,
-        '--p-soft-press': `var(--plass-${color}-soft-press)`
-    };
-}
-/**
- * How thick the linear groove is.
- *
- * Its own ladder rather than a fraction of `controlHeightClasses`: a bar is not
- * a control you can put a label inside, and at `md` it wants to be the weight
- * of a rule between two paragraphs rather than a quarter of a button.
- *
- * They are `PlSlider`'s rail thicknesses, and deliberately: a rail and a bar are
- * the same channel, one of which you drag and one of which you watch.
- */
-export const barThicknessClasses = {
-    xs: 'h-1',
-    sm: 'h-1.5',
-    md: 'h-1.5',
-    lg: 'h-2',
-    xl: 'h-2.5'
-};
-/**
- * The diameter of the ring, in pixels.
- *
- * Numbers rather than classes because the same value has to reach the SVG's
- * `viewBox` arithmetic, and a ring is one of the few things in the library that
- * cannot be described by a Tailwind class alone.
- *
- * They sit just under the control ladder at every step — a `md` ring is 20px
- * inside a 40px control — so a ring dropped into a button, a field or a table
- * row never makes the row taller than it already was.
- */
-export const ringDiameters = {
-    xs: 14,
-    sm: 16,
-    md: 20,
-    lg: 26,
-    xl: 32
-};
-/** The ring's stroke, thickening with the ring so the hole stays in proportion. */
-export const ringStrokes = {
-    xs: 1.5,
-    sm: 1.75,
-    md: 2,
-    lg: 2.5,
-    xl: 3
-};
-/**
- * One plate of a `PlProgressBox`, on the tick ladder — an indicator beside a
- * label, not a control you can put one inside.
- */
-export const plateSizeClasses = {
-    xs: 'size-2',
-    sm: 'size-2.5',
-    md: 'size-3',
-    lg: 'size-4',
-    xl: 'size-5'
-};
-/** The corner cut off a plate: the same ~30% the tick boxes take. */
-export const plateRadiusClasses = {
-    xs: 'rounded-[0.1875rem]',
-    sm: 'rounded-[0.25rem]',
-    md: 'rounded-[0.28125rem]',
-    lg: 'rounded-[0.375rem]',
-    xl: 'rounded-[0.4375rem]'
-};
-/** Between the plates. Tight — they are one object, not a row of squares. */
-export const plateGapClasses = {
-    xs: 'gap-1',
-    sm: 'gap-1',
-    md: 'gap-1.5',
-    lg: 'gap-1.5',
-    xl: 'gap-2'
-};
-/**
- * The groove an indicator is cut into, and the transition that fills it.
- *
- * `--plass-track` is the one neutral ink the library grooves with — a
- * PlSlider's rail and a PlSwitch's off track are the same colour — so a form
- * with a slider, a switch and a progress bar in it is made of one material
- * rather than three.
- *
- * The fill is `--p-fill`, and it is a `background-image` rather than a colour
- * because that is what a Plass fill *is*: a gradient that turns in hue. Which is
- * also why the movement is on `width` and never on the paint: a gradient cannot
- * be transitioned, and a length can.
- */
-export const trackClasses = 'bg-(--plass-track)';
-/** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
-export const fillTransitionClasses = '[transition:width_var(--plass-duration-slow)_var(--plass-ease)]';
-/**
- * `value` as a fraction of the range, or `null` when there is nothing to say.
- *
- * The clamp is not defensive programming for its own sake — `value` usually
- * arrives from a division somewhere, and a bar that renders 140% wide because
- * one request finished twice is a worse bug than a bar that sits full.
- */
-export function progressFraction(value, min, max) {
-    if (value === null || value === undefined || Number.isNaN(value)) {
-        return null;
-    }
-    if (max <= min) {
-        return null;
-    }
-    return Math.min(1, Math.max(0, (value - min) / (max - min)));
-}
-/**
- * What the value reads as, both on screen and to a screen reader.
- *
- * Base UI's own default is `${value}%`, which is right only when the range
- * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
- * the percentage is computed from the fraction, and a caller who passed
- * `format` gets Base UI's formatted string instead, because at that point they
- * have said what the number means.
- */
-export function progressText(fraction, formatted, hasFormat) {
-    if (fraction === null) {
-        return null;
-    }
-    return hasFormat ? formatted : `${Math.round(fraction * 100)}%`;
-}
-/**
- * The same string, shaped for Base UI's `getAriaValueText`.
- *
- * `undefined` when there is no value, which hands the indeterminate case back
- * to Base UI — it already announces indeterminate progress, and re-inventing
- * that here would be one more English string the library has to own.
- */
-export function progressAriaText(fraction, hasFormat) {
-    if (fraction === null) {
-        return undefined;
-    }
-    return (formatted) => progressText(fraction, formatted, hasFormat) ?? '';
-}
+export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses="bg-(--plass-track)";export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}export function progressText(s,r,e){return null===s?null:e?r:`${Math.round(100*s)}%`}export function progressAriaText(s,r){if(null!==s)return e=>progressText(s,e,r)??""}

package/dist/internal/sizer.js

@@ -1,35 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Holds a control open at the width of the widest thing it could ever say.
- *
- * A control that is not `fullWidth` is sized by what it is *currently* saying,
- * which for anything whose value changes means the box changes with it. A
- * PlSelect showing `Seoul` is narrower than the same one showing
- * `Washington DC`. Either way the field moves under the pointer that just used
- * it, and the whole row of controls beside it shuffles along.
- *
- * So the alternatives are laid out too, stacked in a box clipped to no height.
- * The control's intrinsic width becomes the widest of them and stops depending
- * on the value.
- *
- * Three things it deliberately is not:
- *
- * - **Not `hidden`, and not `display: none`.** Both take the box out of layout,
- *   and a box that is not laid out reserves nothing.
- * - **Not read out.** `aria-hidden`, or a screen reader would announce every
- *   value the control might hold before the one it does.
- * - **Not text.** A string sample is drawn as generated content off a data
- *   attribute rather than as a text node. `content: attr(…)` lays out exactly
- *   like text, so it reserves the same width — but it leaves nothing for
- *   `getByText` or a screen reader's find-in-page to trip over, and a caller's
- *   test asking for the option they selected keeps finding one element rather
- *   than two. Only a sample that is not a string — an option whose label is a
- *   node — has to be rendered for real, because there is nothing to put in an
- *   attribute.
- */
-export function WidthSizer({ samples }) {
-    if (samples.length === 0) {
-        return null;
-    }
-    return (_jsx("span", { "aria-hidden": "true", className: "invisible h-0 min-h-0 overflow-hidden", children: samples.map((sample, index) => typeof sample === 'string' ? (_jsx("span", { "data-sample": sample, className: "block whitespace-nowrap before:content-[attr(data-sample)]" }, `${index}:${sample}`)) : (_jsx("span", { className: "block whitespace-nowrap", children: sample }, index))) }));
-}
+import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>"string"==typeof a?e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`):e("span",{className:"block whitespace-nowrap",children:a},n))})}