@50arms/ui 0.0.0-stage → 35.1.0

package/dist/types/components/Markdown.d.ts

@@ -0,0 +1,35 @@
+import type { MdCodeRenderer } from "../lib/syntax/markdown";
+export interface CodeBlockProps {
+    code: string;
+    language?: string | null;
+    filename?: string;
+    /** Still filling — suppresses the copy button, which would copy a fragment. */
+    streaming?: boolean;
+    className?: string;
+}
+/**
+ * A fenced code block, rendered through the shared `CodeEditor` viewer.
+ *
+ * `view="source"` is pinned rather than left to `CodeEditor`'s own default:
+ * left alone, a fence whose language is literally `markdown` would flip
+ * `CodeEditor` into ITS OWN rendered-preview mode, so a ```markdown block
+ * quoted inside a document would render as prose nested inside prose instead
+ * of the literal source the author fenced off. Every other language already
+ * defaults to `"source"`, so this only changes behaviour for that one case.
+ */
+export declare function CodeBlock({ code, language, filename, streaming, className }: CodeBlockProps): import("react").JSX.Element;
+export interface MarkdownProps {
+    children: string;
+    className?: string;
+    /** Defaults to a `CodeEditor`-backed viewer with a copy button. */
+    renderCode?: MdCodeRenderer;
+}
+/**
+ * Renders a complete markdown string as a document.
+ *
+ * This is the general-purpose entry point — the one nearly every consumer
+ * wants: a card description, a comment, a retro field, a plan record. It
+ * parses ONCE per `children` change and hands the tree straight to
+ * `MarkdownNodes`; there is no second parser, no block-splitting of its own.
+ */
+export declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;

package/dist/types/components/MarkdownEditor.d.ts

