nexus-shared 1.1.21 → 3.0.0

package/dist/Components/Documents/Menu.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconCheck, InlineIcon } from "nexus-icons";
+import { cloneElement, useId, useLayoutEffect, useRef, useState, } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { followAnchor, isPopoverOpen, placeAtPoint, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+export function isMenuItem(entry) {
+    return "value" in entry;
+}
+const ITEM_ROLE = {
+    menu: "menuitem",
+    radio: "menuitemradio",
+    checkbox: "menuitemcheckbox",
+};
+const ENABLED_ITEM = '.nx-menu__item:not([aria-disabled="true"])';
+function enabledItems(panel) {
+    return Array.from(panel.querySelectorAll(ENABLED_ITEM));
+}
+/** Focuses the item at `index`, counting from the end when negative and wrapping past either end. */
+function focusItemAt(panel, index) {
+    const items = enabledItems(panel);
+    if (items.length === 0)
+        return;
+    items[((index % items.length) + items.length) % items.length]?.focus();
+}
+function canShow(panel) {
+    return Boolean(panel && typeof panel.showPopover === "function");
+}
+function hide(panel) {
+    if (isPopoverOpen(panel))
+        panel?.hidePopover();
+}
+function mergeRefs(...refs) {
+    return node => {
+        for (const ref of refs) {
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
+/**
+ * The list of a menu inside a native popover. Arrow keys move between items, Home and End jump, a letter jumps to
+ * the next item starting with it, Enter or Space chooses, Esc closes, and Tab closes and moves on.
+ */
+export function MenuPanel({ id, items, onSelect, kind = "menu", size = "md", closeOnSelect = true, className, ref, onToggle, ...labelling }) {
+    function choose(item, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        onSelect?.(item.value, item);
+        if (closeOnSelect)
+            hide(event.currentTarget.closest(".nx-menu"));
+    }
+    function onKeyDown(event) {
+        const panel = event.currentTarget;
+        const items = enabledItems(panel);
+        const current = items.indexOf(document.activeElement);
+        const { key } = event;
+        if (key === "ArrowDown")
+            focusItemAt(panel, current + 1);
+        else if (key === "ArrowUp")
+            focusItemAt(panel, current < 0 ? -1 : current - 1);
+        else if (key === "Home")
+            focusItemAt(panel, 0);
+        else if (key === "End")
+            focusItemAt(panel, -1);
+        else if (key === "Tab") {
+            // The menu closes and focus returns to its button, so Tab moves on from there.
+            hide(panel);
+            return;
+        }
+        else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && key !== " ") {
+            // A letter jumps to the next item that starts with it.
+            const letter = key.toLowerCase();
+            const from = current + 1;
+            const match = items.slice(from).concat(items.slice(0, from)).find(item => item.textContent?.trim().toLowerCase().startsWith(letter));
+            if (match)
+                match.focus();
+            else
+                return;
+        }
+        else
+            return;
+        event.preventDefault();
+    }
+    // Focus follows the pointer, so the arrow keys carry on from the item under it. Only a pointer that moved counts:
+    // a menu opened from the keyboard under a resting pointer keeps the focus on its first item.
+    const pointerRef = useRef({ x: 0, y: 0 });
+    function onPointerMove(event) {
+        const last = pointerRef.current;
+        if (event.clientX === last.x && event.clientY === last.y)
+            return;
+        pointerRef.current = { x: event.clientX, y: event.clientY };
+        const item = event.currentTarget;
+        if (item.getAttribute("aria-disabled") !== "true" && document.activeElement !== item)
+            item.focus();
+    }
+    const role = ITEM_ROLE[kind];
+    // When any item has an icon, every item keeps the icon column, so the labels line up.
+    const hasIcons = items.some(entry => isMenuItem(entry) && entry.icon);
+    return (_jsx("div", { ref: ref, id: id, popover: "auto", role: "menu", tabIndex: -1, className: cx("nx-popover", "nx-menu", `nx-menu--${size}`, className), onToggle: onToggle, onKeyDown: onKeyDown, ...labelling, children: _jsx("div", { role: "none", className: "nx-menu__list", children: items.map((entry, index) => {
+                // Items are keyed by their value, so a separator keyed by its index alone collided with an item whose value
+                // was that number ("5" in a menu of projects). The prefix keeps the two apart.
+                if (!isMenuItem(entry)) {
+                    if ("separator" in entry)
+                        return _jsx("div", { role: "separator", className: "nx-menu__separator" }, `nx-at-${index}`);
+                    return (_jsx("div", { role: "presentation", className: "nx-menu__heading", children: entry.heading }, `nx-at-${index}`));
+                }
+                const item = entry;
+                const content = (_jsxs(_Fragment, { children: [kind !== "menu" && _jsx("span", { className: "nx-menu__check", children: item.checked && _jsx(InlineIcon, { icon: iconCheck }) }), hasIcons && _jsx("span", { className: "nx-menu__icon", children: item.icon }), _jsxs("span", { className: "nx-menu__body", children: [_jsx("span", { className: "nx-menu__label", children: item.label }), item.description && _jsx("span", { className: "nx-menu__description", children: item.description })] }), item.shortcut && _jsx("kbd", { className: "nx-menu__shortcut", children: item.shortcut })] }));
+                const shared = {
+                    role,
+                    className: cx("nx-menu__item", item.tone === "danger" && "nx-menu__item--danger", item.checked && "nx-menu__item--checked"),
+                    tabIndex: -1,
+                    title: item.title,
+                    "aria-disabled": item.disabled || undefined,
+                    "aria-checked": kind === "menu" ? undefined : Boolean(item.checked),
+                    onPointerMove,
+                };
+                return item.href && !item.disabled ? (_jsx("a", { ...shared, href: item.href, target: item.target, rel: item.target === "_blank" ? "noopener" : undefined, onClick: event => choose(item, event), children: content }, item.value)) : (_jsx("button", { ...shared, type: "button", onClick: event => choose(item, event), children: content }, item.value));
+            }) }) }));
+}
+/**
+ * A dropdown menu: a button that opens a list of actions in a native popover under it (above it when there is no
+ * room). Click or Enter opens it, ArrowDown opens it on the first item, Esc closes it and returns focus to the button.
+ *
+ * @example
+ * <Menu items={items} onSelect={value => run(value)}>
+ *   <Button iconEnd={<InlineIcon icon={iconChevronDown} />}>Actions</Button>
+ * </Menu>
+ */
+export function Menu({ children, align = "start", "aria-label": ariaLabel, onOpenChange, ...panelProps }) {
+    const id = useId();
+    const triggerId = children.props.id ?? `${id}-trigger`;
+    const panelId = `${id}-menu`;
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the menu is open: that press closes the menu (light dismiss), and its click must not reopen it.
+    const dismissingRef = useRef(false);
+    function place() {
+        const panel = panelRef.current;
+        const trigger = triggerRef.current;
+        if (panel && trigger)
+            placeUnderAnchor(panel, trigger.getBoundingClientRect(), { align });
+    }
+    function show(focus) {
+        const panel = panelRef.current;
+        if (!canShow(panel) || isPopoverOpen(panel))
+            return;
+        panel.showPopover();
+        place();
+        if (focus === "panel")
+            panel.focus();
+        else
+            focusItemAt(panel, focus === "first" ? 0 : -1);
+    }
+    // The panel is fixed, so it follows the button while the page scrolls or the window changes size.
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        return followAnchor(place);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, align]);
+    function onToggle(event) {
+        const isOpen = event.newState === "open";
+        setOpen(isOpen);
+        onOpenChange?.(isOpen);
+    }
+    const triggerProps = {
+        ref: mergeRefs(triggerRef, children.props.ref),
+        id: triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onPointerDown: event => {
+            children.props.onPointerDown?.(event);
+            dismissingRef.current = isPopoverOpen(panelRef.current);
+        },
+        onClick: event => {
+            children.props.onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (dismissingRef.current) {
+                dismissingRef.current = false;
+                return;
+            }
+            if (isPopoverOpen(panelRef.current))
+                hide(panelRef.current);
+            // A click from the keyboard (Enter or Space) starts on the first item; a pointer click leaves the pointer in charge.
+            else
+                show(event.detail === 0 ? "first" : "panel");
+        },
+        onKeyDown: event => {
+            children.props.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                show(event.key === "ArrowDown" ? "first" : "last");
+            }
+        },
+    };
+    return (_jsxs(_Fragment, { children: [cloneElement(children, triggerProps), _jsx(MenuPanel, { ref: panelRef, id: panelId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, onToggle: onToggle, ...panelProps })] }));
+}
+/**
+ * A menu that opens where the user right-clicks (or presses Shift+F10) over its content, kept inside the window.
+ * The wrapper takes no space of its own (`display: contents`), so it can wrap a table row or a grid cell.
+ */
+export function ContextMenu({ children, "aria-label": ariaLabel = "Context menu", disabled = false, onOpenChange, ...panelProps }) {
+    const panelId = useId();
+    const panelRef = useRef(null);
+    // When the last press happened: a contextmenu event right after one comes from the mouse or a long touch.
+    // When a pointer was last pressed. Never pressed has to be long ago, not zero: zero is 1.5 seconds after the page
+    // loaded, and a context menu opened from the keyboard in that moment would be placed as a pointer's.
+    const pressedAtRef = useRef(Number.NEGATIVE_INFINITY);
+    function onContextMenu(event) {
+        const panel = panelRef.current;
+        if (disabled || !canShow(panel))
+            return;
+        event.preventDefault();
+        hide(panel);
+        panel.showPopover();
+        const fromPointer = performance.now() - pressedAtRef.current < 1500;
+        if (fromPointer) {
+            placeAtPoint(panel, event.clientX, event.clientY);
+            panel.focus();
+        }
+        else {
+            // From the keyboard (Shift+F10, the Menu key): browsers report the event at the element or at 0,0, so the
+            // menu opens under the focused element like a dropdown (above it when there is no room), on its first item.
+            placeUnderAnchor(panel, event.target.getBoundingClientRect());
+            focusItemAt(panel, 0);
+        }
+    }
+    return (_jsxs("div", { className: "nx-context-target", onPointerDown: () => {
+            pressedAtRef.current = performance.now();
+        }, onContextMenu: onContextMenu, children: [children, _jsx(MenuPanel, { ref: panelRef, id: panelId, "aria-label": ariaLabel, onToggle: onOpenChange && (event => onOpenChange(event.newState === "open")), ...panelProps })] }));
+}

