@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/block-stack.js

@@ -0,0 +1,197 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import { Children, createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { useLatest } from "../lib/use-latest.js";
+import { DisclosureChevron } from "./disclosure.js";
+const Context = createContext(null);
+export function BlockStack({ layout, onLayoutChange, className, children, ...props }) {
+    const t = useUiStrings().blockStack;
+    const blocks = useMemo(() => {
+        const byId = new Map();
+        for (const child of Children.toArray(children)) {
+            if (isValidElement(child) && typeof child.props.id === "string")
+                byId.set(child.props.id, child);
+        }
+        const ordered = layout.order.flatMap((id) => {
+            const block = byId.get(id);
+            return block === undefined ? [] : [block];
+        });
+        for (const [id, block] of byId)
+            if (!layout.order.includes(id))
+                ordered.push(block);
+        return ordered;
+    }, [children, layout.order]);
+    const ids = useMemo(() => blocks.map((block) => block.props.id), [blocks]);
+    const titles = useMemo(() => new Map(blocks.map((block) => [block.props.id, block.props.title])), [blocks]);
+    const elements = useRef(new Map()).current;
+    const [drag, setDrag] = useState(undefined);
+    const [announcement, setAnnouncement] = useState("");
+    // The moves below are stable callbacks for the blocks; they read the committed props.
+    const latest = useLatest({ layout, ids, onLayoutChange });
+    const move = useCallback((id, to) => {
+        const { layout: current, ids: order, onLayoutChange: change } = latest.current;
+        const from = order.indexOf(id);
+        if (from === -1)
+            return;
+        const target = Math.max(0, Math.min(order.length - 1, to));
+        if (target === from)
+            return;
+        const next = order.filter((other) => other !== id);
+        next.splice(target, 0, id);
+        change({ ...current, order: next });
+        setAnnouncement(t.moved({ title: titles.get(id) ?? id, position: target + 1, count: order.length }));
+    }, [t, titles]);
+    const toggle = useCallback((id) => {
+        const { layout: current, ids: order, onLayoutChange: change } = latest.current;
+        const collapsed = current.collapsed.includes(id)
+            ? current.collapsed.filter((other) => other !== id)
+            : [...current.collapsed, id];
+        change({ order, collapsed });
+    }, []);
+    const startDrag = useCallback((id, event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        const grip = event.currentTarget;
+        grip.setPointerCapture(event.pointerId);
+        const startY = event.clientY;
+        const from = latest.current.ids.indexOf(id);
+        const scroller = scrollParent(grip);
+        let state = { id, to: from, dy: 0 };
+        setDrag(state);
+        // Where the pointer would drop the block: before the first block whose middle is below it.
+        const landing = (y) => {
+            const order = latest.current.ids;
+            for (let index = 0; index < order.length; index++) {
+                const element = elements.get(order[index] ?? "");
+                if (element === undefined || order[index] === id)
+                    continue;
+                const rect = element.getBoundingClientRect();
+                if (y < rect.top + rect.height / 2)
+                    return index > from ? index - 1 : index;
+            }
+            return order.length - 1;
+        };
+        const onMove = (moved) => {
+            if (scroller !== undefined) {
+                const box = scroller.getBoundingClientRect();
+                if (moved.clientY < box.top + 32)
+                    scroller.scrollBy(0, -12);
+                else if (moved.clientY > box.bottom - 32)
+                    scroller.scrollBy(0, 12);
+            }
+            state = { id, to: landing(moved.clientY), dy: moved.clientY - startY };
+            setDrag(state);
+        };
+        const finish = (drop) => {
+            grip.removeEventListener("pointermove", onMove);
+            grip.removeEventListener("pointerup", onUp);
+            grip.removeEventListener("pointercancel", onCancel);
+            window.removeEventListener("keydown", onKey, true);
+            setDrag(undefined);
+            if (drop)
+                move(id, state.to);
+        };
+        const onUp = () => finish(true);
+        const onCancel = () => finish(false);
+        const onKey = (key) => {
+            if (key.key !== "Escape")
+                return;
+            key.preventDefault();
+            key.stopPropagation();
+            finish(false);
+        };
+        grip.addEventListener("pointermove", onMove);
+        grip.addEventListener("pointerup", onUp);
+        grip.addEventListener("pointercancel", onCancel);
+        window.addEventListener("keydown", onKey, true);
+    }, [elements, move]);
+    const register = useCallback((id, element) => {
+        if (element === null)
+            elements.delete(id);
+        else
+            elements.set(id, element);
+    }, [elements]);
+    const context = useMemo(() => ({
+        collapsed: (id) => layout.collapsed.includes(id),
+        toggle,
+        move,
+        position: (id) => ids.indexOf(id),
+        count: ids.length,
+        drag,
+        startDrag,
+        register,
+    }), [layout.collapsed, toggle, move, ids, drag, startDrag, register]);
+    return (_jsxs(Context, { value: context, children: [_jsx("div", { "data-slot": "block-stack", className: cn("flex flex-col gap-1", className), ...props, children: blocks }), _jsx("p", { "aria-live": "polite", className: "sr-only", children: announcement })] }));
+}
+/** One block of a `BlockStack`: the shared header (title and caret, meta, grip), then its body. */
+export function Block({ id, title, meta, className, children, ...props }) {
+    const stack = use(Context);
+    if (stack === null)
+        throw new Error("<Block> must be inside <BlockStack>");
+    const t = useUiStrings().blockStack;
+    const headingId = useId();
+    const bodyId = useId();
+    const hintId = useId();
+    const collapsed = stack.collapsed(id);
+    const position = stack.position(id);
+    const dragging = stack.drag?.id === id;
+    // The drop line: above the block the dragged one would take the place of.
+    const drop = stack.drag !== undefined && !dragging && stack.drag.to !== stack.position(stack.drag.id)
+        ? stack.drag.to === position
+            ? stack.drag.to < stack.position(stack.drag.id)
+                ? "before"
+                : "after"
+            : undefined
+        : undefined;
+    const gripRef = useRef(null);
+    // A moved block's grip keeps the focus it had (moving a node in the DOM drops it).
+    const hadFocus = useRef(false);
+    const placedAt = useRef(position);
+    useEffect(() => {
+        if (placedAt.current === position)
+            return;
+        placedAt.current = position;
+        if (hadFocus.current) {
+            gripRef.current?.focus();
+            hadFocus.current = false;
+        }
+    }, [position]);
+    const onGripKey = (event) => {
+        const to = event.key === "ArrowUp"
+            ? position - 1
+            : event.key === "ArrowDown"
+                ? position + 1
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? stack.count - 1
+                        : undefined;
+        if (to === undefined)
+            return;
+        event.preventDefault();
+        // Only a move that changes the position brings the focus back; one at either end moves nothing,
+        // and a stale flag would pull the focus to this grip when another block moves past it later.
+        if (to < 0 || to >= stack.count || to === position)
+            return;
+        hadFocus.current = true;
+        stack.move(id, to);
+    };
+    return (_jsxs("section", { ref: (element) => stack.register(id, element), "data-slot": "block", "data-collapsed": collapsed || undefined, "data-dragging": dragging || undefined, "data-drop": drop, "aria-labelledby": headingId, className: cn("group/block relative flex min-w-0 flex-col rounded-lg", 
+        // The drop line sits in the gap above or below the block it would displace.
+        "data-drop:before:pointer-events-none data-drop:before:absolute data-drop:before:inset-x-0 data-drop:before:h-0.5 data-drop:before:rounded-full data-drop:before:bg-focus", "data-[drop=before]:before:-top-1 data-[drop=after]:before:-bottom-1", 
+        // Lifted while dragged: a card with room around its content (content stays where it was).
+        "data-dragging:z-10 data-dragging:-mx-2 data-dragging:bg-surface data-dragging:px-2 data-dragging:shadow-lg", className), style: dragging && stack.drag !== undefined ? { transform: `translateY(${stack.drag.dy}px)` } : undefined, ...props, children: [_jsxs("div", { className: "flex min-h-8 min-w-0 items-center gap-2", children: [_jsx("h3", { id: headingId, className: "min-w-0", children: _jsxs("button", { type: "button", "aria-expanded": !collapsed, "aria-controls": collapsed ? undefined : bodyId, onClick: () => stack.toggle(id), className: "-ms-1 flex h-7 min-w-0 items-center gap-1 rounded-md px-1 text-sm font-medium text-fg outline-none transition-colors hover:bg-hover focus-visible:ring-focus", children: [_jsx("span", { className: "truncate", children: title }), _jsx(DisclosureChevron, { open: !collapsed, className: "text-fg-subtle" })] }) }), meta !== undefined && (_jsx("span", { className: "min-w-0 truncate text-xs text-fg-subtle tabular", children: meta })), _jsx("span", { className: "flex-1" }), _jsx("button", { ref: gripRef, type: "button", "aria-label": t.reorder({ title }), "aria-describedby": hintId, "aria-roledescription": t.grip, onPointerDown: (event) => stack.startDrag(id, event), onKeyDown: onGripKey, className: cn("-me-1 grid size-6 shrink-0 cursor-grab touch-none place-items-center rounded-sm text-fg-subtle outline-none", "opacity-0 transition-opacity duration-(--duration-fast) group-hover/block:opacity-100 focus-visible:opacity-100 focus-visible:ring-focus pointer-coarse:opacity-100", "hover:bg-hover hover:text-fg-muted active:cursor-grabbing group-data-dragging/block:opacity-100"), children: _jsx(GripVertical, { className: "size-3.5" }) }), _jsx("span", { id: hintId, className: "sr-only", children: t.reorderHint })] }), !collapsed && (_jsx("div", { id: bodyId, className: "flex min-w-0 flex-col gap-2 pb-3", children: children }))] }));
+}
+/** The nearest ancestor that scrolls vertically (to scroll while a block is dragged near an edge). */
+function scrollParent(element) {
+    for (let node = element.parentElement; node !== null; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight)
+            return node;
+    }
+    return undefined;
+}