@@ -0,0 +1,129 @@
+import { type ReactNode, type Ref } from "react";
+import { type ImageUploadState, type ImageUploader } from "../lib/markdown/image-pipeline";
+import { type SubmitAction } from "../lib/submit-shortcut";
+/**
+ * The imperative half of the DX-2930 / DX-2907-problem-137 contract: a
+ * consumer that needs to move focus into the surface from code (a "Edit"
+ * button, a just-opened panel) gets a NAMED method instead of reaching for
+ * `data-md-editable` inside the page — the internal it was reduced to
+ * querying for before this existed. `focus()` mirrors what the toolbar's own
+ * `apply()` already does after a command: `editor.root.focus()`, the actual
+ * contenteditable host, never a proxy element.
+ */
+export interface MarkdownEditorHandle {
+    /**
+     * Focus the surface. `caret` places the caret at the document's `"start"` or
+     * `"end"` (snapped to a real caret stop); omit it to leave the caret wherever
+     * the browser puts it. DX-3372: `InlineMarkdownEdit` opens with the caret at
+     * the end, the same place `InlineEdit` puts it.
+     *
+     * THROWS rather than returning quietly (DX-3372 review P0) when it cannot do
+     * what it was asked: the surface is not built yet (it is created in an
+     * effect, so a render or a layout effect is too early), the editor is
+     * read-only, focus did not land on the surface, or the caret could not be
+     * placed. A caller that goes on to assume focus is inside would otherwise
+     * wait for a blur that never comes.
+     */
+    focus: (caret?: "start" | "end") => void;
+}
+export interface MarkdownEditorProps {
+    /** The markdown. Controlled when `onChange` is given. */
+    value: string;
+    onChange?: (value: string) => void;
+    /**
+     * Read-only surfaces are not editable at all — not a disabled editor.
+     *
+     * Same reasoning as `CodeEditor`: a `value` with no change handler on an
+     * editable surface is the React controlled-input trap, where the field
+     * silently refuses every keystroke and nothing reports why.
+     */
+    readOnly?: boolean;
+    /** Accessible name. Rendered visibly unless `hideLabel`. */
+    label: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    /** Extra toolbar content, after the built-in groups. */
+    toolbar?: ReactNode;
+    className?: string;
+    /** Height of the editable area. Grows with content when omitted. */
+    minHeight?: number | string;
+    /** DXUI-25: caps the editable area; past it the content scrolls inside the editor. Unset, the area grows without limit. */
+    maxHeight?: number | string;
+    /**
+     * Focus the surface once, on mount — the same one-shot semantics as an
+     * `<input autoFocus>`. Ignored on `readOnly`, since there is nothing to
+     * focus into.
+     */
+    autoFocus?: boolean;
+    /**
+     * Stores a pasted, dropped or picked picture and resolves with its URL
+     * (DX-3134). Overrides the nearest `MarkdownImageUploadProvider`. With
+     * neither, pictures are referenced in the text but stay local to this tab, and the editor warns
+     * that they will not be saved.
+     */
+    uploadImage?: ImageUploader;
+    /**
+     * DXUI-74: stores any other pasted, dropped or picked file, with the same contract as `uploadImage`; the text gets a
+     * link, `[PDF 2](url)`. Overrides the provider's. Set, the editor takes every file type and the picker offers any file;
+     * unset, a file that is not a picture is ignored. SET IT WITH `isFileUrl`: the tile of a stored file is found by
+     * `isFileUrl` accepting its link, so without it the tile disappears the moment the upload finishes.
+     */
+    uploadFile?: ImageUploader;
+    /** DXUI-74: the picture types `uploadImage` stores (MIME types). Overrides the provider's; default every `image/*`. A picture of another type goes to `uploadFile` as a link. */
+    imageTypes?: readonly string[];
+    /** DXUI-74: whether a link's destination is a stored file, so it gets a tile in the strip. Overrides the provider's; default no link does. Required alongside `uploadFile`. */
+    isFileUrl?: (url: string) => boolean;
+    /**
+     * Fires with the file counts every time they change, and once on mount.
+     *
+     * THE SAVE GATE (PLN-10 R-1): while `unstored > 0` the value holds a
+     * `blob:` file that no reader outside this tab can load, so a consumer must
+     * not save it — and should re-check the exact value it is about to persist
+     * with `findUnstoredImages`, the same function this count comes from. Fired
+     * BEFORE the `onChange` that carries the new value, so a consumer reacting
+     * to the value already knows whether it may save it.
+     *
+     * UNMOUNTING ABANDONS AN UNSTORED FILE. The editor's object URLs and its
+     * uploads die with it (they point into this editor's own page memory), so a
+     * value still holding a `blob:` reference, remounted later, has a tile that
+     * can never be stored. The editor guards leaving the PAGE itself
+     * (`beforeunload`); leaving the editor inside the app — a route change, a
+     * closed panel, a switched tab — is the consumer's to block while
+     * `unstored > 0` (PLN-10, "Consumer obligations").
+     */
+    onImageUploadStateChange?: (state: ImageUploadState) => void;
+    /** Imperative focus handle — see `MarkdownEditorHandle`. */
+    ref?: Ref<MarkdownEditorHandle>;
+    /**
+     * DX-3374: `"panel"` (default) is the original chrome — a bordered card with
+     * the toolbar and the line-handle gutter both IN FLOW, which is exactly what
+     * pushed the text down and right the moment `InlineMarkdownEdit` opened
+     * (DX-3372's own known limit). `"flush"` is `InlineMarkdownEdit`'s mode:
+     * no border/background of its own (the caller draws that, at the SAME
+     * geometry as its rest view — see `InlineMarkdownEdit`'s `OpenMarkdownEdit`),
+     * zero content padding (matching `Markdown`'s own zero padding, so the text
+     * box does not move), the toolbar floated OUTSIDE the box on top rather than
+     * pushing it down, and the line handle in the EXTERNAL gutter (`right-full`,
+     * the slot `EditGutter`'s pencil vacates while editing) rather than inset
+     * into the text's own left padding.
+     *
+     * DXUI-25: `"bare"` is the chrome of an editor that lives INSIDE another control's box (the chat `Composer`).
+     * It draws only the editable surface: no toolbar row, no line-handle gutter, no border, background or
+     * padding of its own, no label and no submit hint line. The surface takes the font size and line height of
+     * whatever contains it, so the caller's box styles it exactly as it would a plain textarea, and the
+     * placeholder takes the field-placeholder color. Everything else stays: live rendering, the hotkeys, the
+     * right-click formatting menu, paste and drop of files, the warning for a file that cannot be stored. It draws no control buttons, so the bar that appears for a link, image,
+     * code block or table is not drawn either.
+     */
+    chrome?: "panel" | "flush" | "bare";
+    /**
+     * DX-5540: the composer's submit shortcut. Ctrl+Enter (Cmd+Enter on a Mac) calls `onSubmit`, and the
+     * hint line under the editor names that shortcut and `label` (what it does: "post"; the caller
+     * translates it). `disabled` is the caller's own can't-submit rule, the same one its send button
+     * follows (empty, an image still uploading, a send in flight): while true the shortcut calls
+     * nothing, and the key is still swallowed so it does not insert a line break. Without this prop the
+     * editor has no submit shortcut and no hint line at all. Plain Enter keeps inserting a new line.
+     */
+    submit?: SubmitAction;
+}
+export declare function MarkdownEditor({ value, onChange, readOnly, label, hideLabel, placeholder, toolbar, className, minHeight, maxHeight, autoFocus, uploadImage, uploadFile, imageTypes, isFileUrl, onImageUploadStateChange, chrome, submit, ref, }: MarkdownEditorProps): import("react").JSX.Element;

