@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/components/ui/file-upload/index.js

@@ -34,7 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUpload = void 0;
+exports.MultipleFileUpload = exports.FileUpload = void 0;
 exports.validateFile = validateFile;
 exports.humanizeSize = humanizeSize;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -226,10 +226,18 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
         event.target.value = '';
         handleFile(file);
     };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
     const onDragOver = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
         setDragActive(true);
     };
     const onDragLeave = (event) => {
@@ -237,10 +245,13 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
         setDragActive(false);
     };
     const onDrop = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
         setDragActive(false);
+        if (disabled)
+            return;
         handleFile(event.dataTransfer.files?.[0]);
     };
     // Mouse convenience only: clicking the styled zone opens the picker. A
@@ -260,7 +271,7 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
         if (internalRef.current)
             internalRef.current.value = '';
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
                     'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
                     ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
                     : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
@@ -270,3 +281,294 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
                                 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose a file' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), errorText ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorText })) : null] }));
 });
 exports.FileUpload.displayName = 'FileUpload';
+/** The default English announcement for each rejection kind. */
+function defaultMultipleErrorMessage(error) {
+    if (error.kind === 'too-many') {
+        return `Too many files (max ${error.maxFiles}). ${error.file.name} was not added.`;
+    }
+    return defaultErrorMessage(error);
+}
+/** The default zone copy once the cap is reached, in grammatical English. */
+function defaultFullMessage(maxFiles) {
+    return maxFiles === 1
+        ? 'Maximum of 1 file reached.'
+        : `Maximum of ${maxFiles} files reached.`;
+}
+/**
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
+ * accumulate them across repeated picks, validate each one, cap the total, and
+ * hand back `FileUploadResult[]`.
+ *
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
+ * not a default it happens to have. A boolean would have forced every prop
+ * here into a union that means one thing when the flag is set and another when
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
+ * meaningless in half the configurations, and a remove control whose
+ * accessible name is fixed copy in one mode and per-file in the other. The
+ * plural props follow the house shape for plural components: `value?: T[]`
+ * with `onValueChange?: (values: T[]) => void`.
+ *
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
+ * Choosing, validating, capping, listing and removing are its job; uploading
+ * is not. That split is not squeamishness about scope, it is where the
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
+ * concurrency policy, a retry policy and, very often, a parent id that does
+ * not exist yet when the files are chosen: the motivating host stages evidence
+ * files while a form is being filled and can only upload them against the id
+ * that its create call returns afterwards. None of that is knowable from
+ * inside a library primitive, and a component that guessed would have to be
+ * fought rather than used. So the host keeps its own per-file record with
+ * status and retry, and this component keeps the part a form can hold and
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
+ * machine is not.
+ *
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
+ * rather than replacing it, because a user assembling five documents does it
+ * in two or three trips to the file dialog, not one. Everything else follows
+ * from that: room is measured against what is already selected, and the batch
+ * that overflows the cap still contributes the files that fit.
+ *
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
+ * failed read does not discard the rest of the batch, and it does not consume
+ * a slot either: validation runs over the WHOLE batch before the cap is
+ * applied, so a file that was never eligible cannot cost an eligible one its
+ * place, and `'too-many'` always names a file a slot would genuinely have
+ * taken. The alternative punishes
+ * a user for a mistake in one file by throwing away four good ones, and hands
+ * back no way to tell which was which. Every rejection is reported through
+ * `onError` and announced together in one `role="alert"`.
+ *
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
+ * type="file">` is `sr-only` but focusable and labelable, and never
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
+ * error both work while the picker is enabled. At the cap that changes, and
+ * the paragraph below says how.
+ * The file list sits OUTSIDE the click zone, so activating a remove control
+ * cannot also reopen the picker, and each remove control is named after its
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
+ * user nothing about which row they are on.
+ *
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
+ * take it out of the tab order. This is the one state in which the input is
+ * not a focus target, and the one state in which focus-on-error cannot land on
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
+ * in the single-file sibling, so the precedent followed here is
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
+ * no state worth keeping focusable, and native `disabled` is what both removes
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
+ * picker that opens the file dialog and then refuses every file with
+ * `too-many`, is a control that lies about being available. What keeps the cap
+ * from being a dead end is the escape hatch: the remove controls answer to
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
+ * one file reopens the picker.
+ */
+exports.MultipleFileUpload = React.forwardRef(function MultipleFileUpload({ accept, maxSizeBytes, maxFiles, value = [], readAs = 'text', labels, onValueChange, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const reactId = React.useId();
+    const inputId = id ?? reactId;
+    const errorId = `${inputId}-file-upload-error`;
+    const [dragActive, setDragActive] = React.useState(false);
+    const [errors, setErrors] = React.useState([]);
+    // The authoritative base for the next append. Props win on every render, so
+    // the host stays in control; the commit below also writes through, so a
+    // second batch that settles before the host has re-rendered still appends to
+    // the first batch's result instead of overwriting it.
+    const valueRef = React.useRef(value);
+    React.useEffect(() => {
+        valueRef.current = value;
+    });
+    // Superseding is NOT the contract here the way it is in the single-file
+    // sibling — batches accumulate, so an in-flight read is never stale. The
+    // readers are tracked for the one case that does have to stop them: an
+    // unmount. A read that lands afterwards would settle its batch and commit,
+    // calling the host's `onValueChange` for a component that no longer exists.
+    const readersRef = React.useRef(new Set());
+    React.useEffect(() => () => {
+        for (const reader of readersRef.current)
+            reader.abort();
+        readersRef.current.clear();
+    }, []);
+    const invalid = ariaInvalid || errors.length > 0;
+    // Resolve the announcements BEFORE deciding whether the alert exists: a
+    // consumer that returns nothing for every rejection is opting out of this
+    // surface, and an association pointing at an unrendered node is worse than
+    // none.
+    const messages = errors
+        .map((failure) => labels?.error
+        ? labels.error(failure)
+        : defaultMultipleErrorMessage(failure))
+        .filter((message) => Boolean(message));
+    // A plain join, never `cn`: tailwind-merge treats these as class names and
+    // would drop an id that happens to look like a conflicting utility.
+    const describedBy = [ariaDescribedby, messages.length > 0 ? errorId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const full = maxFiles !== undefined && value.length >= maxFiles;
+    // Removing must stay possible at the cap, so only the PICKER closes.
+    const pickerDisabled = disabled || full;
+    const roomFor = (selected) => maxFiles === undefined
+        ? Number.POSITIVE_INFINITY
+        : Math.max(maxFiles - selected, 0);
+    // The cap is enforced HERE, at the only place that appends, because only the
+    // commit knows the base it lands on. `ingest` measures room too, but for an
+    // asynchronous batch it measures it BEFORE any read settles: two overlapping
+    // batches both see the pre-commit selection and would each believe they fit.
+    const commit = (accepted, rejections) => {
+        const room = roomFor(valueRef.current.length);
+        const fitting = accepted.slice(0, room);
+        const overflow = accepted[room];
+        const failures = overflow !== undefined && maxFiles !== undefined
+            ? [
+                ...rejections,
+                { kind: 'too-many', file: overflow.file, maxFiles }
+            ]
+            : rejections;
+        setErrors(failures);
+        for (const rejection of failures)
+            onError?.(rejection);
+        if (fitting.length === 0)
+            return;
+        const next = [...valueRef.current, ...fitting];
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    const ingest = (incoming) => {
+        if (incoming.length === 0)
+            return;
+        const room = roomFor(valueRef.current.length);
+        const rejections = [];
+        // Validate EVERY file BEFORE the cap is applied. Slicing to the remaining
+        // room first would let a file that was never eligible consume a slot a
+        // good file could have used — one bad pick costing a good one, which is
+        // the opposite of a batch surviving its own casualties — and it would
+        // leave every file past the slice window neither validated nor reported.
+        // Validation is pure metadata (size and accept), so running it over files
+        // that may not fit costs nothing.
+        const eligible = [];
+        for (const file of incoming) {
+            const rejection = validateFile(file, { accept, maxSizeBytes });
+            // Continue rather than abort: one bad file must not cost the good ones.
+            if (rejection) {
+                rejections.push(rejection);
+                continue;
+            }
+            eligible.push(file);
+        }
+        // The cap then applies to the SURVIVORS. One rejection for the batch,
+        // naming the FIRST eligible file that did not fit: naming one already
+        // refused for its size or type would blame the cap for the wrong thing,
+        // and repeating it per overflowing file buries the actionable part.
+        if (eligible.length > room && maxFiles !== undefined) {
+            rejections.push({ kind: 'too-many', file: eligible[room], maxFiles });
+        }
+        const candidates = eligible.slice(0, room);
+        // Binary path: no decode, no reader, no retained garbage string.
+        if (readAs === 'none') {
+            commit(candidates.map((file) => ({ file, text: '' })), rejections);
+            return;
+        }
+        if (candidates.length === 0) {
+            commit([], rejections);
+            return;
+        }
+        // Slot-per-candidate so the emitted batch keeps PICK order regardless of
+        // the order the reads settle in. A null slot is a read that failed; the
+        // batch commits once every read has settled, one way or the other.
+        const slots = new Array(candidates.length).fill(null);
+        let remaining = candidates.length;
+        const settle = () => {
+            remaining -= 1;
+            if (remaining > 0)
+                return;
+            const accepted = [];
+            const readFailures = [];
+            slots.forEach((slot, index) => {
+                if (slot)
+                    accepted.push(slot);
+                else
+                    readFailures.push({ kind: 'read-failed', file: candidates[index] });
+            });
+            commit(accepted, [...rejections, ...readFailures]);
+        };
+        candidates.forEach((file, index) => {
+            const reader = new FileReader();
+            readersRef.current.add(reader);
+            // Deliberately no `onabort` handler: an aborted read must NOT settle,
+            // or the batch would commit at exactly the moment we are stopping it.
+            reader.onload = () => {
+                readersRef.current.delete(reader);
+                slots[index] = { file, text: String(reader.result ?? '') };
+                settle();
+            };
+            reader.onerror = () => {
+                readersRef.current.delete(reader);
+                settle();
+            };
+            reader.readAsText(file);
+        });
+    };
+    const onInputChange = (event) => {
+        const files = Array.from(event.target.files ?? []);
+        // Release the FileList the moment it has been read, or re-picking the same
+        // file is silently a no-op: the browser fires `change` only when the
+        // selection DIFFERS from what the input already holds.
+        event.target.value = '';
+        ingest(files);
+    };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
+    const onDragOver = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        setDragActive(true);
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        setDragActive(false);
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
+        setDragActive(false);
+        if (disabled)
+            return;
+        // Deliberately NOT gated on `full`: a drop onto a full zone is answered
+        // with the too-many rejection, which says why, instead of nothing at all.
+        ingest(Array.from(event.dataTransfer.files ?? []));
+    };
+    // Mouse convenience only. A click that ORIGINATED on the input already opens
+    // the picker natively and bubbles up here, so ignore it or it opens twice.
+    const openPicker = (event) => {
+        if (pickerDisabled || event.target === internalRef.current)
+            return;
+        internalRef.current?.click();
+    };
+    const removeAt = (index) => {
+        // By index, not by name: two files can share a filename and identity is
+        // what the row actually stands for.
+        const next = valueRef.current.filter((_, position) => position !== index);
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
+                    'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
+                    ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), full && maxFiles !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: labels?.full
+                            ? labels.full(maxFiles)
+                            : defaultFullMessage(maxFiles) })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose files' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), value.length > 0 ? ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-1", children: value.map((entry, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-3 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: entry.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(entry.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove
+                                ? labels.remove(entry.file)
+                                : `Remove ${entry.file.name}`, onClick: () => removeAt(index), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] }, `${entry.file.name}-${index}`))) })) : null, messages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { id: errorId, role: "alert", className: "space-y-1", children: messages.map((message, index) => ((0, jsx_runtime_1.jsx)("p", { className: "text-system-error-h1a text-xs font-medium", children: message }, index))) })) : null] }));
+});
+exports.MultipleFileUpload.displayName = 'MultipleFileUpload';