package/dist/Components/Documents/SplitButton.d.ts

@@ -0,0 +1,64 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type PopoverAlign } from "../../Helpers/PopoverHelpers.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+import { type ButtonVariant } from "./Button.tsx";
+export interface SplitButtonOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    /** A second line in the menu: what this action does. */
+    description?: ReactNode;
+    /** Icon on the main button and in the menu. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SplitButtonProps<T extends string = string> {
+    /** The actions. The chosen one is the main button; the others wait in the menu. */
+    options: readonly SplitButtonOption<T>[];
+    /** Runs when the main button is clicked. */
+    onAction: (value: T, option: SplitButtonOption<T>) => void;
+    /** The action shown first, unless a remembered choice exists. Default: the first option. */
+    defaultValue?: T;
+    /** The action shown, controlled. */
+    value?: T;
+    /** After the user picks another action in the menu. */
+    onValueChange?: (value: T, option: SplitButtonOption<T>) => void;
+    /**
+     * Remembers the picked action in the browser under this key, so the next visit starts with it,
+     * e.g. `storageKey="pull-request"`. Keys are shared by every split button with the same name.
+     */
+    storageKey?: string;
+    /** Picking an action in the menu also runs it. Default false: it only becomes the main button, as on GitHub. */
+    runOnSelect?: boolean;
+    /** Default `primary`. */
+    variant?: ButtonVariant;
+    /** Default `md`. */
+    size?: Size;
+    /** Shows a spinner on the main button and blocks both buttons while the action runs. */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Fills the width of its container. */
+    block?: boolean;
+    /** `submit` makes the main button submit its form. Default `button`. */
+    type?: "button" | "submit";
+    /** The form the main button submits, when it is not inside it. */
+    form?: string;
+    /** Sends the chosen action's value with the form, through a hidden input. */
+    name?: string;
+    /** Name of the arrow button for screen readers. Default "More actions". */
+    menuLabel?: string;
+    /** Which edge of the button the menu lines up with. Default `end`. */
+    align?: PopoverAlign;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A main action with a menu of alternatives, like "Create pull request" with "Create draft pull request".
+ * Picking an alternative makes it the main button, and with `storageKey` the browser remembers it for next time.
+ *
+ * @example
+ * <SplitButton storageKey="pull-request" onAction={create} options={[
+ *   { value: "create", label: "Create pull request" },
+ *   { value: "draft", label: "Create draft pull request", description: "Cannot be merged until marked ready" },
+ * ]} />
+ */
+export declare function SplitButton<T extends string>({ options, onAction, defaultValue, value, onValueChange, storageKey, runOnSelect, variant, size, loading, disabled, block, type, form, name, menuLabel, align, className, style, }: SplitButtonProps<T>): import("react").JSX.Element | null;

