@ngrok/mantle 0.79.3 → 0.81.0

package/dist/selectable-list.d.ts

@@ -1,6 +1,5 @@
-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 { t as Choice } from "./choice-BNRQXszu.js";
+import { t as Input } from "./input-BuYDU6CF.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/selectable-list/selectable-list.d.ts
 /**
@@ -157,6 +156,76 @@ type SelectableListRootProps = Omit<ComponentProps<"div">, "onChange"> & {
    */
   filter?: (option: SelectableListOption, query: string) => boolean;
 };
+/**
+ * Root of a `SelectableList` — a filterable, multi-select **grid** of checkbox
+ * rows. Owns selection state (controlled via `value`/`onValueChange` or
+ * uncontrolled via `defaultValue`), the filter query (likewise controlled via
+ * `query`/`onQueryChange` or uncontrolled via `defaultQuery`), and the derived
+ * filtered options (a case-insensitive `label` substring match by default, or
+ * your own `filter` predicate), and shares them with the parts below it.
+ *
+ * Compose it with `SelectableList.Filter` (optional search box),
+ * `SelectableList.SelectAll` (optional tri-state header), a viewport
+ * (`SelectableList.Viewport`, or the windowed `SelectableList.VirtualViewport`),
+ * and `SelectableList.Empty` (shown when the filter matches nothing).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
+ *
+ * @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 Root: ({ className, defaultQuery, defaultValue, filter, onQueryChange, onValueChange, options, query: queryProp, ref, value, ...props }: SelectableListRootProps) => import("react").JSX.Element;
+/**
+ * The filter/search box for a `SelectableList`. Renders the mantle `Input` with
+ * a leading magnifying-glass icon and drives the list's filter query (a
+ * case-insensitive substring match over each option's plain text — `labelText`,
+ * or a string `label`). Optional — omit it for a non-filterable list.
+ *
+ * @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>
+ * ```
+ */
+declare const Filter: ({ "aria-label": ariaLabel, ref, ...props }: Omit<ComponentProps<typeof Input>, "value" | "defaultValue" | "onChange" | "type" | "children">) => import("react").JSX.Element;
+/**
+ * A tri-state "select all" header for a `SelectableList`. Reflects the selection
+ * of the **currently filtered** options — checked when all are selected,
+ * indeterminate when only some are, unchecked when none are — and toggling it
+ * selects or clears that filtered set. Optional. Children are the visible label.
+ *
+ * @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>
+ * ```
+ */
+declare const SelectAll: ({ children, className, ref, ...props }: Omit<ComponentProps<"label">, "htmlFor">) => import("react").JSX.Element;
 /**
  * Props for `SelectableList.Item`. Extends `<div>` props with the option
  * `value` the row represents; selection and disabled state are read from the
@@ -182,6 +251,88 @@ type SelectableListItemProps = Omit<ComponentProps<"div">, "children" | "id"> &
    */
   children: ReactNode;
 };
+/**
+ * A single selectable grid row. Renders a `role="row"` (via the `list`
+ * primitive) laid out with `Choice` — a `role="gridcell"` holding a real
+ * `Checkbox`, and a `role="gridcell"` holding the title + description. The whole
+ * row is click-to-toggle: the enclosing grid forwards a bare click anywhere on
+ * the row to activation, while clicks on the checkbox, the title label, or any
+ * nested interactive content are left to those controls (no double-toggle).
+ * Selection and disabled state are read from the list by `value`.
+ *
+ * Render it from a viewport's render-prop child for a custom row layout; the
+ * default row (title + description) uses it under the hood.
+ *
+ * @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>
+ * ```
+ */
+declare const Item: ({ children, className, ref, value, ...props }: SelectableListItemProps) => import("react").JSX.Element;
+/**
+ * The emphasized title of a `SelectableList.Item`, rendered as `Choice.Label` —
+ * a real `<label>` wired to the row's checkbox, so clicking it toggles the row
+ * and it supplies the checkbox's accessible name.
+ *
+ * @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>
+ * ```
+ */
+declare const ItemTitle: (props: ComponentProps<typeof Choice.Label>) => import("react").JSX.Element;
+/**
+ * The de-emphasized sub-line of a `SelectableList.Item`, rendered as
+ * `Choice.Description` — wired to the row's checkbox via `aria-describedby`
+ * (never a second label).
+ *
+ * @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>
+ * ```
+ */
+declare const ItemDescription: (props: ComponentProps<typeof Choice.Description>) => import("react").JSX.Element;
 /**
  * Props for `SelectableList.Viewport`. Extends `<div>` props (the scroll
  * viewport) with an optional render-prop child for custom row layouts.
@@ -203,6 +354,28 @@ type SelectableListViewportProps = Omit<ComponentProps<"div">, "children"> & {
    */
   children?: (option: SelectableListOption) => ReactElement | null;
 };
