@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/number-field.d.ts

@@ -0,0 +1,144 @@
+/** The props the Number field accepts. */
+export interface NumberFieldProps {
+    /**
+     * The accessible names of the two steppers.
+     *
+     * Required, and required as a pair, because a stepper is an icon and an icon has
+     * no name. The words are the caller's because they are sentences a reader hears,
+     * and a Component that chose them would be shipping English into every consumer's
+     * form and would get "increase" wrong for at least one of the two.
+     */
+    labels: {
+        increment: string;
+        decrement: string;
+    };
+    /** The accessible name of the field, when no visible label is used. */
+    'aria-label'?: string;
+    /**
+     * Identifies the element that describes the field, which is where a unit goes.
+     *
+     * Required whenever `unit` is passed, and the reason is in the JSDoc below: the
+     * unit is drawn `aria-hidden`, so this prop is the only route by which "kg" or
+     * "ms" reaches a reader at all. It was documented as the answer and not carried,
+     * so a caller following the documentation had nowhere to put the sentence and the
+     * value was announced as a bare figure.
+     */
+    'aria-describedby'?: string;
+    /** The current value, when the field is controlled. */
+    value?: number | null;
+    /** The value the field starts at, for an uncontrolled field. */
+    defaultValue?: number | null;
+    /** Called with the value, or `null` when the field is emptied. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * The smallest value the field will hold.
+     *
+     * A value below it is clamped, by typing, by the steppers and by a paste alike.
+     * Without a minimum there is nothing to clamp against, so this and `max` are what
+     * turn a number field from a text field that happens to accept digits into a
+     * control that holds a range.
+     */
+    min?: number;
+    /** The largest value the field will hold. */
+    max?: number;
+    /** The amount one press of a stepper changes the value by. @defaultValue 1 */
+    step?: number;
+    /**
+     * The unit shown after the number.
+     *
+     * A unit is a word in the reader's language and it is hidden from the
+     * accessibility tree, because a screen reader already says the unit when the
+     * caller points `aria-describedby` at a sentence that carries it. It is a prop
+     * because the Component does not know whether the reader measures in kilograms,
+     * pounds or seconds.
+     */
+    unit?: string;
+    /** How the value is written for display: grouping, decimals, and so on. */
+    format?: Intl.NumberFormatOptions;
+    /** Whether a value must be entered before the form submits. */
+    required?: boolean;
+    /** Whether the field ignores interaction. */
+    disabled?: boolean;
+    /** Whether the reader may see the value but not change it. */
+    readOnly?: boolean;
+    /** The form field name. The value is submitted under it. */
+    name?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** The field's own id, so a label elsewhere can point at it. */
+    id?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A numeric field that will not hold a value outside its own range.
+ *
+ * **Clamping is the Component, not the HTML.** A number field with a `max` that
+ * accepts a value past it is a field that will submit a number the caller has
+ * already said is impossible, and the browser's own range validation is no answer
+ * to that: it reports the problem after the reader has typed and leaves them with a
+ * value they cannot submit. So the value is clamped on every path that can produce
+ * one, typing, the steppers, a paste and a value that arrived from outside, and
+ * the field shows and submits only what is inside its range. Text that is not a
+ * number never becomes a value at all: the field refuses the character as it is
+ * typed, so a reader who mistypes a digit gets a shorter number rather than a
+ * number the server will reject.
+ *
+ * **It is one Component rather than a root, a group, an input and two steppers.**
+ * The range and the two ways of moving inside it are one contract, and a caller
+ * who composes the parts can leave out the steppers and get a field that clamps
+ * with no affordance to reach the middle of its own range. The parts Base UI owns
+ * are still what draw and what enforce; what this adds is the decision not to let
+ * them be rearranged into something else.
+ *
+ * **A value outside the range is clamped as it arrives rather than refused.** A
+ * controlled field whose `value` prop is out of range displays the clamped number,
+ * because the alternative is a field showing one number and submitting another.
+ * `onValueChange` is the authority: a consumer whose own state holds an
+ * out-of-range number has to take the clamped one back, and this Component will
+ * not rewrite a state it does not own.
+ *
+ * **The steppers are in the tab order.** Base UI takes them out of it, on the
+ * reasoning that the arrow keys already step the value and one field should be one
+ * Tab stop. A control that is announced and cannot be reached is worse than a
+ * second stop, so they are put back: three stops for one value, and the arrow keys
+ * still work for a reader who is typing through the form.
+ *
+ * **A coarse pointer turns the two steppers side by side, and this is the one place
+ * the floor changes an arrangement rather than a size.** Two 44px targets stacked in
+ * the split column need an 88px field, and an 88px text field is not a text field;
+ * a band is not available either, because two 44px bands centred on two 18px rows
+ * overlap by more than half of each and the lower row would take the boundary, so a
+ * press aimed at increment would step down. Side by side, each stepper is 44 by 44
+ * inside a field that stays 44 tall, which is the arrangement every mobile platform
+ * draws and the only one where the two targets do not compete. On a mouse and a
+ * trackpad the column is 36 tall and stacked, exactly as before.
+ *
+ * **Empty is a value.** The field reports `null` when it is cleared, rather than
+ * zero, because zero is a number a reader may have meant and an empty field is
+ * not. A consumer that treats `null` as zero has made a decision this Component
+ * refuses to make for it.
+ *
+ * **The unit is decoration, and the description is where a reader hears it.** The
+ * drawn span is `aria-hidden` and the field takes an `aria-describedby` the caller
+ * points at their own sentence. Three reasons, and they are the reason rather than
+ * the decoration. The unit belongs to the value and not to the field's identity, so
+ * putting it in `aria-label` would make the name "Parcel weight, kg" against a
+ * visible label reading "Parcel weight", which is exactly what WCAG 2.5.3 forbids
+ * and what voice control cannot activate. The `aria-label` is optional, so a field
+ * with a real `<label>` has no name to put it in at all. And two announcements of
+ * the same unit is one too many: the visible one was written in the reader's
+ * language by the reader's own product, and this Component does not know that word.
+ *
+ * The cost was that the prop was described here and not carried, so a caller who
+ * followed the documentation had no route and a value of 1,250 was announced as
+ * 1,250. `aria-describedby` is now on the props for the same reason `Combobox` and
+ * `MultiCombobox` carry it: the sentence is the caller's and the reference is the
+ * only honest way to hand it over.
+ *
+ * Reachable by Tab, moved by the arrow keys and by its two steppers, and the whole
+ * field reads as one surface: one frame, one border, one focus colour.
+ */
+declare function NumberField({ labels, 'aria-label': ariaLabel, 'aria-describedby': describedBy, value, defaultValue, onValueChange, min, max, step, unit, format, required, disabled, readOnly, name, form, id, className, }: NumberFieldProps): import("react").JSX.Element;
+export { NumberField };
+//# sourceMappingURL=number-field.d.ts.map

package/dist/components/ui/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/number-field.tsx"],"names":[],"mappings":"AAOA,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;OAOG;IACH,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,kEAAkE;IAClE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACjC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,WAAW,EAC/B,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,gBAAgB,+BAkHlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/number-field.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The value inside the field's own range, or nothing.
+ *
+ * Base UI clamps what the reader types and what the steppers reach, but it does
+ * not clamp a value that was already outside the range when it arrived, so this is
+ * the Component's own half of the promise. A field that accepted it would display
+ * and submit a number the caller has already said is impossible, and the browser's
+ * range validation answers that after the reader has typed, which is too late to
+ * be a control and too late to be a form.
+ */
+function clamp(value, min, max) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return null;
+    let out = value;
+    if (typeof min === 'number' && out < min)
+        out = min;
+    if (typeof max === 'number' && out > max)
+        out = max;
+    return out;
+}
+/**
+ * A numeric field that will not hold a value outside its own range.
+ *
+ * **Clamping is the Component, not the HTML.** A number field with a `max` that
+ * accepts a value past it is a field that will submit a number the caller has
+ * already said is impossible, and the browser's own range validation is no answer
+ * to that: it reports the problem after the reader has typed and leaves them with a
+ * value they cannot submit. So the value is clamped on every path that can produce
+ * one, typing, the steppers, a paste and a value that arrived from outside, and
+ * the field shows and submits only what is inside its range. Text that is not a
+ * number never becomes a value at all: the field refuses the character as it is
+ * typed, so a reader who mistypes a digit gets a shorter number rather than a
+ * number the server will reject.
+ *
+ * **It is one Component rather than a root, a group, an input and two steppers.**
+ * The range and the two ways of moving inside it are one contract, and a caller
+ * who composes the parts can leave out the steppers and get a field that clamps
+ * with no affordance to reach the middle of its own range. The parts Base UI owns
+ * are still what draw and what enforce; what this adds is the decision not to let
+ * them be rearranged into something else.
+ *
+ * **A value outside the range is clamped as it arrives rather than refused.** A
+ * controlled field whose `value` prop is out of range displays the clamped number,
+ * because the alternative is a field showing one number and submitting another.
+ * `onValueChange` is the authority: a consumer whose own state holds an
+ * out-of-range number has to take the clamped one back, and this Component will
+ * not rewrite a state it does not own.
+ *
+ * **The steppers are in the tab order.** Base UI takes them out of it, on the
+ * reasoning that the arrow keys already step the value and one field should be one
+ * Tab stop. A control that is announced and cannot be reached is worse than a
+ * second stop, so they are put back: three stops for one value, and the arrow keys
+ * still work for a reader who is typing through the form.
+ *
+ * **A coarse pointer turns the two steppers side by side, and this is the one place
+ * the floor changes an arrangement rather than a size.** Two 44px targets stacked in
+ * the split column need an 88px field, and an 88px text field is not a text field;
+ * a band is not available either, because two 44px bands centred on two 18px rows
+ * overlap by more than half of each and the lower row would take the boundary, so a
+ * press aimed at increment would step down. Side by side, each stepper is 44 by 44
+ * inside a field that stays 44 tall, which is the arrangement every mobile platform
+ * draws and the only one where the two targets do not compete. On a mouse and a
+ * trackpad the column is 36 tall and stacked, exactly as before.
+ *
+ * **Empty is a value.** The field reports `null` when it is cleared, rather than
+ * zero, because zero is a number a reader may have meant and an empty field is
+ * not. A consumer that treats `null` as zero has made a decision this Component
+ * refuses to make for it.
+ *
+ * **The unit is decoration, and the description is where a reader hears it.** The
+ * drawn span is `aria-hidden` and the field takes an `aria-describedby` the caller
+ * points at their own sentence. Three reasons, and they are the reason rather than
+ * the decoration. The unit belongs to the value and not to the field's identity, so
+ * putting it in `aria-label` would make the name "Parcel weight, kg" against a
+ * visible label reading "Parcel weight", which is exactly what WCAG 2.5.3 forbids
+ * and what voice control cannot activate. The `aria-label` is optional, so a field
+ * with a real `<label>` has no name to put it in at all. And two announcements of
+ * the same unit is one too many: the visible one was written in the reader's
+ * language by the reader's own product, and this Component does not know that word.
+ *
+ * The cost was that the prop was described here and not carried, so a caller who
+ * followed the documentation had no route and a value of 1,250 was announced as
+ * 1,250. `aria-describedby` is now on the props for the same reason `Combobox` and
+ * `MultiCombobox` carry it: the sentence is the caller's and the reference is the
+ * only honest way to hand it over.
+ *
+ * Reachable by Tab, moved by the arrow keys and by its two steppers, and the whole
+ * field reads as one surface: one frame, one border, one focus colour.
+ */
+function NumberField({ labels, 'aria-label': ariaLabel, 'aria-describedby': describedBy, value, defaultValue = null, onValueChange, min, max, step = 1, unit, format, required = false, disabled = false, readOnly = false, name, form, id, className, }) {
+    return (_jsx(NumberFieldPrimitive.Root, { "data-slot": "number-field", className: cn('w-full', className), ...(value === undefined
+            ? { defaultValue: clamp(defaultValue, min, max) ?? undefined }
+            : { value: clamp(value, min, max) }), onValueChange: (next) => onValueChange?.(next), 
+        // The id belongs to the root, not to the input, because Base UI's steppers
+        // point their `aria-controls` at it and a dangling reference is a violation
+        // that reads, in a screen reader, as a control pointing at nothing.
+        id: id, min: min, max: max, step: step, required: required, disabled: disabled, readOnly: readOnly, name: name, ...(form === undefined ? null : { form }), ...(format === undefined ? null : { format }), children: _jsxs("div", { "data-slot": "number-field-group", className: cn('border-input bg-background focus-within:border-ring flex w-full items-stretch rounded-md border shadow-xs', 'transition-[color,box-shadow] duration-fast ease-out', 'has-[input:disabled]:opacity-50', 
+            // 44px on a coarse pointer, because the steppers beside it are 44px on a
+            // coarse pointer and a 36px field cannot hold two 44px targets without
+            // becoming an 88px field. See the JSDoc.
+            'pointer-coarse:h-11'), children: [_jsx(NumberFieldPrimitive.Input, { "data-slot": "number-field-input", "aria-label": ariaLabel, ...(describedBy === undefined ? null : { 'aria-describedby': describedBy }), className: cn('placeholder:text-muted-foreground flex h-9 min-w-0 flex-1 border-0 bg-transparent px-3 py-1 text-base shadow-none outline-none md:text-sm', 'focus-visible:border-0 focus-visible:ring-ring focus-visible:ring-[3px]', 
+                    // `items-stretch` on the group only sizes a child whose own height is
+                    // `auto`, and this one states `h-9`, so the field's coarse-pointer height
+                    // has to be stated here rather than inherited from the group.
+                    'pointer-coarse:h-11') }), unit === undefined ? null : (_jsx("span", { "data-slot": "number-field-unit", "aria-hidden": "true", className: "text-muted-foreground flex shrink-0 items-center pr-2 text-sm", children: unit })), _jsxs("div", { "data-slot": "number-field-stepper", className: cn('border-input flex shrink-0 flex-col border-s', 'pointer-coarse:flex-row'), children: [_jsx(NumberFieldPrimitive.Increment, { "data-slot": "number-field-increment", "aria-label": labels.increment, 
+                            // Put back into the tab order on purpose; see the JSDoc.
+                            tabIndex: 0, className: cn('text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-1/2 items-center justify-center border-b px-2 outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-40', 'pointer-coarse:h-auto pointer-coarse:min-w-11 pointer-coarse:border-b-0 pointer-coarse:border-r'), children: _jsx(ChevronUpIcon, { className: "size-3.5" }) }), _jsx(NumberFieldPrimitive.Decrement, { "data-slot": "number-field-decrement", "aria-label": labels.decrement, tabIndex: 0, className: cn('text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-1/2 items-center justify-center px-2 outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-40', 'pointer-coarse:h-auto pointer-coarse:min-w-11'), children: _jsx(ChevronDownIcon, { className: "size-3.5" }) })] })] }) }));
+}
+export { NumberField };