package/dist/Components/Documents/SplitButton.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconChevronDown, InlineIcon } from "nexus-icons";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { Button } from "./Button.js";
+import { MenuPanel } from "./Menu.js";
+const STORAGE_PREFIX = "nx-split:";
+function readChoice(key) {
+    if (!key)
+        return null;
+    try {
+        return localStorage.getItem(STORAGE_PREFIX + key);
+    }
+    catch {
+        return null;
+    }
+}
+function saveChoice(key, value) {
+    if (!key)
+        return;
+    try {
+        localStorage.setItem(STORAGE_PREFIX + key, value);
+    }
+    catch {
+        // Storage blocked (private mode, for example): the choice lasts until the page reloads.
+    }
+}
+/**
+ * A main action with a menu of alternatives, like "Create pull request" with "Create draft pull request".
+ * Picking an alternative makes it the main button, and with `storageKey` the browser remembers it for next time.
+ *
+ * @example
+ * <SplitButton storageKey="pull-request" onAction={create} options={[
+ *   { value: "create", label: "Create pull request" },
+ *   { value: "draft", label: "Create draft pull request", description: "Cannot be merged until marked ready" },
+ * ]} />
+ */
+export function SplitButton({ options, onAction, defaultValue, value, onValueChange, storageKey, runOnSelect = false, variant = "primary", size = "md", loading = false, disabled = false, block = false, type = "button", form, name, menuLabel = "More actions", align = "end", className, style, }) {
+    const id = useId();
+    const panelId = `${id}-menu`;
+    const toggleRef = useRef(null);
+    const panelRef = useRef(null);
+    const dismissingRef = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [chosen, setChosen] = useState(defaultValue);
+    const usable = (candidate) => options.find(option => option.value === candidate && !option.disabled);
+    // The remembered choice applies before the first paint, so the button never shows the default and then switches.
+    useLayoutEffect(() => {
+        const saved = usable(readChoice(storageKey));
+        if (saved)
+            setChosen(saved.value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey]);
+    const current = usable(value ?? chosen) ?? options.find(option => !option.disabled) ?? options[0];
+    if (!current)
+        return null;
+    function place() {
+        const panel = panelRef.current;
+        const toggle = toggleRef.current;
+        const anchor = toggle?.parentElement;
+        // The menu lines up with the whole button, and its arrow points at the half that opened it.
+        if (panel && toggle && anchor)
+            placeUnderAnchor(panel, anchor.getBoundingClientRect(), { align, arrowAt: toggle.getBoundingClientRect() });
+    }
+    function show(focusFirst) {
+        const panel = panelRef.current;
+        if (!panel || typeof panel.showPopover !== "function" || isPopoverOpen(panel))
+            return;
+        panel.showPopover();
+        place();
+        if (focusFirst)
+            panel.querySelector('.nx-menu__item:not([aria-disabled="true"])')?.focus();
+        else
+            panel.focus();
+    }
+    function hide() {
+        if (isPopoverOpen(panelRef.current))
+            panelRef.current?.hidePopover();
+    }
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        return followAnchor(place);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, align]);
+    function onToggle(event) {
+        setOpen(event.newState === "open");
+    }
+    function pick(next) {
+        const option = usable(next);
+        if (!option || !current)
+            return;
+        if (value === undefined)
+            setChosen(next);
+        saveChoice(storageKey, next);
+        if (next !== current.value)
+            onValueChange?.(next, option);
+        if (runOnSelect)
+            onAction(next, option);
+    }
+    const items = options.map(option => ({
+        value: option.value,
+        label: option.label,
+        description: option.description,
+        icon: option.icon,
+        disabled: option.disabled,
+        checked: option.value === current.value,
+    }));
+    const blocked = disabled || loading;
+    return (_jsxs("div", { className: cx("nx-split", `nx-split--${variant}`, `nx-split--${size}`, block && "nx-split--block", className), style: style, children: [_jsx(Button, { type: type, form: form, variant: variant, size: size, icon: current.icon, loading: loading, disabled: disabled, className: "nx-split__main", onClick: () => onAction(current.value, current), children: current.label }), name && _jsx("input", { type: "hidden", name: name, form: form, value: current.value }), _jsx(Button, { ref: toggleRef, variant: variant, size: size, disabled: blocked, className: "nx-split__toggle", "aria-label": menuLabel, title: menuLabel, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": panelId, icon: _jsx(InlineIcon, { icon: iconChevronDown }), onPointerDown: () => {
+                    dismissingRef.current = isPopoverOpen(panelRef.current);
+                }, onClick: event => {
+                    if (dismissingRef.current) {
+                        dismissingRef.current = false;
+                        return;
+                    }
+                    if (isPopoverOpen(panelRef.current))
+                        hide();
+                    else
+                        show(event.detail === 0);
+                }, onKeyDown: event => {
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        show(true);
+                    }
+                } }), _jsx(MenuPanel, { ref: panelRef, id: panelId, kind: "radio", size: size, items: items, onSelect: pick, "aria-label": menuLabel, onToggle: onToggle, className: "nx-split__menu" })] }));
+}

