@charcuterie/ui 0.1.1 → 1.0.0

package/dist/Menu/Menu.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectTabIndex, useClonedChild, useRovingFocus, } from "@charcuterie/logic";
+import { autoUpdate, FloatingFocusManager, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { MenuAction } from "./MenuAction.js";
+/**
+ * A menu is **not** a listbox, and mux-magic's `TypePicker` is the
+ * fleet's one attempt at telling them apart — it renders
+ * `role="menu"` over items that set a value, which is a listbox
+ * wearing the wrong role. The distinction is what the items *are*:
+ *
+ *  - `menuitem` **does** something. Rename, Delete, Copy path.
+ *  - `option` **is** something. It is a value you are choosing.
+ *
+ * A screen reader announces "menu, 4 items" for one and "listbox,
+ * selected, 2 of 4" for the other, and an agent driving the app
+ * needs the second to know what state it left behind. Getting it
+ * wrong is invisible in a browser and invisible to axe.
+ *
+ * ### There is no `label` prop, and that corrects a lesson
+ *
+ * `Spinner` (M3), `Popover` and `Modal` (M4) all take a **required**
+ * name, because a `role="status"` and a `role="dialog"` take none
+ * from their content. The obvious move here was a `label` prop doing
+ * the same job, and it was written that way first — then measured
+ * as doing nothing.
+ *
+ * `useRole(context, { role: "menu" })` puts **`aria-labelledby` on
+ * the panel pointing at the trigger**, and `aria-labelledby` beats
+ * `aria-label`. So the menu was already named — "Bay 3", from the
+ * button — and the prop was silently discarded. That is also the ARIA
+ * Authoring Practices menu-button pattern, where a menu is named by
+ * the control that opens it.
+ *
+ * The rule the other three teach is therefore narrower than it
+ * looked: **an overlay with no trigger relationship needs its own
+ * name.** A menu has one, so the requirement moves to the trigger —
+ * which `Button` and `IconButton` already enforce.
+ *
+ * ### Roving focus, and the composition `Tabs` already proved
+ *
+ * `RovingFocus` alone this time — there is no selection, because a
+ * menu item is not selected, it is invoked. That is the same
+ * two-kinds argument from the other side: `Tabs` needed both kinds
+ * because a tab is chosen *and* focused, and a menu needs one
+ * because a menu item is only ever focused.
+ *
+ * ### Focus moves in, once, and only on opening
+ *
+ * A menu is one of the few patterns where focus must jump on open —
+ * otherwise the keyboard user who pressed Enter on the trigger is
+ * still on the trigger with a menu they cannot reach. It happens in
+ * the panel's own effect rather than through
+ * `FloatingFocusManager`'s `initialFocus`, because the element to
+ * focus is whichever one `RovingFocus` says is active, and that is
+ * not known until the items have registered.
+ *
+ * ### No type-ahead, deliberately
+ *
+ * The APG lists type-ahead as optional for a menu and required for a
+ * listbox, and none of the fleet's menus are long enough to need it
+ * — the largest has six items. Adding it would mean a keystroke
+ * buffer and a timer in a component that currently has neither, for
+ * a menu you can cross in three arrow presses.
+ */
+export const Menu = ({ className, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
+    const itemElements = useRef(new Map());
+    const panelElement = useRef(null);
+    const focus = useRovingFocus();
+    const { activeValue, registeredValues, setActiveValue } = focus;
+    const [firstValue] = registeredValues;
+    const { context, floatingStyles, refs } = useFloating({
+        open: isVisible,
+        onOpenChange: (isNextVisible) => {
+            if (!isNextVisible) {
+                onDismiss();
+            }
+        },
+        placement,
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+        strategy: "fixed",
+        whileElementsMounted: autoUpdate,
+    });
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+        useDismiss(context),
+        useRole(context, { role: "menu" }),
+    ]);
+    const clonedTrigger = useClonedChild(trigger, {
+        ...getReferenceProps(),
+        ref: refs.setReference,
+    });
+    /**
+     * The other half of the `isConnected` guard below. If the ref
+     * fired while the node was still detached, nothing has shown the
+     * popover — and a `[popover]` that was never shown is
+     * `display: none`, so the menu renders, passes typecheck, and is
+     * invisible to `getByRole` and to a user alike.
+     *
+     * Effects run after the tree is connected, so this is the
+     * backstop. It is idempotent: `:popover-open` is the same question
+     * the ref asks.
+     */
+    useEffect(() => {
+        const panel = panelElement.current;
+        if (isVisible &&
+            panel?.isConnected &&
+            !panel.matches(":popover-open")) {
+            panel.showPopover();
+        }
+    }, [isVisible]);
+    /**
+     * Opening **makes** a member active, and this is the step the
+     * first version was missing.
+     *
+     * `RovingFocus` leaves `activeValue` at `null` until something
+     * sets it — `selectTabIndex` covers the first paint by giving the
+     * tab stop to `registeredValues[0]` while it is still null, which
+     * is exactly why nothing looked wrong: the menu had a correct tab
+     * stop, correct roles, and no focus. `Tabs` never hit it because a
+     * tab bar seeds itself from its selected key.
+     *
+     * Re-running on every open is deliberate. The APG says a menu
+     * opens on its first item, so a menu reopened after arrowing to
+     * the third one starts at the top again rather than resuming a
+     * position the user has forgotten.
+     */
+    useEffect(() => {
+        if (!isVisible || firstValue === undefined) {
+            return;
+        }
+        setActiveValue(firstValue);
+    }, [firstValue, isVisible, setActiveValue]);
+    useEffect(() => {
+        if (!isVisible || activeValue === null) {
+            return;
+        }
+        itemElements.current.get(activeValue)?.focus();
+    }, [activeValue, isVisible]);
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingFocusManager, { context: context, 
+                // `false`, so Tab leaves the menu and lands on the next
+                // control in the page — which is what closes it, through
+                // `useDismiss`. A trapped menu is a dialog.
+                modal: false, 
+                // Focus is moved by the effect above, to whichever item
+                // `RovingFocus` made active. Letting the manager also aim
+                // it is two owners for one caret.
+                initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName("inset-auto m-0 flex min-w-48 flex-col gap-0.5 rounded-md border border-border-default bg-surface-overlay p-1 shadow-medium", className), onKeyDown: (keyEvent) => {
+                        const commands = {
+                            ArrowDown: focus.next,
+                            ArrowUp: focus.previous,
+                            End: focus.last,
+                            Home: focus.first,
+                        };
+                        const command = commands[keyEvent.key];
+                        if (command) {
+                            // Arrow keys scroll the page by default, and a menu
+                            // that scrolls the document behind it while moving
+                            // focus is the hand-rolled version of this
+                            // component.
+                            keyEvent.preventDefault();
+                            command();
+                        }
+                    }, popover: "manual", ref: (node) => {
+                        refs.setFloating(node);
+                        panelElement.current = node;
+                        // A ref callback rather than an effect, for the same
+                        // reason as `Popover`: a `[popover]` is
+                        // `display: none` until shown, and every child effect
+                        // — including the focus move above — would otherwise
+                        // be aiming at a hidden element.
+                        //
+                        // `isConnected` is the guard `Popover` does not need
+                        // and this does. `FloatingFocusManager` renders a pair
+                        // of focus guards around its child, so React commits
+                        // this subtree in an order where the ref can fire
+                        // while the node is still detached — and
+                        // `showPopover()` on a disconnected element throws
+                        // `InvalidStateError`, which surfaces as an unhandled
+                        // rejection rather than as a failing assertion.
+                        if (node?.isConnected &&
+                            !node.matches(":popover-open")) {
+                            node.showPopover();
+                        }
+                    }, 
+                    // Duplicated from `getFloatingProps()` on purpose, and
+                    // the two cannot differ — `useRole(context, { role:
+                    // "menu" })` above is where it comes from. Stated here
+                    // because a linter cannot see a role through a spread.
+                    role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
+                            if (element) {
+                                itemElements.current.set(key, element);
+                            }
+                            else {
+                                itemElements.current.delete(key);
+                            }
+                        } }, item.key))) }) })) : null] }));
+};
+//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/Menu/MenuAction.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { MenuItem } from "./Menu.tsx";
+export type MenuActionProps = {
+    item: MenuItem;
+    onDismiss: () => void;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    register: (value: string) => () => void;
+    tabIndex: number;
+    trackElement: (key: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file because **registration is an effect**, and an effect
+ * cannot run in a loop — the same reason `TabTrigger` and
+ * `AccordionSection` are separate. Any member of a registering group
+ * ends up shaped like this.
+ *
+ * A disabled item is simply not registered, so the arrow keys skip
+ * it without any command in `RovingFocus` knowing what "disabled"
+ * means. It stays in the DOM and stays announced, which is the
+ * difference between "you cannot do this right now" and "this does
+ * not exist".
+ */
+export declare const MenuAction: ({ item, onDismiss, register, tabIndex, trackElement, }: MenuActionProps) => ReactNode;
+//# sourceMappingURL=MenuAction.d.ts.map

package/dist/Menu/MenuAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuAction.d.ts","sourceRoot":"","sources":["../../src/Menu/MenuAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,kEAAkE;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,GAAI,wDAMxB,eAAe,KAAG,SAyDpB,CAAA"}

package/dist/Menu/MenuAction.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * Its own file because **registration is an effect**, and an effect
+ * cannot run in a loop — the same reason `TabTrigger` and
+ * `AccordionSection` are separate. Any member of a registering group
+ * ends up shaped like this.
+ *
+ * A disabled item is simply not registered, so the arrow keys skip
+ * it without any command in `RovingFocus` knowing what "disabled"
+ * means. It stays in the DOM and stays announced, which is the
+ * difference between "you cannot do this right now" and "this does
+ * not exist".
+ */
+export const MenuAction = ({ item, onDismiss, register, tabIndex, trackElement, }) => {
+    const { icon, isDisabled = false, key, label, onSelect, } = item;
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return register(key);
+    }, [isDisabled, key, register]);
+    return (_jsxs("button", { className: toClassName("flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-start text-content-primary text-sm transition-colors duration-(--duration-fast) ease-standard", "hover:bg-intent-neutral-surface", isDisabled &&
+            "cursor-not-allowed text-content-disabled hover:bg-transparent", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+            onSelect();
+            // Choosing dismisses. A menu that stays open after an action
+            // has fired is the one interaction users read as "it didn't
+            // work", and every one of the fleet's menus closes here
+            // today by unmounting its whole parent.
+            onDismiss();
+        }, ref: (element) => {
+            trackElement(key, element);
+        }, role: "menuitem", tabIndex: tabIndex, type: "button", children: [icon === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-content-secondary", children: icon })), label] }));
+};
+//# sourceMappingURL=MenuAction.js.map

package/dist/Menu/MenuAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuAction.js","sourceRoot":"","sources":["../../src/Menu/MenuAction.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAe/C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GACI,EAAa,EAAE;IAC/B,MAAM,EACJ,IAAI,EACJ,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,KAAK,EACL,QAAQ,GACT,GAAG,IAAI,CAAA;IAER,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE/B,OAAO,CACL,kBACE,SAAS,EAAE,WAAW,CACpB,wLAAwL,EACxL,iCAAiC,EACjC,UAAU;YACR,+DAA+D,EACjE,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,EAAE,CAAA;YAEV,6DAA6D;YAC7D,4DAA4D;YAC5D,wDAAwD;YACxD,wCAAwC;YACxC,SAAS,EAAE,CAAA;QACb,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAC5B,CAAC,EACD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,aAEZ,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,8BAGc,MAAM,EAClB,SAAS,EAAC,iCAAiC,YAE1C,IAAI,GACA,CACR,EAEA,KAAK,IACC,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/Select/Select.d.ts

@@ -0,0 +1,87 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type SelectOption = {
+    isDisabled?: boolean;
+    label: string;
+    value: string;
+};
+export type SelectOptionGroup = {
+    label: string;
+    options: SelectOption[];
+};
+export type SelectItem = SelectOption | SelectOptionGroup;
+/**
+ * The HTML attributes are passed through, and that is not
+ * convenience — it is what makes the `Field` slot work at all.
+ *
+ * `Field` clones `id`, `aria-describedby`, `aria-invalid` and
+ * `required` onto whatever control it is given. A component with a
+ * closed prop list **silently drops all four**: the field renders,
+ * the label still points at nothing, and every assertion about the
+ * control's own props passes because they never arrived. Found by
+ * the one test that asked the control what it had been handed.
+ *
+ * Same arrangement as `Button`, for the same reason.
+ */
+export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "onChange" | "size" | "value"> & {
+    className?: string;
+    isDisabled?: boolean;
+    /**
+     * The accessible name, when this is **not** inside a `Field`. A
+     * `<select>` with neither a `<label for>` nor an `aria-label` is
+     * announced as "combobox" and is unfindable by
+     * `getByRole("combobox", { name })` — twelve of the fleet's
+     * fourteen native selects are in exactly that state.
+     */
+    label?: string;
+    onChange?: (value: string) => void;
+    options: SelectItem[];
+    /**
+     * A disabled first entry, not a real option. Reads as a prompt to
+     * a sighted user and cannot be submitted, which is what a
+     * placeholder should mean — unlike an empty-valued option, which
+     * is selectable and silently posts "".
+     */
+    placeholder?: string;
+    size?: ControlSize;
+    /** **Initial** only, like every other value prop in this library. */
+    value?: string;
+};
+/**
+ * A styled native `<select>`, and the fleet's fourteen hand-rolled
+ * ones collapse onto it.
+ *
+ * ### There is no state kind here, and that is the finding
+ *
+ * Every other interactive component in this package owns its state
+ * through `@charcuterie/logic`. This one owns none, because the
+ * platform already does: a `<select>` holds the chosen option in the
+ * DOM, and putting a `useSinglePicker` beside it would create the
+ * exact conflict the state layer exists to prevent — two things
+ * believing they hold `value`, which is the Radix argument from
+ * `Popover` pointed at ourselves. So `value` seeds `defaultValue`
+ * and changes are reported outward.
+ *
+ * The consequence worth knowing: **`Select` is uncontrolled and
+ * `Tabs` is not**, and a reader should be able to tell why without
+ * asking. A tab bar's selection has no DOM representation, so
+ * something has to hold it; a select's does.
+ *
+ * ### Native, and what that rules out
+ *
+ * A `<select>` cannot render a rich option — an icon, two lines, a
+ * badge — and cannot filter. mux-magic has six controls that need
+ * one of those (`CommandPicker`, `PathPicker`, `LinkPicker`,
+ * `EnumPicker`, `AssFieldPicker`, `RenameTargetPicker`), and every
+ * one of them is a **`Combobox`**: a text input that filters a
+ * listbox. That is a different pattern with a different ARIA
+ * contract, it is P2 in the plan, and building a bare `Listbox`
+ * here that none of the six could adopt would have shipped a
+ * component with no caller.
+ *
+ * What native buys, and what a hand-rolled listbox has to rebuild
+ * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
+ * wheel picker, form submission, `:invalid`, and autofill.
+ */
+export declare const Select: ({ className, isDisabled, label, onChange, options, placeholder, size, value, ...selectProps }: SelectProps) => ReactNode;
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,EAAE,UAAU,EAAE,CAAA;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,GAAI,+FAUpB,WAAW,KAAG,SA8EhB,CAAA"}

package/dist/Select/Select.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, } from "../controlStyles.js";
+import { DISABLED_CLASS, FOCUS_RING_CLASS, } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+const getIsGroup = (item) => "options" in item;
+/**
+ * A styled native `<select>`, and the fleet's fourteen hand-rolled
+ * ones collapse onto it.
+ *
+ * ### There is no state kind here, and that is the finding
+ *
+ * Every other interactive component in this package owns its state
+ * through `@charcuterie/logic`. This one owns none, because the
+ * platform already does: a `<select>` holds the chosen option in the
+ * DOM, and putting a `useSinglePicker` beside it would create the
+ * exact conflict the state layer exists to prevent — two things
+ * believing they hold `value`, which is the Radix argument from
+ * `Popover` pointed at ourselves. So `value` seeds `defaultValue`
+ * and changes are reported outward.
+ *
+ * The consequence worth knowing: **`Select` is uncontrolled and
+ * `Tabs` is not**, and a reader should be able to tell why without
+ * asking. A tab bar's selection has no DOM representation, so
+ * something has to hold it; a select's does.
+ *
+ * ### Native, and what that rules out
+ *
+ * A `<select>` cannot render a rich option — an icon, two lines, a
+ * badge — and cannot filter. mux-magic has six controls that need
+ * one of those (`CommandPicker`, `PathPicker`, `LinkPicker`,
+ * `EnumPicker`, `AssFieldPicker`, `RenameTargetPicker`), and every
+ * one of them is a **`Combobox`**: a text input that filters a
+ * listbox. That is a different pattern with a different ARIA
+ * contract, it is P2 in the plan, and building a bare `Listbox`
+ * here that none of the six could adopt would have shipped a
+ * component with no caller.
+ *
+ * What native buys, and what a hand-rolled listbox has to rebuild
+ * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
+ * wheel picker, form submission, `:invalid`, and autofill.
+ */
+export const Select = ({ className, isDisabled = false, label, onChange, options, placeholder, size = "md", value, ...selectProps }) => (_jsxs("div", { className: "relative inline-grid w-full items-center", children: [_jsxs("select", { ...selectProps, "aria-label": label, className: toClassName("w-full cursor-pointer appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard", 
+            // Room for the chevron below, which sits in the same grid
+            // cell. A `<select>`'s own arrow is what `appearance-none`
+            // removes, and forgetting to put one back leaves a control
+            // that looks exactly like a text input.
+            "pe-9", CONTROL_SIZE_CLASS[size], MIN_TOUCH_TARGET_CLASS, "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
+                (placeholder === undefined ? undefined : ""), disabled: isDisabled, onChange: (changeEvent) => {
+                onChange?.(changeEvent.currentTarget.value);
+            }, children: [placeholder === undefined ? null : (_jsx("option", { disabled: true, value: "", children: placeholder })), options.map((item) => getIsGroup(item) ? (_jsx("optgroup", { label: item.label, children: item.options.map((option) => (_jsx("option", { disabled: option.isDisabled, value: option.value, children: option.label }, option.value))) }, item.label)) : (_jsx("option", { disabled: item.isDisabled, value: item.value, children: item.label }, item.value)))] }), _jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute end-3 size-4 text-content-secondary", fill: "none", focusable: false, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.75, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }));
+//# sourceMappingURL=Select.js.map

package/dist/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EACL,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAwD/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM,EACN,kBAAkB,CAAC,IAAI,CAAC,EACxB,sBAAsB,EACtB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}

package/dist/SortableTableHeader/SortableTableHeader.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+export type SortDirection = "ascending" | "descending";
+export type SortableTableHeaderProps = {
+    children: ReactNode;
+    className?: string;
+    /**
+     * The direction **this column** is sorted in, or `undefined` when
+     * it is not the sorted one. Undefined is not "ascending by
+     * default": a table has exactly one sorted column and every other
+     * header has to say `aria-sort="none"`, which is what tells a
+     * screen reader which one is live.
+     */
+    direction?: SortDirection;
+    /** Called with the direction the header is asking to move to. */
+    onSort: (direction: SortDirection) => void;
+};
+/**
+ * **The header cell, and nothing else.** No `DataTable`, no rows, no
+ * comparator — the plan is explicit about that, and the reason is
+ * that sorting *data* is app logic that differs per column type,
+ * while announcing *that* a column is sorted is markup every table
+ * gets wrong the same way.
+ *
+ * ### `aria-sort` does not exist anywhere in the fleet
+ *
+ * Not in mux-magic, not in rip-deck, not in castkit. mux-magic's
+ * `FileExplorerModal` — the one sortable table there is — renders
+ * the state as a character:
+ *
+ * ```tsx
+ * {sortDirection === "asc" ? "▲" : "▼"}
+ * ```
+ *
+ * A screen reader announces that as "black up-pointing triangle", if
+ * the font has it at all, and the sandbox's headless Chromium does
+ * not have it — so the same glyph measures blank in a screenshot.
+ * Sighted users see a direction, everyone else gets nothing, and no
+ * automated check anywhere reports it: axe has no rule for a missing
+ * `aria-sort`, because a table with none is a table that is simply
+ * not sorted as far as the accessibility tree knows.
+ *
+ * This is therefore the one component in M6 whose payoff is not
+ * duplication — there is a single site — but a class of failure
+ * that is invisible to every gate the fleet has.
+ *
+ * ### The cell announces, the button acts
+ *
+ * `aria-sort` belongs on the `<th>`; the click target is a `<button>`
+ * inside it. Putting the role on the button instead is the common
+ * mistake and it breaks the grid semantics — a `<th>` that is a
+ * button is no longer a column header to anything reading the table
+ * structure.
+ *
+ * The name stays the column's name. It is tempting to append the
+ * state — "Name, sorted ascending" — and that duplicates what
+ * `aria-sort` already says, so the column is announced twice and
+ * `getByRole("columnheader", { name: "Name" })` stops matching the
+ * moment somebody sorts it.
+ */
+export declare const SortableTableHeader: ({ children, className, direction, onSort, }: SortableTableHeaderProps) => ReactNode;
+//# sourceMappingURL=SortableTableHeader.d.ts.map

package/dist/SortableTableHeader/SortableTableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTableHeader.d.ts","sourceRoot":"","sources":["../../src/SortableTableHeader/SortableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,YAAY,CAAA;AAEtD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,iEAAiE;IACjE,MAAM,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAA;CAC3C,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,mBAAmB,GAAI,6CAKjC,wBAAwB,KAAG,SAsD7B,CAAA"}

package/dist/SortableTableHeader/SortableTableHeader.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+const NEXT_DIRECTION = {
+    ascending: "descending",
+    descending: "ascending",
+};
+/**
+ * **The header cell, and nothing else.** No `DataTable`, no rows, no
+ * comparator — the plan is explicit about that, and the reason is
+ * that sorting *data* is app logic that differs per column type,
+ * while announcing *that* a column is sorted is markup every table
+ * gets wrong the same way.
+ *
+ * ### `aria-sort` does not exist anywhere in the fleet
+ *
+ * Not in mux-magic, not in rip-deck, not in castkit. mux-magic's
+ * `FileExplorerModal` — the one sortable table there is — renders
+ * the state as a character:
+ *
+ * ```tsx
+ * {sortDirection === "asc" ? "▲" : "▼"}
+ * ```
+ *
+ * A screen reader announces that as "black up-pointing triangle", if
+ * the font has it at all, and the sandbox's headless Chromium does
+ * not have it — so the same glyph measures blank in a screenshot.
+ * Sighted users see a direction, everyone else gets nothing, and no
+ * automated check anywhere reports it: axe has no rule for a missing
+ * `aria-sort`, because a table with none is a table that is simply
+ * not sorted as far as the accessibility tree knows.
+ *
+ * This is therefore the one component in M6 whose payoff is not
+ * duplication — there is a single site — but a class of failure
+ * that is invisible to every gate the fleet has.
+ *
+ * ### The cell announces, the button acts
+ *
+ * `aria-sort` belongs on the `<th>`; the click target is a `<button>`
+ * inside it. Putting the role on the button instead is the common
+ * mistake and it breaks the grid semantics — a `<th>` that is a
+ * button is no longer a column header to anything reading the table
+ * structure.
+ *
+ * The name stays the column's name. It is tempting to append the
+ * state — "Name, sorted ascending" — and that duplicates what
+ * `aria-sort` already says, so the column is announced twice and
+ * `getByRole("columnheader", { name: "Name" })` stops matching the
+ * moment somebody sorts it.
+ */
+export const SortableTableHeader = ({ children, className, direction, onSort, }) => (_jsx("th", { "aria-sort": direction ?? "none", className: toClassName("border-border-subtle border-b p-0 text-start", className), scope: "col", children: _jsxs("button", { className: toClassName("flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-3 py-2 text-start font-medium text-content-secondary text-xs uppercase tracking-wide transition-colors duration-(--duration-fast) ease-standard", "hover:text-content-primary", FOCUS_RING_CLASS), onClick: () => {
+            onSort(direction === undefined
+                ? "ascending"
+                : NEXT_DIRECTION[direction]);
+        }, type: "button", children: [children, _jsx("svg", { "aria-hidden": "true", className: toClassName("size-3.5 shrink-0 transition-[transform,opacity] duration-(--duration-fast) ease-standard", direction === undefined && "opacity-0", direction === "descending" && "rotate-180"), fill: "none", focusable: false, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m6 15 6-6 6 6" }) })] }) }));
+//# sourceMappingURL=SortableTableHeader.js.map

package/dist/SortableTableHeader/SortableTableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTableHeader.js","sourceRoot":"","sources":["../../src/SortableTableHeader/SortableTableHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C,MAAM,cAAc,GAClB;IACE,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,WAAW;CACxB,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,GACmB,EAAa,EAAE,CAAC,CACzC,0BAMa,SAAS,IAAI,MAAM,EAC9B,SAAS,EAAE,WAAW,CACpB,8CAA8C,EAC9C,SAAS,CACV,EACD,KAAK,EAAC,KAAK,YAEX,kBACE,SAAS,EAAE,WAAW,CACpB,mNAAmN,EACnN,4BAA4B,EAC5B,gBAAgB,CACjB,EACD,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,CACJ,SAAS,KAAK,SAAS;gBACrB,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAC9B,CAAA;QACH,CAAC,EACD,IAAI,EAAC,QAAQ,aAEZ,QAAQ,EAET,6BAIc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,2FAA2F,EAC3F,SAAS,KAAK,SAAS,IAAI,WAAW,EACtC,SAAS,KAAK,YAAY,IAAI,YAAY,CAC3C,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,eAAe,GAAG,GACtB,IACC,GACN,CACN,CAAA"}

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,54 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type ToastProps = {
+    /** Detail under the title. Optional — many toasts are one line. */
+    children?: ReactNode;
+    className?: string;
+    /**
+     * Milliseconds at `visible` before it starts leaving. `0` pins it
+     * open, which is what a toast carrying an action has to do — WCAG
+     * 2.2.1 gives a user the right to finish reading.
+     */
+    duration?: number;
+    /** How long `exiting` lasts, matched to the transition below. */
+    exitDuration?: number;
+    intent?: IntentName;
+    /** Called once, when the machine reaches its terminal state. */
+    onRemove: () => void;
+    /**
+     * A string, not a `ReactNode`. It is what the region announces and
+     * what names this toast's own dismiss button — a stack of three
+     * toasts all offering "Dismiss" is three matches for one query,
+     * which `expectAgentDrivable` treats as a failure.
+     */
+    title: string;
+};
+/**
+ * One toast, and its whole job is the four-state machine the plan
+ * specified and M2 left unbuilt.
+ *
+ * ### Why a `Status`, when a boolean and a timeout would do
+ *
+ * Because a boolean cannot express *why* the node is still mounted.
+ * A toast that is leaving is still painted, still occupies its slot,
+ * and must not be announced again — and `isVisible === false` says
+ * none of that. The states are what a reader needs to know the
+ * difference between "arriving", "leaving", and "gone but not yet
+ * unmounted", and `createStatus` makes the illegal ones throw:
+ * `visible → removed` skips the exit and is rejected, and `removed`
+ * is terminal so a late timer cannot remove the same toast twice.
+ *
+ * That last one is not hypothetical. Hover-to-pause plus a dismiss
+ * button means two independent timers can be in flight, and the
+ * hand-rolled version of this component reconciles them with a
+ * `clearTimeout` and a ref. Here the second one throws.
+ *
+ * ### It does not announce itself
+ *
+ * No `role="status"` and no `aria-live` on this element — the
+ * `ToastRegion` around it owns that, and a live region inside a live
+ * region is a message announced twice. See that component for the
+ * reason there is only ever one, and it is polite.
+ */
+export declare const Toast: ({ children, className, duration, exitDuration, intent, onRemove, title, }: ToastProps) => ReactNode;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAYtC,MAAM,MAAM,UAAU,GAAG;IACvB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,KAAK,GAAI,2EAQnB,UAAU,KAAG,SA+If,CAAA"}