@ngrok/mantle 0.76.10 → 0.77.0

package/dist/label.d.ts

@@ -1,69 +1,2 @@
-//#region src/components/label/label.d.ts
-/**
- * A caption for a form control — input, checkbox, radio, switch, select.
- * Renders a native `<label>`. Pair every form control with a `Label` so the
- * control has an accessible name, clicks on the label focus the control, and
- * screen readers announce the field correctly.
- *
- * **When to use**
- * - Every visible form control. Always.
- * - Above or beside an input to describe it ("Email", "API key").
- * - Wrapping a checkbox or radio next to its descriptive text.
- *
- * **When not to use**
- * - For static UI text that isn't labeling a control — use a heading or
- *   plain `<p>`/`<span>`.
- * - As a substitute for `aria-label` on non-`<input>` widgets that don't
- *   support `<label for>` association.
- *
- * **Two ways to associate.** Either wrap the control inside the `<Label>`
- * (implicit association — simplest) or set `htmlFor` to the control's `id`
- * (explicit — required when the control isn't a child).
- *
- * **Disabled state.** Pass `disabled` to render the label in a disabled
- * style. Typically you'll want this to mirror the underlying control's
- * disabled state so the visual treatment stays consistent.
- *
- * **Font weight.** A `Label` automatically gets `font-medium` when it does
- * **not** contain a nested form control (`<input>`, `<textarea>`, `<select>`,
- * `<button>`, or `[contenteditable]`). When the label *does* wrap a control,
- * the auto default is intentionally skipped so the control's own typography
- * isn't bolded — apply `font-medium` to your own caption element (e.g. a
- * `<span>` or `<p>`) inside the label. Override the default at any time by
- * passing a font-weight utility on the `Label` itself, e.g.
- * `<Label className="font-bold">`.
- *
- * @see https://mantle.ngrok.com/components/label
- *
- * @example
- * ```tsx
- * import { Label } from "@ngrok/mantle/label";
- * import { Input } from "@ngrok/mantle/input";
- *
- * // Implicit — control nested inside the label.
- * <Label className="grid gap-1">
- *   <span>Email</span>
- *   <Input type="email" name="email" />
- * </Label>
- *
- * // Explicit — htmlFor matches the control's id.
- * <div className="grid gap-1">
- *   <Label htmlFor="api-key">API key</Label>
- *   <Input id="api-key" name="apiKey" />
- * </div>
- *
- * // Inline label for a checkbox.
- * <Label className="flex items-center gap-2">
- *   <Checkbox name="terms" />
- *   <span>I agree to the terms</span>
- * </Label>
- * ```
- */
-declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-  /**
-   * If set, the label will appear disabled.
-   */
-  disabled?: boolean;
-} & import("react").RefAttributes<HTMLLabelElement>>;
-//#endregion
+import { t as Label } from "./label-PY0qM0G5.js";
 export { Label };

package/dist/list.d.ts