package/dist/Components/Documents/TabButtons.d.ts

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+export interface TabButtonOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    /** Shown before the label, e.g. `<InlineIcon icon={iconSun} />`. It takes the primary color while selected. */
+    icon?: ReactNode;
+    /** A second line in muted text. Shown by the `list` design only. */
+    description?: ReactNode;
+    /** A count or short tag at the end of the row, e.g. `3`. Shown by the `list` design only. */
+    badge?: ReactNode;
+    disabled?: boolean;
+    /** Tooltip. With `labels="selected"`, a text label is the default tooltip. */
+    title?: string;
+}
+/** `all`: every option shows its label. `selected`: options show only their icon, and the selected one adds its label. */
+export type TabButtonLabels = "all" | "selected";
+/** `nav`: a horizontal track with a sliding indicator. `list`: a vertical list of rows, for settings pages and side panels. */
+export type TabButtonDesign = "nav" | "list";
+interface TabButtonsBaseProps<T extends string> {
+    options: readonly TabButtonOption<T>[];
+    /** Default `nav`. `list` stacks the options as full-width rows with a bar at the selected one. */
+    design?: TabButtonDesign;
+    /** Default `md`. */
+    size?: Size;
+    /** `neutral` (default): a raised indicator. `primary`: a solid primary indicator, for a choice that matters. */
+    tone?: "neutral" | "primary";
+    /**
+     * Default `all`. `selected` keeps a toolbar compact: icons only, and the selected option grows to show its label.
+     * Every option needs an icon; hidden labels are still read by screen readers and shown as tooltips. `nav` design only.
+     */
+    labels?: TabButtonLabels;
+    /** Fills the width of its container. With `labels="all"`, options share the width equally. A `list` always fills it. */
+    block?: boolean;
+    /** Radio (or checkbox) group name, for forms. Default: a unique id. */
+    name?: string;
+    /**
+     * Id of the form the choice belongs to, as the HTML `form` attribute. An id that matches no form keeps the choice out
+     * of every form, for a switch inside a form that is not one of its values, such as an editor's view.
+     */
+    form?: string;
+    className?: string;
+}
+/** One option at a time: radio buttons, and an indicator that slides to the selection. */
+interface TabButtonsOneProps<T extends string> {
+    multiple?: false;
+    /** The selected option. A value that matches no option leaves every option unselected. */
+    value: T;
+    onChange: (value: T) => void;
+}
+/**
+ * Several options at once: checkboxes, each chosen option raised on its own, and the options wrap onto more rows when
+ * they do not fit, so a picker of 26 letters or 33 symbols stays one control on a phone.
+ */
+interface TabButtonsManyProps<T extends string> {
+    multiple: true;
+    /** The chosen options. Values that match no option are ignored, and never handed back. */
+    value: readonly T[];
+    /** The chosen values after each change, in option order. */
+    onChange: (values: T[]) => void;
+}
+/** A label is required: pass `aria-label`, or `aria-labelledby` pointing at a visible heading. */
+export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T> & (TabButtonsOneProps<T> | TabButtonsManyProps<T>) & ({
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+});
+/**
+ * Tab buttons: pick one option from a small set, such as Light / Dark / System.
+ * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
+ * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
+ * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
+ */
+export declare function TabButtons<T extends string>(props: TabButtonsProps<T>): import("react").JSX.Element;
+export {};