package/dist/components/ui/icon-button/index.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from 'class-variance-authority';
 import { buttonVariants } from '../button';
 export declare const iconButtonVariants: (props?: ({
     rounded?: boolean | null | undefined;
-    size?: "default" | "small" | null | undefined;
+    size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     rounded?: boolean;

package/dist/components/ui/icon-button/styles.css

@@ -1,5 +1,9 @@
 @theme inline {
   --spacing-icon-button-p: calc(var(--spacing) * 2);
+  /* The tap target every icon control in this package answers to, which is
+     also `.icon-button-base`'s own box. Named once so the small variant's
+     target and the default variant's size cannot drift apart. */
+  --spacing-icon-button-target: calc(var(--spacing) * 10);
 }
 
 @layer components {
@@ -19,6 +23,44 @@
     @apply size-8 [&>*]:size-4;
   }
 
+  /* ⛔ THE GLYPH IS 2rem, THE TARGET IS 2.5rem, AND THEY ARE NOT THE SAME BOX.
+     A table's row-actions kebab is the one control in its row, and at
+     `size-8` it was a 32x32 tap target where every icon control in the shell
+     is 40x40 — measured at 32x32 on the ledgers, transactions and
+     bank-transfer listings at a 390px viewport.
+
+     Growing the button instead would have grown the row: `TableCell` is
+     `py-4`, so a `size-10` trigger takes the row from 64.5px to 72.5px and a
+     phone shows fewer rows for the trouble. An absolutely positioned
+     pseudo-element takes part in hit testing and in nothing else, so the row,
+     the cell, the alignment and every other layout this class appears in are
+     byte-identical; `.button-base` is already `relative`, which is what this
+     anchors to.
+
+     ⚠️ CENTRED AND SIZED, NOT INSET BY A CONSTANT. A negative `inset` is
+     measured from the PADDING box, so `-inset-1` on this button came out
+     38x38 rather than 40x40 — `.button-outline` carries a 1px transparent
+     border, and three of the eight perimeter points fell outside it. Half of
+     50% resolves against whatever the box actually is, so this states the
+     target as a size and lets the border be whatever it is.
+
+     The target is `--spacing-icon-button-target`, which is `.icon-button-base`
+     itself, so it is 2.5rem at any browser font rather than 40px at one of
+     them. That leaves a quarter of a rem on each side, which is also the
+     `gap-1` between the two buttons in `CopyField` — the only place in this
+     package where two of these sit side by side — so each target stops at its
+     neighbour's visible edge and neither can be tapped by aiming at the other.
+     They do share the empty gap, which the later one paints over and takes.
+
+     `scripts/measure-phone-shapes.mjs` walks eight points around the 2.5rem
+     perimeter and asks the document what is there; run it when touching this
+     rule. */
+  .icon-button-small::after {
+    position: absolute;
+    inset: calc(50% - var(--spacing-icon-button-target) / 2);
+    content: '';
+  }
+
   .icon-button-rounded {
     @apply rounded-full;
   }

package/dist/components/ui/input/styles.css

@@ -4,7 +4,7 @@
   --spacing-input-px: calc(var(--spacing) * 4);
   --color-input-foreground: var(--color-foreground);
   --color-input-placeholder: hsl(var(--input-placeholder));
-  --color-input-border: var(--color-shadcn-400);
+  --color-input-border: hsl(var(--input-border));
 
   --color-input-adornment: var(--color-container-text);
   --spacing-input-adornment-size: calc(var(--spacing) * 10);
@@ -13,7 +13,7 @@
 
 @layer components {
   .input-wrapper {
-    @apply h-input-wrapper-h border-input-border p-input-wrapper-p relative flex w-full cursor-text items-center rounded-md border transition-[color,box-shadow];
+    @apply h-input-wrapper-h border-input-border p-input-wrapper-p relative flex w-full min-w-0 cursor-text items-center rounded-md border transition-[color,box-shadow];
   }
 
   .input-wrapper-focus {
@@ -27,9 +27,84 @@
   /* Don't give the placeholder its own size or weight. At a smaller size it
      still shares the input's baseline, so it rode ~0.75px below the value and
      the text jumped the moment you typed; font-medium gave the hint the same
-     presence as the label naming the field. */
+     presence as the label naming the field.
+
+     THE CONTRACT, and all three halves of it are measured. A field keeps its
+     natural width: nothing here declares one, so the control contributes its
+     own intrinsic size and a box sized BY ITS CONTENT — a search box in a
+     `flex gap-4` filter bar — comes out as a field. A field fills its box
+     instead of overrunning it: `min-w-0` on both boxes drops the automatic
+     minimum that used to hold the control at 239px inside a narrower wrapper,
+     down to the one width it cannot go under. That floor is arithmetic rather
+     than policy — `px-input-px` is 16px a side and the box sizing is
+     border-box, so the control is 32px wide carrying nothing at all — and a
+     box narrower than that gets the difference painted outside it. Measured at
+     23px on the console's template-builder header, whose `w-48` wrapper is
+     squeezed to 18px and which the console repairs with `shrink-0` on that
+     wrapper. This package's own `SheetContent side="right"` used to run the
+     same arithmetic one step earlier: `w-2/5 p-12` at a 390px viewport left a
+     59px panel, and the field came out 41px wide with 9px of text — unusable,
+     but inside its box, where 2.0.0-beta.9 painted 189px of it across the
+     panel edge. That panel grew a phone step in 2.0.0-beta.12 and now fills
+     the screen, so the field reads 307px there; the arithmetic still stands
+     wherever a box is genuinely narrower than the control's own padding. A row
+     that must compress says so on its own flex item, with `min-w-0`, and that
+     one token now works.
+
+     Why no declared width, measured rather than assumed. A declared width
+     replaces the control's max-content contribution as well as its min-content
+     one, because an `<input>` does not wrap and has only the one intrinsic
+     size. `w-0` shipped in 2.0.0-beta.10 and bought a narrow row's compression
+     by giving that up: five product-console screens rendered an empty 32px
+     chip at every viewport, and a sixth — the template builder's name field —
+     did at 390px while keeping 142px of text at 1440px, all of them wrappers
+     that had been handed 0px to be as wide as.
+     `w-full` buys the same compression without the chip — a percentage
+     contributes max-content but zero min-content — and it was the runner-up
+     here. It loses on the same filter bar at 390px, where the control is not
+     merely sized by its content but squeezed, and it disappears rather than
+     letting the bar scroll. Seventeen rule sets were measured against
+     seventeen fixtures; none closes all of them.
+
+     What this one leaves open is `two-up-200`: two fields in a caller's
+     `flex-1` columns inside a 200px row, which now overflows by 138px instead
+     of compressing. The caller's one token closes it — `min-w-0` on its own
+     column, measured at 78px and fitting — and the fixture beside it,
+     `two-up-200-caller-min-w-0`, is the guard that keeps that hatch working.
+     On 2.0.0-beta.9 the hatch did NOT work: the same row overflowed by 48px
+     and the control painted 152px across its neighbour, because the control
+     floored at its intrinsic size inside the column that had just agreed to
+     compress. That is the difference this rule set makes.
+
+     `min-width` reaches exactly one box: the one it is declared on. It does
+     not lower an ancestor's automatic minimum and it does not lower a
+     descendant's — the sentence this comment carried before the fix said so
+     and was right. Nothing above contradicts it: the rule works because BOTH
+     boxes declare their own, the control's on `.input-base` and the wrapper's
+     on `.input-wrapper`, and neither half works alone. Measured: the wrapper's
+     alone fails eleven fixtures (`--candidate=wrapper-only-auto`), the
+     control's alone fails four (`--candidate=auto-min-w-0`). It is also why
+     `two-up-200` stays open above. The caller's `flex-1` column is a third
+     box, no declaration in this package reaches it, and only the caller's own
+     `min-w-0` lowers it — which is why that row still overflows by 138px.
+
+     There is deliberately NO positive min-width floor, and that was measured
+     too. A floor here cannot reach the sites that want one: a consumer
+     writing `.input-base` by hand tends to add its own `min-w-0`, which is a
+     `utilities`-layer class and outranks anything this `components`-layer rule
+     set declares. With `min-w-16` added here, the same fixture read 64px wide
+     without that hand-written `min-w-0` and 32px with it. The floor also cost
+     ground elsewhere: two inputs sharing a 120px row went from fitting to
+     overflowing by 52px, and a floor small enough to survive that row still
+     left a squeezed filter bar at 32px of content. A caller whose field must
+     hold its width says so on its own wrapper, with `shrink-0`.
+
+     `scripts/measure-input-shrink.mjs` carries the fixtures and the numbers;
+     run it when touching this rule set, and `--candidate=ID` re-measures any
+     of the seventeen, or `shipped` for this one, before re-opening the
+     trade. */
   .input-base {
-    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
+    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 min-w-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
   }
 
   .input-disabled {

package/dist/components/ui/otp-input/index.js

@@ -52,7 +52,7 @@ function InputOTPGroup({ className, ...props }) {
 function InputOTPSlot({ index, className, ...props }) {
     const inputOTPContext = React.useContext(input_otp_1.OTPInputContext);
     const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
 }
 function InputOTPSeparator({ ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MinusIcon, {}) }));

package/dist/components/ui/radio-group/index.js

@@ -44,5 +44,5 @@ function RadioGroup({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: (0, utils_1.cn)('grid gap-3', className), ...props }));
 }
 function RadioGroupItem({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: (0, utils_1.cn)('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: (0, utils_1.cn)('border-input-border text-primary focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
 }

package/dist/components/ui/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAsBD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAC5C,OAAO,eAAe,CAAC,OAAO,CAC/B,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA0BD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAsBpB;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAU7D;AACD,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAU/D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBA0CtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAQvC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAgBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACvB,CAAA"}

package/dist/components/ui/select/index.js

@@ -73,15 +73,19 @@ function SelectValue({ ...props }) {
  * slot shrink, `truncate` ellipsises what no longer fits — the chevron keeps its
  * place because the value absorbs all the shrinkage.
  *
- * Written as a child-scoped variant on the TRIGGER because Radix strips
- * `className` off `Select.Value` itself; the `>` combinator holds because Radix
- * renders that span as the trigger's direct child.
+ * Written as a descendant-scoped variant on the TRIGGER because Radix strips
+ * `className` off `Select.Value` itself. DESCENDANT, not `>`: a trigger that
+ * carries a leading glyph groups the glyph and the value into one flex child
+ * (see `SelectField`'s `leadingIcon`), so the value span is no longer the
+ * trigger's direct child and a `>` combinator stopped truncating exactly where
+ * the trigger has the least room. The wrapper carries `min-w-0` itself, which
+ * is what lets the shrinkage reach the value.
  *
  * Truncation hides text, so a trigger showing a long value should also carry
  * `title` — on the trigger, never on the value slot, which Radix renders
  * `pointer-events: none`.
  */
-const VALUE_OVERFLOW_CLASS = '[&>[data-slot=select-value]]:min-w-0 [&>[data-slot=select-value]]:truncate';
+const VALUE_OVERFLOW_CLASS = '[&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate';
 function SelectTrigger({ className, readOnly, children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": "default", className: (0, utils_1.cn)('select-trigger select-read-only select-disabled', VALUE_OVERFLOW_CLASS, className), "aria-readonly": readOnly, "data-read-only": readOnly ? '' : undefined, ...props, children: [children, !readOnly && ((0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron" }) }))] }));
 }

package/dist/components/ui/select/styles.css

@@ -5,7 +5,7 @@
 
   --color-select-foreground: var(--color-foreground);
   --color-select-placeholder: var(--color-muted-foreground);
-  --color-select-border: var(--color-shadcn-400);
+  --color-select-border: hsl(var(--input-border));
   --color-select-chevron: var(--color-container-text);
 }
 

package/dist/components/ui/sheet/index.d.ts

@@ -6,6 +6,48 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): React.JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): React.JSX.Element;
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;