package/dist/components/ui/one-time-code.d.ts

@@ -0,0 +1,127 @@
+/** How the code is drawn in groups, for a code the reader sees written in groups. */
+export interface OneTimeCodeGrouping {
+    /** The zero-based indices of the segments a separator is drawn after. */
+    readonly after: readonly number[];
+    /** What the separator is. The caller's, because it is read by a person. */
+    readonly separator: React.ReactNode;
+}
+/** The props the One time code accepts. */
+export interface OneTimeCodeProps {
+    /**
+     * The accessible name of the code.
+     *
+     * Required. A row of six single-character fields with no name is six anonymous
+     * fields, and a reader cannot say out loud which one they are in.
+     */
+    label: string;
+    /** How many characters the code has. */
+    length: number;
+    /**
+     * The characters the code may contain.
+     *
+     * The caller's decision because it is theirs: a numeric code, an alphabet-only
+     * recovery code and an alphanumeric one-time token are three different things
+     * and a verification service decides which. A character outside the set is
+     * refused as it is typed or pasted rather than accepted and refused later, so
+     * the field never holds a value the server will reject.
+     */
+    characters?: 'numeric' | 'alpha' | 'alphanumeric' | 'none';
+    /**
+     * A normaliser, run after the character set has been applied.
+     *
+     * For the rules the closed set cannot express: folding a pasted code to lower
+     * case, stripping a leading country code. It must be idempotent, because the
+     * field normalises again on every edit and again on the way out of one.
+     */
+    normalize?: (value: string) => string;
+    /**
+     * The accessible name of one segment, receiving its zero-based index.
+     *
+     * Without it every segment is named by the field's own label, which is enough to
+     * satisfy the form but not to tell a reader which of the six they are in. This
+     * Component does not know the reader's words for a position, so it asks.
+     */
+    segmentLabel?: (index: number) => string;
+    /** How the code is drawn in groups, when it is read in groups. */
+    grouping?: OneTimeCodeGrouping;
+    /** The code, when the field is controlled. */
+    value?: string;
+    /** The code the field starts with, for an uncontrolled field. */
+    defaultValue?: string;
+    /** Called with the code as it changes. */
+    onValueChange?: (value: string) => void;
+    /** Called once every segment is filled, including by a paste that fills them all. */
+    onComplete?: (value: string) => void;
+    /**
+     * Called with the text the reader attempted when part of it was refused.
+     *
+     * The attempted text, not a verdict. Whether a refused character deserves a word
+     * to the reader is the caller's decision, and this Component ships no sentence
+     * into a consumer's product.
+     */
+    onInvalid?: (attempted: string) => void;
+    /** Whether the field submits its form as soon as the code is complete. */
+    autoSubmit?: boolean;
+    /** Whether the characters are hidden as they are typed. */
+    mask?: boolean;
+    /** Whether the field ignores interaction. */
+    disabled?: boolean;
+    /** Whether a code must be entered before the form submits. */
+    required?: boolean;
+    /** Whether the reader may see the code but not change it. */
+    readOnly?: boolean;
+    /** The form field name. The code is submitted under it. */
+    name?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** The first segment's id. The rest derive from it. */
+    id?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A verification code entered one segment at a time.
+ *
+ * **A paste of the whole code lands in every segment.** A reader who has the code
+ * on their clipboard has already done the hard part, and a field that accepted one
+ * character per paste would make them retype it one box at a time, which is what
+ * they are on their phone to avoid. So a paste into the first segment is
+ * distributed across the ones after it and `onComplete` fires once, from the paste,
+ * rather than after six keystrokes.
+ *
+ * **A refused character is refused, not stored.** Whitespace is dropped and
+ * anything outside `characters` is refused, whether it was typed or pasted, so
+ * "123 456" pastes as `123456` and `12345a6` pastes as `123456`. The alternative,
+ * accepting the text and rejecting it at the server, gives the reader a field
+ * that looks right and a form that does not submit.
+ *
+ * **The code is one value, not six.** The segments are six views of one string of
+ * `length` characters, so Backspace removes a character from the string and the
+ * characters after it close up: on `123456`, Backspace in the third segment leaves
+ * `12456`. Six boxes that each had to be emptied by hand would need a rule for
+ * what Backspace on an empty box means, and every version of that rule is wrong
+ * for somebody. The rule that does nothing traps a reader who is correcting a
+ * digit; the rule that clears the box before deletes a character they did not ask
+ * to delete.
+ *
+ * **The character set, the normaliser and the words are all the caller's.** Which
+ * characters a code may contain is decided by the service that issued it, folding
+ * case is a rule only the caller knows, and every segment's accessible name is a
+ * phrase. Nothing here is a table of words or a regular expression.
+ *
+ * **The first segment is named by a real `<label>`, and it is hidden.** Base UI
+ * strips `aria-label` from that one segment on purpose: it is the segment the
+ * platform autofills, and the label element is what names the autofill prompt as
+ * well as the field. This Component renders that label visually hidden, because a
+ * label above a row of six boxes is the caller's to place. Pass `id` and put your
+ * own `Label` on the first segment, and this one steps aside.
+ *
+ * **One Tab stop for the whole code.** A reader reaches the first segment and the
+ * rest follow as they type, so the code is one stop in a form rather than six, and
+ * the segments are a named group rather than six fields in a row. It is built on
+ * Base UI's OTP field, which owns the segmentation, the clamping to `length` and
+ * the autofill hint the platform needs for a one-time code.
+ */
+declare function OneTimeCode({ label, length, characters, normalize, segmentLabel, grouping, value, defaultValue, onValueChange, onComplete, onInvalid, autoSubmit, mask, disabled, required, readOnly, name, form, id, className, }: OneTimeCodeProps): import("react").JSX.Element;
+export { OneTimeCode };
+//# sourceMappingURL=one-time-code.d.ts.map

package/dist/components/ui/one-time-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code.d.ts","sourceRoot":"","sources":["../../../src/components/ui/one-time-code.tsx"],"names":[],"mappings":"AAOA,qFAAqF;AACrF,MAAM,WAAW,mBAAmB;IAClC,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,2EAA2E;IAC3E,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC;AAED,2CAA2C;AAC3C,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAA;IACd;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,CAAA;IAC1D;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,MAAM,EACN,UAAsB,EACtB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,UAAkB,EAClB,IAAY,EACZ,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,gBAAgB,+BA0ElB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/one-time-code.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OTPField as OTPFieldPrimitive } from '@base-ui/react/otp-field';
+import { Fragment, useId } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A verification code entered one segment at a time.
+ *
+ * **A paste of the whole code lands in every segment.** A reader who has the code
+ * on their clipboard has already done the hard part, and a field that accepted one
+ * character per paste would make them retype it one box at a time, which is what
+ * they are on their phone to avoid. So a paste into the first segment is
+ * distributed across the ones after it and `onComplete` fires once, from the paste,
+ * rather than after six keystrokes.
+ *
+ * **A refused character is refused, not stored.** Whitespace is dropped and
+ * anything outside `characters` is refused, whether it was typed or pasted, so
+ * "123 456" pastes as `123456` and `12345a6` pastes as `123456`. The alternative,
+ * accepting the text and rejecting it at the server, gives the reader a field
+ * that looks right and a form that does not submit.
+ *
+ * **The code is one value, not six.** The segments are six views of one string of
+ * `length` characters, so Backspace removes a character from the string and the
+ * characters after it close up: on `123456`, Backspace in the third segment leaves
+ * `12456`. Six boxes that each had to be emptied by hand would need a rule for
+ * what Backspace on an empty box means, and every version of that rule is wrong
+ * for somebody. The rule that does nothing traps a reader who is correcting a
+ * digit; the rule that clears the box before deletes a character they did not ask
+ * to delete.
+ *
+ * **The character set, the normaliser and the words are all the caller's.** Which
+ * characters a code may contain is decided by the service that issued it, folding
+ * case is a rule only the caller knows, and every segment's accessible name is a
+ * phrase. Nothing here is a table of words or a regular expression.
+ *
+ * **The first segment is named by a real `<label>`, and it is hidden.** Base UI
+ * strips `aria-label` from that one segment on purpose: it is the segment the
+ * platform autofills, and the label element is what names the autofill prompt as
+ * well as the field. This Component renders that label visually hidden, because a
+ * label above a row of six boxes is the caller's to place. Pass `id` and put your
+ * own `Label` on the first segment, and this one steps aside.
+ *
+ * **One Tab stop for the whole code.** A reader reaches the first segment and the
+ * rest follow as they type, so the code is one stop in a form rather than six, and
+ * the segments are a named group rather than six fields in a row. It is built on
+ * Base UI's OTP field, which owns the segmentation, the clamping to `length` and
+ * the autofill hint the platform needs for a one-time code.
+ */
+function OneTimeCode({ label, length, characters = 'numeric', normalize, segmentLabel, grouping, value, defaultValue, onValueChange, onComplete, onInvalid, autoSubmit = false, mask = false, disabled = false, required = false, readOnly = false, name, form, id, className, }) {
+    const generated = useId();
+    const firstId = id ?? generated;
+    const boundary = (index) => grouping?.after.includes(index) === true;
+    return (_jsxs(OTPFieldPrimitive.Root, { "data-slot": "one-time-code", className: cn('flex items-center justify-center gap-2', className), length: length, validationType: characters, ...(normalize === undefined ? null : { normalizeValue: normalize }), ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), onValueChange: (next) => onValueChange?.(next), onValueComplete: (next) => onComplete?.(next), onValueInvalid: (attempted) => onInvalid?.(attempted), autoSubmit: autoSubmit, mask: mask, disabled: disabled, required: required, readOnly: readOnly, name: name, ...(form === undefined ? null : { form }), id: firstId, "aria-label": label, children: [id === undefined ? (_jsx("label", { htmlFor: firstId, className: "sr-only", children: label })) : null, Array.from({ length }, (_, index) => (_jsxs(Fragment, { children: [_jsx(OTPFieldPrimitive.Input, { "data-slot": "one-time-code-input", ...(index === 0
+                            ? null
+                            : { 'aria-label': segmentLabel === undefined ? label : segmentLabel(index) }), className: cn('border-input bg-background text-foreground h-11 w-9 rounded-md border text-center text-base tabular-nums outline-none', 'transition-[color,box-shadow] duration-fast ease-out', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'pointer-coarse:size-11') }), boundary(index) ? (_jsx("span", { "data-slot": "one-time-code-separator", "aria-hidden": "true", className: "text-muted-foreground shrink-0 text-base", children: grouping?.separator })) : null] }, index)))] }));
+}
+export { OneTimeCode };

