plass-ui 0.0.1 → 1.0.0

package/dist/internal/picker.js

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

package/dist/internal/progress.d.ts

@@ -0,0 +1,145 @@
+/**
+ * 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.
+ */
+import type * as React from 'react';
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * The props all three take.
+ *
+ * Declared once and extended rather than written three times, because the whole
+ * claim being made is that these are one component in three shapes: a `value`
+ * of `null` has to mean the same thing on a bar, a ring and a row of plates, or
+ * the trio is three components that happen to share a prefix.
+ */
+export interface PlassProgressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How far along, between `min` and `max`.
+     *
+     * `null` — the default — is the indeterminate case: something is happening
+     * and nobody knows how much of it is left. That is the default on purpose. An
+     * indicator that has not been told a value should say so rather than draw an
+     * empty bar, which is a claim that no progress has been made.
+     * @default null
+     */
+    value?: number | null;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is loading. Read out with the value by a screen reader. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the shape. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How to format the value when it is shown — `Intl.NumberFormat` options, so
+     * bytes and currencies work as well as plain numbers. Without it the value is
+     * a percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * 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 declare function progressSlots(color: PlassColor): React.CSSProperties;
+/**
+ * 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 declare const barThicknessClasses: Record<PlassSize, string>;
+/**
+ * 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 declare const ringDiameters: Record<PlassSize, number>;
+/** The ring's stroke, thickening with the ring so the hole stays in proportion. */
+export declare const ringStrokes: Record<PlassSize, number>;
+/**
+ * One plate of a `PlProgressBox`, on the tick ladder — an indicator beside a
+ * label, not a control you can put one inside.
+ */
+export declare const plateSizeClasses: Record<PlassSize, string>;
+/** The corner cut off a plate: the same ~30% the tick boxes take. */
+export declare const plateRadiusClasses: Record<PlassSize, string>;
+/** Between the plates. Tight — they are one object, not a row of squares. */
+export declare const plateGapClasses: Record<PlassSize, string>;
+/**
+ * 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 declare const trackClasses = "bg-(--plass-track)";
+/** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
+export declare 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 declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * 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 declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
+/**
+ * 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 declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;

package/dist/internal/progress.js

@@ -0,0 +1,167 @@
+/**
+ * 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) ?? '';
+}

package/dist/internal/sizer.d.ts

@@ -0,0 +1,32 @@
+import type * as React from 'react';
+/**
+ * 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 declare function WidthSizer({ samples }: {
+    samples: readonly React.ReactNode[];
+}): React.JSX.Element | null;

package/dist/internal/sizer.js

@@ -0,0 +1,35 @@
+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))) }));
+}