@skdx/react 0.26.0 → 0.28.0

package/dist/multi-select/MultiSelectClear.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { MultiSelectClearProps } from './types.js';
+/**
+ * Optional button that empties a {@link MultiSelect} in one press — the whole
+ * selection *and* the draft text — and hands focus back to
+ * {@link MultiSelectInput}. Without it the only way out of
+ * a large selection is removing every tag one at a time.
+ *
+ * Rendered beside the Input rather than inside a tag, and deliberately *not*
+ * inside {@link MultiSelectTagList}, whose roving tab stop belongs to the
+ * tags: this is its own tab stop, a plain `<button type="button">` so it never
+ * submits the surrounding form.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly` — neither may empty a selection. The empty case matters more
+ * than it looks: a "clear" that stays live over an empty field is a control
+ * that does nothing, which a screen-reader user cannot tell from one that is
+ * broken.
+ *
+ * Give it an `aria-label`: a "✕" glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectClear aria-label="Clear selection">✕</MultiSelectClear>
+ * ```
+ */
+export declare const MultiSelectClear: React.ForwardRefExoticComponent<Omit<MultiSelectClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/multi-select/MultiSelectContent.d.cts

@@ -1,27 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectContentProps } from './types.cjs';
 /**
- * The popup shell of a {@link MultiSelect}, positioned against the input via
- * floating-ui (see {@link MultiSelectContentProps}). Renders a plain `<div>`
- * with `data-state`, `data-side` and `data-align`, and writes the four
- * measurement custom properties `--skdx-multi-select-available-width`,
- * `--skdx-multi-select-available-height`, `--skdx-multi-select-trigger-width`
- * and `--skdx-multi-select-transform-origin` onto itself after each
- * reposition — so a panel whose height must stop at the viewport edge is CSS,
- * not JavaScript.
- *
- * Carries **no ARIA role**: the listbox is {@link MultiSelectList}, one level
- * in, leaving room for a "3 of 8 selected" header or a footer that is not an
- * option. Prevents `mousedown` from stealing focus off the input, which is
- * what lets the popup stay open across a run of selections.
- *
- * Closes on Escape (leaving focus on the input, which never lost it) or on an
- * outside interaction — pointer-down outside or focus moving outside, each
- * reported to `onPointerDownOutside`/`onFocusOutside` and, just before them and
- * with the same event, to `onInteractOutside`. Any of those (or
- * `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open. The input
- * counts as inside: clicking or tabbing back into it is not an outside
- * interaction.
+ * Popup shell: positioned against input via floating-ui, writes measurement custom properties
+ * (`--skdx-multi-select-available-width`, etc.) for CSS-based viewport clamping.
+ * No ARIA role (listbox is {@link MultiSelectList}, one level in). Prevents mousedown from
+ * stealing focus so popup stays open during selections. Closes on Escape or outside interaction.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectContent.d.ts

@@ -1,27 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectContentProps } from './types.js';
 /**
- * The popup shell of a {@link MultiSelect}, positioned against the input via
- * floating-ui (see {@link MultiSelectContentProps}). Renders a plain `<div>`
- * with `data-state`, `data-side` and `data-align`, and writes the four
- * measurement custom properties `--skdx-multi-select-available-width`,
- * `--skdx-multi-select-available-height`, `--skdx-multi-select-trigger-width`
- * and `--skdx-multi-select-transform-origin` onto itself after each
- * reposition — so a panel whose height must stop at the viewport edge is CSS,
- * not JavaScript.
- *
- * Carries **no ARIA role**: the listbox is {@link MultiSelectList}, one level
- * in, leaving room for a "3 of 8 selected" header or a footer that is not an
- * option. Prevents `mousedown` from stealing focus off the input, which is
- * what lets the popup stay open across a run of selections.
- *
- * Closes on Escape (leaving focus on the input, which never lost it) or on an
- * outside interaction — pointer-down outside or focus moving outside, each
- * reported to `onPointerDownOutside`/`onFocusOutside` and, just before them and
- * with the same event, to `onInteractOutside`. Any of those (or
- * `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open. The input
- * counts as inside: clicking or tabbing back into it is not an outside
- * interaction.
+ * Popup shell: positioned against input via floating-ui, writes measurement custom properties
+ * (`--skdx-multi-select-available-width`, etc.) for CSS-based viewport clamping.
+ * No ARIA role (listbox is {@link MultiSelectList}, one level in). Prevents mousedown from
+ * stealing focus so popup stays open during selections. Closes on Escape or outside interaction.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectEmpty.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { MultiSelectEmptyProps } from './types.cjs';
+/**
+ * Fallback when no `MultiSelectItem`s are rendered. Outside listbox so message never announced as option. `aria-live="polite"`.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectContent>
+ *   {matches.length === 0 ? (
+ *     <MultiSelectEmpty>No results</MultiSelectEmpty>
+ *   ) : (
+ *     <MultiSelectList aria-label="Skills">
+ *       {matches.map((skill) => <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>)}
+ *     </MultiSelectList>
+ *   )}
+ * </MultiSelectContent>
+ * ```
+ */
+export declare const MultiSelectEmpty: React.ForwardRefExoticComponent<Omit<MultiSelectEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectEmpty.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { MultiSelectEmptyProps } from './types.js';
+/**
+ * Fallback when no `MultiSelectItem`s are rendered. Outside listbox so message never announced as option. `aria-live="polite"`.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectContent>
+ *   {matches.length === 0 ? (
+ *     <MultiSelectEmpty>No results</MultiSelectEmpty>
+ *   ) : (
+ *     <MultiSelectList aria-label="Skills">
+ *       {matches.map((skill) => <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>)}
+ *     </MultiSelectList>
+ *   )}
+ * </MultiSelectContent>
+ * ```
+ */
+export declare const MultiSelectEmpty: React.ForwardRefExoticComponent<Omit<MultiSelectEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectGroup.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { MultiSelectGroupContextValue, MultiSelectGroupProps } from './types.cjs';
+export declare const MultiSelectGroupProvider: {
+    (props: MultiSelectGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMultiSelectGroupContext: (consumerName: string) => MultiSelectGroupContextValue;
+/**
+ * Groups related {@link MultiSelectItem}s under `MultiSelectGroupLabel` — automatic wiring with `aria-labelledby`.
+ *
+ * Critical for filtering listboxes where groups reorder/empty on every keystroke — named group is the only structure screen readers can hold on to.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectGroup>
+ *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
+ *   <MultiSelectItem value="react">React</MultiSelectItem>
+ * </MultiSelectGroup>
+ * ```
+ */
+export declare const MultiSelectGroup: React.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectGroup.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { MultiSelectGroupContextValue, MultiSelectGroupProps } from './types.js';
+export declare const MultiSelectGroupProvider: {
+    (props: MultiSelectGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMultiSelectGroupContext: (consumerName: string) => MultiSelectGroupContextValue;
+/**
+ * Groups related {@link MultiSelectItem}s under `MultiSelectGroupLabel` — automatic wiring with `aria-labelledby`.
+ *
+ * Critical for filtering listboxes where groups reorder/empty on every keystroke — named group is the only structure screen readers can hold on to.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectGroup>
+ *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
+ *   <MultiSelectItem value="react">React</MultiSelectItem>
+ * </MultiSelectGroup>
+ * ```
+ */
+export declare const MultiSelectGroup: React.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectGroupLabel.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { MultiSelectGroupLabelProps } from './types.cjs';
+/**
+ * Heading naming a {@link MultiSelectGroup} — carries id its group points `aria-labelledby` at.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectGroup>
+ *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
+ *   <MultiSelectItem value="react">React</MultiSelectItem>
+ * </MultiSelectGroup>
+ * ```
+ */
+export declare const MultiSelectGroupLabel: React.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectGroupLabel.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { MultiSelectGroupLabelProps } from './types.js';
+/**
+ * Heading naming a {@link MultiSelectGroup} — carries id its group points `aria-labelledby` at.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectGroup>
+ *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
+ *   <MultiSelectItem value="react">React</MultiSelectItem>
+ * </MultiSelectGroup>
+ * ```
+ */
+export declare const MultiSelectGroupLabel: React.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectInput.d.cts

@@ -15,6 +15,21 @@ import type { MultiSelectInputProps } from './types.cjs';
  * to expect; with text in the field it does the ordinary thing and deletes a
  * character.
  *
+ * The selection-extending keys, all of them **only while the popup is open**:
+ *
+ * | Key | Effect |
+ * | --- | --- |
+ * | Shift+Arrow Down / Up | moves the highlight one option *and* toggles it — nothing at all when the highlight cannot move, which is also what the cap produces |
+ * | Shift+Space | selects every option between the last one toggled on its own and the highlighted one |
+ * | Control+Shift+Home / End | selects every option from the highlight to that end, inclusive, without moving the highlight |
+ * | Control+A / Command+A | selects everything, and clears it again once everything is selected — only while `allowSelectAll` |
+ * | Home / End | moves the highlight to the first / last option |
+ *
+ * Closed, none of them is intercepted: Home and End move the caret, Space
+ * types a space, and Control+A/Command+A selects the draft text — because
+ * this really is an editable text field and swallowing its own keys is how a
+ * keyboard user gets stuck in it.
+ *
  * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example

package/dist/multi-select/MultiSelectInput.d.ts

@@ -15,6 +15,21 @@ import type { MultiSelectInputProps } from './types.js';
  * to expect; with text in the field it does the ordinary thing and deletes a
  * character.
  *
+ * The selection-extending keys, all of them **only while the popup is open**:
+ *
+ * | Key | Effect |
+ * | --- | --- |
+ * | Shift+Arrow Down / Up | moves the highlight one option *and* toggles it — nothing at all when the highlight cannot move, which is also what the cap produces |
+ * | Shift+Space | selects every option between the last one toggled on its own and the highlighted one |
+ * | Control+Shift+Home / End | selects every option from the highlight to that end, inclusive, without moving the highlight |
+ * | Control+A / Command+A | selects everything, and clears it again once everything is selected — only while `allowSelectAll` |
+ * | Home / End | moves the highlight to the first / last option |
+ *
+ * Closed, none of them is intercepted: Home and End move the caret, Space
+ * types a space, and Control+A/Command+A selects the draft text — because
+ * this really is an editable text field and swallowing its own keys is how a
+ * keyboard user gets stuck in it.
+ *
  * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example

package/dist/multi-select/MultiSelectItem.d.cts

@@ -2,21 +2,17 @@ import * as React from 'react';
 import type { MultiSelectItemProps } from './types.cjs';
 /**
  * One option inside {@link MultiSelectList}. Renders a `<div role="option">`
- * with `aria-selected`, `data-value`, `data-state="selected" | "unselected"`,
- * `data-highlighted` for virtual focus — the attribute to style the keyboard
- * cursor from, since real DOM focus stays on the input — and `data-disabled`.
+ * with `aria-selected`, `data-value`, `data-state`, `data-highlighted` for
+ * virtual focus (real DOM focus stays on the input), and `data-disabled`.
  *
- * Clicking or pressing Enter **toggles** it and leaves the popup open (unless
- * the root sets `closeOnSelect`), so picking five options costs five clicks.
- * The draft text is cleared on every selection: it was the search that found
- * this option, and keeping it would leave the list filtered down to the one
- * item just picked.
+ * Clicking or pressing Enter toggles it and leaves the popup open (unless
+ * `closeOnSelect`), so picking five options costs five clicks. The draft
+ * text is cleared on every selection, since keeping it would leave the list
+ * filtered to the one item just picked.
  *
- * Once the root's `max` is reached, still-unselected options become
- * `aria-disabled` and stop responding rather than silently swallowing clicks —
- * an option that looks available and does nothing is worse than one that says
- * it is unavailable. Already-selected options stay live, so the way out of a
- * full selection is always visible.
+ * Once `max` is reached, unselected options become `aria-disabled` and stop
+ * responding rather than silently swallowing clicks. Already-selected
+ * options stay live, so the way out of a full selection is always visible.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectItem.d.ts

@@ -2,21 +2,17 @@ import * as React from 'react';
 import type { MultiSelectItemProps } from './types.js';
 /**
  * One option inside {@link MultiSelectList}. Renders a `<div role="option">`
- * with `aria-selected`, `data-value`, `data-state="selected" | "unselected"`,
- * `data-highlighted` for virtual focus — the attribute to style the keyboard
- * cursor from, since real DOM focus stays on the input — and `data-disabled`.
+ * with `aria-selected`, `data-value`, `data-state`, `data-highlighted` for
+ * virtual focus (real DOM focus stays on the input), and `data-disabled`.
  *
- * Clicking or pressing Enter **toggles** it and leaves the popup open (unless
- * the root sets `closeOnSelect`), so picking five options costs five clicks.
- * The draft text is cleared on every selection: it was the search that found
- * this option, and keeping it would leave the list filtered down to the one
- * item just picked.
+ * Clicking or pressing Enter toggles it and leaves the popup open (unless
+ * `closeOnSelect`), so picking five options costs five clicks. The draft
+ * text is cleared on every selection, since keeping it would leave the list
+ * filtered to the one item just picked.
  *
- * Once the root's `max` is reached, still-unselected options become
- * `aria-disabled` and stop responding rather than silently swallowing clicks —
- * an option that looks available and does nothing is worse than one that says
- * it is unavailable. Already-selected options stay live, so the way out of a
- * full selection is always visible.
+ * Once `max` is reached, unselected options become `aria-disabled` and stop
+ * responding rather than silently swallowing clicks. Already-selected
+ * options stay live, so the way out of a full selection is always visible.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectList.d.cts

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import type { MultiSelectListProps } from './types.cjs';
 /**
- * The `role="listbox"` holding a {@link MultiSelect}'s options, marked
- * `aria-multiselectable="true"` so assistive technology announces it as a list
- * you take several things from rather than one. Carries the id the input's
- * `aria-controls` points at, so it must render whenever the popup does.
+ * The `role="listbox"` holding {@link MultiSelect} options, marked with
+ * `aria-multiselectable` to announce a multi-select list. Carries the id the
+ * input's `aria-controls` points at, so must render when the popup does.
  *
- * The attribute is set by presence rather than value: `aria-multiselectable="false"`
- * is still read as multi-selectable by some screen readers, so it is never
- * written.
+ * Attribute set by presence only: some screen readers misread `"false"`, so
+ * the attribute is never written as false.
  *
- * `role="listbox"` has no implicit accessible name — pass `aria-label` or
- * `aria-labelledby` saying what the options are.
+ * `role="listbox"` has no implicit accessible name—provide `aria-label` or
+ * `aria-labelledby`.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectList.d.ts

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import type { MultiSelectListProps } from './types.js';
 /**
- * The `role="listbox"` holding a {@link MultiSelect}'s options, marked
- * `aria-multiselectable="true"` so assistive technology announces it as a list
- * you take several things from rather than one. Carries the id the input's
- * `aria-controls` points at, so it must render whenever the popup does.
+ * The `role="listbox"` holding {@link MultiSelect} options, marked with
+ * `aria-multiselectable` to announce a multi-select list. Carries the id the
+ * input's `aria-controls` points at, so must render when the popup does.
  *
- * The attribute is set by presence rather than value: `aria-multiselectable="false"`
- * is still read as multi-selectable by some screen readers, so it is never
- * written.
+ * Attribute set by presence only: some screen readers misread `"false"`, so
+ * the attribute is never written as false.
  *
- * `role="listbox"` has no implicit accessible name — pass `aria-label` or
- * `aria-labelledby` saying what the options are.
+ * `role="listbox"` has no implicit accessible name—provide `aria-label` or
+ * `aria-labelledby`.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectPortal.d.cts

@@ -1,11 +1,8 @@
 import type { MultiSelectPortalProps } from './types.cjs';
 /**
- * Teleports its children (typically {@link MultiSelectContent}) to
- * `document.body` — or to `container`, via `PortalProps` — while the
- * {@link MultiSelect}'s popup is open. Worth having here in particular: the
- * field wrapping the tags and the input is usually a fixed-height box with
- * `overflow: hidden`, which is precisely what would clip the option list.
- * Renders nothing while closed unless `forceMount` is set.
+ * Teleports children to `document.body` (or custom `container`) while the
+ * {@link MultiSelect}'s popup is open. Escapes `overflow: hidden` on the field
+ * wrapper. Renders nothing while closed unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectPortal.d.ts

@@ -1,11 +1,8 @@
 import type { MultiSelectPortalProps } from './types.js';
 /**
- * Teleports its children (typically {@link MultiSelectContent}) to
- * `document.body` — or to `container`, via `PortalProps` — while the
- * {@link MultiSelect}'s popup is open. Worth having here in particular: the
- * field wrapping the tags and the input is usually a fixed-height box with
- * `overflow: hidden`, which is precisely what would clip the option list.
- * Renders nothing while closed unless `forceMount` is set.
+ * Teleports children to `document.body` (or custom `container`) while the
+ * {@link MultiSelect}'s popup is open. Escapes `overflow: hidden` on the field
+ * wrapper. Renders nothing while closed unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTag.d.cts

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { MultiSelectTagProps } from './types.cjs';
 /**
- * One selected value, rendered as a removable {@link Tag} inside
- * {@link MultiSelectTagList}. Takes only a `value` — the index the roving tab
- * stop is keyed on is read from the root's selection, so the tags can be
- * rendered from any list without the consumer keeping a parallel index.
+ * Removable selected value inside `MultiSelectTagList`. Takes only `value` — index keyed from root's selection, not a parallel consumer array.
  *
- * Everything about removal is inherited from `Tag`: `Delete`/`Backspace` on a
- * focused tag removes it, and focus moves to the neighbouring tag *before* the
- * removal lands, so clearing three tags takes three key presses instead of
- * three presses and three trips back through the document. `value` also names
- * the {@link MultiSelectTagRemove} button, so a strip of them announces
- * "Remove React", "Remove TypeScript" rather than a row of identical
- * "Remove"s.
+ * Delete/Backspace on a focused tag removes it; focus moves to the neighbouring tag *before* removal lands. `value` names the remove button so strip announces "Remove React", "Remove TypeScript".
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTag.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { MultiSelectTagProps } from './types.js';
 /**
- * One selected value, rendered as a removable {@link Tag} inside
- * {@link MultiSelectTagList}. Takes only a `value` — the index the roving tab
- * stop is keyed on is read from the root's selection, so the tags can be
- * rendered from any list without the consumer keeping a parallel index.
+ * Removable selected value inside `MultiSelectTagList`. Takes only `value` — index keyed from root's selection, not a parallel consumer array.
  *
- * Everything about removal is inherited from `Tag`: `Delete`/`Backspace` on a
- * focused tag removes it, and focus moves to the neighbouring tag *before* the
- * removal lands, so clearing three tags takes three key presses instead of
- * three presses and three trips back through the document. `value` also names
- * the {@link MultiSelectTagRemove} button, so a strip of them announces
- * "Remove React", "Remove TypeScript" rather than a row of identical
- * "Remove"s.
+ * Delete/Backspace on a focused tag removes it; focus moves to the neighbouring tag *before* removal lands. `value` names the remove button so strip announces "Remove React", "Remove TypeScript".
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTagList.d.cts

@@ -1,19 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectTagListProps } from './types.cjs';
 /**
- * The strip of tags standing for a {@link MultiSelect}'s current selection.
- *
- * This *is* a {@link TagGroup} — not a copy of one. That buys the whole
- * roving-tabindex behaviour for free: the entire strip is a single Tab stop,
- * the arrow keys (plus Home/End) move between tags, and removing a tag hands
- * focus to its neighbour rather than dropping it on `<body>`. Reimplementing
- * that here would have been the second copy of the hardest keyboard code in
- * the package.
- *
- * Renders `<div role="list">`, so it needs an `aria-label` saying what the
- * tags are — `role="list"` has no implicit accessible name. `disabled` comes
- * from the `MultiSelect` root (its `disabled` *or* its `readOnly`, since
- * neither may remove a tag) rather than being settable here.
+ * Tag strip for current selection. *Is* a {@link TagGroup} for roving-tabindex
+ * behaviour (single Tab stop, arrow keys move between tags, focus stays on
+ * neighbor when tag is removed). Needs an `aria-label`; `disabled` comes from
+ * the root.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTagList.d.ts

@@ -1,19 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectTagListProps } from './types.js';
 /**
- * The strip of tags standing for a {@link MultiSelect}'s current selection.
- *
- * This *is* a {@link TagGroup} — not a copy of one. That buys the whole
- * roving-tabindex behaviour for free: the entire strip is a single Tab stop,
- * the arrow keys (plus Home/End) move between tags, and removing a tag hands
- * focus to its neighbour rather than dropping it on `<body>`. Reimplementing
- * that here would have been the second copy of the hardest keyboard code in
- * the package.
- *
- * Renders `<div role="list">`, so it needs an `aria-label` saying what the
- * tags are — `role="list"` has no implicit accessible name. `disabled` comes
- * from the `MultiSelect` root (its `disabled` *or* its `readOnly`, since
- * neither may remove a tag) rather than being settable here.
+ * Tag strip for current selection. *Is* a {@link TagGroup} for roving-tabindex
+ * behaviour (single Tab stop, arrow keys move between tags, focus stays on
+ * neighbor when tag is removed). Needs an `aria-label`; `disabled` comes from
+ * the root.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTagRemove.d.cts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectTagRemoveProps } from './types.cjs';
 /**
- * Removes its parent {@link MultiSelectTag}'s value from the selection on
- * click. A {@link TagDelete} under a name that fits the family, so consumers
- * import one family rather than two.
- *
- * Named `Remove <value>` from the tag it sits in, disabled whenever the root
- * is `disabled` or `readOnly`, and deliberately **not** a Tab stop: the tag
- * list has one, and the keyboard path to removal is `Delete`/`Backspace` on
- * the tag itself. Tabbing through every tag *and* every remove button is
- * exactly what the roving tab stop exists to avoid.
+ * Removes its parent {@link MultiSelectTag}'s value on click. Named `Remove
+ * <value>`, disabled when the root is `disabled` or `readOnly`. Not a Tab
+ * stop; removal is via `Delete`/`Backspace` on the tag itself, using a roving
+ * tab stop.
  *
  * @example
  * ```tsx

package/dist/multi-select/MultiSelectTagRemove.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import type { MultiSelectTagRemoveProps } from './types.js';
 /**
- * Removes its parent {@link MultiSelectTag}'s value from the selection on
- * click. A {@link TagDelete} under a name that fits the family, so consumers
- * import one family rather than two.
- *
- * Named `Remove <value>` from the tag it sits in, disabled whenever the root
- * is `disabled` or `readOnly`, and deliberately **not** a Tab stop: the tag
- * list has one, and the keyboard path to removal is `Delete`/`Backspace` on
- * the tag itself. Tabbing through every tag *and* every remove button is
- * exactly what the roving tab stop exists to avoid.
+ * Removes its parent {@link MultiSelectTag}'s value on click. Named `Remove
+ * <value>`, disabled when the root is `disabled` or `readOnly`. Not a Tab
+ * stop; removal is via `Delete`/`Backspace` on the tag itself, using a roving
+ * tab stop.
  *
  * @example
  * ```tsx

package/dist/multi-select/index.d.cts

@@ -1,10 +1,2 @@
 export * from './MultiSelect.cjs';
-export { MultiSelectInput } from './MultiSelectInput.cjs';
-export { MultiSelectTagList } from './MultiSelectTagList.cjs';
-export { MultiSelectTag } from './MultiSelectTag.cjs';
-export { MultiSelectTagRemove } from './MultiSelectTagRemove.cjs';
-export { MultiSelectPortal } from './MultiSelectPortal.cjs';
-export { MultiSelectContent } from './MultiSelectContent.cjs';
-export { MultiSelectList } from './MultiSelectList.cjs';
-export { MultiSelectItem } from './MultiSelectItem.cjs';
-export type { MultiSelectFilter, MultiSelectProps, MultiSelectInputProps, MultiSelectTagListProps, MultiSelectTagProps, MultiSelectTagRemoveProps, MultiSelectPortalProps, MultiSelectContentProps, MultiSelectListProps, MultiSelectItemProps, } from './types.cjs';
+export type { MultiSelectFilter, MultiSelectOption, MultiSelectOptionGroup, MultiSelectOptionOrGroup, MultiSelectValueChangeDetail, MultiSelectProps, MultiSelectHandle, } from './types.cjs';

package/dist/multi-select/index.d.ts

@@ -1,10 +1,2 @@
 export * from './MultiSelect.js';
-export { MultiSelectInput } from './MultiSelectInput.js';
-export { MultiSelectTagList } from './MultiSelectTagList.js';
-export { MultiSelectTag } from './MultiSelectTag.js';
-export { MultiSelectTagRemove } from './MultiSelectTagRemove.js';
-export { MultiSelectPortal } from './MultiSelectPortal.js';
-export { MultiSelectContent } from './MultiSelectContent.js';
-export { MultiSelectList } from './MultiSelectList.js';
-export { MultiSelectItem } from './MultiSelectItem.js';
-export type { MultiSelectFilter, MultiSelectProps, MultiSelectInputProps, MultiSelectTagListProps, MultiSelectTagProps, MultiSelectTagRemoveProps, MultiSelectPortalProps, MultiSelectContentProps, MultiSelectListProps, MultiSelectItemProps, } from './types.js';
+export type { MultiSelectFilter, MultiSelectOption, MultiSelectOptionGroup, MultiSelectOptionOrGroup, MultiSelectValueChangeDetail, MultiSelectProps, MultiSelectHandle, } from './types.js';

package/dist/multi-select/primitives.d.cts

@@ -0,0 +1,42 @@
+/**
+ * Advanced primitives for `MultiSelect` — the parts the recipe composes.
+ *
+ * Reach for these for full manual composition — the same escape hatch as
+ * giving `<MultiSelect>` a hand-composed `MultiSelectInput`/`MultiSelectPortal`.
+ *
+ * @example
+ * ```tsx
+ * import { MultiSelect, MultiSelectContent, MultiSelectInput, MultiSelectItem, MultiSelectList, MultiSelectPortal, MultiSelectTag, MultiSelectTagList, MultiSelectTagRemove } from '@skdx/react/primitives/multi-select';
+ *
+ * <MultiSelect aria-label="Skills">
+ *   <MultiSelectTagList aria-label="Selected skills">
+ *     <MultiSelectTag value="react">
+ *       React
+ *       <MultiSelectTagRemove>×</MultiSelectTagRemove>
+ *     </MultiSelectTag>
+ *   </MultiSelectTagList>
+ *   <MultiSelectInput aria-label="Skills" />
+ *   <MultiSelectPortal>
+ *     <MultiSelectContent>
+ *       <MultiSelectList aria-label="Skills">
+ *         <MultiSelectItem value="react">React</MultiSelectItem>
+ *       </MultiSelectList>
+ *     </MultiSelectContent>
+ *   </MultiSelectPortal>
+ * </MultiSelect>
+ * ```
+ */
+export { MultiSelect } from './MultiSelect.cjs';
+export { MultiSelectInput } from './MultiSelectInput.cjs';
+export { MultiSelectTagList } from './MultiSelectTagList.cjs';
+export { MultiSelectTag } from './MultiSelectTag.cjs';
+export { MultiSelectTagRemove } from './MultiSelectTagRemove.cjs';
+export { MultiSelectClear } from './MultiSelectClear.cjs';
+export { MultiSelectPortal } from './MultiSelectPortal.cjs';
+export { MultiSelectContent } from './MultiSelectContent.cjs';
+export { MultiSelectList } from './MultiSelectList.cjs';
+export { MultiSelectItem } from './MultiSelectItem.cjs';
+export { MultiSelectGroup } from './MultiSelectGroup.cjs';
+export { MultiSelectGroupLabel } from './MultiSelectGroupLabel.cjs';
+export { MultiSelectEmpty } from './MultiSelectEmpty.cjs';
+export type { MultiSelectProps, MultiSelectInputProps, MultiSelectTagListProps, MultiSelectTagProps, MultiSelectTagRemoveProps, MultiSelectClearProps, MultiSelectPortalProps, MultiSelectContentProps, MultiSelectListProps, MultiSelectItemProps, MultiSelectGroupProps, MultiSelectGroupLabelProps, MultiSelectEmptyProps, } from './types.cjs';