@ngrok/mantle 0.79.3 → 0.80.0

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.79.3)
+# @ngrok/mantle (0.80.0)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/main.d.ts

@@ -1,8 +1,24 @@
 import { ComponentProps } from "react";
 //#region src/components/main/main.d.ts
-declare function Main({ className, ...props }: ComponentProps<"main">): import("react").JSX.Element;
-declare namespace Main {
-  var displayName: string;
-}
+/**
+ * A focusable `<main>` landmark for the page's primary content. Renders with
+ * `id="main"` and `tabIndex={-1}` so a skip link (or any programmatic focus
+ * call) can send keyboard users directly to the main content without exposing
+ * a visible focus ring on the region itself (`focus:outline-hidden`).
+ *
+ * Pair with the `<SkipToMainLink>` component at the top of the document.
+ *
+ * @see https://mantle.ngrok.com/components/primitives/main
+ *
+ * @example
+ * ```tsx
+ * <SkipToMainLink />
+ * <Header />
+ * <Main>
+ *   <h1>Page title</h1>
+ * </Main>
+ * ```
+ */
+declare const Main: ({ className, ...props }: ComponentProps<"main">) => import("react").JSX.Element;
 //#endregion
 export { Main };

package/dist/main.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";const n=({className:n,...r})=>t(`main`,{...r,"data-slot":`main`,id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,n)});n.displayName=`Main`;export{n as Main};
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";const n=({className:n,...r})=>t(`main`,{...r,"data-slot":`main`,id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,n)});export{n as Main};

package/dist/media-object.d.ts

@@ -1,7 +1,30 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { ComponentProps } from "react";
 //#region src/components/media-object/media-object.d.ts
 type Props = ComponentProps<"div"> & WithAsChild;
