@ngrok/mantle 0.85.1 → 0.86.0

package/dist/{select-ouAW88jx.d.ts → select-DMlziWUZ.d.ts}

@@ -1,3 +1,4 @@
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
 import { o as WithValidation } from "./field-7QeiTFwl.js";
 import { n as Separator } from "./separator-Bo4nY_3M.js";
 import { ComponentProps, FocusEvent, PropsWithChildren, ReactNode, Ref, SelectHTMLAttributes } from "react";
@@ -5,13 +6,40 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 //#region src/components/select/select.d.ts
 type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
 type SelectProps = PropsWithChildren & {
+  /**
+   * The `autocomplete` attribute of the hidden native select.
+   */
   autoComplete?: string;
+  /**
+   * Whether the list is open on first render. Use for an uncontrolled open state.
+   * @default false
+   */
   defaultOpen?: boolean;
+  /**
+   * The value on first render. Use for an uncontrolled value.
+   */
   defaultValue?: string;
+  /**
+   * The reading direction. When omitted, inherits from `DirectionProvider`.
+   */
   dir?: "ltr" | "rtl";
+  /**
+   * Whether the whole select is inert. The trigger stamps `data-disabled`.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * The `id` of the form the hidden native select belongs to, when it sits
+   * outside that form.
+   */
   form?: string;
+  /**
+   * The `id` of the trigger button. `Field.Control` sets it for you.
+   */
   id?: string;
+  /**
+   * The name of the hidden native select, submitted with its owning form.
+   */
   name?: string;
   /**
    * Event handler called when the trigger button blurs. Runs after any
@@ -23,14 +51,30 @@ type SelectProps = PropsWithChildren & {
    * @deprecated Use `onValueChange` instead.
    */
   onChange?: (value: string) => void;
+  /**
+   * Event handler called when the open state changes.
+   */
   onOpenChange?(open: boolean): void;
+  /**
+   * Event handler called when the value changes.
+   */
   onValueChange?(value: string): void;
+  /**
+   * The controlled open state. Pair with `onOpenChange`.
+   */
   open?: boolean;
   /**
    * Ref for the trigger button.
    */
   ref?: Ref<HTMLButtonElement>;
+  /**
+   * Whether a value is required before the owning form submits.
+   * @default false
+   */
   required?: boolean;
+  /**
+   * The controlled value. Pair with `onValueChange`.
+   */
   value?: string;
 } & WithValidation & WithAriaInvalid;
 /**
@@ -85,6 +129,10 @@ declare const Root: ({ "aria-invalid": _ariaInvalid, children, id, validation, o
  * A group of related options within a select menu. Similar to an html `<optgroup>` element.
  * Pair it with `Select.Label`, which gives the group its accessible name.
  *
+ * | Data Attribute | Value            | Description           |
+ * | -------------- | ---------------- | --------------------- |
+ * | `data-slot`    | `"select-group"` | On the group element. |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selectgroup
  *
  * @example
@@ -110,15 +158,93 @@ declare const Root: ({ "aria-invalid": _ariaInvalid, children, id, validation, o
  * </Select.Root>
  * ```
  */
-declare const Group: ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Group>) => import("react").JSX.Element;
-type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithValidation;
+declare const Group: ({ className, "data-slot": dataSlot, ref, ...props }: ComponentProps<typeof SelectPrimitive.Group> & WithDataSlot) => import("react").JSX.Element;
+type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value> & WithDataSlot;
+/**
+ * The part that reflects the selected value. Renders the selected item's text
+ * by default. For more control, control the select and pass your own children.
+ * Do not style this part: under `Select.Content position="item-aligned"`, Radix
+ * measures its box to align the open list over the selected item. Pass
+ * `placeholder` for the text to show when the select has no value.
+ *
+ * **Structure.** `placeholder` renders inside a
+ * `<span data-slot="select-placeholder">`, your own `children` inside a
+ * `<span data-slot="select-value-label">`, and the selected item's text arrives
+ * inside the `select-item-label` span that `Select.Item` renders. Each span is
+ * `display: contents`, so it lays out nothing of its own. React removes one of
+ * those spans whenever the value changes, and an element removal cannot throw:
+ * a browser translation engine reparents text nodes, and a removal aimed at a
+ * reparented text node does.
+ *
+ * **`asChild` is not supported.** Radix hands its `Slot` a keyed Fragment, so
+ * your element receives none of the value's props and React warns. Pass
+ * `children` instead.
+ *
+ * | Data Attribute | Value                  | Description                                                                   |
+ * | -------------- | ---------------------- | ----------------------------------------------------------------------------- |
+ * | `data-slot`    | `"select-value"`       | On the value element.                                                         |
+ * | `data-slot`    | `"select-placeholder"` | On the `<span>` wrapping `placeholder`. Present only while there is no value. |
+ * | `data-slot`    | `"select-value-label"` | On the `<span>` wrapping your `children`. Absent under `asChild`.             |
+ *
+ * @see https://mantle.ngrok.com/components/forms/select#selectvalue
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select a fruit" />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Group>
+ *       <Select.Label>Fruits</Select.Label>
+ *       <Select.Item value="apple">Apple</Select.Item>
+ *       <Select.Item value="banana">Banana</Select.Item>
+ *       <Select.Item value="cherry">Cherry</Select.Item>
+ *     </Select.Group>
+ *     <Select.Separator />
+ *     <Select.Group>
+ *       <Select.Label>Veggies</Select.Label>
+ *       <Select.Item value="carrot">Carrot</Select.Item>
+ *       <Select.Item value="cucumber">Cucumber</Select.Item>
+ *     </Select.Group>
+ *   </Select.Content>
+ * </Select.Root>
+ * ```
+ */
+declare const Value: ({ asChild, children, "data-slot": dataSlot, placeholder, ref, ...props }: SelectValueProps) => import("react").JSX.Element;
+/**
+ * Props for `Select.Trigger`.
+ */
+type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithDataSlot & WithValidation;
 /**
  * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
- * When composing with `Field.Item`, wrap `Select.Root` in `Field.Control` —
+ * When composing with `Field.Item`, wrap `Select.Root` in `Field.Control`:
  * the generated `id`, `name`, and `aria-invalid` flow onto `Select.Root` (so
  * the hidden form input gets the field name), and the trigger reads
  * `aria-describedby` / `aria-errormessage` from `FieldControlContext`.
  *
+ * **Structure.** `children` render inside a
+ * `<span data-slot="select-trigger-label">`. The caret is a permanent element
+ * sibling, so without the span a bare text child is never a lone child: a
+ * browser translation engine reparents that text node, and the removal React
+ * runs when the child changes shape or goes away throws. The span is
+ * `display: contents`, so `Select.Value` stays a flex item of the trigger and
+ * keeps its `gap`. A `[&>span]` class of your own now reaches the wrapper, not
+ * `Select.Value`. Match the part's own variant instead:
+ * `[&>[data-slot=select-trigger-label]>span]:line-clamp-none`.
+ *
+ * **`asChild`.** Radix clones your single child as the trigger element. The label
+ * span and the caret move inside it, so the guarantee above holds on both paths.
+ *
+ * | Data Attribute     | Value                                   | Description                                                          |
+ * | ------------------ | --------------------------------------- | -------------------------------------------------------------------- |
+ * | `data-slot`        | `"select-trigger"`                      | On the trigger button.                                               |
+ * | `data-slot`        | `"select-trigger-label"`                | On the `<span>` wrapping `children`.                                 |
+ * | `data-state`       | `"open"` \| `"closed"`                  | Whether the list is open.                                            |
+ * | `data-placeholder` | present when there is no value          | Presence-only. Style the placeholder text with `data-placeholder:`.  |
+ * | `data-disabled`    | present when disabled                   | Presence-only. The `disabled` prop on `Select.Root`.                 |
+ * | `data-validation`  | `"success"` \| `"warning"` \| `"error"` | The resolved `validation` state. Omitted when there is none.         |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selecttrigger
  *
  * @example
@@ -144,11 +270,16 @@ type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger> & WithA
  * </Select.Root>
  * ```
  */