package/dist/types/components/Menu.d.ts

@@ -0,0 +1,157 @@
+import type { ReactNode, Ref } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+export interface MenuProps {
+    /** The control that opens the menu. */
+    trigger: ReactNode;
+    /** Which side of the trigger the popup prefers. */
+    side?: "top" | "bottom" | "left" | "right";
+    /** How the popup lines up along that side. */
+    align?: "start" | "center" | "end";
+    /**
+     * Controlled open state.
+     *
+     * Not decoration: a menu that advertises a keyboard shortcut has to know
+     * when it is open in order to honour it, and a caller cannot listen for a
+     * key that only applies while a popup it cannot see is showing.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Where focus goes when the menu closes. Default: back to the trigger. A function runs at every close and answers
+     * `true` for that default, `false` to leave focus where the closing action put it, or an element to focus. A row
+     * whose action removes the trigger or moves focus on (a delete, a rename field) answers `false`, or focus would be
+     * pulled back to a trigger that is gone, or off the field the action just focused.
+     */
+    finalFocus?: boolean | (() => boolean | HTMLElement | null);
+    className?: string;
+    children: ReactNode;
+}
+export declare function Menu({ trigger, side, align, open, onOpenChange, finalFocus, className, children, }: MenuProps): import("react").JSX.Element;
+/**
+ * Neutral, destructive, or a caution.
+ *
+ * Not a palette: a menu row is picked, not read, so each tone beyond neutral
+ * is a property of the ACTION. `danger` says "this deletes something";
+ * `warning` says "this works, but not in the state the thing is in right
+ * now" (promote docs before the plan is complete, publish a draft). `Badge`
+ * has seven because a badge's whole job is to carry a state.
+ */
+export type MenuItemTone = "neutral" | "danger" | "warning";
+export interface MenuItemProps extends Omit<BaseMenu.Item.Props, "className"> {
+    className?: string;
+    /**
+     * Leading icon, positioned absolutely at the row's left edge, inside the
+     * `pl-8` the row's own padding already reserves for it.
+     *
+     * A ROW WITH AN ICON MUST USE THIS, NOT AN INLINE `<Icon>` AMONG `children`.
+     * `ITEM`'s `pl-8` exists so an icon rendered here lines up consistently
+     * across every row in the same popup — an icon laid out inline as a normal
+     * flex child instead sits to the RIGHT of that padding, one full
+     * icon-width further in than a row using this prop. That drift is exactly
+     * what misaligned this app's account menu before this prop existed:
+     * `children` carried a hand-rolled `<span className="flex items-center
+     * gap-2">` wrapping icon and label together, which reads fine in isolation
+     * and wrong the moment a differently-iconed row shares the same popup.
+     */
+    icon?: ReactNode;
+    /**
+     * Marks this row as the current choice among alternatives.
+     *
+     * For menus that ARE a choice but are not a radio group — a model picker
+     * that draws its own tick, say. Without it the only signal is the tick, and
+     * a tick is not a state a pointer can see it is already on.
+     */
+    selected?: boolean;
+    /**
+     * `danger` marks the row destructive. Resting state is unchanged.
+     *
+     * Same sentence as `IconButton.tone`, and the same contract behind it — the
+     * row is quiet until approached, and "approached" here includes arrowing onto
+     * it, which a `hover:` rule cannot see. See `DANGER_ITEM` above for why that
+     * distinction is the reason this lives in the library rather than in each
+     * consumer's stylesheet.
+     *
+     * A DANGER ROW THAT IS ALSO `selected` DRAWS AS SELECTED. The two are merged
+     * in that order deliberately: "this is the one you are on" is the more urgent
+     * of the two things to say, and a destructive action is a poor candidate for
+     * being the current choice in the first place.
+     */
+    tone?: MenuItemTone;
+    /**
+     * A second, quieter line saying what picking the row DOES (or why it is
+     * cautioned) — shown under the label, like `MenuCheckboxItem.description`.
+     * Without it a caller hand-builds a two-line `children` stack, and the row's
+     * icon (absolutely positioned for a one-line row) stops lining up with it.
+     */
+    description?: ReactNode;
+    /**
+     * DX-6426 - what this row sends is out and unanswered: the row's icon slot shows a spinner and the row refuses a second activation until it is
+     * answered. Pass it from the pending state of the write. The row is not dimmed (it is working, not unavailable).
+     */
+    loading?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function MenuItem({ className, icon, selected, tone, description, loading, disabled, children, ref, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuRadioGroupProps extends Omit<BaseMenu.RadioGroup.Props, "className"> {
+    className?: string;
+}
+/** Single-choice group — for a setting rather than a list of actions. */
+export declare function MenuRadioGroup({ className, children, ...props }: MenuRadioGroupProps): import("react").JSX.Element;
+export interface MenuRadioItemProps extends Omit<BaseMenu.RadioItem.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function MenuRadioItem({ className, children, ref, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+export interface MenuCheckboxItemProps extends Omit<BaseMenu.CheckboxItem.Props, "className"> {
+    className?: string;
+    /** Leading icon — same slot, and same reason it is a prop, as `MenuItem.icon`. */
+    icon?: ReactNode;
+    /**
+     * A second, quieter line saying what the toggle DOES — shown under the label.
+     * A switch row that cannot say what it controls sends the reader to a help
+     * page; one line here is the whole help page.
+     */
+    description?: ReactNode;
+    /**
+     * Draws the state in place of the trailing switch.
+     *
+     * For a setting whose on/off is better said by a meaningful glyph than by a
+     * generic track and thumb - a plan's sign-off, say: a filled check when signed,
+     * an empty "not approved" mark when not. The caller hands in the glyph for the
+     * CURRENT state (it already holds `checked`); the switch is then not drawn at
+     * all, so the row never states its state twice. The row stays a
+     * `menuitemcheckbox` carrying `aria-checked`, which is what assistive tech
+     * reads - the indicator is decoration and is hidden from it.
+     */
+    indicator?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * An independent on/off setting inside a menu.
+ *
+ * A `MenuItem` is an ACTION and closes the menu when picked; a setting that is
+ * flipped three at a time must not. Base UI's checkbox item keeps the menu open
+ * (`closeOnClick` defaults to `false` here, not by our choice) and announces
+ * itself as `menuitemcheckbox` with `aria-checked`, which a `MenuItem` carrying
+ * a hand-drawn tick cannot — that is the reason this is its own row and not a
+ * `selected` `MenuItem`.
+ *
+ * The state is drawn as a small trailing switch rather than a leading tick:
+ * every other row in the same popup puts its icon on the left, and a tick there
+ * reads as "this is the current choice among alternatives" (`MenuRadioItem`),
+ * not "this is on". The track is fill AND thumb position, so on/off survives
+ * the loss of colour.
+ */
+export declare function MenuCheckboxItem({ className, icon, description, indicator, children, ref, ...props }: MenuCheckboxItemProps): import("react").JSX.Element;
+export interface MenuGroupProps {
+    /**
+     * The group's heading. A prop rather than a child component, so a label
+     * cannot be placed outside a group — where it would throw at render.
+     */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function MenuGroup({ label, children }: MenuGroupProps): import("react").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/Navigation.d.ts

@@ -0,0 +1,67 @@
+import type { MouseEvent, ReactNode } from "react";
+export type Crumb = {
+    label: ReactNode;
+    href?: string;
+    /**
+     * Receives the click event, which a client-side router NEEDS in order to
+     * suppress the browser's own navigation.
+     *
+     * The anchor below keeps its real `href` (hover URL, ctrl/cmd-click to a new
+     * tab) and only falls back to `#` when there is none, so a crumb with an
+     * `href` and a router-driven `onClick` used to do the client-side navigation
+     * AND a full page load. Take the event and suppress it:
+     *
+     * ```tsx
+     * onClick: (e) => {
+     *   // A modified or middle click is a request for a new tab — let it through.
+     *   if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+     *   e.preventDefault();
+     *   navigate(crumb.href);
+     * }
+     * ```
+     *
+     * A zero-argument `() => void` handler still type-checks. The last crumb is
+     * the current page, a non-link span, and never fires this.
+     */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+export interface BreadcrumbProps {
+    items: Crumb[];
+    /**
+     * Collapse the middle when the trail is longer than this.
+     *
+     * A trail that wraps to two lines has stopped being a trail. Collapsing
+     * keeps the two ends — where you came from and where you are — which is the
+     * information people actually use; the middle is nearly always scenery.
+     */
+    maxItems?: number;
+    className?: string;
+}
+export declare function Breadcrumb({ items, maxItems, className }: BreadcrumbProps): import("react").JSX.Element;
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /**
+     * How many numbers to show around the current page.
+     *
+     * CLAMPED TO 0 BELOW 640px, whatever is passed. Every control in this row is
+     * at least 44px wide once the pointer is coarse, so the default window is
+     * nine targets plus eight gaps — 428px, which does not fit a 375px phone and
+     * pushed the entire page sideways. Fewer numbers is the only thing that can
+     * give here: a horizontally scrolling pagination control is a worse answer
+     * than a shorter one, because the pages you cannot see are the ones you were
+     * looking for.
+     */
+    siblings?: number;
+    className?: string;
+}
+/**
+ * Numbered pagination with a stable width.
+ *
+ * The window of page numbers is padded so the control does not change size as
+ * you move through it — a row of buttons that grows and shrinks under the
+ * pointer makes people misclick, and it is the single most common flaw in
+ * hand-rolled pagination.
+ */
+export declare function Pagination({ page, pageCount, onPageChange, siblings, className, }: PaginationProps): import("react").JSX.Element;

package/dist/types/components/NumberInput.d.ts

@@ -0,0 +1,177 @@
+import type { Ref } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+import { type VariantProps } from "tailwind-variants";
+declare const numberInput: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}, undefined, {
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+        center: {
+            input: string;
+        };
+        start: {
+            input: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}>>;
+/**
+ * The five props below are declared here, EXPLICITLY, rather than left to flow through the
+ * `Omit<NumberField.Root.Props, ...>` this interface otherwise extends (SG-907).
+ *
+ * `NumberField.Root` renders a `<div>` — `aria-label`/`aria-labelledby`/`aria-describedby` are
+ * universal ARIA attributes TypeScript accepts on any element, so they type-checked and silently
+ * landed on that wrapping div, never reaching the `<input>` a screen reader (or
+ * `getByRole("textbox", { name })`) actually reads the accessible name from. `placeholder` was
+ * worse: `NumberFieldRootProps` never declared it at all, so a caller could not pass one through
+ * this component regardless of which element it would have reached. Both are fixed the same way
+ * — destructured out of the props this component accepts from its caller, forwarded to
+ * `NumberField.Input` below, which is exactly where `<input>`-shaped props belong.
+ *
+ * `name` stays out of this list on purpose. It is already declared on `NumberFieldRootProps`
+ * itself (not inherited from the generic div props the way the three ARIA attributes are), and
+ * Base UI's own `NumberField.Root` reads it to name a HIDDEN native `<input type="hidden">` it
+ * renders for real form submission — never the visible text `<input>`, which the library
+ * deliberately gives no `name` of its own so a form posts the field exactly once. Moving `name`
+ * onto the visible input here would give the form two same-named inputs instead of fixing
+ * anything.
+ */
+export interface NumberInputProps extends Omit<NumberField.Root.Props, "className" | "render" | "aria-label" | "aria-labelledby" | "aria-describedby">, VariantProps<typeof numberInput> {
+    className?: string;
+    /** Hide the +/− buttons — for a field driven by typing or scrubbing alone. */
+    hideSteppers?: boolean;
+    /**
+     * A draggable label. Dragging it left or right changes the value.
+     *
+     * Worth adding wherever the exact number matters less than the relationship
+     * between it and what it affects — a delay, a threshold, a weight.
+     */
+    scrubLabel?: string;
+    ref?: Ref<HTMLDivElement>;
+    /** The accessible name — reaches the `<input>` itself, never the wrapping group (SG-907). */
+    "aria-label"?: string;
+    /** @see `aria-label`'s own note above — same fix, same reason. */
+    "aria-labelledby"?: string;
+    /** @see `aria-label`'s own note above — same fix, same reason. */
+    "aria-describedby"?: string;
+    /** What an empty field says. Reaches the `<input>` — `NumberFieldRootProps` never had one. */
+    placeholder?: string;
+    /**
+     * Whether a decimal separator may be typed or pasted at all.
+     *
+     * Base UI's own `NumberField` keeps the decimal key typeable even under an integer-only
+     * `format` (its own source: "must stay typeable regardless of whether the format renders a
+     * fraction") and instead ROUNDS a typed fraction away on blur — `3.7` silently becomes `4`,
+     * which is a value the reviewer never typed. `allowDecimal={false}` refuses the keystroke (and
+     * a pasted fraction) outright, so nothing the reviewer entered is ever changed behind their
+     * back. Defaults to `false` exactly when `format?.maximumFractionDigits === 0` — an
+     * integer-only format refuses a decimal point unless a caller explicitly asks otherwise.
+     */
+    allowDecimal?: boolean;
+}
+export declare function NumberInput({ size, align, className, hideSteppers, scrubLabel, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, placeholder, allowDecimal, onKeyDown, onPaste, ...props }: NumberInputProps): import("react").JSX.Element;
+export {};

package/dist/types/components/OTPInput.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+export interface OTPInputProps extends Omit<OTPField.Root.Props, "className" | "render" | "length"> {
+    /** How many characters. 6 is the near-universal default. */
+    length?: number;
+    /** Draw a gap after this many characters — "123 456" reads faster than "123456". */
+    groupAfter?: number;
+    className?: string;
+    /** Focus the first box when the input appears, so typing lands at once. */
+    autoFocus?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function OTPInput({ length, groupAfter, className, autoFocus, ref, ...props }: OTPInputProps): import("react").JSX.Element;

package/dist/types/components/OrderedEntityManager.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from "react";
+import { type ColorPickerProps } from "./ColorPicker";
+import { type EmojiPickerProps } from "./EmojiPicker";
+export interface OrderedEntity {
+    id: string;
+    name: string;
+    order: number;
+    /** The entry's colour, `#rrggbb`. Required on every entry when `onChangeColor` is passed. */
+    color?: string;
+    /** Optional emoji, stored as the caller's value (the Unicode character by default). `null`/absent = none. */
+    emoji?: string | null;
+}
+/** What a row shows beyond its name: an optional READ-ONLY status badge, and
+ *  - when non-empty - the reason the delete control refuses (see
+ *  `IconButton`'s `disabledReason`, the only way to turn it off, so a caller
+ *  cannot forget to explain a blocked delete). */
+export interface OrderedEntityRowStatus {
+    badge?: ReactNode;
+    /** The row cannot be moved, and no move may shift it (a running queue item). */
+    locked?: boolean;
+    disabledReason?: string;
+}
+type AddProps = {
+    onCreate: (entity: {
+        name: string;
+        order: number;
+    }) => void;
+    addFieldLabel: string;
+    addPlaceholder: string;
+} | {
+    onCreate?: undefined;
+    addFieldLabel?: undefined;
+    addPlaceholder?: undefined;
+};
+export type OrderedEntityManagerProps<T extends OrderedEntity> = AddProps & {
+    items: T[];
+    /** With `title` or `description` the list sits in a `Card` with that header; with neither it is the bare list (inside a `Dialog`, say). */
+    title?: string;
+    description?: string;
+    emptyMessage: ReactNode;
+    containerId: string;
+    containerLabel: string;
+    /** The full list, reordered and renumbered (`order` === new index) - the
+        caller persists each row's new `order`, e.g. one `update` per id. */
+    onReorder: (items: T[]) => void;
+    /** Present: a name is renamed in place (click, Enter commits, Escape cancels). */
+    onRename?: (id: string, name: string) => void;
+    /** Present: each row has a delete that asks for confirmation first. */
+    onDelete?: (id: string) => void;
+    /** Present: each row has a colour picker. Told the committed lowercase `#rrggbb`; a colour is never removed. */
+    onChangeColor?: (id: string, color: string) => void;
+    /** Present: each row has an emoji picker. `null` removes the emoji. */
+    onChangeEmoji?: (id: string, emoji: string | null) => void;
+    /** The colour picker's own options: `presets`, the caller's palette. */
+    colorPicker?: Pick<ColorPickerProps, "presets">;
+    /** The emoji picker's own options: `options`, `allowCustom`, `validateCustom`, `renderValue`, `clearable`, `searchable`. */
+    emojiPicker?: Pick<EmojiPickerProps, "options" | "allowCustom" | "validateCustom" | "renderValue" | "clearable" | "searchable">;
+    /** The one entry to draw attention to (the item just added). */
+    highlightedId?: string | null;
+    rowStatus?: (item: T) => OrderedEntityRowStatus;
+    className?: string;
+};
+export declare function OrderedEntityManager<T extends OrderedEntity>(props: OrderedEntityManagerProps<T>): import("react").JSX.Element;
+export {};

package/dist/types/components/PagedWindowList.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { PagedWindow } from "../lib/paged-window";
+export interface PagedWindowItemPosition {
+    /** Position among the items currently shown, across every shown page. */
+    local: number;
+    /** Position in the whole list: `source.offset + local`. */
+    global: number;
+}
+export interface PagedWindowListProps<T> {
+    /** The window to render — what `usePagedWindow` returned. */
+    source: PagedWindow<T>;
+    /** Stable across renders and pages. Never an array index. */
+    getKey: (item: T) => string | number;
+    renderItem: (item: T, position: PagedWindowItemPosition) => ReactNode;
+    /**
+     * One item's height INCLUDING its spacing, in px, used for placeholders until
+     * real pages have been measured. Replaced by the measured mean as pages
+     * arrive, so it only has to be close.
+     */
+    estimatedItemHeight: number;
+    className?: string;
+}
+export declare function PagedWindowList<T>({ source, getKey, renderItem, estimatedItemHeight, className, }: PagedWindowListProps<T>): import("react").JSX.Element;