@charcuterie/ui 0.1.0 → 0.2.0

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"}

package/dist/Toast/Toast.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStatus } from "@charcuterie/logic";
+import { useEffect, useRef } from "react";
+import { IconButton } from "../IconButton/IconButton.js";
+import { INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+import { toastTransitions } from "./toastLifecycle.js";
+const ENTER_CLASS = {
+    entering: "translate-y-2 opacity-0",
+    exiting: "translate-y-1 opacity-0",
+    removed: "opacity-0",
+    visible: "translate-y-0 opacity-100",
+};
+/**
+ * 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 const Toast = ({ children, className, duration = 5000, exitDuration = 200, intent = "neutral", onRemove, title, }) => {
+    const { is, status, transitionTo } = useStatus({
+        initialState: "entering",
+        transitions: toastTransitions,
+    });
+    const onRemoveRef = useRef(onRemove);
+    onRemoveRef.current = onRemove;
+    useEffect(() => {
+        if (!is("entering")) {
+            return;
+        }
+        // A frame, not zero. The element has to be painted in its
+        // `entering` position before the class changes, or the browser
+        // coalesces both into one style recalculation and there is no
+        // transition to see — the single most common reason a CSS
+        // enter-animation "does nothing".
+        const frame = globalThis.requestAnimationFrame(() => {
+            // Guarded, because `is` and `transitionTo` are stable — this
+            // effect runs once, so the frame is *not* cancelled when the
+            // status changes underneath it. A dismiss during the enter
+            // frame moves the toast to `exiting`, and `exiting → visible`
+            // is a legal transition (it is how hover-to-pause works), so
+            // an unguarded write here brings a dismissed toast straight
+            // back and restarts its duration timer.
+            if (is("entering")) {
+                transitionTo("visible");
+            }
+        });
+        return () => {
+            globalThis.cancelAnimationFrame(frame);
+        };
+    }, [is, transitionTo]);
+    useEffect(() => {
+        if (status !== "visible" || duration === 0) {
+            return;
+        }
+        const timer = globalThis.setTimeout(() => {
+            transitionTo("exiting");
+        }, duration);
+        return () => {
+            globalThis.clearTimeout(timer);
+        };
+    }, [duration, status, transitionTo]);
+    useEffect(() => {
+        if (status !== "exiting") {
+            return;
+        }
+        const timer = globalThis.setTimeout(() => {
+            transitionTo("removed");
+        }, exitDuration);
+        return () => {
+            globalThis.clearTimeout(timer);
+        };
+    }, [exitDuration, status, transitionTo]);
+    useEffect(() => {
+        if (status === "removed") {
+            onRemoveRef.current();
+        }
+    }, [status]);
+    return (_jsxs("li", { className: toClassName("pointer-events-auto flex items-start gap-3 rounded-md border p-3 shadow-medium transition-[opacity,transform] duration-(--duration-normal) ease-standard", INTENT_APPEARANCE_CLASS[intent].soft, ENTER_CLASS[status], className), 
+        // Pausing on hover is WCAG 2.2.1's "pause" for a moving
+        // deadline, and it is the reason `exiting → visible` is a
+        // legal transition rather than an oddity in the table.
+        onMouseEnter: () => {
+            if (status === "exiting") {
+                transitionTo("visible");
+            }
+        }, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: toClassName("font-medium text-sm", INTENT_CONTENT_CLASS[intent]), children: title }), children === undefined ? null : (_jsx("span", { className: "text-content-secondary text-xs", children: children }))] }), _jsx(IconButton, { appearance: "ghost", className: "ms-auto shrink-0", 
+                // The name has to be distinct per toast, or a stack of three
+                // gives `getByRole("button", { name: "Dismiss" })` three
+                // matches and `expectAgentDrivable` fails the story — which
+                // is the point of that helper: an agent picking one of three
+                // at random is worse than finding none.
+                label: `Dismiss ${title}`, onClick: () => {
+                    if (status !== "exiting" &&
+                        status !== "removed") {
+                        transitionTo("exiting");
+                    }
+                }, size: "sm", children: _jsx("svg", { "aria-hidden": "true", className: "size-[1.15em] shrink-0", 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 6 12 12M18 6 6 18" }) }) })] }));
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toast/Toast.js.map

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

package/dist/Toast/ToastRegion.d.ts

@@ -0,0 +1,57 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type ToastRecord = {
+    description?: ReactNode;
+    /** `0` pins this one open. See `Toast`'s `duration`. */
+    duration?: number;
+    intent?: IntentName;
+    key: string;
+    title: string;
+};
+export type ToastRegionProps = {
+    className?: string;
+    /**
+     * The region's accessible name. `role="status"` takes **none from
+     * its content** — the trap `Spinner` walked into in M3 and
+     * `Popover` in M4.
+     */
+    label?: string;
+    onDismiss: (key: string) => void;
+    toasts: ToastRecord[];
+};
+/**
+ * The live region, and the list is the caller's.
+ *
+ * ### One region, and it is polite
+ *
+ * Not two. The usual arrangement — a polite region and an assertive
+ * one, so a danger toast interrupts — was rejected because the
+ * interrupting case does not belong in a toast at all. A message
+ * that must be heard *now* is one the user has to be able to go back
+ * and read, and a toast is gone in five seconds; if it matters that
+ * much it is an `Alert` on the page, which this library already
+ * ships and which stays put.
+ *
+ * That is the same line `Field` draws for its error text, and it is
+ * worth keeping the two consistent: **this library announces once,
+ * in the place the user can act on it.**
+ *
+ * ### The stack does not own the toasts
+ *
+ * `toasts` comes in and `onDismiss` goes out — there is no
+ * `toast()` function, no imperative queue, and no context provider.
+ * An app already has a store (mux-magic has Jotai, rip-deck has its
+ * own), and a component library that ships a second one is asking
+ * every consumer to keep two lists of the same notifications in
+ * sync. The lifecycle *inside* one toast is state a store cannot
+ * see, which is why `Toast` owns that and nothing more.
+ *
+ * ### `pointer-events-none` on the container, `auto` on each toast
+ *
+ * A fixed overlay across the bottom of the viewport swallows every
+ * click in that band, including on the app behind it, and it does so
+ * invisibly. The container passes clicks through and each toast
+ * takes them back.
+ */
+export declare const ToastRegion: ({ className, label, onDismiss, toasts, }: ToastRegionProps) => ReactNode;
+//# sourceMappingURL=ToastRegion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastRegion.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,gBAAgB,KAAG,SA+BrB,CAAA"}