+/**
+ * The scrollable body of a `SelectableList`: a `role="grid"` of `role="row"`
+ * checkbox rows inside the bordered, rounded `bg-popover` viewport. Renders
+ * **every** filtered row — the non-virtualized default; for long lists, swap in
+ * `SelectableList.VirtualViewport`. Renders nothing when the filter matches
+ * nothing — pair with `SelectableList.Empty`. Provide an `aria-label` (or
+ * `aria-labelledby`) and **bound the height** (`max-h-*`, `h-*`, or
+ * `min-h-0 flex-1`).
+ *
+ * @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>
+ * ```
+ */
+declare const Viewport: ({ children, ref, ...props }: SelectableListViewportProps) => import("react").JSX.Element | null;
 /**
  * Props for `SelectableList.VirtualViewport` — the `Viewport` props plus the
  * virtualizer knobs.
@@ -220,6 +393,46 @@ type SelectableListVirtualViewportProps = SelectableListViewportProps & {
   /** Rows rendered beyond the visible window on each side. */
   overscan?: number;
 };
+/**
+ * The windowed counterpart to `SelectableList.Viewport`: renders only the
+ * visible slice of filtered rows via `@tanstack/react-virtual`, sharing the
+ * same grid semantics and row layout. Authored identically to `Viewport` — same
+ * `aria-label`, same optional render-prop — so opting into virtualization never
+ * changes the call site. **Bound the height** so the virtualizer has a viewport.
+ *
+ * @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>
+ * ```
+ */
+declare const VirtualViewport: ({ children, ref, ...props }: SelectableListVirtualViewportProps) => import("react").JSX.Element | null;
+/**
+ * Shown in place of the viewport when the active filter matches no options.
+ * Renders its children (e.g. "No results found.") in muted, centered text.
+ * It is a polite `role="status"` live region that stays mounted (visually
+ * hidden while there are matches), so screen-reader users hear the message
+ * when their filter empties the list instead of the grid silently vanishing.
+ *
+ * @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>
+ * ```
+ */
+declare const Empty: ({ children, className, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 /**
  * A filterable, multi-select **grid** of checkbox rows — the inline
  * (non-popover) counterpart to `MultiSelect`/`Combobox`. Map your data into
@@ -281,7 +494,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<SelectableListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * Optional filter/search box (mantle `Input` + magnifying-glass icon).
    *
@@ -297,9 +510,7 @@ declare const SelectableList: {
    * </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>>;
+  readonly Filter: typeof Filter;
   /**
    * Optional tri-state "select all" header over the filtered options.
    *
@@ -315,7 +526,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly SelectAll: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  readonly SelectAll: typeof SelectAll;
   /**
    * 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.
@@ -332,7 +543,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly Viewport: import("react").ForwardRefExoticComponent<Omit<SelectableListViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Viewport: typeof Viewport;
   /**
    * The windowed grid of rows — same surface as `Viewport`, for long lists.
    *
@@ -348,7 +559,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly VirtualViewport: import("react").ForwardRefExoticComponent<Omit<SelectableListVirtualViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly VirtualViewport: typeof VirtualViewport;
   /**
    * A selectable grid row for custom viewport rendering. Reads its selection
    * and disabled state from the list by `value`.
@@ -372,7 +583,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<SelectableListItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * Emphasized title (`Choice.Label`) for a `SelectableList.Item`.
    *
@@ -395,291 +606,7 @@ declare const SelectableList: {
    * </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>>;
+  readonly ItemTitle: typeof ItemTitle;
   /**
    * De-emphasized sub-line (`Choice.Description`) for a `SelectableList.Item`.
    *
@@ -702,7 +629,7 @@ declare const SelectableList: {
    * </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>>;
+  readonly ItemDescription: typeof ItemDescription;
   /**
    * Shown when the filter matches no options — a polite `role="status"` live
    * region, so the empty state is announced as the filter narrows.
@@ -719,7 +646,7 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Empty: typeof Empty;
 };
 //#endregion
 export { SelectableList, type SelectableListItemProps, type SelectableListOption, type SelectableListRootProps, type SelectableListViewportProps, type SelectableListVirtualViewportProps, filterSelectableOptions, optionLabelText, summarizeSelection, toggleSelectionValue };