-declare const Trigger: ({ "aria-invalid": ariaInValidProp, className, children, id: propId, onBlur, ref, validation: propValidation, ...props }: SelectTriggerProps) => import("react").JSX.Element;
-type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
+declare const Trigger: ({ "aria-invalid": ariaInValidProp, className, children, "data-slot": dataSlot, id: propId, onBlur, ref, validation: propValidation, ...props }: SelectTriggerProps) => import("react").JSX.Element;
+/**
+ * Props for `Select.Content`. `asChild` is omitted: the content renders its
+ * scroll buttons and viewport around `children`, so a slot would receive more
+ * than one element and throw.
+ */
+type SelectContentProps = Omit<ComponentProps<typeof SelectPrimitive.Content>, "asChild"> & WithDataSlot & {
   /**
    * The width of the content. Defaults to the width of the trigger.
-   * If set to "content", the content takes its intrinsic width — the width of the widest item.
+   * If set to "content", the content takes its intrinsic width: the width of the widest item.
    * @default "trigger"
    */
   width?: "trigger" | "content";
@@ -166,6 +297,17 @@ type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
  * (`z-60`). When sibling floats share a container, the most recently mounted
  * float paints on top.
  *
+ * **Why no `asChild`:** the scroll buttons and the viewport sit around
+ * `children`, so `Slot` would receive more than one element and throw. The
+ * prop is omitted from the props type.
+ *
+ * | Data Attribute | Value                                          | Description                                                            |
+ * | -------------- | ---------------------------------------------- | ---------------------------------------------------------------------- |
+ * | `data-slot`    | `"select-content"`                             | On the content element.                                                |
+ * | `data-state`   | `"open"` \| `"closed"`                         | Drives the open and close animations.                                  |
+ * | `data-side`    | `"top"` \| `"right"` \| `"bottom"` \| `"left"` | The side of the trigger the list opened on. `position="popper"` only.  |
+ * | `data-align`   | `"start"` \| `"center"` \| `"end"`             | The alignment against the trigger. `position="popper"` only.           |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selectcontent
  *
  * @example
@@ -191,10 +333,14 @@ type SelectContentProps = ComponentProps<typeof SelectPrimitive.Content> & {
  * </Select.Root>
  * ```
  */
-declare const Content: ({ className, children, position, ref, width, ...props }: SelectContentProps) => import("react").JSX.Element;
+declare const Content: ({ className, children, "data-slot": dataSlot, position, ref, width, ...props }: SelectContentProps) => import("react").JSX.Element;
 /**
  * Used to render the label of a group. It won't be focusable using arrow keys.
  *
+ * | Data Attribute | Value            | Description                 |
+ * | -------------- | ---------------- | --------------------------- |
+ * | `data-slot`    | `"select-label"` | On the group label element. |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selectlabel
  *
  * @example
@@ -220,8 +366,11 @@ declare const Content: ({ className, children, position, ref, width, ...props }:
  * </Select.Root>
  * ```
  */
-declare const Label: ({ className, ref, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => import("react").JSX.Element;
-type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
+declare const Label: ({ className, "data-slot": dataSlot, ref, ...props }: ComponentProps<typeof SelectPrimitive.Label> & WithDataSlot) => import("react").JSX.Element;
+/**
+ * Props for `Select.Item`.
+ */
+type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & WithDataSlot & {
   /**
    * An optional icon rendered before the item text.
    */
@@ -234,6 +383,29 @@ type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
  * Displays the children as the option's text. Pass `icon` to render an icon
  * before the text.
  *
+ * **Structure.** `children` render inside a `<span data-slot="select-item-label">`.
+ * Radix portals that span into `Select.Value` while the item is selected and
+ * removes it when the selection changes. The span exists so the node React
+ * removes is an element: a browser translation engine reparents text nodes,
+ * and a removal aimed at one throws. The span is `display: contents`, so it
+ * lays out nothing of its own in the list or in the trigger. To style it as a
+ * box, set a display of your own on it first.
+ *
+ * **Untranslatable labels.** When the label is an ID, a path, a filename, or a
+ * key, set `translate="no"` on the item. The attribute also rides on the label
+ * span, so the copy the trigger shows stays untranslated too.
+ *
+ * **`asChild`.** Radix clones your single child as the option element. The label
+ * span and the indicator move inside it, so the guarantee above holds on both paths.
+ *
+ * | Data Attribute     | Value                        | Description                                                          |
+ * | ------------------ | ---------------------------- | -------------------------------------------------------------------- |
+ * | `data-slot`        | `"select-item"`              | On the option element.                                               |
+ * | `data-slot`        | `"select-item-label"`        | On the `<span>` wrapping `children`, in the list and in the trigger. |
+ * | `data-state`       | `"checked"` \| `"unchecked"` | Whether this item is the selected value.                             |
+ * | `data-highlighted` | present when highlighted     | Presence-only. The item under the pointer or the keyboard focus.     |
+ * | `data-disabled`    | present when disabled        | Presence-only. The `disabled` prop.                                  |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selectitem
  *
  * @example
@@ -259,10 +431,14 @@ type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item> & {
  * </Select.Root>
  * ```
  */
-declare const Item: ({ className, children, icon, ref, ...props }: SelectItemProps) => import("react").JSX.Element;
+declare const Item: ({ className, children, "data-slot": dataSlot, icon, ref, translate, ...props }: SelectItemProps) => import("react").JSX.Element;
 /**
  * Used to visually separate items or groups of items in the select content.
  *
+ * | Data Attribute | Value                | Description               |
+ * | -------------- | -------------------- | ------------------------- |
+ * | `data-slot`    | `"select-separator"` | On the separator element. |
+ *
  * @see https://mantle.ngrok.com/components/forms/select#selectseparator
  *
  * @example
@@ -288,7 +464,7 @@ declare const Item: ({ className, children, icon, ref, ...props }: SelectItemPro
  * </Select.Root>
  * ```
  */
-declare const SelectSeparatorComponent: ({ className, ref, ...props }: ComponentProps<typeof Separator>) => import("react").JSX.Element;
+declare const SelectSeparatorComponent: ({ className, "data-slot": dataSlot, ref, ...props }: ComponentProps<typeof Separator> & WithDataSlot) => import("react").JSX.Element;
 /**
  * Displays a list of options for the user to pick from—triggered by a button.
  *
@@ -403,6 +579,17 @@ declare const Select: {
    * (`z-60`). When sibling floats share a container, the most recently mounted
    * float paints on top.
    *
+   * **Why no `asChild`:** the scroll buttons and the viewport sit around
+   * `children`, so `Slot` would receive more than one element and throw. The
+   * prop is omitted from the props type.
+   *
+   * | Data Attribute | Value                                          | Description                                                            |
+   * | -------------- | ---------------------------------------------- | ---------------------------------------------------------------------- |
+   * | `data-slot`    | `"select-content"`                             | On the content element.                                                |
+   * | `data-state`   | `"open"` \| `"closed"`                         | Drives the open and close animations.                                  |
+   * | `data-side`    | `"top"` \| `"right"` \| `"bottom"` \| `"left"` | The side of the trigger the list opened on. `position="popper"` only.  |
+   * | `data-align`   | `"start"` \| `"center"` \| `"end"`             | The alignment against the trigger. `position="popper"` only.           |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectcontent
    *
    * @example
@@ -433,6 +620,10 @@ declare const Select: {
    * A group of related options within a select menu. Similar to an html `<optgroup>` element.
    * Pair it with `Select.Label`, which gives the group its accessible name.
    *
+   * | Data Attribute | Value            | Description           |
+   * | -------------- | ---------------- | --------------------- |
+   * | `data-slot`    | `"select-group"` | On the group element. |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectgroup
    *
    * @example
@@ -466,6 +657,29 @@ declare const Select: {
    * Displays the children as the option's text. Pass `icon` to render an icon
    * before the text.
    *
+   * **Structure.** `children` render inside a `<span data-slot="select-item-label">`.
+   * Radix portals that span into `Select.Value` while the item is selected and
+   * removes it when the selection changes. The span exists so the node React
+   * removes is an element: a browser translation engine reparents text nodes,
+   * and a removal aimed at one throws. The span is `display: contents`, so it
+   * lays out nothing of its own in the list or in the trigger. To style it as a
+   * box, set a display of your own on it first.
+   *
+   * **Untranslatable labels.** When the label is an ID, a path, a filename, or a
+   * key, set `translate="no"` on the item. The attribute also rides on the label
+   * span, so the copy the trigger shows stays untranslated too.
+   *
+   * **`asChild`.** Radix clones your single child as the option element. The label
+   * span and the indicator move inside it, so the guarantee above holds on both paths.
+   *
+   * | Data Attribute     | Value                        | Description                                                          |
+   * | ------------------ | ---------------------------- | -------------------------------------------------------------------- |
+   * | `data-slot`        | `"select-item"`              | On the option element.                                               |
+   * | `data-slot`        | `"select-item-label"`        | On the `<span>` wrapping `children`, in the list and in the trigger. |
+   * | `data-state`       | `"checked"` \| `"unchecked"` | Whether this item is the selected value.                             |
+   * | `data-highlighted` | present when highlighted     | Presence-only. The item under the pointer or the keyboard focus.     |
+   * | `data-disabled`    | present when disabled        | Presence-only. The `disabled` prop.                                  |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectitem
    *
    * @example
@@ -495,6 +709,10 @@ declare const Select: {
   /**
    * Used to render the label of a group. It won't be focusable using arrow keys.
    *
+   * | Data Attribute | Value            | Description                 |
+   * | -------------- | ---------------- | --------------------------- |
+   * | `data-slot`    | `"select-label"` | On the group label element. |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectlabel
    *
    * @example
@@ -524,6 +742,10 @@ declare const Select: {
   /**
    * Used to visually separate items or groups of items in the select content.
    *
+   * | Data Attribute | Value                | Description               |
+   * | -------------- | -------------------- | ------------------------- |
+   * | `data-slot`    | `"select-separator"` | On the separator element. |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectseparator
    *
    * @example
@@ -557,6 +779,28 @@ declare const Select: {
    * the hidden form input gets the field name), and the trigger reads
    * `aria-describedby` / `aria-errormessage` from `FieldControlContext`.
    *
+   * **Structure.** `children` render inside a
+   * `<span data-slot="select-trigger-label">`. The caret is a permanent element
+   * sibling, so without the span a bare text child is never a lone child: a
+   * browser translation engine reparents that text node, and the removal React
+   * runs when the child changes shape or goes away throws. The span is
+   * `display: contents`, so `Select.Value` stays a flex item of the trigger and
+   * keeps its `gap`. A `[&>span]` class of your own now reaches the wrapper, not
+   * `Select.Value`. Match the part's own variant instead:
+   * `[&>[data-slot=select-trigger-label]>span]:line-clamp-none`.
+   *
+   * **`asChild`.** Radix clones your single child as the trigger element. The label
+   * span and the caret move inside it, so the guarantee above holds on both paths.
+   *
+   * | Data Attribute     | Value                                   | Description                                                          |
+   * | ------------------ | --------------------------------------- | -------------------------------------------------------------------- |
+   * | `data-slot`        | `"select-trigger"`                      | On the trigger button.                                               |
+   * | `data-slot`        | `"select-trigger-label"`                | On the `<span>` wrapping `children`.                                 |
+   * | `data-state`       | `"open"` \| `"closed"`                  | Whether the list is open.                                            |
+   * | `data-placeholder` | present when there is no value          | Presence-only. Style the placeholder text with `data-placeholder:`.  |
+   * | `data-disabled`    | present when disabled                   | Presence-only. The `disabled` prop on `Select.Root`.                 |
+   * | `data-validation`  | `"success"` \| `"warning"` \| `"error"` | The resolved `validation` state. Omitted when there is none.         |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selecttrigger
    *
    * @example
@@ -586,10 +830,29 @@ declare const Select: {
   /**
    * The part that reflects the selected value. Renders the selected item's text
    * by default. For more control, control the select and pass your own children.
-   * Do not style this part — under `Select.Content position="item-aligned"`, Radix
+   * Do not style this part: under `Select.Content position="item-aligned"`, Radix
    * measures its box to align the open list over the selected item. Pass
    * `placeholder` for the text to show when the select has no value.
    *
+   * **Structure.** `placeholder` renders inside a
+   * `<span data-slot="select-placeholder">`, your own `children` inside a
+   * `<span data-slot="select-value-label">`, and the selected item's text arrives
+   * inside the `select-item-label` span that `Select.Item` renders. Each span is
+   * `display: contents`, so it lays out nothing of its own. React removes one of
+   * those spans whenever the value changes, and an element removal cannot throw:
+   * a browser translation engine reparents text nodes, and a removal aimed at a
+   * reparented text node does.
+   *
+   * **`asChild` is not supported.** Radix hands its `Slot` a keyed Fragment, so
+   * your element receives none of the value's props and React warns. Pass
+   * `children` instead.
+   *
+   * | Data Attribute | Value                  | Description                                                                   |
+   * | -------------- | ---------------------- | ----------------------------------------------------------------------------- |
+   * | `data-slot`    | `"select-value"`       | On the value element.                                                         |
+   * | `data-slot`    | `"select-placeholder"` | On the `<span>` wrapping `placeholder`. Present only while there is no value. |
+   * | `data-slot`    | `"select-value-label"` | On the `<span>` wrapping your `children`. Absent under `asChild`.             |
+   *
    * @see https://mantle.ngrok.com/components/forms/select#selectvalue
    *
    * @example
@@ -615,7 +878,7 @@ declare const Select: {
    * </Select.Root>
    * ```
    */
-  readonly Value: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly Value: typeof Value;
 };
 //#endregion
 export { Select as t };

package/dist/select-DX72zQN2.js

@@ -0,0 +1 @@
+import{n as e}from"./compose-refs-sFdxsL7k.js";import{t}from"./cx-0HCjnNv1.js";import{t as n}from"./icon-BT8FnkkJ.js";import{t as r}from"./data-slot-EM6s2WEU.js";import{r as i}from"./layer-container-R7aux3n8.js";import{a,r as o}from"./field-Bpptk_9t.js";import{t as s}from"./field-B1wqeZr4.js";import{n as c}from"./separator-D98be0gY.js";import{c as l}from"react/compiler-runtime";import{CaretDownIcon as u}from"@phosphor-icons/react/CaretDown";import{createContext as d,useContext as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{Slottable as h}from"@radix-ui/react-slot";import{CheckIcon as g}from"@phosphor-icons/react/Check";import{CaretUpIcon as _}from"@phosphor-icons/react/CaretUp";import*as v from"@radix-ui/react-select";const y=d({}),b=e=>{let t=l(26),n,r,i,a,o,s,c,u,d;t[0]===e?(n=t[1],r=t[2],i=t[3],a=t[4],o=t[5],s=t[6],c=t[7],u=t[8],d=t[9]):({"aria-invalid":n,children:r,id:i,validation:d,onBlur:a,onValueChange:s,onChange:o,ref:u,...c}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i,t[4]=a,t[5]=o,t[6]=s,t[7]=c,t[8]=u,t[9]=d);let f;t[10]!==n||t[11]!==i||t[12]!==a||t[13]!==u||t[14]!==d?(f={"aria-invalid":n,id:i,validation:d,onBlur:a,ref:u},t[10]=n,t[11]=i,t[12]=a,t[13]=u,t[14]=d,t[15]=f):f=t[15];let m=f,h;t[16]!==o||t[17]!==s?(h=e=>{o?.(e),s?.(e)},t[16]=o,t[17]=s,t[18]=h):h=t[18];let g;t[19]!==r||t[20]!==m?(g=p(y.Provider,{value:m,children:r}),t[19]=r,t[20]=m,t[21]=g):g=t[21];let _;return t[22]!==c||t[23]!==h||t[24]!==g?(_=p(v.Root,{...c,onValueChange:h,children:g}),t[22]=c,t[23]=h,t[24]=g,t[25]=_):_=t[25],_},x=e=>{let n=l(14),i,a,o,s;n[0]===e?(i=n[1],a=n[2],o=n[3],s=n[4]):({className:i,"data-slot":a,ref:s,...o}=e,n[0]=e,n[1]=i,n[2]=a,n[3]=o,n[4]=s);let c;n[5]===a?c=n[6]:(c=r(a,`select-group`),n[5]=a,n[6]=c);let u;n[7]===i?u=n[8]:(u=t(`space-y-px`,i),n[7]=i,n[8]=u);let d;return n[9]!==o||n[10]!==s||n[11]!==c||n[12]!==u?(d=p(v.Group,{ref:s,"data-slot":c,className:u,...o}),n[9]=o,n[10]=s,n[11]=c,n[12]=u,n[13]=d):d=n[13],d},S=e=>{let t=l(21),n,i,a,o,s,c;t[0]===e?(n=t[1],i=t[2],a=t[3],o=t[4],s=t[5],c=t[6]):({asChild:n,children:i,"data-slot":a,placeholder:o,ref:c,...s}=e,t[0]=e,t[1]=n,t[2]=i,t[3]=a,t[4]=o,t[5]=s,t[6]=c);let u;t[7]===a?u=t[8]:(u=r(a,`select-value`),t[7]=a,t[8]=u);let d;t[9]===o?d=t[10]:(d=o!=null&&p(`span`,{"data-slot":`select-placeholder`,className:`contents`,children:o}),t[9]=o,t[10]=d);let f;t[11]!==n||t[12]!==i?(f=n||i==null?i:p(`span`,{"data-slot":`select-value-label`,className:`contents`,children:i}),t[11]=n,t[12]=i,t[13]=f):f=t[13];let m;return t[14]!==n||t[15]!==s||t[16]!==c||t[17]!==u||t[18]!==d||t[19]!==f?(m=p(v.Value,{ref:c,asChild:n,"data-slot":u,placeholder:d,...s,children:f}),t[14]=n,t[15]=s,t[16]=c,t[17]=u,t[18]=d,t[19]=f,t[20]=m):m=t[20],m},C=i=>{let c=l(36),d,g,_,b,x,S,C,w,T;c[0]===i?(d=c[1],g=c[2],_=c[3],b=c[4],x=c[5],S=c[6],C=c[7],w=c[8],T=c[9]):({"aria-invalid":d,className:_,children:g,"data-slot":b,id:S,onBlur:x,ref:T,validation:C,...w}=i,c[0]=i,c[1]=d,c[2]=g,c[3]=_,c[4]=b,c[5]=x,c[6]=S,c[7]=C,c[8]=w,c[9]=T);let E=f(y),O=f(s),k=e(T,E.ref),A=a(),j=O?O[`aria-invalid`]:E[`aria-invalid`]??d,M=E.validation??C??A,N;c[10]!==j||c[11]!==M?(N=o({"aria-invalid":j,validation:M}),c[10]=j,c[11]=M,c[12]=N):N=c[12];let{ariaInvalid:P,validation:F}=N,I=O?O.id:E.id??S,L;c[13]===b?L=c[14]:(L=r(b,`select-trigger`),c[13]=b,c[14]=L);let R;c[15]===_?R=c[16]:(R=t(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50`,`[&>[data-slot=select-trigger-label]>span]:line-clamp-1 [&>[data-slot=select-trigger-label]>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,_),c[15]=_,c[16]=R);let z=F||void 0,B;c[17]!==E||c[18]!==x?(B=e=>{x?.(e),E.onBlur?.(e)},c[17]=E,c[18]=x,c[19]=B):B=c[19];let V;c[20]===O?V=c[21]:(V=O?{"aria-describedby":O[`aria-describedby`],"aria-errormessage":O[`aria-errormessage`]}:void 0,c[20]=O,c[21]=V);let H;c[22]===g?H=c[23]:(H=p(h,{child:g,children:D}),c[22]=g,c[23]=H);let U;c[24]===Symbol.for(`react.memo_cache_sentinel`)?(U=p(v.Icon,{asChild:!0,children:p(n,{svg:p(u,{weight:`bold`}),className:`size-4`})}),c[24]=U):U=c[24];let W;return c[25]!==P||c[26]!==I||c[27]!==w||c[28]!==L||c[29]!==R||c[30]!==z||c[31]!==B||c[32]!==V||c[33]!==H||c[34]!==k?(W=m(v.Trigger,{"data-slot":L,className:R,"data-validation":z,id:I,ref:k,...w,onBlur:B,...V,"aria-invalid":P,children:[H,U]}),c[25]=P,c[26]=I,c[27]=w,c[28]=L,c[29]=R,c[30]=z,c[31]=B,c[32]=V,c[33]=H,c[34]=k,c[35]=W):W=c[35],W},w=e=>{let r=l(11),i,a,o;r[0]===e?(i=r[1],a=r[2],o=r[3]):({className:i,ref:o,...a}=e,r[0]=e,r[1]=i,r[2]=a,r[3]=o);let s;r[4]===i?s=r[5]:(s=t(`flex cursor-default items-center justify-center py-1`,i),r[4]=i,r[5]=s);let c;r[6]===Symbol.for(`react.memo_cache_sentinel`)?(c=p(n,{svg:p(_,{weight:`bold`}),className:`size-4`}),r[6]=c):c=r[6];let u;return r[7]!==a||r[8]!==o||r[9]!==s?(u=p(v.ScrollUpButton,{ref:o,className:s,...a,children:c}),r[7]=a,r[8]=o,r[9]=s,r[10]=u):u=r[10],u},T=e=>{let r=l(11),i,a,o;r[0]===e?(i=r[1],a=r[2],o=r[3]):({className:i,ref:o,...a}=e,r[0]=e,r[1]=i,r[2]=a,r[3]=o);let s;r[4]===i?s=r[5]:(s=t(`flex cursor-default items-center justify-center py-1`,i),r[4]=i,r[5]=s);let c;r[6]===Symbol.for(`react.memo_cache_sentinel`)?(c=p(n,{svg:p(u,{weight:`bold`}),className:`size-4`}),r[6]=c):c=r[6];let d;return r[7]!==a||r[8]!==o||r[9]!==s?(d=p(v.ScrollDownButton,{ref:o,className:s,...a,children:c}),r[7]=a,r[8]=o,r[9]=s,r[10]=d):d=r[10],d},E={Root:b,Content:e=>{let n=l(31),a,o,s,c,u,d,f;n[0]===e?(a=n[1],o=n[2],s=n[3],c=n[4],u=n[5],d=n[6],f=n[7]):({className:o,children:a,"data-slot":s,position:d,ref:u,width:f,...c}=e,n[0]=e,n[1]=a,n[2]=o,n[3]=s,n[4]=c,n[5]=u,n[6]=d,n[7]=f);let h=d===void 0?`popper`:d,g=f===void 0?`trigger`:f,_=i(),y;n[8]===s?y=n[9]:(y=r(s,`select-content`),n[8]=s,n[9]=y);let b=h===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,x=g===`trigger`&&`w-(--radix-select-trigger-width)`,S;n[10]!==o||n[11]!==b||n[12]!==x?(S=t(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 motion-reduce:animate-none relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,b,x,o),n[10]=o,n[11]=b,n[12]=x,n[13]=S):S=n[13];let C;n[14]===Symbol.for(`react.memo_cache_sentinel`)?(C=p(w,{}),n[14]=C):C=n[14];let E=h===`popper`&&`h-(--radix-select-trigger-height) w-full`,D;n[15]===E?D=n[16]:(D=t(`p-1 space-y-px`,E),n[15]=E,n[16]=D);let O;n[17]!==a||n[18]!==D?(O=p(v.Viewport,{className:D,children:a}),n[17]=a,n[18]=D,n[19]=O):O=n[19];let k;n[20]===Symbol.for(`react.memo_cache_sentinel`)?(k=p(T,{}),n[20]=k):k=n[20];let A;n[21]!==h||n[22]!==c||n[23]!==u||n[24]!==O||n[25]!==y||n[26]!==S?(A=m(v.Content,{ref:u,"data-slot":y,className:S,position:h,...c,children:[C,O,k]}),n[21]=h,n[22]=c,n[23]=u,n[24]=O,n[25]=y,n[26]=S,n[27]=A):A=n[27];let j;return n[28]!==_||n[29]!==A?(j=p(v.Portal,{container:_,children:A}),n[28]=_,n[29]=A,n[30]=j):j=n[30],j},Group:x,Item:e=>{let i=l(28),a,o,s,c,u,d,f;i[0]===e?(a=i[1],o=i[2],s=i[3],c=i[4],u=i[5],d=i[6],f=i[7]):({className:o,children:a,"data-slot":s,icon:c,ref:d,translate:f,...u}=e,i[0]=e,i[1]=a,i[2]=o,i[3]=s,i[4]=c,i[5]=u,i[6]=d,i[7]=f);let _;i[8]===s?_=i[9]:(_=r(s,`select-item`),i[8]=s,i[9]=_);let y;i[10]===o?y=i[11]:(y=t(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,o),i[10]=o,i[11]=y);let b;i[12]===c?b=i[13]:(b=c&&p(n,{svg:c}),i[12]=c,i[13]=b);let x;i[14]===f?x=i[15]:(x=e=>p(v.ItemText,{children:p(`span`,{"data-slot":`select-item-label`,className:`contents`,translate:f,children:e})}),i[14]=f,i[15]=x);let S;i[16]!==a||i[17]!==x?(S=p(h,{child:a,children:x}),i[16]=a,i[17]=x,i[18]=S):S=i[18];let C;i[19]===Symbol.for(`react.memo_cache_sentinel`)?(C=p(v.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:p(n,{svg:p(g,{weight:`bold`}),className:`size-4 text-accent-600`})}),i[19]=C):C=i[19];let w;return i[20]!==u||i[21]!==d||i[22]!==_||i[23]!==y||i[24]!==b||i[25]!==S||i[26]!==f?(w=m(v.Item,{ref:d,"data-slot":_,translate:f,className:y,...u,children:[b,S,C]}),i[20]=u,i[21]=d,i[22]=_,i[23]=y,i[24]=b,i[25]=S,i[26]=f,i[27]=w):w=i[27],w},Label:e=>{let n=l(14),i,a,o,s;n[0]===e?(i=n[1],a=n[2],o=n[3],s=n[4]):({className:i,"data-slot":a,ref:s,...o}=e,n[0]=e,n[1]=i,n[2]=a,n[3]=o,n[4]=s);let c;n[5]===a?c=n[6]:(c=r(a,`select-label`),n[5]=a,n[6]=c);let u;n[7]===i?u=n[8]:(u=t(`px-2 py-1.5 text-sm font-medium`,i),n[7]=i,n[8]=u);let d;return n[9]!==o||n[10]!==s||n[11]!==c||n[12]!==u?(d=p(v.Label,{ref:s,"data-slot":c,className:u,...o}),n[9]=o,n[10]=s,n[11]=c,n[12]=u,n[13]=d):d=n[13],d},Separator:e=>{let n=l(14),i,a,o,s;n[0]===e?(i=n[1],a=n[2],o=n[3],s=n[4]):({className:i,"data-slot":a,ref:s,...o}=e,n[0]=e,n[1]=i,n[2]=a,n[3]=o,n[4]=s);let u;n[5]===a?u=n[6]:(u=r(a,`select-separator`),n[5]=a,n[6]=u);let d;n[7]===i?d=n[8]:(d=t(`-mx-1 my-1 h-px w-auto`,i),n[7]=i,n[8]=d);let f;return n[9]!==o||n[10]!==s||n[11]!==u||n[12]!==d?(f=p(c,{ref:s,"data-slot":u,className:d,...o}),n[9]=o,n[10]=s,n[11]=u,n[12]=d,n[13]=f):f=n[13],f},Trigger:C,Value:S};function D(e){return p(`span`,{"data-slot":`select-trigger-label`,className:`contents`,children:e})}export{E as t};

package/dist/select.d.ts

@@ -1,2 +1,2 @@
-import { t as Select } from "./select-ouAW88jx.js";
+import { t as Select } from "./select-DMlziWUZ.js";
 export { Select };

package/dist/select.js

@@ -1 +1 @@
-import{t as e}from"./select-sOHUE2Bm.js";export{e as Select};
+import{t as e}from"./select-DX72zQN2.js";export{e as Select};

package/dist/selectable-list.d.ts

@@ -213,6 +213,19 @@ declare const Filter: ({ "aria-label": ariaLabel, ref, ...props }: Omit<Componen
  * indeterminate when only some are, unchecked when none are — and toggling it
  * selects or clears that filtered set. Optional. Children are the visible label.
  *
+ * **Structure.** `children` render inside a
+ * `<span data-slot="selectable-list-select-all-label">`. The checkbox is a
+ * permanent element sibling, so without the span a bare text label is never a
+ * lone child: a browser translation engine reparents that text node, and the
+ * removal React runs when a count-aware label swaps to an element throws. The
+ * span is `display: contents`, so the checkbox and the label stay flex items of
+ * the header and keep its `gap`.
+ *
+ * | Data Attribute | Value                                | Description                          |
+ * | -------------- | ------------------------------------ | ------------------------------------ |
+ * | `data-slot`    | `"selectable-list-select-all"`       | On the header `<label>`.             |
+ * | `data-slot`    | `"selectable-list-select-all-label"` | On the `<span>` wrapping `children`. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
@@ -422,6 +435,19 @@ declare const VirtualViewport: ({ children, ref, ...props }: SelectableListVirtu
  * hidden while there are matches), so screen-reader users hear the message
  * when their filter empties the list instead of the grid silently vanishing.
  *
+ * **Structure.** The message renders inside a
+ * `<span data-slot="selectable-list-empty-label">`. The live region stays
+ * mounted, so React removes that span when options match again. The span
+ * exists so the node React removes is an element: a browser translation
+ * engine reparents text nodes, and a removal aimed at one throws. The span is
+ * `display: contents`, so it adds no box and the message stays a direct child
+ * of the centered region.
+ *
+ * | Data Attribute | Value                           | Description                                                                |
+ * | -------------- | ------------------------------- | -------------------------------------------------------------------------- |
+ * | `data-slot`    | `"selectable-list-empty"`       | On the live-region element.                                                |
+ * | `data-slot`    | `"selectable-list-empty-label"` | On the `<span>` wrapping `children`. Present only while the message shows. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/selectable-list
  *
  * @example
@@ -532,6 +558,19 @@ declare const SelectableList: {
    * indeterminate when only some are, unchecked when none are. Toggling it
    * selects or clears that filtered set. Optional. Children are the visible label.
    *
+   * **Structure.** `children` render inside a
+   * `<span data-slot="selectable-list-select-all-label">`. The checkbox is a
+   * permanent element sibling, so without the span a bare text label is never a
+   * lone child: a browser translation engine reparents that text node, and the
+   * removal React runs when a count-aware label swaps to an element throws. The
+   * span is `display: contents`, so the checkbox and the label stay flex items of
+   * the header and keep its `gap`.
+   *
+   * | Data Attribute | Value                                | Description                          |
+   * | -------------- | ------------------------------------ | ------------------------------------ |
+   * | `data-slot`    | `"selectable-list-select-all"`       | On the header `<label>`.             |
+   * | `data-slot`    | `"selectable-list-select-all-label"` | On the `<span>` wrapping `children`. |
+   *
    * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example
@@ -678,6 +717,19 @@ declare const SelectableList: {
    * hidden while there are matches), so screen-reader users hear the message
    * when their filter empties the list instead of the grid silently vanishing.
    *
+   * **Structure.** The message renders inside a
+   * `<span data-slot="selectable-list-empty-label">`. The live region stays
+   * mounted, so React removes that span when options match again. The span
+   * exists so the node React removes is an element: a browser translation
+   * engine reparents text nodes, and a removal aimed at one throws. The span is
+   * `display: contents`, so it adds no box and the message stays a direct child
+   * of the centered region.
+   *
+   * | Data Attribute | Value                           | Description                                                                |
+   * | -------------- | ------------------------------- | -------------------------------------------------------------------------- |
+   * | `data-slot`    | `"selectable-list-empty"`       | On the live-region element.                                                |
+   * | `data-slot`    | `"selectable-list-empty-label"` | On the `<span>` wrapping `children`. Present only while the message shows. |
+   *
    * @see https://mantle.ngrok.com/components/data-display/selectable-list
    *
    * @example

package/dist/selectable-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-0HCjnNv1.js";import{n as t,t as n}from"./checkbox-DbJSqSNN.js";import{t as r}from"./choice-SRyLguqU.js";import{t as i}from"./use-callback-ref-BvVyI5K1.js";import{n as a,t as o}from"./input-yq0jLE4e.js";import{n as s,r as c,t as l}from"./list-BleZ-43e.js";import{c as u}from"react/compiler-runtime";import{cloneElement as d,createContext as f,isValidElement as p,useContext as m,useId as h,useState as g}from"react";import _ from"tiny-invariant";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";function x(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function S(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>x(e).toLowerCase().includes(n))}function C(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function w(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 T=f(null);function E(e){let t=m(T);return _(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const D=[],O=t=>{let n=u(49),r,a,o,s,c,l,d,f,p,m,_;n[0]===t?(r=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],d=n[7],f=n[8],p=n[9],m=n[10],_=n[11]):({className:r,defaultQuery:a,defaultValue:o,filter:s,onQueryChange:c,onValueChange:l,options:d,query:p,ref:m,value:_,...f}=t,n[0]=t,n[1]=r,n[2]=a,n[3]=o,n[4]=s,n[5]=c,n[6]=l,n[7]=d,n[8]=f,n[9]=p,n[10]=m,n[11]=_);let y=h(),b=_!=null,[x,w]=g(o??D),E=b?_:x,O=p!=null,[k,A]=g(a??``),j=O?p:k,M=i(l),N=i(c),P;n[12]!==b||n[13]!==M?(P=e=>{b||w(e),M(e)},n[12]=b,n[13]=M,n[14]=P):P=n[14];let F=P,I;n[15]!==O||n[16]!==N?(I=e=>{O||A(e),N(e)},n[15]=O,n[16]=N,n[17]=I):I=n[17];let L=I,R;n[18]===E?R=n[19]:(R=new Set(E),n[18]=E,n[19]=R);let V=R,H;n[20]===d?H=n[21]:(H=new Set(d.filter(z).map(B)),n[20]=d,n[21]=H);let U=H,W;n[22]!==s||n[23]!==d||n[24]!==j?(W=s==null?S(d,j):d.filter(e=>s(e,j)),n[22]=s,n[23]=d,n[24]=j,n[25]=W):W=n[25];let G=W,K;n[26]!==F||n[27]!==U||n[28]!==E?(K=e=>{U.has(e)||F(C(E,e))},n[26]=F,n[27]=U,n[28]=E,n[29]=K):K=n[29];let q;n[30]!==F||n[31]!==U||n[32]!==G||n[33]!==y||n[34]!==j||n[35]!==V||n[36]!==E||n[37]!==L||n[38]!==K?(q={listId:y,filteredOptions:G,query:j,setQuery:L,selectedValues:E,selectedSet:V,disabledSet:U,toggle:K,setSelection:F},n[30]=F,n[31]=U,n[32]=G,n[33]=y,n[34]=j,n[35]=V,n[36]=E,n[37]=L,n[38]=K,n[39]=q):q=n[39];let J=q,Y;n[40]===r?Y=n[41]:(Y=e(`flex w-full flex-col gap-3`,r),n[40]=r,n[41]=Y);let X;n[42]!==f||n[43]!==m||n[44]!==Y?(X=v(`div`,{ref:m,"data-slot":`selectable-list`,className:Y,...f}),n[42]=f,n[43]=m,n[44]=Y,n[45]=X):X=n[45];let Z;return n[46]!==J||n[47]!==X?(Z=v(T.Provider,{value:J,children:X}),n[46]=J,n[47]=X,n[48]=Z):Z=n[48],Z},k=e=>{let t=u(14),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({"aria-label":i,ref:r,...n}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let s=i===void 0?`Filter`:i,{query:c,setQuery:l}=E(`Filter`),d;t[4]===l?d=t[5]:(d=e=>l(e.target.value),t[4]=l,t[5]=d);let f,p;t[6]===Symbol.for(`react.memo_cache_sentinel`)?(f=v(b,{"aria-hidden":!0}),p=v(a,{}),t[6]=f,t[7]=p):(f=t[6],p=t[7]);let m;return t[8]!==s||t[9]!==n||t[10]!==c||t[11]!==r||t[12]!==d?(m=y(o,{ref:r,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":s,value:c,onChange:d,...n,children:[f,p]}),t[8]=s,t[9]=n,t[10]=c,t[11]=r,t[12]=d,t[13]=m):m=t[13],m},A=r=>{let i=u(30),a,o,s,c;i[0]===r?(a=i[1],o=i[2],s=i[3],c=i[4]):({children:a,className:o,ref:c,...s}=r,i[0]=r,i[1]=a,i[2]=o,i[3]=s,i[4]=c);let{filteredOptions:l,selectedValues:d,selectedSet:f,setSelection:p}=E(`SelectAll`),m=h(),g,_;if(i[5]!==l||i[6]!==f){let{allSelected:e,someSelected:n}=w(l,f);g=e,_=t({allSelected:g,someSelected:n}),i[5]=l,i[6]=f,i[7]=g,i[8]=_}else g=i[7],_=i[8];let b=_,x;i[9]===l?x=i[10]:(x=l.some(V),i[9]=l,i[10]=x);let S=x,C;i[11]!==g||i[12]!==l||i[13]!==d||i[14]!==p?(C=()=>{let e=l.filter(H).map(U);if(g){let t=new Set(e);p(d.filter(e=>!t.has(e)));return}p([...new Set([...d,...e])])},i[11]=g,i[12]=l,i[13]=d,i[14]=p,i[15]=C):C=i[15];let T=C,D;i[16]===o?D=i[17]:(D=e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,o),i[16]=o,i[17]=D);let O=!S,k;i[18]!==b||i[19]!==m||i[20]!==T||i[21]!==O?(k=v(n,{id:m,checked:b,onChange:T,disabled:O}),i[18]=b,i[19]=m,i[20]=T,i[21]=O,i[22]=k):k=i[22];let A;return i[23]!==a||i[24]!==m||i[25]!==s||i[26]!==c||i[27]!==D||i[28]!==k?(A=y(`label`,{ref:c,htmlFor:m,"data-slot":`selectable-list-select-all`,className:D,...s,children:[k,a]}),i[23]=a,i[24]=m,i[25]=s,i[26]=c,i[27]=D,i[28]=k,i[29]=A):A=i[29],A};function j(e,t){return`${e}-control-${encodeURIComponent(t)}`}const M=t=>{let i=u(38),a,o,c,l,d;i[0]===t?(a=i[1],o=i[2],c=i[3],l=i[4],d=i[5]):({children:a,className:o,ref:l,value:d,...c}=t,i[0]=t,i[1]=a,i[2]=o,i[3]=c,i[4]=l,i[5]=d);let{listId:f,selectedSet:p,disabledSet:m,toggle:h}=E(`Item`),g;i[6]!==f||i[7]!==d?(g=j(f,d),i[6]=f,i[7]=d,i[8]=g):g=i[8];let _=g,b;i[9]!==p||i[10]!==d?(b=p.has(d),i[9]=p,i[10]=d,i[11]=b):b=i[11];let x=b,S;i[12]!==m||i[13]!==d?(S=m.has(d),i[12]=m,i[13]=d,i[14]=S):S=i[14];let C=S,w;i[15]===o?w=i[16]:(w=e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,o),i[15]=o,i[16]=w);let T;i[17]!==h||i[18]!==d?(T=()=>h(d),i[17]=h,i[18]=d,i[19]=T):T=i[19];let D;i[20]!==x||i[21]!==T?(D=v(r.Indicator,{role:`gridcell`,children:v(n,{checked:x,onChange:T,tabIndex:-1})}),i[20]=x,i[21]=T,i[22]=D):D=i[22];let O;i[23]===a?O=i[24]:(O=v(r.Content,{role:`gridcell`,children:a}),i[23]=a,i[24]=O);let k;i[25]!==_||i[26]!==C||i[27]!==D||i[28]!==O?(k=y(r.Root,{id:_,disabled:C,children:[D,O]}),i[25]=_,i[26]=C,i[27]=D,i[28]=O,i[29]=k):k=i[29];let A;return i[30]!==C||i[31]!==c||i[32]!==l||i[33]!==x||i[34]!==w||i[35]!==k||i[36]!==d?(A=v(s,{ref:l,asChild:!0,selected:x,disabled:C,className:w,...c,"data-slot":`selectable-list-item`,"data-value":d,children:k}),i[30]=C,i[31]=c,i[32]=l,i[33]=x,i[34]=w,i[35]=k,i[36]=d,i[37]=A):A=i[37],A},N=e=>{let t=u(2),n;return t[0]===e?n=t[1]:(n=v(r.Label,{"data-slot":`selectable-list-item-title`,...e}),t[0]=e,t[1]=n),n},P=e=>{let t=u(2),n;return t[0]===e?n=t[1]:(n=v(r.Description,{"data-slot":`selectable-list-item-description`,...e}),t[0]=e,t[1]=n),n};function F(e){return y(M,{value:e.value,children:[v(N,{children:e.label}),e.description!=null&&v(P,{children:e.description})]})}function I(e,t){let n=[],r=[];for(let i of e){let e=t(i);p(e)&&(n.push(d(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function L(e,t){let n=u(17),{filteredOptions:r,listId:i,toggle:a}=E(e),o=t??F,s;n[0]!==r||n[1]!==o?(s=I(r,o),n[0]=r,n[1]=o,n[2]=s):s=n[2];let{items:c,options:l}=s,d;n[3]!==l||n[4]!==a?(d=e=>{let t=l[e];t!=null&&a(t.value)},n[3]=l,n[4]=a,n[5]=d):d=n[5];let f=d,p;n[6]!==l||n[7]!==i?(p=e=>{let t=l[e];return t==null?``:j(i,t.value)},n[6]=l,n[7]=i,n[8]=p):p=n[8];let m=p,h;n[9]===l?h=n[10]:(h=e=>l[e]?.disabled===!0,n[9]=l,n[10]=h);let g=h,_=c.length===0,v;return n[11]!==g||n[12]!==m||n[13]!==c||n[14]!==f||n[15]!==_?(v={isEmpty:_,isItemDisabled:g,onActivate:f,itemId:m,items:c},n[11]=g,n[12]=m,n[13]=c,n[14]=f,n[15]=_,n[16]=v):v=n[16],v}const R={Root:O,Filter:k,SelectAll:A,Viewport:e=>{let t=u(11),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({children:n,ref:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let{isEmpty:a,isItemDisabled:o,onActivate:s,itemId:l,items:d}=L(`Viewport`,n);if(a)return null;let f;return t[4]!==o||t[5]!==l||t[6]!==d||t[7]!==s||t[8]!==r||t[9]!==i?(f=v(c,{ref:i,"data-slot":`selectable-list-viewport`,semantics:`grid`,...r,"aria-multiselectable":!0,isItemDisabled:o,onActivate:s,itemId:l,children:d}),t[4]=o,t[5]=l,t[6]=d,t[7]=s,t[8]=r,t[9]=i,t[10]=f):f=t[10],f},VirtualViewport:e=>{let t=u(11),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({children:n,ref:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let{isEmpty:a,isItemDisabled:o,onActivate:s,itemId:c,items:d}=L(`VirtualViewport`,n);if(a)return null;let f;return t[4]!==o||t[5]!==c||t[6]!==d||t[7]!==s||t[8]!==r||t[9]!==i?(f=v(l,{ref:i,"data-slot":`selectable-list-viewport`,semantics:`grid`,...r,"aria-multiselectable":!0,isItemDisabled:o,onActivate:s,itemId:c,children:d}),t[4]=o,t[5]=c,t[6]=d,t[7]=s,t[8]=r,t[9]=i,t[10]=f):f=t[10],f},Item:M,ItemTitle:N,ItemDescription:P,Empty:t=>{let n=u(14),r,i,a,o;n[0]===t?(r=n[1],i=n[2],a=n[3],o=n[4]):({children:r,className:i,ref:o,...a}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=a,n[4]=o);let{filteredOptions:s}=E(`Empty`),c=s.length===0,l=!c&&`sr-only`,d=c&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,f;n[5]!==i||n[6]!==l||n[7]!==d?(f=e(l,d,i),n[5]=i,n[6]=l,n[7]=d,n[8]=f):f=n[8];let p=c?r:null,m;return n[9]!==a||n[10]!==o||n[11]!==f||n[12]!==p?(m=v(`div`,{ref:o,"data-slot":`selectable-list-empty`,role:`status`,className:f,...a,children:p}),n[9]=a,n[10]=o,n[11]=f,n[12]=p,n[13]=m):m=n[13],m}};function z(e){return e.disabled}function B(e){return e.value}function V(e){return!e.disabled}function H(e){return!e.disabled}function U(e){return e.value}export{R as SelectableList,S as filterSelectableOptions,x as optionLabelText,w as summarizeSelection,C as toggleSelectionValue};
+import{t as e}from"./cx-0HCjnNv1.js";import{n as t,t as n}from"./checkbox-DbJSqSNN.js";import{t as r}from"./choice-SRyLguqU.js";import{t as i}from"./use-callback-ref-BvVyI5K1.js";import{n as a,t as o}from"./input-yq0jLE4e.js";import{n as s,r as c,t as l}from"./list-BleZ-43e.js";import{c as u}from"react/compiler-runtime";import{cloneElement as d,createContext as f,isValidElement as p,useContext as m,useId as h,useState as g}from"react";import _ from"tiny-invariant";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";function x(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function S(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>x(e).toLowerCase().includes(n))}function C(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function w(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 T=f(null);function E(e){let t=m(T);return _(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const D=[],O=t=>{let n=u(49),r,a,o,s,c,l,d,f,p,m,_;n[0]===t?(r=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],d=n[7],f=n[8],p=n[9],m=n[10],_=n[11]):({className:r,defaultQuery:a,defaultValue:o,filter:s,onQueryChange:c,onValueChange:l,options:d,query:p,ref:m,value:_,...f}=t,n[0]=t,n[1]=r,n[2]=a,n[3]=o,n[4]=s,n[5]=c,n[6]=l,n[7]=d,n[8]=f,n[9]=p,n[10]=m,n[11]=_);let y=h(),b=_!=null,[x,w]=g(o??D),E=b?_:x,O=p!=null,[k,A]=g(a??``),j=O?p:k,M=i(l),N=i(c),P;n[12]!==b||n[13]!==M?(P=e=>{b||w(e),M(e)},n[12]=b,n[13]=M,n[14]=P):P=n[14];let F=P,I;n[15]!==O||n[16]!==N?(I=e=>{O||A(e),N(e)},n[15]=O,n[16]=N,n[17]=I):I=n[17];let L=I,R;n[18]===E?R=n[19]:(R=new Set(E),n[18]=E,n[19]=R);let V=R,H;n[20]===d?H=n[21]:(H=new Set(d.filter(z).map(B)),n[20]=d,n[21]=H);let U=H,W;n[22]!==s||n[23]!==d||n[24]!==j?(W=s==null?S(d,j):d.filter(e=>s(e,j)),n[22]=s,n[23]=d,n[24]=j,n[25]=W):W=n[25];let G=W,K;n[26]!==F||n[27]!==U||n[28]!==E?(K=e=>{U.has(e)||F(C(E,e))},n[26]=F,n[27]=U,n[28]=E,n[29]=K):K=n[29];let q;n[30]!==F||n[31]!==U||n[32]!==G||n[33]!==y||n[34]!==j||n[35]!==V||n[36]!==E||n[37]!==L||n[38]!==K?(q={listId:y,filteredOptions:G,query:j,setQuery:L,selectedValues:E,selectedSet:V,disabledSet:U,toggle:K,setSelection:F},n[30]=F,n[31]=U,n[32]=G,n[33]=y,n[34]=j,n[35]=V,n[36]=E,n[37]=L,n[38]=K,n[39]=q):q=n[39];let J=q,Y;n[40]===r?Y=n[41]:(Y=e(`flex w-full flex-col gap-3`,r),n[40]=r,n[41]=Y);let X;n[42]!==f||n[43]!==m||n[44]!==Y?(X=v(`div`,{ref:m,"data-slot":`selectable-list`,className:Y,...f}),n[42]=f,n[43]=m,n[44]=Y,n[45]=X):X=n[45];let Z;return n[46]!==J||n[47]!==X?(Z=v(T.Provider,{value:J,children:X}),n[46]=J,n[47]=X,n[48]=Z):Z=n[48],Z},k=e=>{let t=u(14),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({"aria-label":i,ref:r,...n}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let s=i===void 0?`Filter`:i,{query:c,setQuery:l}=E(`Filter`),d;t[4]===l?d=t[5]:(d=e=>l(e.target.value),t[4]=l,t[5]=d);let f,p;t[6]===Symbol.for(`react.memo_cache_sentinel`)?(f=v(b,{"aria-hidden":!0}),p=v(a,{}),t[6]=f,t[7]=p):(f=t[6],p=t[7]);let m;return t[8]!==s||t[9]!==n||t[10]!==c||t[11]!==r||t[12]!==d?(m=y(o,{ref:r,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":s,value:c,onChange:d,...n,children:[f,p]}),t[8]=s,t[9]=n,t[10]=c,t[11]=r,t[12]=d,t[13]=m):m=t[13],m},A=r=>{let i=u(32),a,o,s,c;i[0]===r?(a=i[1],o=i[2],s=i[3],c=i[4]):({children:a,className:o,ref:c,...s}=r,i[0]=r,i[1]=a,i[2]=o,i[3]=s,i[4]=c);let{filteredOptions:l,selectedValues:d,selectedSet:f,setSelection:p}=E(`SelectAll`),m=h(),g,_;if(i[5]!==l||i[6]!==f){let{allSelected:e,someSelected:n}=w(l,f);g=e,_=t({allSelected:g,someSelected:n}),i[5]=l,i[6]=f,i[7]=g,i[8]=_}else g=i[7],_=i[8];let b=_,x;i[9]===l?x=i[10]:(x=l.some(V),i[9]=l,i[10]=x);let S=x,C;i[11]!==g||i[12]!==l||i[13]!==d||i[14]!==p?(C=()=>{let e=l.filter(H).map(U);if(g){let t=new Set(e);p(d.filter(e=>!t.has(e)));return}p([...new Set([...d,...e])])},i[11]=g,i[12]=l,i[13]=d,i[14]=p,i[15]=C):C=i[15];let T=C,D;i[16]===o?D=i[17]:(D=e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,o),i[16]=o,i[17]=D);let O=!S,k;i[18]!==b||i[19]!==m||i[20]!==T||i[21]!==O?(k=v(n,{id:m,checked:b,onChange:T,disabled:O}),i[18]=b,i[19]=m,i[20]=T,i[21]=O,i[22]=k):k=i[22];let A;i[23]===a?A=i[24]:(A=v(`span`,{"data-slot":`selectable-list-select-all-label`,className:`contents`,children:a}),i[23]=a,i[24]=A);let j;return i[25]!==m||i[26]!==s||i[27]!==c||i[28]!==D||i[29]!==k||i[30]!==A?(j=y(`label`,{ref:c,htmlFor:m,"data-slot":`selectable-list-select-all`,className:D,...s,children:[k,A]}),i[25]=m,i[26]=s,i[27]=c,i[28]=D,i[29]=k,i[30]=A,i[31]=j):j=i[31],j};function j(e,t){return`${e}-control-${encodeURIComponent(t)}`}const M=t=>{let i=u(38),a,o,c,l,d;i[0]===t?(a=i[1],o=i[2],c=i[3],l=i[4],d=i[5]):({children:a,className:o,ref:l,value:d,...c}=t,i[0]=t,i[1]=a,i[2]=o,i[3]=c,i[4]=l,i[5]=d);let{listId:f,selectedSet:p,disabledSet:m,toggle:h}=E(`Item`),g;i[6]!==f||i[7]!==d?(g=j(f,d),i[6]=f,i[7]=d,i[8]=g):g=i[8];let _=g,b;i[9]!==p||i[10]!==d?(b=p.has(d),i[9]=p,i[10]=d,i[11]=b):b=i[11];let x=b,S;i[12]!==m||i[13]!==d?(S=m.has(d),i[12]=m,i[13]=d,i[14]=S):S=i[14];let C=S,w;i[15]===o?w=i[16]:(w=e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,o),i[15]=o,i[16]=w);let T;i[17]!==h||i[18]!==d?(T=()=>h(d),i[17]=h,i[18]=d,i[19]=T):T=i[19];let D;i[20]!==x||i[21]!==T?(D=v(r.Indicator,{role:`gridcell`,children:v(n,{checked:x,onChange:T,tabIndex:-1})}),i[20]=x,i[21]=T,i[22]=D):D=i[22];let O;i[23]===a?O=i[24]:(O=v(r.Content,{role:`gridcell`,children:a}),i[23]=a,i[24]=O);let k;i[25]!==_||i[26]!==C||i[27]!==D||i[28]!==O?(k=y(r.Root,{id:_,disabled:C,children:[D,O]}),i[25]=_,i[26]=C,i[27]=D,i[28]=O,i[29]=k):k=i[29];let A;return i[30]!==C||i[31]!==c||i[32]!==l||i[33]!==x||i[34]!==w||i[35]!==k||i[36]!==d?(A=v(s,{ref:l,asChild:!0,selected:x,disabled:C,className:w,...c,"data-slot":`selectable-list-item`,"data-value":d,children:k}),i[30]=C,i[31]=c,i[32]=l,i[33]=x,i[34]=w,i[35]=k,i[36]=d,i[37]=A):A=i[37],A},N=e=>{let t=u(2),n;return t[0]===e?n=t[1]:(n=v(r.Label,{"data-slot":`selectable-list-item-title`,...e}),t[0]=e,t[1]=n),n},P=e=>{let t=u(2),n;return t[0]===e?n=t[1]:(n=v(r.Description,{"data-slot":`selectable-list-item-description`,...e}),t[0]=e,t[1]=n),n};function F(e){return y(M,{value:e.value,children:[v(N,{children:e.label}),e.description!=null&&v(P,{children:e.description})]})}function I(e,t){let n=[],r=[];for(let i of e){let e=t(i);p(e)&&(n.push(d(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function L(e,t){let n=u(17),{filteredOptions:r,listId:i,toggle:a}=E(e),o=t??F,s;n[0]!==r||n[1]!==o?(s=I(r,o),n[0]=r,n[1]=o,n[2]=s):s=n[2];let{items:c,options:l}=s,d;n[3]!==l||n[4]!==a?(d=e=>{let t=l[e];t!=null&&a(t.value)},n[3]=l,n[4]=a,n[5]=d):d=n[5];let f=d,p;n[6]!==l||n[7]!==i?(p=e=>{let t=l[e];return t==null?``:j(i,t.value)},n[6]=l,n[7]=i,n[8]=p):p=n[8];let m=p,h;n[9]===l?h=n[10]:(h=e=>l[e]?.disabled===!0,n[9]=l,n[10]=h);let g=h,_=c.length===0,v;return n[11]!==g||n[12]!==m||n[13]!==c||n[14]!==f||n[15]!==_?(v={isEmpty:_,isItemDisabled:g,onActivate:f,itemId:m,items:c},n[11]=g,n[12]=m,n[13]=c,n[14]=f,n[15]=_,n[16]=v):v=n[16],v}const R={Root:O,Filter:k,SelectAll:A,Viewport:e=>{let t=u(11),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({children:n,ref:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let{isEmpty:a,isItemDisabled:o,onActivate:s,itemId:l,items:d}=L(`Viewport`,n);if(a)return null;let f;return t[4]!==o||t[5]!==l||t[6]!==d||t[7]!==s||t[8]!==r||t[9]!==i?(f=v(c,{ref:i,"data-slot":`selectable-list-viewport`,semantics:`grid`,...r,"aria-multiselectable":!0,isItemDisabled:o,onActivate:s,itemId:l,children:d}),t[4]=o,t[5]=l,t[6]=d,t[7]=s,t[8]=r,t[9]=i,t[10]=f):f=t[10],f},VirtualViewport:e=>{let t=u(11),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({children:n,ref:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let{isEmpty:a,isItemDisabled:o,onActivate:s,itemId:c,items:d}=L(`VirtualViewport`,n);if(a)return null;let f;return t[4]!==o||t[5]!==c||t[6]!==d||t[7]!==s||t[8]!==r||t[9]!==i?(f=v(l,{ref:i,"data-slot":`selectable-list-viewport`,semantics:`grid`,...r,"aria-multiselectable":!0,isItemDisabled:o,onActivate:s,itemId:c,children:d}),t[4]=o,t[5]=c,t[6]=d,t[7]=s,t[8]=r,t[9]=i,t[10]=f):f=t[10],f},Item:M,ItemTitle:N,ItemDescription:P,Empty:t=>{let n=u(17),r,i,a,o;n[0]===t?(r=n[1],i=n[2],a=n[3],o=n[4]):({children:r,className:i,ref:o,...a}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=a,n[4]=o);let{filteredOptions:s}=E(`Empty`),c=s.length===0,l=!c&&`sr-only`,d=c&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,f;n[5]!==i||n[6]!==l||n[7]!==d?(f=e(l,d,i),n[5]=i,n[6]=l,n[7]=d,n[8]=f):f=n[8];let p;n[9]!==r||n[10]!==c?(p=c&&v(`span`,{"data-slot":`selectable-list-empty-label`,className:`contents`,children:r}),n[9]=r,n[10]=c,n[11]=p):p=n[11];let m;return n[12]!==a||n[13]!==o||n[14]!==f||n[15]!==p?(m=v(`div`,{ref:o,"data-slot":`selectable-list-empty`,role:`status`,className:f,...a,children:p}),n[12]=a,n[13]=o,n[14]=f,n[15]=p,n[16]=m):m=n[16],m}};function z(e){return e.disabled}function B(e){return e.value}function V(e){return!e.disabled}function H(e){return!e.disabled}function U(e){return e.value}export{R as SelectableList,S as filterSelectableOptions,x as optionLabelText,w as summarizeSelection,C as toggleSelectionValue};