+/**
+ * The media object is an image/icon (media) to the left, with descriptive
+ * content (title and subtitle/description) to the right. This is the root
+ * component of the media object.
+ */
+declare const Root: {
+  ({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The container for an image or icon to display in the media slot of the media object.
+ */
+declare const Media: {
+  ({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The container for the content slot of a media object.
+ */
+declare const Content: {
+  ({ asChild, className, children, style, ref }: Props): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A small, reusable layout primitive for "image/icon on one side,
  * descriptive content on the other" — the foundational
@@ -81,7 +104,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Root: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Root: typeof Root;
   /**
    * The container for an image or icon to display in the media slot of the media object.
    *
@@ -99,7 +122,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Media: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Media: typeof Media;
   /**
    * The container for the content slot of a media object.
    *
@@ -117,7 +140,7 @@ declare const MediaObject: {
    * </MediaObject.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
 };
 //#endregion
 export { MediaObject };

package/dist/media-object.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a}));i.displayName=`MediaObject`;const a=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a}));a.displayName=`MediaObjectMedia`;const o=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a}));o.displayName=`MediaObject.Content`;const s={Root:i,Media:a,Content:o};export{s as MediaObject};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a});r.displayName=`MediaObject`;const i=({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a});i.displayName=`MediaObjectMedia`;const a=({asChild:r=!1,className:i,children:a,style:o,ref:s})=>n(r?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a});a.displayName=`MediaObject.Content`;const o={Root:r,Media:i,Content:a};export{o as MediaObject};

package/dist/multi-select.d.ts

@@ -1,5 +1,6 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { n as Separator } from "./separator-B5UmkVRL.js";
 import { ComponentProps, ReactNode } from "react";
 import * as Primitive from "@ariakit/react";
 //#region src/components/multi-select/multi-select.d.ts
@@ -41,6 +42,30 @@ declare const Root: {
   ({ children, defaultSelectedValue, ...props }: MultiSelectProps): import("react").JSX.Element;
   displayName: string;
 };
+type MultiSelectTriggerProps = ComponentProps<"div"> & WithValidation;
+/**
+ * The trigger container for the multi-select. Wraps the input and selected
+ * value tags in a styled container that looks like a form input.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttrigger
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Trigger: {
+  ({ "aria-invalid": _ariaInvalid, className, children, onKeyDown, onMouseDown, ref, validation: _validation, ...props }: MultiSelectTriggerProps): import("react").JSX.Element;
+  displayName: string;
+};
 type TagProps = Omit<ComponentProps<"span">, "children"> & {
   /**
    * The value to display in the tag label.
@@ -56,6 +81,34 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
    */
   locked?: boolean;
 };
+/**
+ * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
+ * Displays the value label with a remove button and full keyboard navigation support.
+ *
+ * Use this when building a custom `TagValues`-like component and you want the
+ * default tag chrome with consistent styling.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselecttag
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues>
+ *       {(props) => <MultiSelect.Tag key={props.value} {...props} />}
+ *     </MultiSelect.TagValues>
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Tag: {
+  ({ className, value, onRemove, locked, onKeyDown, ref, ...props }: TagProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * Props passed to the children render function of `MultiSelect.TagValues`.
  * Spread these onto `MultiSelect.Tag` (or your own tag component) to
@@ -127,10 +180,257 @@ type MultiSelectInputProps = Omit<Primitive.ComboboxProps, "render"> & {
    */
   onValueChange?: (value: string) => void;
 };
+/**
+ * The combobox input for filtering items. Place this inside `MultiSelect.Trigger`,
+ * after `MultiSelect.TagValues`.
+ *
+ * `MultiSelect.Input` is the focusable element of the multi-select. When the
+ * surrounding `MultiSelect.Root` is wrapped in `Field.Control`, the generated
+ * `id`, `aria-invalid`, `aria-describedby`, and `aria-errormessage` flow onto
+ * the input here via `FieldControlContext`.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectinput
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Input: {
+  ({ className, onBlur, onChange, onFocus, onKeyDown, onValueChange, placeholder, ref, ...props }: MultiSelectInputProps): import("react").JSX.Element;
+  displayName: string;
+};
 type MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, "render"> & WithAsChild;
+/**
+ * Renders a popover that contains multi-select content, such as items, groups,
+ * and separators. Opens below the trigger.
+ *
+ * `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.
+ *
+ * By default, mantle disables Ariakit's body scroll lock when the trigger is
+ * inside a mantle modal (`Dialog`, `Sheet`, `AlertDialog`) — the modal already
+ * locks body scroll — and enables it otherwise. Pass `preventBodyScroll` to
+ * override.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectcontent
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *     <MultiSelect.Item value="banana">Banana</MultiSelect.Item>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Content: {
+  ({ asChild, backdrop, children, className, modal, portalElement, preventBodyScroll, ref, sameWidth, unmountOnHide, ...props }: MultiSelectContentProps): import("react").JSX.Element;
+  displayName: string;
+};
 type MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, "render"> & WithAsChild;
+/**
+ * Renders a selectable item inside a `MultiSelect.Content` component.
+ * Items display a checkbox indicator when selected.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectitem
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *     <MultiSelect.Item value="banana">Banana</MultiSelect.Item>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Item: {
+  ({ asChild, children, className, focusOnHover, value, onClick, ref, ...props }: MultiSelectItemProps): import("react").JSX.Element;
+  displayName: string;
+};
 type MultiSelectGroupProps = Omit<Primitive.ComboboxGroupProps, "render"> & WithAsChild;
+/**
+ * Renders a group for MultiSelect.Item elements.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectgroup
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Group>
+ *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+ *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *       <MultiSelect.Item value="banana">Banana</MultiSelect.Item>
+ *     </MultiSelect.Group>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Group: {
+  ({ asChild, children, ref, ...props }: MultiSelectGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
 type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "render"> & WithAsChild;
+/**
+ * Renders a label in a multi-select group.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectgrouplabel
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Group>
+ *       <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+ *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *     </MultiSelect.Group>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const GroupLabel: {
+  ({ asChild, children, className, ref, ...props }: MultiSelectGroupLabelProps): import("react").JSX.Element;
+  displayName: string;
+};
+type MultiSelectGroupDescriptionProps = ComponentProps<"p">;
+/**
+ * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
+ * Provides context about the group's purpose or constraints.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectgroupdescription
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select regions..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Group>
+ *       <MultiSelect.GroupLabel>Regional Aliases</MultiSelect.GroupLabel>
+ *       <MultiSelect.GroupDescription>
+ *         Include all points of presence that are geographically within the region.
+ *       </MultiSelect.GroupDescription>
+ *       <MultiSelect.Item value="global">global</MultiSelect.Item>
+ *     </MultiSelect.Group>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const GroupDescription: {
+  ({ className, children, ref, ...props }: MultiSelectGroupDescriptionProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Renders a separator between MultiSelect.Items or MultiSelect.Groups.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectseparator
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Group>
+ *       <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *     </MultiSelect.Group>
+ *     <MultiSelect.Separator />
+ *     <MultiSelect.Group>
+ *       <MultiSelect.Item value="carrot">Carrot</MultiSelect.Item>
+ *     </MultiSelect.Group>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const MultiSelectSeparatorComponent: {
+  ({ className, ref, ...props }: ComponentProps<typeof Separator>): import("react").JSX.Element;
+  displayName: string;
+};
+type MultiSelectEmptyProps = ComponentProps<"div">;
+/**
+ * Renders a message when no items match the current filter.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectempty
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     {matches.length === 0 && (
+ *       <MultiSelect.Empty>No results found</MultiSelect.Empty>
+ *     )}
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const Empty: {
+  ({ className, children, ref, ...props }: MultiSelectEmptyProps): import("react").JSX.Element;
+  displayName: string;
+};
+type MultiSelectContentFooterProps = ComponentProps<"div">;
+/**
+ * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
+ * with a separator border at the top.
+ *
+ * @see https://mantle.ngrok.com/components/forms/multi-select#multiselectcontentfooter
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect.Root>
+ *   <MultiSelect.Trigger>
+ *     <MultiSelect.TagValues />
+ *     <MultiSelect.Input placeholder="Select items..." />
+ *   </MultiSelect.Trigger>
+ *   <MultiSelect.Content>
+ *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+ *     <MultiSelect.ContentFooter>
+ *       <p>Upgrade to unlock more options.</p>
+ *       <Button appearance="filled" intent="accent">Upgrade</Button>
+ *     </MultiSelect.ContentFooter>
+ *   </MultiSelect.Content>
+ * </MultiSelect.Root>
+ * ```
+ */
+declare const ContentFooter: {
+  ({ className, children, ref, ...props }: MultiSelectContentFooterProps): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A multi-select combobox that allows users to select multiple values with
  * typeahead filtering. Selected values are displayed as removable tags.
@@ -230,7 +530,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Trigger: typeof Trigger;
   /**
    * Renders the selected values as removable tags. Place this inside
    * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
@@ -289,7 +589,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Input: import("react").ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  readonly Input: typeof Input;
   /**
    * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
    * Displays the value label with a remove button and keyboard navigation support.
@@ -311,7 +611,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  readonly Tag: typeof Tag;
   /**
    * Renders a popover that contains multi-select content.
    *
@@ -335,7 +635,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
   /**
    * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
    * with a separator border at the top.
@@ -358,7 +658,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly ContentFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly ContentFooter: typeof ContentFooter;
   /**
    * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.
    *
@@ -378,7 +678,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Item: import("react").ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Item: typeof Item;
   /**
    * Renders a group for MultiSelect.Item elements.
    *
@@ -400,7 +700,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Group: import("react").ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Group: typeof Group;
   /**
    * Renders a label in a multi-select group.
    *
@@ -422,7 +722,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly GroupLabel: import("react").ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly GroupLabel: typeof GroupLabel;
   /**
    * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
    *
@@ -447,7 +747,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly GroupDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  readonly GroupDescription: typeof GroupDescription;
   /**
    * Renders a separator between items or groups.
    *
@@ -472,10 +772,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild & {
-    orientation?: "horizontal" | "vertical";
-    semantic?: boolean;
-  }, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Separator: typeof MultiSelectSeparatorComponent;
   /**
    * Renders a message when no items match the current filter.
    *
@@ -496,7 +793,7 @@ declare const MultiSelect: {
    * </MultiSelect.Root>
    * ```
    */
-  readonly Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Empty: typeof Empty;
 };
 //#endregion
 export { MultiSelect };

package/dist/multi-select.js

@@ -1 +1 @@
-import{t as e}from"./compose-refs-Cjf2gfB8.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CDtYjF_H.js";import{t as r}from"./slot-DmPrjM7N.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{t as o}from"./field-context-BR01g789.js";import{n as s}from"./separator-kBnnv3Cw.js";import{t as c}from"./use-prefers-reduced-motion-CagaNRgm.js";import{createContext as l,forwardRef as u,useCallback as d,useContext as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{XIcon as b}from"@phosphor-icons/react/X";import{CheckIcon as x}from"@phosphor-icons/react/Check";import*as S from"@ariakit/react";import{LockIcon as C}from"@phosphor-icons/react/Lock";const w=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),T=[],E=l({current:null}),D=l({current:[]}),O=l({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),k=({children:e,defaultSelectedValue:t=T,...n})=>{let r=h(null),i=h(void 0),a=h(null),o=h([]),s=m(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return v(E.Provider,{value:r,children:v(O.Provider,{value:s,children:v(D.Provider,{value:o,children:v(S.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};k.displayName=`MultiSelect`;const A=u(({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,validation:l,...u},d)=>{let p=f(E),{inputRef:m}=f(O),h=S.useComboboxContext(),g=i(),{validation:_}=a({"aria-invalid":n,validation:l??g});return v(`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":_||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})});A.displayName=`MultiSelectTrigger`;const j=u(({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=h(null);return y(`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(),U(e.currentTarget);return}s?.(e)},...c,children:[i,v(`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&&U(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:v(n,{svg:o?v(C,{}):v(b,{weight:`bold`}),className:`size-4`})})]})});j.displayName=`MultiSelectTag`;const M=({children:e,lockedValues:t=T})=>{let n=S.useComboboxContext(),r=S.useStoreState(n,`selectedValue`),i=(w(r)?r:void 0)??T,a=h(i);a.current=i;let o=f(D);o.current=t;let s=m(()=>new Set(t),[t]),c=h(new Map),{onInputKeyDownRef:l,inputRef:u}=f(O),d=h(new Set);p(()=>()=>{d.current.forEach(cancelAnimationFrame)},[]);let g=e=>{let t=requestAnimationFrame(()=>{d.current.delete(t),e()});d.current.add(t)},y=e=>{if(n){let t=n.getState().selectedValue;if(!w(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())},x=()=>{u.current?.focus()},C=(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):x();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&U(e);break}if(y(n),e.key===`Backspace`)if(t>0){let e=t-1;g(()=>b(e))}else g(()=>{a.current.length>0?b(0):x()});else g(()=>{t<a.current.length?b(t):x()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),x(),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&&x();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&&U(t)}else y(e)}},v(_,{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&&U(e);return}y(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>C(e,n),onClick:()=>b(n)};return e?e(r):v(j,{...r},t)})})};M.displayName=`MultiSelectTagValues`;const N=u(({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,...u},d)=>{let p=S.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=f(O),g=f(o),_=S.useStoreState(p,`selectedValue`),y=((w(_)?_:void 0)?.length??0)>0;return v(S.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})});N.displayName=`MultiSelectInput`;const P=u(({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,sameWidth:l=!0,unmountOnHide:u=!0,...m},h)=>{let _=f(E),[y,b]=g(!1);p(()=>{b(_.current?.closest(`[data-mantle-modal-content]`)!=null)},[_]);let x=d(()=>_.current?.getBoundingClientRect()??null,[_]),C=d(e=>typeof s==`function`?s(e):s??_.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,_]),w=d(e=>!(e.target instanceof Node&&_.current?.contains(e.target)),[_]);return v(S.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:x,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:h,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,sameWidth:l,unmountOnHide:u,...m,children:i})});P.displayName=`MultiSelectContent`;const F=u(({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...l},u)=>{let d=f(D),p=s!=null&&d.current.includes(s);return y(S.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})=>v(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...l,children:[i,v(S.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:v(n,{svg:v(x,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});F.displayName=`MultiSelectItem`;const I=u(({asChild:e=!1,children:t,...n},i)=>v(S.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>v(r,{ref:e,...t}):void 0,...n,children:t}));I.displayName=`MultiSelectGroup`;const L=u(({asChild:e=!1,children:n,className:i,...a},o)=>v(S.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})=>v(r,{ref:e,...t}):void 0,...a,children:n}));L.displayName=`MultiSelectGroupLabel`;const R=u(({className:e,children:n,...r},i)=>v(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:i,...r,children:n}));R.displayName=`MultiSelectGroupDescription`;const z=u(({className:e,...n},r)=>v(s,{"data-slot":`multi-select-separator`,ref:r,className:t(`my-1 w-auto`,e),...n}));z.displayName=`MultiSelectSeparator`;const B=u(({className:e,children:n,...r},i)=>v(`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}));B.displayName=`MultiSelectEmpty`;const V=u(({className:e,children:n,...r},i)=>v(`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}));V.displayName=`MultiSelectContentFooter`;const H={Root:k,Trigger:A,TagValues:M,Input:N,Tag:j,Content:P,ContentFooter:V,Item:F,Group:I,GroupLabel:L,GroupDescription:R,Separator:z,Empty:B};function U(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{H as MultiSelect};
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-CGgMKpJg.js";import{t as r}from"./slot-CDk0Bb9z.js";import{a as i,r as a}from"./validation-Bpptk_9t.js";import{t as o}from"./field-context-BR01g789.js";import{n as s}from"./separator-bpE_kooz.js";import{t as c}from"./use-prefers-reduced-motion-CagaNRgm.js";import{createContext as l,useCallback as u,useContext as d,useEffect as f,useMemo as p,useRef as m,useState 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=m(null),i=m(void 0),a=m(null),o=m([]),s=p(()=>({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=({"aria-invalid":n,className:r,children:o,onKeyDown:s,onMouseDown:c,ref:l,validation:u,...f})=>{let p=d(T),{inputRef:m}=d(D),h=x.useComboboxContext(),g=i(),{validation:v}=a({"aria-invalid":n,validation:u??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,l),...f,children:o})};k.displayName=`MultiSelectTrigger`;const A=({className:r,value:i,onRemove:a,locked:o=!1,onKeyDown:s,ref:c,...l})=>{let u=m(null);return v(`span`,{ref:e(u,c),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)},...l,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=m(i);a.current=i;let o=d(E);o.current=t;let s=p(()=>new Set(t),[t]),c=m(new Map),{onInputKeyDownRef:l,inputRef:u}=d(D),h=m(new Set);f(()=>()=>{h.current.forEach(cancelAnimationFrame)},[]);let v=e=>{let t=requestAnimationFrame(()=>{h.current.delete(t),e()});h.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=({className:n,onBlur:r,onChange:i,onFocus:a,onKeyDown:s,onValueChange:c,placeholder:l,ref:u,...f})=>{let p=x.useComboboxContext(),{onInputKeyDownRef:m,inputRef:h}=d(D),g=d(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,u),...f,...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=({asChild:e=!1,backdrop:n=!1,children:i,className:a,modal:o=!0,portalElement:s,preventBodyScroll:c,ref:l,sameWidth:p=!0,unmountOnHide:m=!0,...g})=>{let v=d(T),[y,b]=h(!1);f(()=>{b(v.current?.closest(`[data-mantle-modal-content]`)!=null)},[v]);let S=u(()=>v.current?.getBoundingClientRect()??null,[v]),C=u(e=>typeof s==`function`?s(e):s??v.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,v]),w=u(e=>!(e.target instanceof Node&&v.current?.contains(e.target)),[v]);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:S,gutter:4,hideOnInteractOutside:w,modal:o,portalElement:C,preventBodyScroll:c??!y,ref:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,sameWidth:p,unmountOnHide:m,...g,children:i})};N.displayName=`MultiSelectContent`;const P=({asChild:e=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,ref:l,...u})=>{let f=d(E),p=s!=null&&f.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:l,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,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=({asChild:e=!1,children:t,ref:n,...i})=>_(x.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:n,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...i,children:t});F.displayName=`MultiSelectGroup`;const I=({asChild:e=!1,children:n,className:i,ref:a,...o})=>_(x.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:t(`text-muted px-2 py-1 text-xs font-medium`,i),ref:a,render:e?({ref:e,...t})=>_(r,{ref:e,...t}):void 0,...o,children:n});I.displayName=`MultiSelectGroupLabel`;const L=({className:e,children:n,ref:r,...i})=>_(`p`,{"data-slot":`multi-select-group-description`,className:t(`text-muted px-2 pb-1 text-xs`,e),ref:r,...i,children:n});L.displayName=`MultiSelectGroupDescription`;const R=({className:e,ref:n,...r})=>_(s,{"data-slot":`multi-select-separator`,ref:n,className:t(`my-1 w-auto`,e),...r});R.displayName=`MultiSelectSeparator`;const z=({className:e,children:n,ref:r,...i})=>_(`div`,{"data-slot":`multi-select-empty`,className:t(`mx-1 text-muted px-2 py-6 text-center text-sm`,e),ref:r,role:`presentation`,...i,children:n});z.displayName=`MultiSelectEmpty`;const B=({className:e,children:n,ref:r,...i})=>_(`div`,{ref:r,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:t(`bg-popover sticky bottom-0 border-t border-popover`,e),...i,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};