@ngrok/mantle 0.76.11 → 0.78.0

package/dist/selectable-list.d.ts

@@ -0,0 +1,725 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { i as WithInputType, r as WithAutoComplete } from "./types-C19IR7jf.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/selectable-list/selectable-list.d.ts
+/**
+ * A single selectable row in a {@link SelectableList}. The list is data-driven:
+ * map your domain objects into these options once, and the list owns filtering,
+ * selection, and (optionally) virtualization. Item *rendering* stays composable —
+ * pass a render-prop child to a viewport to draw your own layout.
+ *
+ * A `label` may be any ReactNode; when it isn't a plain string, `labelText` is
+ * required so the default filter has text to match.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * ```ts
+ * const option: SelectableListOption = {
+ *   value: "key_123",
+ *   label: "Onboarding key",
+ *   description: "sk-…4f2a",
+ * };
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // A rich label pairs with labelText (the filter's match target).
+ * const option: SelectableListOption = {
+ *   value: "key_123",
+ *   label: (
+ *     <>
+ *       <KeyIcon /> Onboarding key
+ *     </>
+ *   ),
+ *   labelText: "Onboarding key",
+ * };
+ * ```
+ */
+type SelectableListOption = {
+  /** Stable, unique selection value. This is what flows through `value` / `onValueChange`. */
+  value: string;
+  /** Optional de-emphasized sub-line under the title in the default row (e.g. a masked identifier). */
+  description?: ReactNode;
+  /** When `true`, the row renders dimmed and cannot be toggled or selected by "select all". */
+  disabled?: boolean;
+} & ({
+  /**
+   * Plain-text title — rendered in the default row and, as the checkbox's
+   * `<label>`, its accessible name. Also what the default filter matches
+   * (override that with `labelText`).
+   */
+  label: string;
+  /** Optional plain-text override for what the default filter matches. */
+  labelText?: string;
+} | {
+  /**
+   * A rich title (any ReactNode). Keep readable text inside — the rendered
+   * content is the checkbox's accessible name.
+   */
+  label: ReactNode;
+  /** The plain-text form of the label. Required for a rich label so the default filter has text to match. */
+  labelText: string;
+});
+/**
+ * The plain-text form of an option's label: `labelText` when provided,
+ * otherwise the `label` itself when it is a string. This is what the default
+ * filter matches; reuse it in a custom `filter` predicate to keep label
+ * matching consistent while adding your own criteria. The option type requires
+ * `labelText` whenever `label` isn't a string, so the empty-string fallback
+ * only guards untyped callers.
+ *
+ * @example
+ * ```ts
+ * optionLabelText({ value: "a", label: "Onboarding key" }); // → "Onboarding key"
+ * optionLabelText({ value: "b", label: <em>prod</em>, labelText: "prod" }); // → "prod"
+ * ```
+ */
+declare function optionLabelText(option: SelectableListOption): string;
+/**
+ * Case-insensitive substring filter over each option's plain text (see
+ * {@link optionLabelText}: `labelText`, or a string `label`). Returns the input
+ * untouched for an empty/whitespace query so the common "no filter" path does no
+ * work. Pure — safe to unit test and to call from `useMemo`.
+ *
+ * @example
+ * ```ts
+ * filterSelectableOptions(
+ *   [{ value: "a", label: "Onboarding Key" }, { value: "b", label: "prod" }],
+ *   "prod",
+ * ); // → [{ value: "b", label: "prod" }]
+ * ```
+ */
+declare function filterSelectableOptions(options: readonly SelectableListOption[], query: string): readonly SelectableListOption[];
+/**
+ * Add `value` to `values` if absent, or remove it if present. Returns a new
+ * array (never mutates) so it composes cleanly with controlled state setters.
+ *
+ * @example
+ * ```ts
+ * toggleSelectionValue(["a"], "b"); // → ["a", "b"]
+ * toggleSelectionValue(["a", "b"], "a"); // → ["b"]
+ * ```
+ */
+declare function toggleSelectionValue(values: readonly string[], value: string): string[];
+/**
+ * Summarize how much of a set of options is selected, ignoring disabled options
+ * (they can't be selected by "select all"). Feeds straight into
+ * {@link selectAllChecked} to drive a tri-state header checkbox.
+ *
+ * @example
+ * ```ts
+ * summarizeSelection(
+ *   [{ value: "a", label: "A" }, { value: "b", label: "B" }],
+ *   new Set(["a"]),
+ * ); // → { allSelected: false, someSelected: true }
+ * ```
+ */
+declare function summarizeSelection(options: readonly SelectableListOption[], selected: ReadonlySet<string>): {
+  allSelected: boolean;
+  someSelected: boolean;
+};
+/**
+ * Props for `SelectableList.Root`. Extends `<div>` props (minus `onChange`,
+ * which is replaced by `onValueChange`) with the option set and the
+ * controlled/uncontrolled selection state.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * ```tsx
+ * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+ *   <SelectableList.Viewport aria-label="Access keys" />
+ * </SelectableList.Root>
+ * ```
+ */
+type SelectableListRootProps = Omit<ComponentProps<"div">, "onChange"> & {
+  /** The full set of selectable rows. Map your domain data into these once. */
+  options: readonly SelectableListOption[];
+  /** Controlled selected values. Pair with `onValueChange`. */
+  value?: readonly string[];
+  /** Initial selected values for the uncontrolled case. */
+  defaultValue?: readonly string[];
+  /** Called with the next selection whenever it changes. */
+  onValueChange?: (values: string[]) => void;
+  /** Controlled filter query. Pair with `onQueryChange`. */
+  query?: string;
+  /** Initial filter query for the uncontrolled case. */
+  defaultQuery?: string;
+  /** Called with the next query whenever it changes (e.g. typing in `SelectableList.Filter`). */
+  onQueryChange?: (query: string) => void;
+  /**
+   * Custom filter predicate, called per option with the raw query; return
+   * `true` to keep the option. Defaults to a trimmed, case-insensitive
+   * substring match over each option's plain text (`labelText`, or a string
+   * `label`).
+   */
+  filter?: (option: SelectableListOption, query: string) => boolean;
+};
+/**
+ * Props for `SelectableList.Item`. Extends `<div>` props with the option
+ * `value` the row represents; selection and disabled state are read from the
+ * list by that value (`options[].disabled` is the single source of truth).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * ```tsx
+ * <SelectableList.Item value={option.value}>
+ *   <SelectableList.ItemTitle>{option.label}</SelectableList.ItemTitle>
+ *   <SelectableList.ItemDescription>{option.description}</SelectableList.ItemDescription>
+ * </SelectableList.Item>
+ * ```
+ */
+type SelectableListItemProps = Omit<ComponentProps<"div">, "children" | "id"> & {
+  /** The option's selection value. Selection state is read from, and toggled in, the list. */
+  value: string;
+  /**
+   * Item content — typically `SelectableList.ItemTitle` over a
+   * `SelectableList.ItemDescription`, or any layout you like. It fills the row's
+   * content `gridcell`; nested interactive content (links, buttons) is allowed.
+   */
+  children: ReactNode;
+};
+/**
+ * Props for `SelectableList.Viewport`. Extends `<div>` props (the scroll
+ * viewport) with an optional render-prop child for custom row layouts.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * ```tsx
+ * <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+ * ```
+ */
+type SelectableListViewportProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * Optional render-prop for custom row content, called per filtered option.
+   * Return a `SelectableList.Item` with your own layout, or `null` to skip
+   * the row. Non-element returns are dropped at runtime, so the type requires
+   * an element (or `null`) rather than any `ReactNode`. Defaults to a
+   * title + description row built from the option.
+   */
+  children?: (option: SelectableListOption) => ReactElement | null;
+};
+/**
+ * Props for `SelectableList.VirtualViewport` — the `Viewport` props plus the
+ * virtualizer knobs.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * ```tsx
+ * <SelectableList.VirtualViewport aria-label="Access keys" className="max-h-80" estimateItemHeight={44} />
+ * ```
+ */
+type SelectableListVirtualViewportProps = SelectableListViewportProps & {
+  /** Estimated item height in px, used to seed the virtualizer before items are measured. */
+  estimateItemHeight?: number;
+  /** Rows rendered beyond the visible window on each side. */
+  overscan?: number;
+};
+/**
+ * A filterable, multi-select **grid** of checkbox rows — the inline
+ * (non-popover) counterpart to `MultiSelect`/`Combobox`. Map your data into
+ * `options` once; the list owns filtering, selection, and (optionally)
+ * virtualization. Each row is an APG grid `role="row"` (`aria-selected`) whose
+ * cells hold a real `Checkbox` and a `Choice`-laid-out title + description — the
+ * pattern that lets a selectable row carry a real control and nested interactive
+ * content. Non-virtualized by default; swap `Viewport` → `VirtualViewport` (same
+ * props) for windowing. Built on the shared `list` primitive.
+ *
+ * Keyboard: the grid is a single tab stop — `Arrow`/`Home`/`End` move an active
+ * row (tracked via `aria-activedescendant`, so navigation works across the full
+ * option set even when virtualized) and `Space`/`Enter` toggles it.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @example
+ * Composition:
+ * ```
+ * SelectableList.Root
+ * ├── SelectableList.Filter
+ * ├── SelectableList.SelectAll
+ * ├── SelectableList.Viewport            (or .VirtualViewport)
+ * │   └── SelectableList.Item            (optional render-prop; auto-rendered by default)
+ * │       ├── SelectableList.ItemTitle
+ * │       └── SelectableList.ItemDescription
+ * └── SelectableList.Empty
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const options = accessKeys.map((key) => ({
+ *   value: key.id,
+ *   label: key.name,
+ *   description: key.maskedToken,
+ * }));
+ *
+ * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+ *   <SelectableList.Filter placeholder="Filter access keys…" />
+ *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+ *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+ *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+ * </SelectableList.Root>
+ * ```
+ */
+declare const SelectableList: {
+  /**
+   * Root: owns selection + filter state and the derived filtered options.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<SelectableListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * Optional filter/search box (mantle `Input` + magnifying-glass icon).
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly Filter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
+    children?: ReactNode | undefined;
+  } & import("react").RefAttributes<HTMLInputElement>, "ref">, "children" | "defaultValue" | "onChange" | "type" | "value"> & import("react").RefAttributes<HTMLInputElement>>;
+  /**
+   * Optional tri-state "select all" header over the filtered options.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly SelectAll: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  /**
+   * The scrollable grid of rows (non-virtualized). Give it an `aria-label`;
+   * pass a render-prop child for a custom row layout, or omit it for the default.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly Viewport: import("react").ForwardRefExoticComponent<Omit<SelectableListViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * The windowed grid of rows — same surface as `Viewport`, for long lists.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.VirtualViewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly VirtualViewport: import("react").ForwardRefExoticComponent<Omit<SelectableListVirtualViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A selectable grid row for custom viewport rendering. Reads its selection
+   * and disabled state from the list by `value`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80">
+   *     {(option) => (
+   *       <SelectableList.Item value={option.value}>
+   *         <SelectableList.ItemTitle>{option.label}</SelectableList.ItemTitle>
+   *         <SelectableList.ItemDescription>{option.description}</SelectableList.ItemDescription>
+   *       </SelectableList.Item>
+   *     )}
+   *   </SelectableList.Viewport>
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly Item: import("react").ForwardRefExoticComponent<Omit<SelectableListItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * Emphasized title (`Choice.Label`) for a `SelectableList.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80">
+   *     {(option) => (
+   *       <SelectableList.Item value={option.value}>
+   *         <SelectableList.ItemTitle>{option.label}</SelectableList.ItemTitle>
+   *         <SelectableList.ItemDescription>{option.description}</SelectableList.ItemDescription>
+   *       </SelectableList.Item>
+   *     )}
+   *   </SelectableList.Viewport>
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<Omit<{
+    key?: import("react").Key | null | undefined;
+    ref?: import("react").Ref<HTMLLabelElement> | undefined;
+    children?: ReactNode | undefined;
+    dangerouslySetInnerHTML?: {
+      __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLLabelElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLLabelElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLLabelElement, Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLLabelElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLLabelElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLLabelElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLLabelElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLLabelElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLLabelElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLLabelElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLLabelElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLLabelElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLLabelElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLLabelElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLLabelElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLLabelElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLLabelElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLLabelElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLabelElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLLabelElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLLabelElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: ("false" | "true" | boolean) | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: ("false" | "true" | boolean) | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: ("false" | "true" | boolean) | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: ("false" | "true" | boolean) | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: ("false" | "true" | boolean) | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: ("false" | "true" | boolean) | undefined;
+    "aria-multiline"?: ("false" | "true" | boolean) | undefined;
+    "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: ("false" | "true" | boolean) | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: ("false" | "true" | boolean) | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: ("false" | "true" | boolean) | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: ("false" | "true" | boolean) | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: ("false" | "true" | boolean) | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: ("false" | "true" | boolean) | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    form?: string | undefined;
+  }, "ref"> & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  /**
+   * De-emphasized sub-line (`Choice.Description`) for a `SelectableList.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80">
+   *     {(option) => (
+   *       <SelectableList.Item value={option.value}>
+   *         <SelectableList.ItemTitle>{option.label}</SelectableList.ItemTitle>
+   *         <SelectableList.ItemDescription>{option.description}</SelectableList.ItemDescription>
+   *       </SelectableList.Item>
+   *     )}
+   *   </SelectableList.Viewport>
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly ItemDescription: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  /**
+   * Shown when the filter matches no options — a polite `role="status"` live
+   * region, so the empty state is announced as the filter narrows.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
+   *
+   * @example
+   * ```tsx
+   * <SelectableList.Root options={options} value={selected} onValueChange={setSelected}>
+   *   <SelectableList.Filter placeholder="Filter access keys…" />
+   *   <SelectableList.SelectAll>Select all</SelectableList.SelectAll>
+   *   <SelectableList.Viewport aria-label="Access keys" className="max-h-80" />
+   *   <SelectableList.Empty>No access keys found.</SelectableList.Empty>
+   * </SelectableList.Root>
+   * ```
+   */
+  readonly Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { SelectableList, type SelectableListItemProps, type SelectableListOption, type SelectableListRootProps, type SelectableListViewportProps, type SelectableListVirtualViewportProps, filterSelectableOptions, optionLabelText, summarizeSelection, toggleSelectionValue };