package/dist/components/button.d.ts

@@ -0,0 +1,327 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined, string[], {
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined>>;
+export type ButtonVariants = VariantProps<typeof buttonStyles>;
+export interface ButtonProps extends ComponentProps<typeof BaseButton>, ButtonVariants {
+    /** Shows a spinner, keeps the button's width, and blocks interaction. */
+    loading?: boolean;
+    /** Icon rendered before the label. */
+    leading?: ReactNode;
+    /** Icon or hint (e.g. <Kbd>) rendered after the label. */
+    trailing?: ReactNode;
+    /**
+     * Disables the button and says why: the reason is its tooltip and its accessible description, and
+     * the button stays focusable (`aria-disabled`) so a keyboard reaches it.
+     */
+    disabledReason?: string | undefined;
+}
+export declare function Button({ variant, size, block, truncate, wrap, loading, leading, trailing, disabled, disabledReason, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare const iconButtonStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "size-7 rounded-md [&_svg:not([class*='size-'])]:size-4";
+        md: "size-8 rounded-lg [&_svg:not([class*='size-'])]:size-4";
+        lg: "size-10 rounded-xl [&_svg:not([class*='size-'])]:size-5";
+    };
+}, undefined, "px-0", {
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined, string[], {
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+        primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]";
+        /** Quiet surface with a hairline — the default for most actions. */
+        secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle";
+        /** No chrome until hovered — toolbars, inline actions. */
+        ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /**
+         * Words that are also an action, in the text's own weight and laid out from the start, so they
+         * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+         * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+         */
+        quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg";
+        /** Destructive confirmation. */
+        danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover";
+        /** Destructive but low emphasis. */
+        "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover";
+        /** Inline text action. */
+        link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100";
+    };
+    size: {
+        xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        sm: "h-7 rounded-md px-2.5 text-sm";
+        md: "h-8 rounded-lg px-3 text-base";
+        lg: "h-10 rounded-xl px-4 text-md";
+    };
+    block: {
+        true: "w-full";
+    };
+    /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+    truncate: {
+        true: "min-w-0 shrink";
+    };
+    /**
+     * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+     * words that are an action and may run long in another language (a tip). One line keeps the size.
+     */
+    wrap: {
+        true: "h-auto min-w-0 shrink items-start whitespace-normal text-start";
+    };
+}, undefined>>>;
+export interface IconButtonProps extends Omit<ComponentProps<typeof BaseButton>, "aria-label" | "children">, Omit<VariantProps<typeof iconButtonStyles>, "block" | "truncate" | "wrap"> {
+    /** Required: icon-only controls must be named for assistive tech. */
+    "aria-label": string;
+    children: ReactNode;
+    loading?: boolean;
+    /** Disables the button and says why, as Button's `disabledReason`. */
+    disabledReason?: string | undefined;
+}
+/**
+ * Square, icon-only button. Pair with <Tooltip> to surface the label visually (a `disabledReason`
+ * brings its own).
+ */
+export declare function IconButton({ variant, size, loading, disabled, disabledReason, className, children, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/button.js

@@ -0,0 +1,101 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+import { useDelayedLoading } from "../lib/use-delayed-loading.js";
+import { Spinner } from "./spinner.js";
+import { DisabledReasonTooltip, disabledReasonClass } from "./tooltip.js";
+export const buttonStyles = tv({
+    base: [
+        "relative inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap font-medium touch-target",
+        "outline-none control-motion",
+        "focus-visible:ring-focus active:scale-[0.97] motion-reduce:active:scale-100",
+        "data-disabled:pointer-events-none data-disabled:opacity-45",
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+    ],
+    variants: {
+        variant: {
+            /** Neutral ink: the main call to action. Actions are ink, never the accent. */
+            primary: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover [box-shadow:var(--shadow-sm),inset_0_1px_0_0_oklch(100%_0_0/0.12)]",
+            /** Quiet surface with a hairline — the default for most actions. */
+            secondary: "border border-border bg-surface text-fg shadow-xs hover:border-border-strong hover:bg-bg-subtle data-popup-open:bg-bg-subtle",
+            /** No chrome until hovered — toolbars, inline actions. */
+            ghost: "text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg",
+            /**
+             * Words that are also an action, in the text's own weight and laid out from the start, so they
+             * line up with the text around them: `xs` in a line (a header's crumbs, a title that renames),
+             * `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link).
+             */
+            quiet: "justify-start font-normal text-fg-muted hover:bg-hover hover:text-fg active:bg-active data-popup-open:bg-hover data-popup-open:text-fg",
+            /** Destructive confirmation. */
+            danger: "bg-danger text-danger-on-solid shadow-sm hover:bg-danger-hover",
+            /** Destructive but low emphasis. */
+            "danger-ghost": "text-danger-fg hover:bg-danger-subtle active:bg-danger-subtle-hover",
+            /** Inline text action. */
+            link: "h-auto px-0 text-fg underline decoration-border-strong underline-offset-4 hover:decoration-fg active:scale-100",
+        },
+        size: {
+            xs: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "h-7 rounded-md px-2.5 text-sm",
+            md: "h-8 rounded-lg px-3 text-base",
+            lg: "h-10 rounded-xl px-4 text-md",
+        },
+        block: { true: "w-full" },
+        /** The button may shrink below its label's width; the label then truncates with an ellipsis. */
+        truncate: { true: "min-w-0 shrink" },
+        /**
+         * The label wraps onto more lines and the button grows, its `leading` icon on the first line: for
+         * words that are an action and may run long in another language (a tip). One line keeps the size.
+         */
+        wrap: { true: "h-auto min-w-0 shrink items-start whitespace-normal text-start" },
+    },
+    compoundVariants: [
+        { variant: "link", class: "h-auto px-0" },
+        // Quiet words keep the dense text size and a tight inset at every size.
+        { variant: "quiet", size: "xs", class: "rounded-md px-1 text-sm" },
+        { variant: "quiet", size: "sm", class: "px-2" },
+        { variant: "quiet", size: "md", class: "px-2 text-sm" },
+        // Wrapping, the padding makes one line as tall as the size's height (its text's line height).
+        { wrap: true, size: "xs", class: "py-0.75" },
+        { wrap: true, size: "sm", class: "py-1" },
+        { wrap: true, size: "md", class: "py-1.25" },
+        { wrap: true, size: "lg", class: "py-2" },
+        { wrap: true, variant: "quiet", size: "xs", class: "py-0.5" },
+        { wrap: true, variant: "quiet", size: "md", class: "py-1.5" },
+    ],
+    defaultVariants: { variant: "secondary", size: "md" },
+});
+export function Button({ variant, size, block, truncate, wrap, loading = false, leading, trailing, disabled, disabledReason, className, children, ...props }) {
+    // Blocked and busy at once; the spinner only once the wait is long enough to notice (a quick
+    // save never flashes one).
+    const spinning = useDelayedLoading(loading);
+    const reasoned = disabledReason !== undefined;
+    const label = truncate === true ? (_jsx("span", { className: "min-w-0 truncate", children: children })) : wrap === true ? (_jsx("span", { className: "min-w-0", children: children })) : (children);
+    // Wrapping, the icon's box is the first line's height, so it stays beside the words' first line.
+    const lead = wrap === true && leading !== undefined ? (_jsx("span", { className: "flex h-lh shrink-0 items-center", children: leading })) : (leading);
+    const button = (_jsxs(BaseButton, { "data-slot": "button", disabled: disabled === true || loading || reasoned, focusableWhenDisabled: loading || reasoned, "aria-busy": loading || undefined, className: (state) => cn(buttonStyles({ variant, size, block, truncate, wrap }), reasoned && disabledReasonClass, resolveClassName(className, state)), ...props, children: [spinning ? (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-[inherit] opacity-0", children: [lead, label, trailing] })) : (_jsxs(_Fragment, { children: [lead, label, trailing] })), spinning && (_jsx("span", { className: "absolute inset-0 grid place-items-center", children: _jsx(Spinner, { size: size === "lg" ? "lg" : size === "xs" ? "xs" : "md" }) }))] }));
+    return reasoned ? _jsx(DisabledReasonTooltip, { reason: disabledReason, children: button }) : button;
+}
+export const iconButtonStyles = tv({
+    extend: buttonStyles,
+    base: "px-0",
+    variants: {
+        size: {
+            xs: "size-6 rounded-sm [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "size-7 rounded-md [&_svg:not([class*='size-'])]:size-4",
+            md: "size-8 rounded-lg [&_svg:not([class*='size-'])]:size-4",
+            lg: "size-10 rounded-xl [&_svg:not([class*='size-'])]:size-5",
+        },
+    },
+    defaultVariants: { variant: "ghost", size: "md" },
+});
+/**
+ * Square, icon-only button. Pair with <Tooltip> to surface the label visually (a `disabledReason`
+ * brings its own).
+ */
+export function IconButton({ variant, size, loading = false, disabled, disabledReason, className, children, ...props }) {
+    const spinning = useDelayedLoading(loading);
+    const reasoned = disabledReason !== undefined;
+    const button = (_jsx(BaseButton, { "data-slot": "icon-button", disabled: disabled === true || loading || reasoned, focusableWhenDisabled: loading || reasoned, "aria-busy": loading || undefined, className: (state) => cn(iconButtonStyles({ variant, size }), reasoned && disabledReasonClass, resolveClassName(className, state)), ...props, children: spinning ? _jsx(Spinner, { size: size === "lg" ? "lg" : "sm" }) : children }));
+    return reasoned ? _jsx(DisabledReasonTooltip, { reason: disabledReason, children: button }) : button;
+}