package/dist/Toast/ToastRegion.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toClassName } from "../toClassName.js";
+import { Toast } from "./Toast.js";
+/**
+ * The live region, and the list is the caller's.
+ *
+ * ### One region, and it is polite
+ *
+ * Not two. The usual arrangement — a polite region and an assertive
+ * one, so a danger toast interrupts — was rejected because the
+ * interrupting case does not belong in a toast at all. A message
+ * that must be heard *now* is one the user has to be able to go back
+ * and read, and a toast is gone in five seconds; if it matters that
+ * much it is an `Alert` on the page, which this library already
+ * ships and which stays put.
+ *
+ * That is the same line `Field` draws for its error text, and it is
+ * worth keeping the two consistent: **this library announces once,
+ * in the place the user can act on it.**
+ *
+ * ### The stack does not own the toasts
+ *
+ * `toasts` comes in and `onDismiss` goes out — there is no
+ * `toast()` function, no imperative queue, and no context provider.
+ * An app already has a store (mux-magic has Jotai, rip-deck has its
+ * own), and a component library that ships a second one is asking
+ * every consumer to keep two lists of the same notifications in
+ * sync. The lifecycle *inside* one toast is state a store cannot
+ * see, which is why `Toast` owns that and nothing more.
+ *
+ * ### `pointer-events-none` on the container, `auto` on each toast
+ *
+ * A fixed overlay across the bottom of the viewport swallows every
+ * click in that band, including on the app behind it, and it does so
+ * invisibly. The container passes clicks through and each toast
+ * takes them back.
+ */
+export const ToastRegion = ({ className, label = "Notifications", onDismiss, toasts, }) => (_jsx("div", { "aria-label": label, "aria-atomic": "false", className: toClassName("pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-2 p-4", className), role: "status", children: _jsx("ul", { className: "pointer-events-none flex w-full max-w-sm list-none flex-col gap-2 p-0", children: toasts.map((toast) => (_jsx(Toast, { duration: toast.duration, intent: toast.intent, onRemove: () => {
+                onDismiss(toast.key);
+            }, title: toast.title, children: toast.description }, toast.key))) }) }));
+//# sourceMappingURL=ToastRegion.js.map

package/dist/Toast/ToastRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastRegion.js","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AAuBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,eAAe,EACvB,SAAS,EACT,MAAM,GACW,EAAa,EAAE,CAAC,CACjC,4BACc,KAAK,iBAML,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,wFAAwF,EACxF,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,YAEb,aAAI,SAAS,EAAC,uEAAuE,YAClF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EAEpB,QAAQ,EAAE,GAAG,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,WAAW,IANb,KAAK,CAAC,GAAG,CAOR,CACT,CAAC,GACC,GACD,CACP,CAAA"}