@50arms/ui 0.0.0-stage → 35.1.0

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

@@ -0,0 +1,269 @@
+import { type ReactNode, type Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+export declare function useDialogFinalFocus(open: boolean | undefined): () => true | HTMLElement;
+export declare function useSupersedePopovers(open: boolean | undefined, onOpenChange: DialogProps["onOpenChange"]): (next: boolean) => void;
+declare const dialog: import("tailwind-variants").TVReturnType<{
+    size: {
+        wide: {
+            popup: string;
+        };
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+        full: {
+            popup: string;
+            header: string;
+            title: string;
+            description: string;
+            body: string;
+            close: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}, undefined, {
+    size: {
+        wide: {
+            popup: string;
+        };
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+        full: {
+            popup: string;
+            header: string;
+            title: string;
+            description: string;
+            body: string;
+            close: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        wide: {
+            popup: string;
+        };
+        sm: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+        lg: {
+            popup: string;
+        };
+        xl: {
+            popup: string;
+        };
+        full: {
+            popup: string;
+            header: string;
+            title: string;
+            description: string;
+            body: string;
+            close: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string[];
+}>>;
+export interface DialogProps extends Omit<VariantProps<typeof dialog>, "grow" | "compact"> {
+    /** The control that opens the dialog. Omit for a fully controlled dialog. */
+    trigger?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons for the footer. Omit to render no footer at all. */
+    actions?: ReactNode;
+    /** Hide the corner close button — for a dialog that must be answered. */
+    hideClose?: boolean;
+    /**
+     * The host's own controls, in the header row beside the title and before the
+     * corner close button (DX-4398). For a dialog whose one header bar carries its
+     * working controls — a viewer's navigation and zoom — instead of a header plus
+     * a toolbar row costing the content vertical space. Omitted: the header is
+     * exactly the title block.
+     */
+    headerActions?: ReactNode;
+    /**
+     * DX-5682: opt in to ONE header row. The title block (truncating), the
+     * `headerActions` and the close button share a single non-wrapping,
+     * vertically centred row at every width, and the close button sits IN the
+     * row instead of at the popup's corner. Off (the default) the header keeps
+     * DX-4398's behaviour: on a phone the title takes its own row above the
+     * controls and the close button stays pinned to the corner. Use it for a
+     * full-page viewer whose header is a working toolbar.
+     */
+    singleRowHeader?: boolean;
+    /**
+     * DXUI-94: the `headerActions` fill the row beside the title (start-aligned, truncating inside it) instead of hugging the close button; the
+     * title block then takes only the room its content needs. Without `headerActions` it changes nothing.
+     */
+    headerActionsGrow?: boolean;
+    /**
+     * DXUI-94: with `singleRowHeader`, a thinner bar: less padding, a tighter gap and a smaller close button. Without `singleRowHeader` it changes nothing.
+     */
+    compactHeader?: boolean;
+    /**
+     * DXUI-21: the body has no padding and no scroll of its own, so the content
+     * lays out its own padding and scroll regions and can reach the popup's
+     * edges (a chat thread). Off (the default) the body pads and scrolls.
+     */
+    flush?: boolean;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Dialog({ trigger, open, onOpenChange, title, description, actions, hideClose, headerActions, singleRowHeader, headerActionsGrow, compactHeader, size, flush, className, children, ref, }: DialogProps): import("react").JSX.Element;
+/** Closes the nearest Dialog. Wrap any button: `<DialogClose>{<Button/>}</DialogClose>`. */
+export declare function DialogClose({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface AlertDialogBaseProps {
+    trigger?: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    onConfirm?: () => void;
+    /**
+     * Type-to-confirm (DX-3809). When set, the body shows a labelled text field
+     * and the confirm button stays disabled until the typed value equals this
+     * string EXACTLY — case-sensitive, no trimming. For the irreversible action
+     * where a stray click on a red button is not enough friction ("type the
+     * team's name to delete it"). Enter in the field confirms only on a match.
+     * Cancel keeps the initial focus. The field starts empty on every open. An
+     * empty string is a programming error and throws.
+     */
+    confirmText?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The severity of what the dialog asks.
+ *
+ * `destructive` and `tone="warning"` are different questions and cannot both be
+ * true, so the type refuses the pair rather than letting one silently win:
+ *   - `destructive` — "this cannot be undone": a red medallion and a red confirm.
+ *   - `tone="warning"` — "this can be done, but not in the state things are in
+ *     right now" (promote docs before the plan is complete): an amber
+ *     medallion and an amber confirm, with the caller's description saying what
+ *     may go wrong. Reversible, so the confirm is not red; unusual, so it is not
+ *     the plain accent either.
+ */
+export type AlertDialogProps = AlertDialogBaseProps & ({
+    destructive: true;
+    tone?: never;
+} | {
+    destructive?: false;
+    tone?: "default" | "warning";
+});
+/**
+ * A dialog that must be answered — no outside click, no Escape.
+ *
+ * The confirm button is the LAST in the footer and the cancel button comes
+ * first, which is the reverse of how people often write it. Cancel-first means
+ * the pointer travelling in from the panel's content reaches the safe option
+ * before the destructive one, and keyboard focus lands on cancel by default.
+ */
+export declare function AlertDialog({ trigger, open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, tone, loading, onConfirm, confirmText, className, ref, }: AlertDialogProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,196 @@
+import { type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type AutoScrollOptions, type ContainerId, type CrossDrop, type DragAxis, type DragId, type DragSessionCallbacks, type GroupId } from "../lib/dnd";
+export interface DragDropProps extends DragSessionCallbacks {
+    /** Tune the edge auto-scroll. It cannot be turned off; see the banner. */
+    autoScroll?: AutoScrollOptions;
+    /**
+     * What the card in the hand SHOWS. Defaults to the carried item's own
+     * children, which is the version that cannot drift from the row it stands
+     * for.
+     *
+     * It does not decide whether the card is carried, or how — every carried card
+     * is a portalled clone, always. Worth passing when the resting row is dense:
+     * the clone is moving, usually under a cursor, and the two or three fields
+     * that identify the record are the only ones anybody reads off it.
+     */
+    renderCarried?: (id: DragId) => ReactNode;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDrop({ autoScroll, renderCarried, className, children, ...callbacks }: DragDropProps): import("react").JSX.Element;
+export interface DragDropContainerProps {
+    id: ContainerId;
+    /**
+     * Human name for this container, spoken in every announcement about it —
+     * "position 3 of 7 in ToDo". Falls back to the id, which is at least
+     * speakable and never right.
+     */
+    label?: string;
+    /**
+     * Reorder axis. `"y"` is a column of rows, `"x"` a row of columns. It decides
+     * which arrow pair steps inside the container and which moves between
+     * containers, which way the siblings part, and which scroll direction the
+     * handle leaves alone for a finger.
+     *
+     * @default "y"
+     */
+    axis?: DragAxis;
+    /**
+     * DX-4540: for a container that renders only a window of a longer list — the
+     * position in the whole list of its first item. Every announcement then
+     * speaks the real place ("position 221 of 500"), not the place among what
+     * happens to be rendered. Give both or neither.
+     */
+    offset?: number;
+    /** The whole list's length, counting the carried item when it lives here. See `offset`. */
+    total?: number;
+    /**
+     * DX-4583: what a card carried in from ANOTHER container means here.
+     * `"position"` (the default) lands it at an index, siblings parting and a
+     * marker showing where. `"lane"` lands it in this container as a whole: no gap
+     * opens and no marker shows, because there is no position to show — the
+     * consumer decides what the drop writes (see `Board`'s `crossLaneDrop`). A
+     * card carried inside its own container is always positional.
+     */
+    crossDrop?: CrossDrop;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDropContainer({ id, label, axis, offset, total, crossDrop, className, children, }: DragDropContainerProps): import("react").JSX.Element;
+export interface DragDropItemProps {
+    id: DragId;
+    /**
+     * Position in the consumer's data for this container. The engine
+     * re-registers on every change, so it must be the real index — never the
+     * render order of a filtered list.
+     */
+    index: number;
+    /** Human name, spoken in announcements and used to name the handle. */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function DragDropItem({ id, index, label, className, children, }: DragDropItemProps): import("react").JSX.Element;
+export interface DragDropGroupProps {
+    /** Unique among this container's groups, and the same on every render (the cards' parent, say). */
+    id: GroupId;
+    /** Names the set of cards in the box, for assistive technology. */
+    label?: string;
+    /**
+     * The box itself: a decorative element that fills the group and carries its look (background, border, radius). The group
+     * lays it out and resizes it while a card is carried, so it follows the cards inside it instead of standing still.
+     */
+    frame?: ReactNode;
+    /** What sits above the cards inside the box. It is not an item, and it moves with the box. */
+    header?: ReactNode;
+    /**
+     * What the box's content is drawn in: an element, or a function returning one, rendered with the content's props. A plain
+     * `div` when absent. It carries the box's padding, so the frame and the content cannot disagree about it.
+     */
+    render?: useRender.RenderProp;
+    /** On the group's outer element, the one the engine measures (a margin goes here). */
+    className?: string;
+    /** The outer element's `data-testid`. */
+    testId?: string;
+    /** On the content element. */
+    contentClassName?: string;
+    /** The group's `DragDropItem`s, consecutive in their container. */
+    children?: ReactNode;
+    /**
+     * DX-5521: this element is one PIECE of the group's box, and the box goes on in the piece drawn just before it (the
+     * previous page's block of a windowed list). Every piece of one box takes the box's `id`; only the first carries the
+     * `header`. A piece that continues joins its neighbour edge to edge: the consumer's frame and content draw no edge and no
+     * padding there (`BoardCardGroup` does), and the group draws no margin there. See `PieceId`.
+     */
+    continuesBefore?: boolean;
+    /** DX-5521: the box goes on in the piece drawn just after this one. See `continuesBefore`. */
+    continuesAfter?: boolean;
+}
+/**
+ * A box drawn around consecutive items of a container (the cards of one parent on a board lane).
+ *
+ * WHY THE ENGINE HAS TO KNOW. A sibling shift moves items by `translate`, one step per item at or beyond the home slot or the
+ * insertion point, counted along the whole container. A box the consumer draws around some of them is none of that: it does
+ * not move, so a card leaving it drags every card after it up through the box's lower edge, and the cards below it end up
+ * drawn inside a box they are not in. The container cannot fix that by moving the box (the box is an ancestor of the items it
+ * holds, and a transformed ancestor feeds its movement back into the rects the engine measures), so the box is split into
+ * what moves and what does not:
+ *
+ *   THE FRAME     out of flow, behind the content, not an ancestor of any item. Its far edge moves by `frameDelta`: it
+ *                 shrinks by the card's slot when the carried card leaves the box, grows by the gap when the gap opens
+ *                 in it, and otherwise follows the cards beside it.
+ *   THE HEADER    translated by the same amount as the entry's first card, so a box that sits after the home slot or the
+ *                 gap moves as one piece.
+ *   THE CARDS     the ordinary item shift, which is right once the frame follows it.
+ *
+ * AND THE INSERTION MARKER stays out of a box it does not belong to: at the box's edge it is drawn by the group, outside the
+ * frame, unless the carried card is one of the box's own. See `MarkerPlacement`.
+ *
+ * ONE BOX, SEVERAL PIECES (DX-5521). A list that draws each page in a block of its own (`PagedWindowList`) has to keep every
+ * card in its own page's block: the blocks are how it knows where the viewer is, and the element the browser's scroll
+ * anchoring holds on to. A box whose cards sit on two pages is therefore drawn as one piece in each block, each a
+ * `DragDropGroup` with the box's `id`, the first with the header, joined by `continuesAfter` / `continuesBefore`. The
+ * engine treats them as one box for where a card may go (a card can be moved anywhere among its box's cards, across the
+ * join) and frames each piece around its own cards.
+ */
+export declare function DragDropGroup({ id, label, frame, header, render, className, testId, contentClassName, children, continuesBefore, continuesAfter, }: DragDropGroupProps): import("react").JSX.Element;
+export interface DragDropSurfaceProps {
+    /**
+     * Accessible name, used ONLY in the case where the surface has to become
+     * focusable itself — see the banner. Defaults to the item's label.
+     */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * THE WHOLE ROW IS THE DRAG SOURCE. The alternative to `DragDropHandle`, and
+ * the right one wherever every row is draggable by definition.
+ *
+ * A GRIP IS A CHOICE ABOUT WHICH ROWS MOVE. On a list where some rows are fixed
+ * and some are not, the grip is the affordance that says which — and it is also
+ * the only way to keep a row full of buttons from starting a drag from every
+ * one of them. On a kanban board neither is true: every card moves, and the
+ * card's own job is to open a record. Reported, in the user's words: "I should
+ * be able to drag anywhere on the card and it should drag the card. Get rid of
+ * the drag handle entirely. Cards are just draggable. Click opens them, drag
+ * drags them."
+ *
+ * THE HARD PART IS NOT THE DRAG, IT IS THE CLICK. A card that is both a drag
+ * source and a link has to tell a press-that-moved from a press-that-did-not,
+ * and it has to do it without a threshold invented here — the engine already
+ * has one, tuned against real devices (`PointerActivation`: 5px for a mouse, a
+ * 250ms dwell for a finger). A press under that stays a click and opens the
+ * record; a press over it becomes a drag AND has its trailing `click`
+ * swallowed, in `sensors/gesture.ts`, because the browser fires one either way.
+ *
+ * THE KEYBOARD IS THE HALF THAT IS EASY TO LOSE, and losing it is not
+ * acceptable — a board that can only be reordered with a mouse is a board some
+ * people cannot reorder at all. Two things keep it:
+ *
+ *   THE KEYS ARE SPLIT. Space picks the card up, Enter is left to whatever
+ *   control has focus inside it. The keyboard sensor reads that off the event's
+ *   target rather than from a flag here, so a grip (where the source IS the
+ *   focused control) keeps both keys and a card gets the split, with nothing to
+ *   configure and nothing to forget.
+ *
+ *   THE INSTRUCTIONS FOLLOW THE FOCUS. A grip carried `aria-describedby`
+ *   itself. A card's focus lands on the consumer's own control — a
+ *   `RecordCard`'s button — which this component did not render and cannot pass
+ *   props to, so the description is attached to that element directly and
+ *   removed again on unmount. A card with NO focusable control of its own has
+ *   nothing to describe and no way into a drag, so the surface becomes the
+ *   focusable control instead. Both branches are measured by
+ *   `probe-kanban.mjs`; without the second one, a board of plain cards would be
+ *   keyboard-inaccessible with nothing to see and nothing to fail.
+ */
+export declare function DragDropSurface({ label, className, children }: DragDropSurfaceProps): import("react").JSX.Element;
+export interface DragDropHandleProps {
+    /** Accessible name. Defaults to `Reorder <the item's label>`. */
+    label?: string;
+    className?: string;
+    /** Defaults to the grip. */
+    children?: ReactNode;
+}
+export declare function DragDropHandle({ label, className, children }: DragDropHandleProps): import("react").JSX.Element;

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

@@ -0,0 +1,163 @@
+import { type ReactNode, type Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const drawer: import("tailwind-variants").TVReturnType<{
+    side: {
+        right: {
+            popup: string;
+        };
+        left: {
+            popup: string;
+        };
+    };
+    size: {
+        wide: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+}, undefined, {
+    side: {
+        right: {
+            popup: string;
+        };
+        left: {
+            popup: string;
+        };
+    };
+    size: {
+        wide: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    side: {
+        right: {
+            popup: string;
+        };
+        left: {
+            popup: string;
+        };
+    };
+    size: {
+        wide: {
+            popup: string;
+        };
+        md: {
+            popup: string;
+        };
+    };
+    flush: {
+        true: {
+            body: string;
+        };
+    };
+    bar: {
+        true: {};
+        false: {};
+    };
+    grow: {
+        true: {};
+        false: {};
+    };
+    compact: {
+        true: {};
+        false: {};
+    };
+}, {
+    backdrop: string;
+    popup: string[];
+    header: string;
+    close: string;
+    titleBlock: string;
+    title: string;
+    description: string;
+    body: string;
+}>>;
+export interface DrawerProps extends Omit<VariantProps<typeof drawer>, "grow" | "compact"> {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * DXUI-93: the host's own controls in the header row, beside the title and before the close button, as Dialog's `headerActions`
+     * (DX-4398). They sit outside the title element, so they are no part of the drawer's accessible name. Focus then starts on the
+     * drawer itself, not on the first control: an IconButton's tooltip opens on keyboard focus and would swallow the first Escape.
+     */
+    headerActions?: ReactNode;
+    /**
+     * DXUI-93: opt in to ONE thin header row, as Dialog's `singleRowHeader` (DX-5682): the title, the `headerActions` and the close
+     * button share a single non-wrapping, vertically centred row, and the close button sits in the row instead of the corner.
+     */
+    singleRowHeader?: boolean;
+    /**
+     * DXUI-94: the `headerActions` fill the row beside the title (start-aligned, truncating inside it) instead of hugging the close button, as Dialog's
+     * `headerActionsGrow`; the title block then takes only the room its content needs. Without `headerActions` it changes nothing.
+     */
+    headerActionsGrow?: boolean;
+    /** DXUI-94: with `singleRowHeader`, a thinner bar (less padding, a tighter gap, a smaller close button), as Dialog's `compactHeader`. Without `singleRowHeader` it changes nothing. */
+    compactHeader?: boolean;
+    /** The body has no padding and no scroll of its own: the content lays itself out and owns its scroll regions (DX-5682). */
+    flush?: boolean;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Drawer({ open, onOpenChange, title, description, headerActions, singleRowHeader, headerActionsGrow, compactHeader, side, size, flush, className, children, ref }: DrawerProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { type EditActivation } from "./edit/activation";
+interface EditGutterFieldProps {
+    /**
+     * The pencil's accessible name — say WHAT it edits ("Edit title"), because
+     * a screen reader lists it among every other pencil on the page.
+     */
+    label: string;
+    /**
+     * Render the field, spreading the activation onto it:
+     * `{(edit) => <InlineEdit {...edit} … />}`.
+     */
+    children: (activation: EditActivation) => ReactNode;
+    /** Render no pencil — the field cannot be edited here. */
+    disabled?: boolean;
+    className?: string;
+    /**
+     * DX-3623 — `"sm"` (default, unchanged) is `--control-sm` (36px on a fine
+     * pointer). `"xs"` is `--control-xs` (28px on a fine pointer) for a host
+     * page whose own left gutter is narrower than 36px — it still fits INSIDE
+     * a typical ~32px page gutter with room to spare, where `"sm"` would not.
+     * Neither size opts out of the coarse-pointer tap floor (`dx-tap`'s
+     * `min-width`/`min-height: 44px` under `(pointer: coarse)`): on a touch
+     * device the pencil's HIT AREA still grows to the accessible 44px minimum
+     * once revealed, deliberately overhanging past a gutter narrower than
+     * that — it is a `ghost` button, invisible until pressed, so the extra
+     * hit area costs nothing visually and nothing in layout (the pencil is
+     * `position: absolute` throughout, so growing it never shifts content).
+     */
+    size?: "sm" | "xs";
+}
+/**
+ * The gutter keeps `editing` itself (omit both), or the caller owns it: pass
+ * `editing` AND `onEditingChange` (`EditActivation`) — the pencil then asks
+ * through `onEditingChange(true)` and the field's close arrives through
+ * `onEditingChange(false)`. One without the other is a type error and throws
+ * at render, for the reason `assertActivationPair` gives.
+ */
+export type EditGutterProps = EditGutterFieldProps & ({
+    editing?: undefined;
+    onEditingChange?: (editing: boolean) => void;
+} | EditActivation);
+export declare function EditGutter({ label, children, editing: editingProp, onEditingChange, disabled, className, size, }: EditGutterProps): import("react").JSX.Element;
+export {};