@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/components/ui/multi-combobox.js

@@ -0,0 +1,297 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckIcon } from 'lucide-react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { InputGroup, InputGroupInput } from './input-group.js';
+import { TagGroup } from './tag-group.js';
+import { RANKS, locate } from '../../lib/rank.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The whole-list control in the popup's toolbar.
+ *
+ * `aria-disabled` rather than `disabled`, because a control that vanishes when it
+ * stops applying moves the other control under the reader's pointer. Kept out of an
+ * object map of class strings because this gate's own readers treat a `bg-` fill
+ * with no ink of its own as a variant that inherits its colour from whatever
+ * surface it lands on, and this string states both.
+ */
+const ACTION = 'text-muted-foreground hover:bg-accent hover:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 inline-flex items-center rounded-sm px-2 py-1 text-xs outline-none transition-[color,background-color] duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]';
+/**
+ * A field that searches one list and toggles as many of its options as the reader
+ * wants, with the chosen ones visible as chips in the trigger.
+ *
+ * **The value is an array, and that is not a prop combination.** Every sibling in
+ * this family commits one value: `Combobox` closes on a choice, `Select` closes on
+ * a choice, `NativeSelect` submits one value. Turning one of those into this one
+ * is not a boolean. A single-value control closes on commit because the answer is
+ * finished; here the answer is a set that keeps growing after every commit, so
+ * closing on commit makes the second choice a re-open, and a reader choosing six
+ * regions opens the field six times and retypes the query five of them. The state
+ * machine is different, not configured differently, which is the test
+ * `DESIGN.md` states: a member of a family that differs from its siblings only by a
+ * prop every one of them already takes is a call site.
+ *
+ * **Space and Enter toggle, and the list stays open.** This inverts the commit
+ * contract the single-select siblings are built on, and the inversion is the whole
+ * reason the two surfaces feel nothing alike. In a combobox, Enter ends the
+ * interaction; here it is one more toggle, and closing the list on it would make
+ * choosing a second value a two-keystroke act for no reason a reader can see. So
+ * the keys that close a single-select field are the keys that add to the set, and
+ * Escape, a blur and Tab are the ways out. The honest cost is on the typeahead:
+ * **a query cannot contain a space typed with the Space key**, because Space is
+ * spoken for. An option is found by the words in its label and in its keywords, so
+ * the space in a query buys nothing a reader would miss, and the alternative is a
+ * control where the primary key for selecting cannot also type.
+ *
+ * **Backspace in the trigger removes the last chip, and only then edits text.**
+ * Backspace with a caret in the search field is a text edit like any other. Backspace
+ * in an empty one is a gesture at the set, and it takes the last chip chosen, which
+ * is the one nearest where the caret was. This is the second gesture every token
+ * field has and the one a hand-rolled multi select gets wrong by having no second
+ * path out of the chips at all.
+ *
+ * **The chips are `TagGroup` and the frame is `InputGroup`, not a reimplementation
+ * of either.** A chip is a thing the reader chose and can un-pick, which is the
+ * definition `TagGroup` already states and the reason its remove control exists.
+ * Drawing a second chip here would be a second answer to what a chip is, and it
+ * would be the one that quietly diverges on the coarse-pointer target size. The
+ * frame is borrowed for the same reason: a bordered group with one border and one
+ * focus colour is the thing a row of chips inside a search field has to be, and
+ * `InputGroup` already turns its border to the ring token when anything inside it
+ * has focus.
+ *
+ * **The listbox is `aria-multiselectable`, because a reader who cannot see that
+ * many of its rows may be chosen does not know what Space will do.** The attribute
+ * is the whole announcement difference between this list and a single-select one,
+ * and omitting it leaves a reader guessing whether the next Space replaces or adds.
+ *
+ * **A cap is visible rather than silent.** With `max`, an unchosen option past the
+ * cap is drawn and announced as unavailable and the arrows step over it, so the
+ * limit is discoverable before the reader hits it. The select-all control is the
+ * case where silence would be worst: it says it will choose everything and then
+ * chooses fewer, so it announces itself as unavailable instead, at the cost of a
+ * reader who wanted all of it having to add the rest one at a time.
+ *
+ * **Ordering is the reader's.** Values are appended in the order they were chosen
+ * and a removal closes the gap rather than re-sorting, because a chip row that
+ * reorders under the pointer is a chip row a reader cannot aim at. The list itself
+ * is ranked by the scorer imported from `lib/rank`, so a query that floats one
+ * option to the top floats it in the command palette too.
+ *
+ * **The chosen values are announced through the field's description, not through
+ * the query.** The search field holds a query and nothing else, so a screen reader
+ * focused on it hears the query and the chosen values are silent. Pointing
+ * `aria-describedby` at the chip row costs one generated id and makes every chosen
+ * label read out after the value. `showCount` is deliberately outside that: a bare
+ * figure has no noun, so it is drawn and not announced.
+ *
+ * The list is anchored to the field rather than portalled, for the trade
+ * `Combobox` states: put the field near the top of any scroll container it lives
+ * in.
+ */
+function MultiCombobox({ label, items, value, defaultValue = [], onValueChange, removeLabel, empty, max, selectAll, clearAll, showCount = false, placeholder, open, defaultOpen = false, onOpenChange, disabled = false, required = false, name, form, id, 'aria-describedby': describedBy, className, }) {
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const [ownOpen, setOwnOpen] = useState(defaultOpen);
+    const [query, setQuery] = useState('');
+    const [active, setActive] = useState(0);
+    const listRef = useRef(null);
+    const inputRef = useRef(null);
+    const generated = useId();
+    const inputId = id ?? generated;
+    const listId = `${generated}-list`;
+    // The popup the field controls. Separate from the listbox id because the listbox is
+    // not rendered at all when nothing matched, and `aria-controls` is a required
+    // attribute on an expanded combobox.
+    const popupId = `${generated}-popup`;
+    const chipsId = `${generated}-chips`;
+    const chosen = value === undefined ? ownValue : value;
+    const isOpen = (open ?? ownOpen) && !disabled;
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    }, [onOpenChange, open]);
+    const commit = useCallback((next) => {
+        if (value === undefined)
+            setOwnValue(next);
+        onValueChange?.(next);
+    }, [onValueChange, value]);
+    const chosenSet = useMemo(() => new Set(chosen), [chosen]);
+    const atCap = max !== undefined && chosen.length >= max;
+    const labelOf = useCallback((v) => items.find((item) => item.value === v)?.label ?? v, [items]);
+    const ranked = useMemo(() => {
+        const trimmed = query.trim();
+        if (trimmed === '')
+            return items.map((item) => ({ item, rank: RANKS.prefix }));
+        return items
+            .map((item) => {
+            const inLabel = locate(item.label, trimmed);
+            if (inLabel.rank < RANKS.keyword)
+                return { item, rank: inLabel.rank, range: inLabel.range };
+            const keywordHit = (item.keywords ?? []).some((word) => word.toLowerCase().includes(trimmed.toLowerCase()));
+            return keywordHit ? { item, rank: RANKS.keyword } : null;
+        })
+            .filter((hit) => hit !== null)
+            .sort((a, b) => a.rank - b.rank);
+    }, [items, query]);
+    // Clamped rather than reset on every keystroke, for the reason `Combobox` states:
+    // a reader who moved the highlight and then typed is choosing from a list that
+    // just changed under them.
+    const activeIndex = Math.min(active, Math.max(ranked.length - 1, 0));
+    /** Whether an option may be added right now. */
+    const locked = useCallback((item) => item.disabled === true || (atCap && !chosenSet.has(item.value)), [atCap, chosenSet]);
+    /**
+     * Moves the highlight by `delta` rows, stepping over options that cannot be
+     * added. It stops on the row it started from rather than spinning, so a list of
+     * nothing but unavailable options cannot cycle.
+     */
+    const step = (from, delta) => {
+        if (ranked.length === 0)
+            return 0;
+        let next = from;
+        for (let moved = 0; moved < ranked.length; moved += 1) {
+            next += delta;
+            if (next >= ranked.length)
+                next = 0;
+            if (next < 0)
+                next = ranked.length - 1;
+            const hit = ranked[next];
+            if (hit !== undefined && !locked(hit.item))
+                return next;
+        }
+        return from;
+    };
+    const toggle = (item) => {
+        if (chosenSet.has(item.value)) {
+            commit(chosen.filter((v) => v !== item.value));
+            return;
+        }
+        if (locked(item))
+            return;
+        commit([...chosen, item.value]);
+    };
+    const openAt = (from) => {
+        setOpen(true);
+        setActive(from);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (!isOpen) {
+                openAt(0);
+                return;
+            }
+            setActive((index) => step(Math.min(index, Math.max(ranked.length - 1, 0)), event.key === 'ArrowDown' ? 1 : -1));
+            return;
+        }
+        if (event.key === 'Enter' || event.code === 'Space') {
+            const hit = ranked[activeIndex];
+            // Both keys do nothing with nothing to toggle, which is the same refusal
+            // `Combobox` makes: an action the reader did not point at is not one they
+            // asked for.
+            if (hit === undefined || locked(hit.item))
+                return;
+            // The caret never moves and the list never closes. Both keys are consumed so
+            // Space does not type a space and Enter does not submit the form mid-choice.
+            event.preventDefault();
+            toggle(hit.item);
+            return;
+        }
+        if (event.key === 'Escape') {
+            // Escape gets the list out of the way and touches nothing else. Every chosen
+            // value is an act, so discarding them here would take back work the reader
+            // did, and a field that emptied itself on Escape submits nothing they asked
+            // for.
+            if (!isOpen)
+                return;
+            event.preventDefault();
+            setOpen(false);
+            return;
+        }
+        if (event.key === 'Backspace' && query === '' && chosen.length > 0) {
+            event.preventDefault();
+            commit(chosen.slice(0, -1));
+            return;
+        }
+        if (event.key === 'Tab')
+            setOpen(false);
+    };
+    useEffect(() => {
+        const list = listRef.current;
+        if (list === null)
+            return;
+        list.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'nearest' });
+    }, [activeIndex, isOpen]);
+    const chips = useMemo(() => chosen.map((v) => ({ id: v, label: labelOf(v) })), [chosen, labelOf]);
+    const activeRow = isOpen ? ranked[activeIndex] : undefined;
+    // Two possible referrers, one attribute. Assembled from a template rather than a
+    // join so the separator is never a bare string literal, which is the shape a copy
+    // scan reads as a space somebody typed.
+    const describedByIds = chips.length === 0
+        ? describedBy
+        : describedBy === undefined
+            ? chipsId
+            : `${chipsId} ${describedBy}`;
+    const room = max === undefined ? ranked.length : max - chosen.length;
+    return (_jsxs("div", { "data-slot": "multi-combobox", className: cn('relative w-full', className), children: [_jsxs(InputGroup, { "data-slot": "multi-combobox-trigger", disabled: disabled, className: "flex-wrap gap-x-1.5 gap-y-1 py-1", children: [chips.length === 0 ? null : (_jsx("div", { id: chipsId, "data-slot": "multi-combobox-chips", onMouseDown: (event) => {
+                            // Two gestures, one handler, both about where the caret ends up. A
+                            // press on a chip's remove control must not blur the search field,
+                            // because the blur is the path that closes the list, so the press is
+                            // swallowed and the click still lands. A press on the chip itself
+                            // brings the caret to the field, which is also what opens the list.
+                            if (event.target.closest('[data-slot="tag-remove"]') !== null) {
+                                event.preventDefault();
+                                return;
+                            }
+                            inputRef.current?.focus();
+                        }, className: "flex w-full shrink-0 flex-wrap items-center", children: _jsx(TagGroup, { tags: chips, onRemove: (removed) => {
+                                commit(chosen.filter((v) => v !== removed));
+                            }, 
+                            // `TagGroup` types a tag label as a node because a tag is often an
+                            // avatar and a word. Every chip drawn here is a string taken from the
+                            // caller's own option, so the node it hands back is that string and
+                            // the coercion is total rather than a guess.
+                            removeLabel: (chip) => removeLabel(String(chip)) }) })), _jsx(InputGroupInput, { ref: inputRef, id: inputId, type: "text", role: "combobox", autoComplete: "off", "aria-expanded": isOpen, "aria-controls": isOpen ? popupId : undefined, "aria-haspopup": "listbox", "aria-autocomplete": "list", "aria-label": label, "aria-required": required || undefined, "aria-activedescendant": activeRow === undefined ? undefined : `${listId}-option-${activeIndex}`, ...(describedByIds === '' ? null : { 'aria-describedby': describedByIds }), ...(placeholder === undefined ? null : { placeholder }), value: query, disabled: disabled, onChange: (event) => {
+                            const next = event.target.value;
+                            setQuery(next);
+                            setActive(0);
+                            if (!isOpen)
+                                setOpen(true);
+                        }, onFocus: () => {
+                            openAt(0);
+                        }, onClick: () => {
+                            if (!isOpen)
+                                openAt(0);
+                        }, onBlur: () => {
+                            setOpen(false);
+                        }, onKeyDown: onKeyDown }), showCount ? (_jsx("span", { "data-slot": "multi-combobox-count", "aria-hidden": "true", className: "text-muted-foreground shrink-0 self-center pr-1 text-xs tabular-nums", children: chosen.length })) : null] }), name === undefined
+                ? null
+                : chosen.map((v) => (_jsx("input", { type: "hidden", name: name, ...(form === undefined ? null : { form }), value: v, readOnly: true }, v))), isOpen ? (_jsxs("div", { id: popupId, "data-slot": "multi-combobox-popup", className: "bg-popover text-popover-foreground absolute z-50 mt-1 w-full min-w-(--anchor-width) rounded-md border p-1 shadow-md", children: [selectAll === undefined && clearAll === undefined ? null : (_jsxs("div", { "data-slot": "multi-combobox-actions", className: "border-border flex items-center gap-1 border-b p-1 pb-2", children: [selectAll === undefined ? null : (_jsx("button", { type: "button", "data-slot": "multi-combobox-select-all", "aria-disabled": atCap || undefined, onClick: () => {
+                                    if (atCap)
+                                        return;
+                                    const added = ranked
+                                        .filter((hit) => !chosenSet.has(hit.item.value))
+                                        .slice(0, room)
+                                        .map((hit) => hit.item.value);
+                                    commit([...chosen, ...added]);
+                                }, className: ACTION, children: selectAll(ranked.length) })), clearAll === undefined ? null : (_jsx("button", { type: "button", "data-slot": "multi-combobox-clear-all", "aria-disabled": chosen.length === 0 || undefined, onClick: () => {
+                                    if (chosen.length === 0)
+                                        return;
+                                    commit([]);
+                                }, className: ACTION, children: clearAll(chosen.length) }))] })), ranked.length === 0 ? (_jsxs("p", { "data-slot": "multi-combobox-empty", role: "status", className: "text-muted-foreground px-3 py-6 text-center text-sm", children: [empty.message(query.trim()), empty.hint === undefined ? null : (_jsx("span", { className: "mt-1 block text-xs", children: empty.hint }))] })) : (_jsx("div", { "data-slot": "multi-combobox-list", id: listId, ref: listRef, role: "listbox", "aria-label": label, "aria-multiselectable": "true", className: "max-h-72 overflow-y-auto", children: ranked.map((hit, index) => {
+                            const isActive = index === activeIndex;
+                            const isChosen = chosenSet.has(hit.item.value);
+                            const isLocked = locked(hit.item);
+                            return (_jsxs("div", { id: `${listId}-option-${index}`, "data-slot": "multi-combobox-option", "data-active": isActive, "data-selected": isChosen || undefined, role: "option", "aria-selected": isChosen, "aria-disabled": isLocked || undefined, onMouseEnter: () => {
+                                    if (!isLocked)
+                                        setActive(index);
+                                }, 
+                                // Swallowed for the reason `Combobox` swallows it: without it a
+                                // pointer choice is a blur, and the blur is the path that closes
+                                // the list under the reader's own click.
+                                onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                    toggle(hit.item);
+                                }, className: cn('flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm', isLocked && 'text-muted-foreground cursor-not-allowed opacity-50', !isLocked && isActive && 'bg-accent text-accent-foreground', !isLocked && !isActive && 'text-muted-foreground hover:text-foreground'), children: [_jsx("span", { "data-slot": "multi-combobox-option-mark", className: "w-4 shrink-0", children: isChosen ? _jsx(CheckIcon, { className: "size-4", "aria-hidden": "true" }) : null }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: hit.range === undefined ? (hit.item.label) : (_jsxs(_Fragment, { children: [hit.item.label.slice(0, hit.range[0]), _jsx("strong", { className: "font-semibold", children: hit.item.label.slice(hit.range[0], hit.range[1]) }), hit.item.label.slice(hit.range[1])] })) }), hit.item.hint === undefined ? null : (_jsx("span", { className: "shrink-0 text-xs", children: hit.item.hint }))] }, hit.item.value));
+                        }) }))] })) : null] }));
+}
+export { MultiCombobox };