package/dist/Components/Documents/TabButtons.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+/**
+ * Tab buttons: pick one option from a small set, such as Light / Dark / System.
+ * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
+ * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
+ * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
+ */
+export function TabButtons(props) {
+    const { options, design = "nav", size = "md", tone = "neutral", labels = "all", block = false, name, form, className, multiple: _multiple, value: _value, onChange: _onChange, ...labelling } = props;
+    const generatedName = useId();
+    const groupName = name ?? generatedName;
+    const list = design === "list";
+    const labelsSelected = !list && labels === "selected";
+    const chosen = props.multiple ? new Set(props.value) : null;
+    // One choice slides one indicator; several have no single place for it, so each chosen option draws its own.
+    const index = chosen ? -1 : options.findIndex(option => option.value === props.value);
+    const style = { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(index, 0) };
+    const isChecked = (option) => (chosen ? chosen.has(option.value) : option.value === props.value);
+    const toggle = (option, checked) => {
+        if (!props.multiple) {
+            props.onChange(option.value);
+            return;
+        }
+        const next = new Set(props.value);
+        if (checked)
+            next.add(option.value);
+        else
+            next.delete(option.value);
+        props.onChange(options.filter(one => next.has(one.value)).map(one => one.value));
+    };
+    return (_jsxs("div", { role: chosen ? "group" : "radiogroup", "aria-orientation": list && !chosen ? "vertical" : undefined, ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", tone === "primary" && "nx-tabs--primary", labelsSelected && "nx-tabs--labels-selected", chosen && !list && "nx-tabs--multiple", block && "nx-tabs--block", className), style: list || chosen ? undefined : style, children: [index >= 0 && !list && !labelsSelected && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => (_jsxs("label", { className: "nx-tabs__option", title: option.title ?? (labelsSelected && typeof option.label === "string" ? option.label : undefined), children: [_jsx("input", { type: chosen ? "checkbox" : "radio", className: "nx-visually-hidden", name: groupName, form: form, value: option.value, checked: isChecked(option), disabled: option.disabled, onChange: event => toggle(option, event.currentTarget.checked) }), option.icon, _jsxs("span", { className: "nx-tabs__label", children: [_jsx("span", { className: "nx-tabs__text", children: option.label }), list && option.description && _jsx("span", { className: "nx-tabs__description", children: option.description })] }), list && option.badge !== undefined && option.badge !== null && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value)))] }));
+}

package/dist/Components/Forms/ApiForm.d.ts

@@ -0,0 +1,23 @@
+import type { ApiFormProps, FormValues } from "../../Interfaces/FormInterfaces.ts";
+/**
+ * A `SubmitForm` that sends its values to an API: an endpoint (`ROOMS.update`, or `{ module, path, method }` in place),
+ * a URL outside the app's modules (`{ url, method }`, as JSON), both sent through the app's `api` without its toasts, or
+ * a function that sends them with a client of the app's own. The answer is read as Nexus API responses
+ * (`{ isSuccess, errorMessages: [{ message, inputName }], result }`, or one message at the top level), ASP.NET Core problem
+ * details, or any JSON by its status. On success a toast says so and the values become the form's own; on failure the
+ * server's own words show - every message it sent, on the inputs they name and the rest under the form, with our message
+ * by status only for an answer that explains nothing - and the first input with a message takes focus. `loadValue` loads
+ * the record to edit, with placeholders and Retry.
+ *
+ * @example
+ * const ROOMS = apiController(NexusModule.Reservation, "Room", "room");
+ *
+ * <ApiForm
+ *   inputs={ROOM_INPUTS}
+ *   loadValue={signal => api.get<Room>(ROOMS.details, { params: { id }, signal, toast: false }).then(unwrapApiResult)}
+ *   api={ROOMS.update}
+ *   onSuccess={room => table.updateRow(room)}
+ *   onCancel={close}
+ * />
+ */
+export declare function ApiForm<TValues extends FormValues = FormValues>(props: ApiFormProps<TValues>): import("react").JSX.Element;