@ngrok/mantle 0.77.0 → 0.78.0

package/dist/selectable-list.d.ts

@@ -1,8 +1,7 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { o as WithValidation } from "./validation-xyX_6kph.js";
-import { i as WithInputType, r as WithAutoComplete } from "./types-CTam1uIW.js";
+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:
@@ -13,7 +12,7 @@ import { ComponentProps, ReactElement, ReactNode } from "react";
  * 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/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * ```ts
@@ -39,8 +38,11 @@ import { ComponentProps, ReactElement, ReactNode } from "react";
  * ```
  */
 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". */
+  /** 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;
 } & ({
   /**
@@ -48,14 +50,16 @@ type SelectableListOption = {
    * `<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. */
+  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. */
+  label: ReactNode;
+  /** The plain-text form of the label. Required for a rich label so the default filter has text to match. */
   labelText: string;
 });
 /**
@@ -121,7 +125,7 @@ declare function summarizeSelection(options: readonly SelectableListOption[], se
  * which is replaced by `onValueChange`) with the option set and the
  * controlled/uncontrolled selection state.
  *
- * @see https://mantle.ngrok.com/components/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * ```tsx
@@ -131,12 +135,19 @@ declare function summarizeSelection(options: readonly SelectableListOption[], se
  * ```
  */
 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`). */
+  /** 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
@@ -151,7 +162,7 @@ type SelectableListRootProps = Omit<ComponentProps<"div">, "onChange"> & {
  * `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/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * ```tsx
@@ -162,7 +173,8 @@ type SelectableListRootProps = Omit<ComponentProps<"div">, "onChange"> & {
  * ```
  */
 type SelectableListItemProps = Omit<ComponentProps<"div">, "children" | "id"> & {
-  /** The option's selection value. Selection state is read from, and toggled in, the list. */value: string;
+  /** 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
@@ -174,7 +186,7 @@ type SelectableListItemProps = Omit<ComponentProps<"div">, "children" | "id"> &
  * 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/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * ```tsx
@@ -195,7 +207,7 @@ type SelectableListViewportProps = Omit<ComponentProps<"div">, "children"> & {
  * Props for `SelectableList.VirtualViewport` — the `Viewport` props plus the
  * virtualizer knobs.
  *
- * @see https://mantle.ngrok.com/components/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * ```tsx
@@ -203,7 +215,9 @@ type SelectableListViewportProps = Omit<ComponentProps<"div">, "children"> & {
  * ```
  */
 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. */
+  /** 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;
 };
 /**
@@ -220,7 +234,7 @@ type SelectableListVirtualViewportProps = SelectableListViewportProps & {
  * 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/selectable-list
+ * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
  * Composition:
@@ -255,7 +269,7 @@ declare const SelectableList: {
   /**
    * Root: owns selection + filter state and the derived filtered options.
    *
-   * @see https://mantle.ngrok.com/components/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -271,7 +285,7 @@ declare const SelectableList: {
   /**
    * Optional filter/search box (mantle `Input` + magnifying-glass icon).
    *
-   * @see https://mantle.ngrok.com/components/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -283,13 +297,13 @@ declare const SelectableList: {
    * </SelectableList.Root>
    * ```
    */
-  readonly Filter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
+  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" | "value" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
+  } & 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/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -306,7 +320,7 @@ declare const SelectableList: {
    * 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/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -322,7 +336,7 @@ declare const SelectableList: {
   /**
    * The windowed grid of rows — same surface as `Viewport`, for long lists.
    *
-   * @see https://mantle.ngrok.com/components/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -339,7 +353,7 @@ declare const SelectableList: {
    * 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/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -362,7 +376,7 @@ declare const SelectableList: {
   /**
    * Emphasized title (`Choice.Label`) for a `SelectableList.Item`.
    *
-   * @see https://mantle.ngrok.com/components/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -382,122 +396,12 @@ declare const SelectableList: {
    * ```
    */
   readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<Omit<{
-    children?: ReactNode;
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLLabelElement> | undefined;
-    ref?: import("react").Ref<HTMLLabelElement> | undefined;
     key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
+    ref?: import("react").Ref<HTMLLabelElement> | undefined;
+    children?: ReactNode | undefined;
     dangerouslySetInnerHTML?: {
       __html: string | TrustedHTML;
-    } | undefined | undefined;
+    } | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLLabelElement> | undefined;
@@ -616,6 +520,7 @@ declare const SelectableList: {
     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;
@@ -665,11 +570,120 @@ declare const SelectableList: {
     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/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx
@@ -693,7 +707,7 @@ declare const SelectableList: {
    * 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/selectable-list
+   * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
    * ```tsx

package/dist/selectable-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{n as t,t as n}from"./checkbox-Apow0ipK.js";import{t as r}from"./choice-D6S38dPs.js";import{n as i,t as a}from"./input-B3TS9yAP.js";import{n as o,r as s,t as c}from"./virtual-PBNiHjMK.js";import{cloneElement as l,createContext as u,forwardRef as d,isValidElement as f,useCallback as p,useContext as m,useId as h,useMemo as g,useState as _}from"react";import v from"tiny-invariant";import{jsx as y,jsxs as b}from"react/jsx-runtime";import{MagnifyingGlassIcon as x}from"@phosphor-icons/react/MagnifyingGlass";function S(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function C(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>S(e).toLowerCase().includes(n))}function w(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function T(e,t){let n=0,r=0;for(let i of e)i.disabled||(n+=1,t.has(i.value)&&(r+=1));return n===0?{allSelected:!1,someSelected:!1}:{allSelected:r===n,someSelected:r>0}}const E=u(null);function D(e){let t=m(E);return v(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const O=[],k=d(({className:t,defaultQuery:n,defaultValue:r,filter:i,onQueryChange:a,onValueChange:o,options:s,query:c,value:l,...u},d)=>{let f=h(),m=l!=null,[v,b]=_(r??O),x=m?l:v,S=c!=null,[T,D]=_(n??``),k=S?c:T,A=p(e=>{m||b(e),o?.(e)},[m,o]),j=p(e=>{S||D(e),a?.(e)},[S,a]),M=g(()=>new Set(x),[x]),N=g(()=>new Set(s.filter(e=>e.disabled).map(e=>e.value)),[s]),P=g(()=>i==null?C(s,k):s.filter(e=>i(e,k)),[s,k,i]),F=g(()=>({listId:f,filteredOptions:P,query:k,setQuery:j,selectedValues:x,selectedSet:M,disabledSet:N,toggle:e=>{N.has(e)||A(w(x,e))},setSelection:A}),[f,P,k,j,x,M,N,A]);return y(E.Provider,{value:F,children:y(`div`,{ref:d,"data-slot":`selectable-list`,className:e(`flex w-full flex-col gap-3`,t),...u})})});k.displayName=`SelectableListRoot`;const A=d(({"aria-label":e=`Filter`,...t},n)=>{let{query:r,setQuery:o}=D(`Filter`);return b(a,{ref:n,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":e,value:r,onChange:e=>o(e.target.value),...t,children:[y(x,{}),y(i,{})]})});A.displayName=`SelectableListFilter`;const j=d(({children:r,className:i,...a},o)=>{let{filteredOptions:s,selectedValues:c,selectedSet:l,setSelection:u}=D(`SelectAll`),d=h(),{allSelected:f,someSelected:p}=T(s,l),m=t({allSelected:f,someSelected:p}),g=s.some(e=>!e.disabled),_=()=>{let e=s.filter(e=>!e.disabled).map(e=>e.value);if(f){let t=new Set(e);u(c.filter(e=>!t.has(e)));return}u([...new Set([...c,...e])])};return b(`label`,{ref:o,htmlFor:d,"data-slot":`selectable-list-select-all`,className:e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,i),...a,children:[y(n,{id:d,checked:m,onChange:_,disabled:!g}),r]})});j.displayName=`SelectableListSelectAll`;function M(e,t){return`${e}-control-${encodeURIComponent(t)}`}const N=d(({children:t,className:i,value:a,...s},c)=>{let{listId:l,selectedSet:u,disabledSet:d,toggle:f}=D(`Item`),p=M(l,a),m=u.has(a),h=d.has(a);return y(o,{ref:c,asChild:!0,selected:m,disabled:h,className:e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,i),...s,"data-slot":`selectable-list-item`,"data-value":a,children:b(r.Root,{id:p,disabled:h,children:[y(r.Indicator,{role:`gridcell`,children:y(n,{checked:m,onChange:()=>f(a),tabIndex:-1})}),y(r.Content,{role:`gridcell`,children:t})]})})});N.displayName=`SelectableListItem`;const P=d((e,t)=>y(r.Label,{ref:t,"data-slot":`selectable-list-item-title`,...e}));P.displayName=`SelectableListItemTitle`;const F=d((e,t)=>y(r.Description,{ref:t,"data-slot":`selectable-list-item-description`,...e}));F.displayName=`SelectableListItemDescription`;function I(e){return b(N,{value:e.value,children:[y(P,{children:e.label}),e.description!=null&&y(F,{children:e.description})]})}function L(e,t){let n=[],r=[];for(let i of e){let e=t(i);f(e)&&(n.push(l(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function R(e,t){let{filteredOptions:n,listId:r,toggle:i}=D(e),a=t??I,{items:o,options:s}=g(()=>L(n,a),[n,a]),c=p(e=>{let t=s[e];t!=null&&i(t.value)},[s,i]),l=p(e=>{let t=s[e];return t==null?``:M(r,t.value)},[s,r]),u=p(e=>s[e]?.disabled===!0,[s]);return{isEmpty:o.length===0,isItemDisabled:u,onActivate:c,itemId:l,items:o}}const z=d(({children:e,...t},n)=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:c}=R(`Viewport`,e);return r?null:y(s,{ref:n,"data-slot":`selectable-list-viewport`,semantics:`grid`,...t,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:c})});z.displayName=`SelectableListViewport`;const B=d(({children:e,...t},n)=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:s}=R(`VirtualViewport`,e);return r?null:y(c,{ref:n,"data-slot":`selectable-list-viewport`,semantics:`grid`,...t,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:s})});B.displayName=`SelectableListVirtualViewport`;const V=d(({children:t,className:n,...r},i)=>{let{filteredOptions:a}=D(`Empty`),o=a.length===0;return y(`div`,{ref:i,"data-slot":`selectable-list-empty`,role:`status`,className:e(!o&&`sr-only`,o&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,n),...r,children:o?t:null})});V.displayName=`SelectableListEmpty`;const H={Root:k,Filter:A,SelectAll:j,Viewport:z,VirtualViewport:B,Item:N,ItemTitle:P,ItemDescription:F,Empty:V};export{H as SelectableList,C as filterSelectableOptions,S as optionLabelText,T as summarizeSelection,w as toggleSelectionValue};
+import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./checkbox-DJ2xl7Rc.js";import{t as r}from"./choice-DOdyNzFC.js";import{n as i,t as a}from"./input-Ct1YOqSy.js";import{n as o,r as s,t as c}from"./virtual-DZMBu7Ch.js";import{cloneElement as l,createContext as u,forwardRef as d,isValidElement as f,useCallback as p,useContext as m,useId as h,useMemo as g,useState as _}from"react";import v from"tiny-invariant";import{jsx as y,jsxs as b}from"react/jsx-runtime";import{MagnifyingGlassIcon as x}from"@phosphor-icons/react/MagnifyingGlass";function S(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function C(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>S(e).toLowerCase().includes(n))}function w(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function T(e,t){let n=0,r=0;for(let i of e)i.disabled||(n+=1,t.has(i.value)&&(r+=1));return n===0?{allSelected:!1,someSelected:!1}:{allSelected:r===n,someSelected:r>0}}const E=u(null);function D(e){let t=m(E);return v(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const O=[],k=d(({className:t,defaultQuery:n,defaultValue:r,filter:i,onQueryChange:a,onValueChange:o,options:s,query:c,value:l,...u},d)=>{let f=h(),m=l!=null,[v,b]=_(r??O),x=m?l:v,S=c!=null,[T,D]=_(n??``),k=S?c:T,A=p(e=>{m||b(e),o?.(e)},[m,o]),j=p(e=>{S||D(e),a?.(e)},[S,a]),M=g(()=>new Set(x),[x]),N=g(()=>new Set(s.filter(e=>e.disabled).map(e=>e.value)),[s]),P=g(()=>i==null?C(s,k):s.filter(e=>i(e,k)),[s,k,i]),F=g(()=>({listId:f,filteredOptions:P,query:k,setQuery:j,selectedValues:x,selectedSet:M,disabledSet:N,toggle:e=>{N.has(e)||A(w(x,e))},setSelection:A}),[f,P,k,j,x,M,N,A]);return y(E.Provider,{value:F,children:y(`div`,{ref:d,"data-slot":`selectable-list`,className:e(`flex w-full flex-col gap-3`,t),...u})})});k.displayName=`SelectableListRoot`;const A=d(({"aria-label":e=`Filter`,...t},n)=>{let{query:r,setQuery:o}=D(`Filter`);return b(a,{ref:n,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":e,value:r,onChange:e=>o(e.target.value),...t,children:[y(x,{}),y(i,{})]})});A.displayName=`SelectableListFilter`;const j=d(({children:r,className:i,...a},o)=>{let{filteredOptions:s,selectedValues:c,selectedSet:l,setSelection:u}=D(`SelectAll`),d=h(),{allSelected:f,someSelected:p}=T(s,l),m=t({allSelected:f,someSelected:p}),g=s.some(e=>!e.disabled),_=()=>{let e=s.filter(e=>!e.disabled).map(e=>e.value);if(f){let t=new Set(e);u(c.filter(e=>!t.has(e)));return}u([...new Set([...c,...e])])};return b(`label`,{ref:o,htmlFor:d,"data-slot":`selectable-list-select-all`,className:e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,i),...a,children:[y(n,{id:d,checked:m,onChange:_,disabled:!g}),r]})});j.displayName=`SelectableListSelectAll`;function M(e,t){return`${e}-control-${encodeURIComponent(t)}`}const N=d(({children:t,className:i,value:a,...s},c)=>{let{listId:l,selectedSet:u,disabledSet:d,toggle:f}=D(`Item`),p=M(l,a),m=u.has(a),h=d.has(a);return y(o,{ref:c,asChild:!0,selected:m,disabled:h,className:e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,i),...s,"data-slot":`selectable-list-item`,"data-value":a,children:b(r.Root,{id:p,disabled:h,children:[y(r.Indicator,{role:`gridcell`,children:y(n,{checked:m,onChange:()=>f(a),tabIndex:-1})}),y(r.Content,{role:`gridcell`,children:t})]})})});N.displayName=`SelectableListItem`;const P=d((e,t)=>y(r.Label,{ref:t,"data-slot":`selectable-list-item-title`,...e}));P.displayName=`SelectableListItemTitle`;const F=d((e,t)=>y(r.Description,{ref:t,"data-slot":`selectable-list-item-description`,...e}));F.displayName=`SelectableListItemDescription`;function I(e){return b(N,{value:e.value,children:[y(P,{children:e.label}),e.description!=null&&y(F,{children:e.description})]})}function L(e,t){let n=[],r=[];for(let i of e){let e=t(i);f(e)&&(n.push(l(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function R(e,t){let{filteredOptions:n,listId:r,toggle:i}=D(e),a=t??I,{items:o,options:s}=g(()=>L(n,a),[n,a]),c=p(e=>{let t=s[e];t!=null&&i(t.value)},[s,i]),l=p(e=>{let t=s[e];return t==null?``:M(r,t.value)},[s,r]),u=p(e=>s[e]?.disabled===!0,[s]);return{isEmpty:o.length===0,isItemDisabled:u,onActivate:c,itemId:l,items:o}}const z=d(({children:e,...t},n)=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:c}=R(`Viewport`,e);return r?null:y(s,{ref:n,"data-slot":`selectable-list-viewport`,semantics:`grid`,...t,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:c})});z.displayName=`SelectableListViewport`;const B=d(({children:e,...t},n)=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:s}=R(`VirtualViewport`,e);return r?null:y(c,{ref:n,"data-slot":`selectable-list-viewport`,semantics:`grid`,...t,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:s})});B.displayName=`SelectableListVirtualViewport`;const V=d(({children:t,className:n,...r},i)=>{let{filteredOptions:a}=D(`Empty`),o=a.length===0;return y(`div`,{ref:i,"data-slot":`selectable-list-empty`,role:`status`,className:e(!o&&`sr-only`,o&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,n),...r,children:o?t:null})});V.displayName=`SelectableListEmpty`;const H={Root:k,Filter:A,SelectAll:j,Viewport:z,VirtualViewport:B,Item:N,ItemTitle:P,ItemDescription:F,Empty:V};export{H as SelectableList,C as filterSelectableOptions,S as optionLabelText,T as summarizeSelection,w as toggleSelectionValue};

package/dist/{separator-CqohKk4z.js → separator-kBnnv3Cw.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c={orientation:`horizontal`},l=({className:n,children:r,asChild:i,...o})=>{let l=i?t:`div`;return a(s.Provider,{value:c,children:a(l,{"data-slot":`horizontal-separator-group`,"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&>*:not([data-separator])]:shrink-0`,n),...o,children:r})})};l.displayName=`HorizontalSeparatorGroup`;const u=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...u},f)=>{let p=n?t:`div`,m=i(s).orientation??(d(c)?c:`horizontal`),h=l?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return a(p,{"data-slot":`separator`,className:e(`separator`,`bg-separator`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...h,ref:f,...n?{children:r}:{},...u})});u.displayName=`Separator`;function d(e){return typeof e==`string`&&o.includes(e)}export{u as n,l as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c={orientation:`horizontal`},l=({className:n,children:r,asChild:i,...o})=>{let l=i?t:`div`;return a(s.Provider,{value:c,children:a(l,{"data-slot":`horizontal-separator-group`,"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&>*:not([data-separator])]:shrink-0`,n),...o,children:r})})};l.displayName=`HorizontalSeparatorGroup`;const u=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...u},f)=>{let p=n?t:`div`,m=i(s).orientation??(d(c)?c:`horizontal`),h=l?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return a(p,{"data-slot":`separator`,className:e(`separator`,`bg-separator`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...h,ref:f,...n?{children:r}:{},...u})});u.displayName=`Separator`;function d(e){return typeof e==`string`&&o.includes(e)}export{u as n,l as t};

package/dist/separator.d.ts

@@ -1,43 +1,12 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { ComponentProps, HTMLAttributes } from "react";
-
 //#region src/components/separator/separator.d.ts
 declare const orientations: readonly ["horizontal", "vertical"];
 type Orientation = (typeof orientations)[number];
-/**
- * A container to layout a group of horizontal separators and other children.
- * Overrides all children `Separator`s to be `orientation="horizontal"`.
- *
- * @see https://mantle.ngrok.com/components/separator
- *
- * @example
- * ```tsx
- * <HorizontalSeparatorGroup>
- *   <Separator />
- *   <h3>ngrok mantle</h3>
- *   <Separator />
- * </HorizontalSeparatorGroup>
- *
- * <HorizontalSeparatorGroup>
- *   <h3>ngrok mantle</h3>
- *   <Separator />
- * </HorizontalSeparatorGroup>
- *
- * <HorizontalSeparatorGroup>
- *   <Separator />
- *   <h3>ngrok mantle</h3>
- * </HorizontalSeparatorGroup>
- * ```
- */
-declare const HorizontalSeparatorGroup: {
-  ({
-    className,
-    children,
-    asChild,
-    ...props
-  }: HTMLAttributes<HTMLDivElement> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
-};
+declare function HorizontalSeparatorGroup({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild): import("react").JSX.Element;
+declare namespace HorizontalSeparatorGroup {
+  var displayName: string;
+}
 type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
   /**
    * Either `horizontal` or `vertical`.
@@ -62,7 +31,7 @@ type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
  * your own dividers with `bg-separator` / `border-separator` / `divide-separator`
  * so they stay consistent with separators across the system.
  *
- * @see https://mantle.ngrok.com/components/separator
+ * @see https://mantle.ngrok.com/components/structure/separator
  *
  * @example
  * ```tsx

package/dist/separator.js

@@ -1 +1 @@
-import{n as e,t}from"./separator-CqohKk4z.js";export{t as HorizontalSeparatorGroup,e as Separator};
+import{n as e,t}from"./separator-kBnnv3Cw.js";export{t as HorizontalSeparatorGroup,e as Separator};