package/dist/components/ui/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,0CAA0C;AAC1C;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgDnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,0CAA0C;AAC1C;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAuDnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/native-select.js

@@ -50,6 +50,13 @@ function NativeSelect({ className, size = 'default', children, ...props }) {
                 // The font is inherited explicitly, because a `<select>` does not
                 // inherit one in every engine and a control in the platform's face
                 // beside text in Inter is a control nobody designed.
-                'font-inherit', size === 'sm' ? 'h-8' : 'h-9', className), ...props, children: children }), _jsx("span", { "data-slot": "native-select-icon", "aria-hidden": "true", className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 flex size-4 -translate-y-1/2 items-center justify-center", children: _jsx(ChevronDownIcon, { className: "size-4" }) })] }));
+                'font-inherit', 
+                // The coarse-pointer floor, as a step, and the same string `select.tsx` puts on
+                // its trigger. This Component exists to take over the platform's own arrow, so
+                // its metrics are Prism's to state rather than the browser's, and the argument
+                // is the trigger's: a select is a control a finger presses to open a list, not a
+                // field a finger types into, so its height belongs on the floor. It is `w-full`,
+                // so only the height was short. See DESIGN.md, The coarse-pointer floor.
+                'pointer-coarse:h-11', size === 'sm' ? 'h-8' : 'h-9', className), ...props, children: children }), _jsx("span", { "data-slot": "native-select-icon", "aria-hidden": "true", className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 flex size-4 -translate-y-1/2 items-center justify-center", children: _jsx(ChevronDownIcon, { className: "size-4" }) })] }));
 }
 export { NativeSelect };

package/dist/components/ui/navigation-menu.d.ts

@@ -156,6 +156,13 @@ declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemP
  * group is open before they enter it. The chevron rotates on the open state
  * rather than on a timer, which is the only motion here: something happened and
  * the reader can see that it did.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. The groups sit beside
+ * each other along the list with a `gap-1`, so a band on one trigger is a press aimed
+ * at its neighbour, which is condition 1 of the three in `DESIGN.md` failing. The cost
+ * is that the bar is 44 tall on touch rather than 36, and a navigation bar that a
+ * finger has to hit is the last thing that should still be 36. See The coarse-pointer
+ * floor.
  */
 declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
 /** The group of links a trigger opens. */

package/dist/components/ui/navigation-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/navigation-menu.js

@@ -47,9 +47,16 @@ function NavigationMenuItem({ className, ...props }) {
  * group is open before they enter it. The chevron rotates on the open state
  * rather than on a timer, which is the only motion here: something happened and
  * the reader can see that it did.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. The groups sit beside
+ * each other along the list with a `gap-1`, so a band on one trigger is a press aimed
+ * at its neighbour, which is condition 1 of the three in `DESIGN.md` failing. The cost
+ * is that the bar is 44 tall on touch rather than 36, and a navigation bar that a
+ * finger has to hit is the last thing that should still be 36. See The coarse-pointer
+ * floor.
  */
 function NavigationMenuTrigger({ className, children, ...props }) {
-    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn('text-foreground group inline-flex h-9 items-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[popup-open]:bg-accent/60 data-[popup-open]:text-accent-foreground', className), ...props, children: [children, _jsx(NavigationMenuIcon, { children: _jsx(ChevronDownIcon, { className: "size-4 transition-transform duration-base ease-out group-data-[popup-open]:rotate-180" }) })] }));
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn('text-foreground group inline-flex h-9 items-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[popup-open]:bg-accent/60 data-[popup-open]:text-accent-foreground', 'pointer-coarse:h-11', className), ...props, children: [children, _jsx(NavigationMenuIcon, { children: _jsx(ChevronDownIcon, { className: "size-4 transition-transform duration-base ease-out group-data-[popup-open]:rotate-180" }) })] }));
 }
 /** The group of links a trigger opens. */
 function NavigationMenuContent({ className, ...props }) {

package/dist/components/ui/nested-tabs.d.ts

@@ -0,0 +1,188 @@
+/**
+ * One panel on the inner axis of a section, and the panel it holds.
+ *
+ * The axis is nested rather than parallel because the inner axis belongs to the
+ * section it sits in: a reader who has chosen a section and then an inner panel is
+ * in one place, and the two are announced as two axes inside it rather than as two
+ * sets of tabs on a page.
+ */
+export type NestedTabPanel = {
+    /** The panel's stable key. */
+    value: string;
+    /** The tab's visible name. */
+    label: React.ReactNode;
+    /** The panel's own content. */
+    content?: React.ReactNode;
+};
+/**
+ * One section on the outer axis, and the inner axis inside it.
+ *
+ * `panels` is required and may be empty, because a section with no inner axis is a
+ * real shape: it is a page-level switch between subjects where one of them has
+ * nothing to subdivide, and a type that required an inner axis would force that
+ * caller to invent one. An empty `panels` draws the section as a plain panel and no
+ * inner tab list at all, which is the honest drawing rather than an empty strip of
+ * tabs.
+ */
+export type NestedTabSection = {
+    /** The section's stable key. */
+    value: string;
+    /** The tab's visible name. */
+    label: React.ReactNode;
+    /** One line under the section's name, for a reader who has arrived at it. */
+    description?: React.ReactNode;
+    /** The inner axis, in the order a reader should meet it. */
+    panels?: readonly NestedTabPanel[];
+    /**
+     * The inner panel shown when the reader first arrives at this section.
+     *
+     * Optional and defaulted to the first panel rather than required, because the
+     * ordinary case is the first panel and a caller who has to write it is a caller
+     * writing the same value twice. The cost of the default is that a caller who
+     * reorders `panels` has changed what a reader sees on arrival, which is the same
+     * property `Tabs` has and is not this Component's to fix.
+     */
+    defaultPanel?: string;
+};
+/**
+ * The props a NestedTabs accepts.
+ *
+ * Two axes, two controlled values and two callbacks, and no state of its own beyond
+ * what it has to hold to make the two agree. The reason there is no combined value
+ * is that the two axes change for different reasons and at different times: a reader
+ * who changes the inner panel has not chosen a different section, and a Component
+ * that reported the pair as one thing would call that a section change and reset a
+ * rail for a reader who only moved a tab.
+ */
+export interface NestedTabsProps {
+    /**
+     * The sections, in the order a reader should meet them.
+     *
+     * Required, and the order is a claim rather than a layout: these are peer views of
+     * one subject, which is what makes them tabs and not steps. A caller with a
+     * *sequence* here wants `Tabs` for a single axis and `FormWizard` for the other,
+     * and a nested tab list whose sections must be visited in order is a wizard with
+     * the gating left out.
+     */
+    sections: readonly NestedTabSection[];
+    /**
+     * The section being shown.
+     *
+     * Controlled and required rather than defaulted, for the reason every axis in this
+     * package is: the caller owns where the reader is, because the caller's own
+     * navigation, its address and its analytics all need to know, and a Component that
+     * kept its own copy would be a second source of truth about a position.
+     */
+    value: string;
+    /** Called when the reader moves to another section. */
+    onValueChange: (value: string) => void;
+    /**
+     * The inner panel being shown, within the current section.
+     *
+     * Controlled and required on the same terms as `value`, and required even though a
+     * section may have no panels because the answer has to be about the section the
+     * reader is in rather than about the page: a single `panel` prop that the
+     * Component reset whenever the section changed would silently discard a reader's
+     * choice of inner panel every time they came back to a section, and a control that
+     * forgets is worse than one that never offered the choice. Pass the current
+     * section's `defaultPanel` when the caller has none.
+     */
+    panel: string;
+    /** Called when the reader moves to another inner panel. */
+    onPanelChange: (value: string) => void;
+    /**
+     * The accessible name of the outer axis.
+     *
+     * Required, and the subject's noun rather than this Component's: a page with two
+     * nested tab sets is a page where a reader cannot tell which one they are in, and
+     * a tab list with no name is announced as "tab list" and nothing else.
+     */
+    label: string;
+    /**
+     * The accessible name of the inner axis.
+     *
+     * Required, and required even where a section has no panels, because the name is
+     * the difference between a reader being told "General, tab 1 of 3" and being told
+     * "tab 1 of 3". The word is the caller's, and it is usually the section's own noun
+     * followed by what the axis divides: "Deployment, files".
+     */
+    panelLabel: string;
+    /**
+     * The words shown where a section's inner axis would be, for a section that has
+     * no panels.
+     *
+     * Optional rather than required, because a section with no inner axis draws its own
+     * content and a section that needs a line saying so passes one; the omission is
+     * not a gap, it is the section having nothing to say.
+     */
+    fallback?: React.ReactNode;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * Two tab axes, one inside the other, with a roving tab stop each.
+ *
+ * **The whole cost of this Component is two tab stops that look like one.** Both
+ * axes draw `TabsList`, both are a single Tab stop, both respond to the arrow keys,
+ * and they sit on the same screen a few centimetres apart. A reader who tabs onto
+ * the outer axis, presses the down arrow and lands in what looks like the same kind
+ * of control has to work out from the announcement which axis they are on, and there
+ * is no visual cue that tells them: two identically drawn tab lists are two
+ * identically drawn tab lists. So both axes are named, and the names are the whole
+ * mitigation. That is an honest cost rather than a solved problem, and a caller who
+ * finds it confusing in a particular page is being told the truth about their page,
+ * not about this Component.
+ *
+ * **The inner axis moves; the outer axis does not. That is the rule everything else
+ * follows from.** Changing the inner panel is a reader refining what they are
+ * looking at within a subject they have already chosen, so the outer value is
+ * untouched: no callback fires, no rail moves, and a reader who is on "Deployment,
+ * files" and switches to "logs" is still on Deployment. The alternative, where the
+ * outer axis follows the inner one, is what a naive composition of two `Tabs` roots
+ * produces when a caller puts the inner list outside the outer panel, and it is
+ * wrong in a way a reader cannot correct: the section they are in changes under
+ * them, so the panel they chose is no longer the panel they are reading.
+ *
+ * **Coming back to a section restores the panel they were on, and that is why
+ * `panel` is a single controlled value rather than one per section.** A Component
+ * that remembered a panel per section would need a record keyed by section, which is
+ * a second piece of state the caller cannot see and cannot put in an address. Here
+ * the caller holds one `panel` value and it survives a trip to another section and
+ * back, because nothing in this module resets it. The cost is real and stated: if
+ * the caller changes `panel` while the reader is on a different section, the value
+ * belongs to the section they are on and not the one they left, so a caller driving
+ * both axes from one store has to keep them in step. That is one value they already
+ * hold, not a new one.
+ *
+ * **A section with no panels draws no inner axis at all.** An empty tab list is a
+ * row of nothing that a reader tabs onto and cannot move within, and a section whose
+ * content does not subdivide should look like a section that does not subdivide.
+ * `panels` is therefore optional and an empty array is a real shape, which is the
+ * reason this is not a type that requires at least one panel: a caller with one
+ * subject that happens to have no sub-views would otherwise invent a panel to
+ * satisfy it.
+ *
+ * **`Tabs` is composed twice and redrawn nowhere.** Both axes are the same
+ * Component with the same keyboard model, the same roving tab stop and the same
+ * announcement behaviour, and a second implementation of a tab axis inside this
+ * module would be a third place for the same rule to disagree in. The composition is
+ * the outer `Tabs` with the inner one inside its panel, so the inner axis inherits
+ * the outer one's DOM position and the two nest the way the reader's understanding
+ * nests.
+ *
+ * **The two axes are announced as two axes, which is the accessibility half of the
+ * cost above.** `label` names the outer list and `panelLabel` names the inner one,
+ * both through `aria-label` on each `TabsList`, so the reader is told which axis
+ * every arrow key and every Tab is currently about. That is the mitigation and it is
+ * a mitigation rather than a fix: two names in sequence do not make two identical
+ * shapes distinguishable at a glance for a reader scanning rather than listening.
+ *
+ * **It is a client Component**, because both axes move after the reader acts, and
+ * because every one of its value props is a function the caller hands it, which is a
+ * client-to-client boundary wherever it is written. What that costs is the price of
+ * every client control: a server Component may render one section with its panel
+ * already chosen, and what it may not do is let the reader move on either axis.
+ */
+declare function NestedTabs({ sections, value, onValueChange, panel, onPanelChange, label, panelLabel, fallback, className, }: NestedTabsProps): import("react").JSX.Element;
+export { NestedTabs };
+//# sourceMappingURL=nested-tabs.d.ts.map

package/dist/components/ui/nested-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nested-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/nested-tabs.tsx"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,aAAa,EACb,KAAK,EACL,aAAa,EACb,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,+BAsEjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}