package/dist/components/ui/overflow-actions.d.ts

@@ -0,0 +1,169 @@
+import { type ReactNode } from 'react';
+/**
+ * One action in the row, whether it is drawn as a button or as a menu row.
+ *
+ * The same shape either way, which is the point: an action that moves into the
+ * menu keeps its label, its mark and its unavailable state, so a reader who finds
+ * it there is looking at the same thing they were looking at in the row.
+ */
+export type OverflowAction = {
+    /**
+     * The caller's own identity for the action.
+     *
+     * Required and stable, because it is what the React key is and what
+     * `onOverflowChange` reports, and a caller keyed on a localised label remounts
+     * the row the moment the reader changes language.
+     */
+    id: string;
+    /**
+     * The action's label.
+     *
+     * A `ReactNode`, so a caller can put an emphasis inside it. It is also the
+     * measurement: this Component reads each drawn button's own width, so a label
+     * made of markup is measured as it is drawn rather than as its text.
+     */
+    label: ReactNode;
+    /**
+     * The mark for the action.
+     *
+     * A `ReactNode` and not an icon name, because the vocabulary a product uses for
+     * its own rows is its own. Keep it `aria-hidden`, because `label` names the
+     * control.
+     */
+    icon?: ReactNode;
+    /**
+     * How the menu row reads when the action has collapsed into it.
+     *
+     * `danger` and not `destructive` so a consumer's tone and this Component's tone
+     * stay two vocabularies. It has no effect on the drawn button, which wears
+     * `outline` because the overflow trigger wears that same frame and the row is
+     * not allowed to disagree with its own cap.
+     */
+    tone?: 'default' | 'danger';
+    /** Whether the action refuses the press, in the row and in the menu alike. */
+    disabled?: boolean;
+};
+/**
+ * The props the Overflow actions accept.
+ *
+ * A declared interface rather than a forwarded native one: the row is measured
+ * and laid out by this Component, so there is no native element whose props could
+ * be forwarded without also forwarding a `className` that would break the
+ * measurement the whole Component exists to make.
+ */
+export interface OverflowActionsProps {
+    /**
+     * The actions, in the order a reader meets them.
+     *
+     * Required, and the order is the caller's because it is a claim about how often
+     * each is used: a row where Archive sits between Open and Delete is one every
+     * reader has to learn again. **The order is also what collapses.** Trailing
+     * actions move, because the leading ones are the ones a wide row already fits
+     * and a narrow one must keep: the actions that survive are the ones that were
+     * reachable first.
+     */
+    actions: readonly OverflowAction[];
+    /**
+     * The accessible name of the overflow trigger.
+     *
+     * Required, and the reason is the one `Toast` states for its close control. The
+     * trigger is an icon, it appears without the reader asking for it, and an
+     * icon-only control they reach towards has to say what it is before they press
+     * it. "More actions for this row", "Remaining actions". It is a name and not a
+     * visible label because the trigger is three dots and three dots are not a word.
+     */
+    overflowLabel: string;
+    /**
+     * Called with the ids of the actions currently inside the menu.
+     *
+     * Optional, and it is here for the caller whose row means something different
+     * once the actions are hidden: a tooltip that described them, a measurement,
+     * an analytics event. It fires on the change and never on the first render, so
+     * a caller does not receive an empty list it already knows is empty. **The cost
+     * is that this Component cannot tell a caller *why* an action moved**, only
+     * that it did, so a caller whose UI depends on the reason is measuring its own
+     * container as well.
+     */
+    onOverflowChange?: (ids: readonly string[]) => void;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * A row of actions that gives up its trailing actions when it runs out of room.
+ *
+ * **It observes itself, and that is the reason it is a Component.** A row of five
+ * actions inside a table cell is a layout problem no prop describes, because the
+ * answer depends on a width Prism cannot see: the cell, the sidebar, the zoom
+ * level, the font the reader has chosen and the strings the caller localised last
+ * week. So the Component holds a measurement, keeps it current, and moves the
+ * trailing actions into a menu when the row can no longer hold them beside their
+ * cap. No prop combination expresses this, because every prop is a decision taken
+ * before the width is known and this is a decision taken after it.
+ *
+ * **What the first frame draws, and why it is not a guess.** A server render has
+ * no width to measure, so the first frame draws every action the caller passed and
+ * **no cap**, which is the row the caller described rather than the row this
+ * Component would have guessed at. The correction is made in a layout effect,
+ * which runs after the DOM is mutated and before the browser paints, so a reader
+ * with scripting sees the corrected row as the first frame they ever see and
+ * never sees the un-collapsed one at all. What is therefore visible to a reader
+ * without scripting, to a crawler and in a print stylesheet is the full row, which
+ * is the correct answer for all three: a cap that cannot open is a control that
+ * lies, and a row of actions is readable without them.
+ *
+ * **The cap is always in the document and is taken out of the flow rather than
+ * unmounted, and the reason is the measurement.** A trigger that is not rendered
+ * has no width to read, and a row that changed width when the cap appeared would
+ * move its actions on every resize, so the cap stays in the DOM, keeps its width,
+ * and when nothing has collapsed it is `visibility: hidden`, out of flow, out of
+ * the tab order and out of the accessibility tree. That is what lets the first
+ * decision account for a cap that will need to appear.
+ *
+ * **Each action's width is read from the action, and it is remembered when the
+ * action is hidden.** A button sizes to its own content, so a width measured on
+ * the pass where the action was drawn is still its width on the pass where it is
+ * not, which is the only reason a hidden action can still be counted. The cost is
+ * real and it is this: **a row that shrinks to fit its content has no room to run
+ * out of, so nothing collapses.** `className` must give the row a bounded width,
+ * and the consequence of ignoring that is not a row that overflows its container
+ * but a row that empties itself into a cap.
+ *
+ * **A pass runs when the measurement could have changed, and not on every render.**
+ * Every read a pass makes is a read the browser cannot answer without settling
+ * layout first, so a row that measures on every render spends a forced layout on
+ * every render, and a table of them spends one per row for every keystroke in a
+ * filter box somewhere above it. So a pass runs on mount, when the actions' ids or
+ * their labels change, when `className` changes, when the row's own box changes, and
+ * when the page's fonts have finished loading. That last one earns its place: a
+ * self-hosted face swaps in after the first paint and changes the width of every
+ * drawn action without changing the row's width, so nothing else reports it, and a
+ * row measured in the fallback face is a row whose widths were never true of the page
+ * the reader is looking at. A caller who re-renders a row for a reason of its own
+ * pays nothing, which is the whole of the claim: the read happens on the frames
+ * where the answer could have been different, and on no others.
+ *
+ * **The determinate part of the motion budget is not spent here at all.** The row
+ * changes membership rather than animating: an action leaves, the cap arrives, and
+ * both are one layout pass with no transition on either. That is deliberate. A
+ * row that slid its actions sideways would be a movement a reader did not ask for
+ * on a control they did not press, and the first motion law in this system is
+ * that feedback answers something the reader did; here the reader resized a window
+ * or changed a sidebar, and the answer is that the row is still complete.
+ *
+ * **It composes `Button` and `DropdownMenu` and redraws neither.** The drawn
+ * actions are `Button`s at the `outline` step, which is the same frame
+ * `DropdownMenuTrigger` draws, so the cap is not a different-looking control
+ * sitting in the middle of the row. The menu, its typeahead, its arrow keys and
+ * its Escape handling are `DropdownMenu`'s, and the only thing this Component
+ * decides is which actions go where.
+ *
+ * **It is a client Component**, because it reads a width, because it holds the
+ * membership of the menu, and because it takes the one callback. What that costs
+ * is the price of the whole idea: a server-rendered row of actions is drawn whole
+ * and never collapses, so a page that is read without scripting gets a row rather
+ * than a menu. That is the same trade `DataToolbar` makes for the opposite
+ * problem, and it is the reason this one is a Component and `DataToolbar` is not.
+ */
+declare function OverflowActions({ actions, overflowLabel, onOverflowChange, className, }: OverflowActionsProps): import("react").JSX.Element;
+export { OverflowActions };
+//# sourceMappingURL=overflow-actions.d.ts.map

package/dist/components/ui/overflow-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-actions.d.ts","sourceRoot":"","sources":["../../../src/components/ui/overflow-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAWd;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;OAMG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;OASG;IACH,OAAO,EAAE,SAAS,cAAc,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAA;IACnD,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,iBAAS,eAAe,CAAC,EACvB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,+BAmMtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}