@@ -0,0 +1,337 @@
+import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+
+//#region src/components/list/primitive.d.ts
+/**
+ * ARIA semantics for a {@link Root} / `VirtualRoot` collection and its
+ * {@link Item}s. The element is always a `<div>` — per WAI-ARIA the *role*
+ * carries the semantics, not the tag — so both flavors share one implementation.
+ *
+ * - `"list"` → `<div role="list">` of `<div role="listitem">` rows: a
+ *   non-selecting list of actions/links (e.g. `List`). Native tab
+ *   order, with `ArrowUp` / `ArrowDown` / `Home` / `End` moving real focus
+ *   between the rows' controls (skipping disabled rows).
+ * - `"grid"` → `<div role="grid">` of `<div role="row">` rows carrying
+ *   `aria-selected`, whose children are the `role="gridcell"`s (e.g.
+ *   `SelectableList`): a single tab stop with `aria-activedescendant`
+ *   navigation that works across a virtualized window.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <Root semantics="grid" aria-label="Access keys" onActivate={toggleByIndex}>
+ *   <Item selected>
+ *     <div role="gridcell">Onboarding key</div>
+ *   </Item>
+ * </Root>
+ * ```
+ */
+type ListSemantics = "list" | "grid";
+/** Shared collection semantics, provided by {@link Root} / `VirtualRoot` and read by every {@link Item}. */
+/**
+ * Props for {@link Root} / `VirtualRoot`. Standard `<div>` props (on the scroll
+ * viewport) plus the collection `semantics` and the grid activation callback;
+ * `aria-label` / `aria-labelledby` name the inner collection element, and
+ * `children` are the composed {@link Item}s.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <Root semantics="list" aria-label="Accounts" className="max-h-80">
+ *   <Item>
+ *     <button type="button">Acme Inc</button>
+ *   </Item>
+ * </Root>
+ * ```
+ */
+type ListRootProps$1 = ComponentProps<"div"> & {
+  /** ARIA semantics for the collection and its rows. Defaults to `"list"`. */semantics?: ListSemantics;
+  /**
+   * Called with the active row's index when it is activated under `"grid"`
+   * semantics — by keyboard (`Space` / `Enter`) or by a bare click anywhere on
+   * the row that isn't handled by an interactive descendant (a checkbox, a
+   * label, a nested link/button). Wire it to selection.
+   */
+  onActivate?: (index: number) => void;
+  /**
+   * The DOM id that `aria-activedescendant` resolves to for a given row index.
+   * Defaults to a per-collection row id set on the {@link Item} element. Override
+   * it to reference an element you own (e.g. the row's checkbox) when your row
+   * element can't take that id.
+   */
+  itemId?: (index: number) => string;
+  /**
+   * Whether the row at an index is disabled — skipped by keyboard navigation
+   * and excluded from grid activation. Defaults to reading the composed row
+   * element's `disabled` prop (covering `<Item disabled>`); pass it when
+   * disabled state lives in your data rather than on the row elements (e.g.
+   * `SelectableList` reads it off `options[].disabled`).
+   */
+  isItemDisabled?: (index: number) => boolean;
+};
+/**
+ * Whether a composed row child is disabled — read from the `disabled` prop it
+ * declares (e.g. `<Item disabled>`). The default keyboard-navigation disabled
+ * source (see `ListRootProps["isItemDisabled"]`), derived from the row *elements*
+ * (not the live DOM) so it works for windowed rows that aren't mounted. Safe
+ * over an arbitrary node: non-elements and rows without the prop read as enabled.
+ */
+//#endregion
+//#region src/components/list/virtual.d.ts
+/**
+ * Props for {@link VirtualRoot}. The same surface as the plain `Root` plus the
+ * virtualizer knobs.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <VirtualRoot aria-label="Accounts" className="max-h-80" estimateItemHeight={36} overscan={12}>
+ *   <Item>
+ *     <button type="button">Acme Inc</button>
+ *   </Item>
+ * </VirtualRoot>
+ * ```
+ */
+type VirtualRootProps = ListRootProps$1 & {
+  /** 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. The buffer keeps the active row mounted for `aria-activedescendant`. */
+  overscan?: number;
+};
+/**
+ * The windowed counterpart to `Root`: renders only the visible slice of its
+ * composed `Item` children via `@tanstack/react-virtual`, sharing the plain
+ * shell's chrome, semantics, and — for a grid — `aria-activedescendant`
+ * keyboard navigation. Authored identically to `Root` (you still compose `<Item>`
+ * children), so swapping in virtualization never changes the call site. This
+ * module is the sole importer of `@tanstack/react-virtual`; because the `List`
+ * namespace (and both higher-level list components) re-export `VirtualRoot`,
+ * the dependency ships with every list entrypoint — it is small (~a few kB
+ * gzipped) and does no windowing work until a `VirtualRoot` actually renders.
+ *
+ * Grid navigation works across the **full** collection, not just the window:
+ * arrow keys move an active index over all rows, `scrollToIndex` reveals + mounts
+ * the active row, and focus stays on the collection (never on a row) so it
+ * survives windowing. Each windowed row still carries its position —
+ * `aria-posinset` / `aria-setsize` on a listitem, `aria-rowindex` (with
+ * `aria-rowcount` on the grid) on a grid row. `overscan` keeps the active row
+ * mounted through nearby scrolling; if it is mouse-scrolled fully out of the
+ * window, the `aria-activedescendant` reference is dropped until keyboard
+ * navigation re-mounts it. **Bound the height** so the virtualizer has a
+ * viewport to measure.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <VirtualRoot semantics="grid" aria-label="Access keys" className="max-h-80" onActivate={toggleByIndex}>
+ *   {keys.map((key) => (
+ *     <Item key={key.id} selected={selected.has(key.id)}>
+ *       <div role="gridcell"><Checkbox checked={selected.has(key.id)} tabIndex={-1} /></div>
+ *       <div role="gridcell">{key.name}</div>
+ *     </Item>
+ *   ))}
+ * </VirtualRoot>
+ * ```
+ */
+//#endregion
+//#region src/components/list/list.d.ts
+/**
+ * Props for `List.Root` — the internal list primitive's `Root` props, minus
+ * `semantics` (a `List` is always a `role="list"`) and the grid-only
+ * `onActivate` / `itemId` knobs (inert under list semantics).
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   <List.Item onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.Root>
+ * ```
+ */
+type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * Props for `List.VirtualRoot` — the internal list primitive's
+ * `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
+ * minus `semantics` and the grid-only `onActivate` / `itemId` knobs.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <List.VirtualRoot aria-label="Your accounts" className="max-h-80" estimateItemHeight={44}>
+ *   <List.Item onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.VirtualRoot>
+ * ```
+ */
+type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * Props for `List.Item`. Extends `<button>` props (minus `type`, which is fixed
+ * to `"button"`) with `asChild` and the optional `current` accent.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   <List.Item current onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.Root>
+ * ```
+ */
+type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
+  /**
+   * Marks the item as the current one (e.g. the active account) — gives its
+   * pill the accent tint and sets `aria-current` so the state is announced,
+   * not just shown. Optional; omit it for a plain action/navigation list.
+   */
+  current?: boolean;
+};
+/**
+ * A scrollable, optionally-virtualized list of clickable items — the action /
+ * navigation counterpart to `SelectableList` (e.g. an account switcher or SSO
+ * provider picker). Compose `List.Item` children directly inside a
+ * `List.Root`; each item is a `<button>` (or your own element via
+ * `asChild`, e.g. an `<a>`), with an optional `current` accent.
+ *
+ * It is a **non-selecting** semantic list (`role="list"` of `role="listitem"`),
+ * not a selection widget — selection is `SelectableList`'s job. Non-virtualized
+ * by default; swap `Root` → `VirtualRoot` (same children) for windowing.
+ * Both public list components are built on the same internal list primitive
+ * (`./primitive.js`, deliberately unexported — like `dialog/primitive`). Items
+ * keep their native tab order, and `ArrowUp` / `ArrowDown` / `Home` / `End`
+ * also move focus between them — the focused item tints like hover instead of
+ * drawing a focus ring.
+ *
+ * @see https://mantle.ngrok.com/components/list
+ *
+ * @example
+ * Composition:
+ * ```
+ * List.Root   (or .VirtualRoot)
+ * └── List.Item
+ *     ├── List.ItemTitle
+ *     └── List.ItemDescription
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>
+ *         {account.plan} · {account.memberCount} members
+ *       </List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const List: {
+  /**
+   * The scrollable container (non-virtualized). Give it an `aria-label` and
+   * bound its height. Compose `Item` children.
+   *
+   * @see https://mantle.ngrok.com/components/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<ListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * The virtualized container — windows the same `Item` children. Opt in for
+   * long lists; authored identically to `Root`.
+   *
+   * @see https://mantle.ngrok.com/components/list
+   *
+   * @example
+   * ```tsx
+   * <List.VirtualRoot aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.VirtualRoot>
+   * ```
+   */
+  readonly VirtualRoot: import("react").ForwardRefExoticComponent<Omit<ListVirtualRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A clickable item — a `<button>` by default, or your own element via
+   * `asChild` (e.g. an `<a>`). Optional `current` gives the accent treatment.
+   *
+   * @see https://mantle.ngrok.com/components/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly Item: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  /**
+   * Emphasized title line inside a `List.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  /**
+   * De-emphasized sub-line inside a `List.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { List, type ListItemProps, type ListRootProps, type ListVirtualRootProps };

package/dist/list.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{n,r,t as i}from"./virtual-PBNiHjMK.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=a((e,t)=>o(r,{ref:t,semantics:`list`,...e}));s.displayName=`ListRoot`;const c=a((e,t)=>o(i,{ref:t,semantics:`list`,...e}));c.displayName=`ListVirtualRoot`;const l=a(({asChild:r,className:i,current:a,disabled:s,onClick:c,...l},u)=>o(n,{selected:a,disabled:s,children:o(r?t:`button`,{ref:u,"data-slot":`list-item-control`,"aria-current":a||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...l,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:l.onClickCapture})}));l.displayName=`ListItem`;const u=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...n}));u.displayName=`ListItemTitle`;const d=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...n}));d.displayName=`ListItemDescription`;const f={Root:s,VirtualRoot:c,Item:l,ItemTitle:u,ItemDescription:d};export{f as List};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.76.10)
+# @ngrok/mantle (0.77.0)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 
@@ -29,6 +29,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/calendar`
 - `@ngrok/mantle/card`
 - `@ngrok/mantle/checkbox`
+- `@ngrok/mantle/choice`
 - `@ngrok/mantle/code`
 - `@ngrok/mantle/code-block`
 - `@ngrok/mantle/color`
@@ -50,6 +51,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/input`
 - `@ngrok/mantle/kbd`
 - `@ngrok/mantle/label`
+- `@ngrok/mantle/list`
 - `@ngrok/mantle/main`
 - `@ngrok/mantle/media-object`
 - `@ngrok/mantle/multi-select`
@@ -61,6 +63,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/radio-group`
 - `@ngrok/mantle/sandboxed-on-click`
 - `@ngrok/mantle/select`
+- `@ngrok/mantle/selectable-list`
 - `@ngrok/mantle/separator`
 - `@ngrok/mantle/sheet`
 - `@ngrok/mantle/skeleton`

package/dist/multi-select.d.ts

@@ -82,6 +82,10 @@ type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "rende
  * items rendered as removable tags/chips. For single selection, use Combobox (with search)
  * or Select (without).
  *
+ * `MultiSelect.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
  * @see https://mantle.ngrok.com/components/multi-select
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  * @see https://ariakit.org/components/combobox
@@ -127,6 +131,10 @@ declare const MultiSelect: {
    * items rendered as removable tags/chips. For single selection, use Combobox (with search)
    * or Select (without).
    *
+   * `MultiSelect.Content` renders at Tailwind `z-50`, Mantle's shared
+   * floating z-index. When multiple shared layers are open, the most recently
+   * mounted layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/multi-select#multiselectroot
    *
    * @example
@@ -260,6 +268,10 @@ declare const MultiSelect: {
   /**
    * Renders a popover that contains multi-select content.
    *
+   * `MultiSelect.Content` renders at Tailwind `z-50`, Mantle's shared
+   * floating z-index. When multiple shared layers are open, the most recently
+   * mounted layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent
    *
    * @example

package/dist/multi-select.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{a as i,r as a}from"./validation-DCyx-ceH.js";import{n as o}from"./separator-CqohKk4z.js";import{t as s}from"./field-context-4k1kI7Bo.js";import{t as c}from"./use-prefers-reduced-motion-CWIoFA6W.js";import{createContext as l,forwardRef as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};O.displayName=`MultiSelect`;const k=u(({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,validation:l,...u},d)=>{let p=f(T),{inputRef:m}=f(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:l??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,d),...u,children:o})});k.displayName=`MultiSelectTrigger`;const A=u(({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=h(null);return v(`span`,{ref:e(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),H(e.currentTarget);return}s?.(e)},...c,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&H(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})});A.displayName=`MultiSelectTag`;const j=({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=h(i);a.current=i;let o=f(E);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(D),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&H(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S();break}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&H(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&H(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})};j.displayName=`MultiSelectTagValues`;const M=u(({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:o,onValueChange:c,placeholder:l,...u},d)=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(D),g=f(s),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,d),...u,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})});M.displayName=`MultiSelectInput`;const N=u(({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:c=!0,unmountOnHide:l=!0,...u},p)=>{let m=f(T),h=d(()=>m.current?.getBoundingClientRect()??null,[m]),g=d(e=>typeof s==`function`?s(e):s??m.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,m]),v=d(e=>!(e.target instanceof Node&&m.current?.contains(e.target)),[m]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:h,gutter:4,hideOnInteractOutside:v,modal:o,portalElement:g,ref:p,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:c,unmountOnHide:l,...u,children:i})});N.displayName=`MultiSelectContent`;const P=u(({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...l},u)=>{let d=f(E),p=s!=null&&d.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:u,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...l,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});P.displayName=`MultiSelectItem`;const F=u(({asChild:e=!1,children:t,...n},i)=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...n,children:t}));F.displayName=`MultiSelectGroup`;const I=u(({asChild:e=!1,children:n,className:i,...a},o)=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...a,children:n}));I.displayName=`MultiSelectGroupLabel`;const L=u(({className:e,children:n,...r},i)=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:i,...r,children:n}));L.displayName=`MultiSelectGroupDescription`;const R=u(({className:e,...n},r)=>_(o,{"data-slot":`multi-select-separator`,ref:r,className:t(`my-1 w-auto`,e),...n}));R.displayName=`MultiSelectSeparator`;const z=u(({className:e,children:n,...r},i)=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:i,role:`presentation`,...r,children:n}));z.displayName=`MultiSelectEmpty`;const B=u(({className:e,children:n,...r},i)=>_(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...r,children:n}));B.displayName=`MultiSelectContentFooter`;const V={Root:O,Trigger:k,TagValues:j,Input:M,Tag:A,Content:N,ContentFooter:B,Item:P,Group:F,GroupLabel:I,GroupDescription:L,Separator:R,Empty:z};function H(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{V as MultiSelect};
+import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-C1UYP5We.js";import{t as n}from"./icon-SUx16Sl3.js";import{t as r}from"./slot-DT_E5BQx.js";import{a as i,r as a}from"./validation-DCyx-ceH.js";import{t as o}from"./field-context-4k1kI7Bo.js";import{n as s}from"./separator-CqohKk4z.js";import{t as c}from"./use-prefers-reduced-motion-DBqNw1wB.js";import{createContext as l,forwardRef as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{XIcon as y}from"@phosphor-icons/react/X";import{CheckIcon as b}from"@phosphor-icons/react/Check";import*as x from"@ariakit/react";import{LockIcon as S}from"@phosphor-icons/react/Lock";const C=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),w=[],T=l({current:null}),E=l({current:[]}),D=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),O=({children:e,defaultSelectedValue:t=w,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return _(T.Provider,{value:r,children:_(D.Provider,{value:s,children:_(E.Provider,{value:o,children:_(x.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};O.displayName=`MultiSelect`;const k=u(({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,validation:l,...u},d)=>{let p=f(T),{inputRef:m}=f(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:l??g});return _(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:t(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border px-3 py-1 has-[[data-slot=multi-select-tag]]:px-1`,`has-focus:outline-hidden has-focus-within:ring-4 has-aria-expanded:ring-4`,`has-focus-within:border-accent-600 has-focus-within:ring-focus-accent has-aria-expanded:border-accent-600 has-aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:has-focus-within:border-success-600 data-validation-success:has-focus-within:ring-focus-success data-validation-success:has-aria-expanded:border-success-600 data-validation-success:has-aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:has-focus-within:border-warning-600 data-validation-warning:has-focus-within:ring-focus-warning data-validation-warning:has-aria-expanded:border-warning-600 data-validation-warning:has-aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:has-focus-within:border-danger-600 data-validation-error:has-focus-within:ring-focus-danger data-validation-error:has-aria-expanded:border-danger-600 data-validation-error:has-aria-expanded:ring-focus-danger`,r),"data-validation":v||void 0,onKeyDown:e=>{e.key===`Escape`&&h?.getState().open&&(e.preventDefault(),h.hide()),s?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),m.current?.focus()),c?.(e)},ref:e(p,d),...u,children:o})});k.displayName=`MultiSelectTrigger`;const A=u(({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=h(null);return v(`span`,{ref:e(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:t(`cursor-default bg-neutral-500/10 border border-neutral-500/20 rounded-xs text-strong inline-flex items-center gap-1 pl-2 pr-0.5 py-0.5 text-sm font-normal`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,r),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),H(e.currentTarget);return}s?.(e)},...c,children:[i,_(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:t(`cursor-pointer text-strong/40 hover:bg-neutral-500/15 hover:text-strong rounded-xs p-0.5`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/40`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&H(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:_(n,{svg:o?_(S,{}):_(y,{weight:`bold`}),className:`size-4`})})]})});A.displayName=`MultiSelectTag`;const j=({children:e,lockedValues:t=w})=>{let n=x.useComboboxContext(),r=x.useStoreState(n,`selectedValue`),i=(C(r)?r:void 0)??w,a=h(i);a.current=i;let o=f(E);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(D),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!C(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},b=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},S=()=>{u.current?.focus()},T=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&b(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?b(t+1):S();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&H(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;v(()=>b(e))}else v(()=>{a.current.length>0?b(0):S()});else v(()=>{t<a.current.length?b(t):S()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),S(),u.current?.dispatchEvent(new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,altKey:e.altKey}));break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&S();break}};return l.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),b(i.length-1);return}if(e.key===`Backspace`&&e.currentTarget.value===``&&i.length>0){let e=i[i.length-1];if(e!=null)if(o.current.includes(e)){let t=c.current.get(e);t&&H(t)}else y(e)}},_(g,{children:i.map((t,n)=>{let r={value:t,locked:s.has(t),onRemove:()=>{if(s.has(t)){let e=c.current.get(t);e&&H(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>T(e,n),onClick:()=>b(n)};return e?e(r):_(A,{...r},t)})})};j.displayName=`MultiSelectTagValues`;const M=u(({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,...u},d)=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(D),g=f(o),v=x.useStoreState(p,`selectedValue`),y=((C(v)?v:void 0)?.length??0)>0;return _(x.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:t(`pointer-coarse:text-base min-w-20 flex-1 select-text border-0 bg-transparent text-sm outline-hidden`,`placeholder:select-none placeholder:text-placeholder`,n),onChange:e=>{c?.(e.target.value),i?.(e)},onKeyDown:e=>{m.current?.(e),s?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&p?.show(),r?.(e)},onFocus:e=>{p?.show(),a?.(e)},placeholder:y?void 0:l,ref:e(h,d),...u,...g?{"aria-describedby":g[`aria-describedby`],"aria-errormessage":g[`aria-errormessage`],"aria-invalid":g[`aria-invalid`],id:g.id,name:g.name}:void 0})});M.displayName=`MultiSelectInput`;const N=u(({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:c=!0,unmountOnHide:l=!0,...u},p)=>{let m=f(T),h=d(()=>m.current?.getBoundingClientRect()??null,[m]),g=d(e=>typeof s==`function`?s(e):s??m.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,m]),v=d(e=>!(e.target instanceof Node&&m.current?.contains(e.target)),[m]);return _(x.ComboboxPopover,{"data-slot":`multi-select-content`,className:t(`border-popover bg-popover relative z-50 max-h-96 min-w-32 scrollbar overflow-y-scroll overflow-x-hidden overscroll-y-none rounded-md border shadow-md pt-1 pb-1 has-data-content-footer:pb-0 font-sans flex flex-col gap-px focus:outline-hidden`,a),backdrop:n,getAnchorRect:h,gutter:4,hideOnInteractOutside:v,modal:o,portalElement:g,ref:p,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:c,unmountOnHide:l,...u,children:i})});N.displayName=`MultiSelectContent`;const P=u(({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...l},u)=>{let d=f(E),p=s!=null&&d.current.includes(s);return v(x.ComboboxItem,{"data-slot":`multi-select-item`,className:t(`relative mx-1 cursor-pointer rounded-md pl-2 pr-8 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center gap-2`,`[[role=option]+&]:mt-px`,`data-active-item:bg-active-menu-item`,`aria-disabled:opacity-50`,`aria-selected:bg-selected-menu-item aria-selected:data-active-item:bg-active-selected-menu-item`,a),focusOnHover:o,onClick:e=>{if(p){e.preventDefault();return}c?.(e)},ref:u,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...l,children:[i,_(x.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:_(n,{svg:_(b,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});P.displayName=`MultiSelectItem`;const F=u(({asChild:e=!1,children:t,...n},i)=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...n,children:t}));F.displayName=`MultiSelectGroup`;const I=u(({asChild:e=!1,children:n,className:i,...a},o)=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...a,children:n}));I.displayName=`MultiSelectGroupLabel`;const L=u(({className:e,children:n,...r},i)=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:i,...r,children:n}));L.displayName=`MultiSelectGroupDescription`;const R=u(({className:e,...n},r)=>_(s,{"data-slot":`multi-select-separator`,ref:r,className:t(`my-1 w-auto`,e),...n}));R.displayName=`MultiSelectSeparator`;const z=u(({className:e,children:n,...r},i)=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:i,role:`presentation`,...r,children:n}));z.displayName=`MultiSelectEmpty`;const B=u(({className:e,children:n,...r},i)=>_(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...r,children:n}));B.displayName=`MultiSelectContentFooter`;const V={Root:O,Trigger:k,TagValues:j,Input:M,Tag:A,Content:N,ContentFooter:B,Item:P,Group:F,GroupLabel:I,GroupDescription:L,Separator:R,Empty:z};function H(e){c()||e.animate([{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(0)`}],{duration:300,easing:`ease-in-out`})}export{V as MultiSelect};

package/dist/pagination.d.ts

@@ -1,6 +1,6 @@
 import { t as WithAsChild } from "./as-child-uN_018tj.js";
 import { t as ButtonGroup } from "./index-CTU6apE6.js";
-import { t as Select } from "./select-C15-XvRT.js";
+import { t as Select } from "./select-BUGOJMER.js";
 import { ComponentProps } from "react";
 
 //#region src/components/pagination/cursor-pagination.d.ts

package/dist/pagination.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./icon-button-DiX9iZ9n.js";import{t as r}from"./button-CERx95KE.js";import{n as i}from"./separator-CqohKk4z.js";import{t as a}from"./select-xfyY5Vt1.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useMemo as u,useState as d}from"react";import f from"tiny-invariant";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as g}from"@phosphor-icons/react/CaretRight";const _=o(void 0),v=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=d(r),c=u(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return p(_.Provider,{value:c,children:p(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});v.displayName=`CursorPagination`;const y=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>m(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[p(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:p(h,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),p(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),p(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:p(g,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));y.displayName=`CursorButtons`;const b=[5,10,20,50,100],x=s(({className:t,pageSizes:n=b,onChangePageSize:r,...i},o)=>{let s=c(_);return f(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),f(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),f(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),m(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[p(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:p(a.Value,{})}),p(a.Content,{width:`trigger`,children:n.map(e=>m(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});x.displayName=`CursorPageSizeSelect`;function S({asChild:n=!1,className:r,...i}){let a=c(_);return f(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),m(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}S.displayName=`CursorPageSizeValue`;const C={Root:v,Buttons:y,PageSizeSelect:x,PageSizeValue:S};function w({listSize:e,pageSize:t}){let[n,r]=d(1),[i,a]=d(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,u=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){u&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:u,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function T(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{C as CursorPagination,T as getOffsetPaginatedSlice,w as useOffsetPagination};
+import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{t as n}from"./icon-button-DiX9iZ9n.js";import{t as r}from"./button-CERx95KE.js";import{n as i}from"./separator-CqohKk4z.js";import{t as a}from"./select-Bxq_N-_o.js";import{createContext as o,forwardRef as s,useContext as c,useEffect as l,useMemo as u,useState as d}from"react";import f from"tiny-invariant";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{CaretLeftIcon as h}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as g}from"@phosphor-icons/react/CaretRight";const _=o(void 0),v=s(({className:t,children:n,defaultPageSize:r,...i},a)=>{let[o,s]=d(r),c=u(()=>({defaultPageSize:r,pageSize:o,setPageSize:s}),[r,o]);return p(_.Provider,{value:c,children:p(`div`,{"data-slot":`cursor-pagination`,className:e(`inline-flex items-center justify-between gap-2`,t),ref:a,...i,children:n})})});v.displayName=`CursorPagination`;const y=s(({hasNextPage:e,hasPreviousPage:t,onNextPage:a,onPreviousPage:o,...s},c)=>m(r,{"data-slot":`cursor-pagination-buttons`,appearance:`panel`,ref:c,...s,children:[p(n,{"data-slot":`cursor-pagination-previous`,appearance:`ghost`,disabled:!t,icon:p(h,{}),label:`Previous page`,onClick:o,size:`sm`,type:`button`}),p(i,{"data-slot":`cursor-pagination-separator`,orientation:`vertical`,className:`min-h-5`}),p(n,{"data-slot":`cursor-pagination-next`,appearance:`ghost`,disabled:!e,icon:p(g,{}),label:`Next page`,onClick:a,size:`sm`,type:`button`})]}));y.displayName=`CursorButtons`;const b=[5,10,20,50,100],x=s(({className:t,pageSizes:n=b,onChangePageSize:r,...i},o)=>{let s=c(_);return f(s,`CursorPageSizeSelect must be used as a child of a CursorPagination component`),f(n.includes(s.defaultPageSize),`CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes`),f(n.includes(s.pageSize),`CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes`),m(a.Root,{defaultValue:`${s.pageSize}`,onValueChange:e=>{let t=Number.parseInt(e,10);Number.isNaN(t)&&(t=s.defaultPageSize),s.setPageSize(t),r?.(t)},children:[p(a.Trigger,{ref:o,"data-slot":`cursor-pagination-page-size-select`,className:e(`w-auto min-w-36`,t),value:s.pageSize,...i,children:p(a.Value,{})}),p(a.Content,{width:`trigger`,children:n.map(e=>m(a.Item,{value:`${e}`,children:[e,` per page`]},e))})]})});x.displayName=`CursorPageSizeSelect`;function S({asChild:n=!1,className:r,...i}){let a=c(_);return f(a,`CursorPageSizeValue must be used as a child of a CursorPagination component`),m(n?t:`span`,{"data-slot":`cursor-pagination-page-size-value`,className:e(`text-muted text-sm font-normal`,r),...i,children:[a.pageSize,` per page`]})}S.displayName=`CursorPageSizeValue`;const C={Root:v,Buttons:y,PageSizeSelect:x,PageSizeValue:S};function w({listSize:e,pageSize:t}){let[n,r]=d(1),[i,a]=d(t);l(()=>{a(t),r(1)},[t]),l(()=>{r(1)},[e]);let o=Math.ceil(e/i),s=(n-1)*i,c=n>1,u=n<o;function f(e){r(Math.max(1,Math.min(e,o)))}function p(){u&&r(e=>Math.min(e+1,o))}function m(){c&&r(e=>Math.max(e-1,1))}function h(e){a(e),r(1)}function g(){r(o)}function _(){r(1)}return{currentPage:n,goToFirstPage:_,goToLastPage:g,goToPage:f,hasNextPage:u,hasPreviousPage:c,nextPage:p,offset:s,pageSize:i,previousPage:m,setPageSize:h,totalPages:o}}function T(e,t){return e.slice(t.offset,t.offset+t.pageSize)}export{C as CursorPagination,T as getOffsetPaginatedSlice,w as useOffsetPagination};

package/dist/popover.d.ts

@@ -17,6 +17,10 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
  * the content, block interaction with the rest of the page, and lock body
  * scroll while the popover is open.
  *
+ * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
  * @see https://mantle.ngrok.com/components/popover
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  *
@@ -48,6 +52,10 @@ declare const Popover: {
   /**
    * The root, stateful component that manages the open/closed state of the popover.
    *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/popover#popoverroot
    *
    * @example
@@ -114,6 +122,10 @@ declare const Popover: {
   /**
    * The content to render inside the popover. Appears in a portal with rich styling and animations.
    *
+   * `Popover.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/popover#popovercontent
    *
    * @example

package/dist/{primitive-BFUir4UB.js → primitive-BuVqb6zf.js}

@@ -1 +1 @@
-import{t as e}from"./slot-DT_E5BQx.js";import{t}from"./booleanish-BfvnW6vy.js";import{i as n}from"./toast-Bwno5LUs.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useMemo as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import*as u from"@radix-ui/react-dialog";const d=r({hasDescription:!1,setHasDescription:()=>{}});function f(e){let[t,n]=c(!1),r=s(()=>({hasDescription:t,setHasDescription:n}),[t]);return l(d.Provider,{value:r,children:l(u.Root,{...e})})}f.displayName=`DialogPrimitiveRoot`;const p=u.Trigger;p.displayName=`DialogPrimitiveTrigger`;const m=u.Portal;m.displayName=`DialogPrimitivePortal`;const h=u.Close;h.displayName=`DialogPrimitiveClose`;const g=i((e,t)=>l(u.Overlay,{"data-overlay":!0,ref:t,...e}));g.displayName=`DialogPrimitiveOverlay`;const _=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(d);return l(u.Content,{ref:o,onEscapeKeyDown:t=>{x(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});_.displayName=`DialogPrimitiveContent`;const v=u.Title,y=i(({asChild:t,children:n,...r},i)=>{let s=a(d);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let c=t?e:`div`;return l(u.Description,{ref:i,asChild:!0,children:l(c,{...r,children:n})})});y.displayName=`DialogPrimitiveDescription`;function b(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function x(e){if(!T(e.currentTarget))return;let n=e.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=S(e.target)??S(r),a=i?C(i):null;i!=null&&t(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&e.preventDefault()}function S(e){return w(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function C(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function w(e){return e instanceof HTMLElement}function T(e){return e instanceof Node&&`querySelector`in e}export{m as a,p as c,g as i,b as l,_ as n,f as o,y as r,v as s,h as t};
+import{t as e}from"./slot-DT_E5BQx.js";import{t}from"./booleanish-BfvnW6vy.js";import{i as n}from"./toast-CZBWjXcP.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useMemo as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import*as u from"@radix-ui/react-dialog";const d=r({hasDescription:!1,setHasDescription:()=>{}});function f(e){let[t,n]=c(!1),r=s(()=>({hasDescription:t,setHasDescription:n}),[t]);return l(d.Provider,{value:r,children:l(u.Root,{...e})})}f.displayName=`DialogPrimitiveRoot`;const p=u.Trigger;p.displayName=`DialogPrimitiveTrigger`;const m=u.Portal;m.displayName=`DialogPrimitivePortal`;const h=u.Close;h.displayName=`DialogPrimitiveClose`;const g=i((e,t)=>l(u.Overlay,{"data-overlay":!0,ref:t,...e}));g.displayName=`DialogPrimitiveOverlay`;const _=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(d);return l(u.Content,{ref:o,onEscapeKeyDown:t=>{x(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});_.displayName=`DialogPrimitiveContent`;const v=u.Title,y=i(({asChild:t,children:n,...r},i)=>{let s=a(d);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let c=t?e:`div`;return l(u.Description,{ref:i,asChild:!0,children:l(c,{...r,children:n})})});y.displayName=`DialogPrimitiveDescription`;function b(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function x(e){if(!T(e.currentTarget))return;let n=e.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=S(e.target)??S(r),a=i?C(i):null;i!=null&&t(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&e.preventDefault()}function S(e){return w(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function C(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function w(e){return e instanceof HTMLElement}function T(e){return e instanceof Node&&`querySelector`in e}export{m as a,p as c,g as i,b as l,_ as n,f as o,y as r,v as s,h as t};

package/dist/{select-C15-XvRT.d.ts → select-BUGOJMER.d.ts}

@@ -12,6 +12,10 @@ type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-inval
  * and search/filtering is unnecessary. For larger lists or async/searchable data, use
  * Combobox. For picking multiple options, use MultiSelect.
  *
+ * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+ * z-index. When multiple shared layers are open, the most recently mounted
+ * layer renders on top.
+ *
  * @see https://mantle.ngrok.com/components/select
  *
  * @example
@@ -58,6 +62,10 @@ declare const Select: {
    * and search/filtering is unnecessary. For larger lists or async/searchable data, use
    * Combobox. For picking multiple options, use MultiSelect.
    *
+   * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/select#selectroot
    *
    * @example
@@ -114,6 +122,10 @@ declare const Select: {
    * The component that pops out when the select is open as a portal adjacent to the trigger button.
    * It contains a scrolling viewport of the select items.
    *
+   * `Select.Content` renders at Tailwind `z-50`, Mantle's shared floating
+   * z-index. When multiple shared layers are open, the most recently mounted
+   * layer renders on top.
+   *
    * @see https://mantle.ngrok.com/components/select#selectcontent
    *
    * @example