@ngrok/mantle 0.66.0 → 0.66.1

package/dist/multi-select.d.ts

@@ -1,25 +1,26 @@
-import * as react from 'react';
-import { ComponentProps, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as Primitive from '@ariakit/react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import { W as WithValidation } from './types-DehRoXC5.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import { o as WithValidation } from "./types-DgXUgkpc.js";
+import * as react from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@ariakit/react";
 
+//#region src/components/multi-select/multi-select.d.ts
 type MultiSelectProps = Primitive.ComboboxProviderProps<string[]>;
 type TagProps = Omit<ComponentProps<"span">, "children"> & {
-    /**
-     * The value to display in the tag label.
-     */
-    value: string;
-    /**
-     * Called when the remove button is clicked.
-     */
-    onRemove?: () => void;
-    /**
-     * When true, the tag cannot be removed. The remove button is disabled and
-     * Delete/Backspace key presses are ignored while the tag is focused.
-     */
-    locked?: boolean;
+  /**
+   * The value to display in the tag label.
+   */
+  value: string;
+  /**
+   * Called when the remove button is clicked.
+   */
+  onRemove?: () => void;
+  /**
+   * When true, the tag cannot be removed. The remove button is disabled and
+   * Delete/Backspace key presses are ignored while the tag is focused.
+   */
+  locked?: boolean;
 };
 /**
  * Props passed to the children render function of `MultiSelect.TagValues`.
@@ -32,42 +33,41 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
  * - `onClick` — focuses the tag and ensures the popover opens/stays open
  */
 type TagRenderProps = TagProps & {
-    /** Ref callback — forward this to the tag element to enable keyboard navigation between tags. */
-    ref: (node: HTMLSpanElement | null) => void;
+  /** Ref callback — forward this to the tag element to enable keyboard navigation between tags. */ref: (node: HTMLSpanElement | null) => void;
 };
 type MultiSelectTagValuesProps = {
-    /**
-     * Values that cannot be removed. Locked tags have their remove button disabled,
-     * respond to Backspace/Delete key presses with a shake animation, and shake when
-     * Backspace is pressed on an empty input.
-     *
-     * The `locked` state is also forwarded to the render function via `props.locked`
-     * so custom tag components receive it automatically.
-     */
-    lockedValues?: string[];
-    /**
-     * Optional render function for each tag. Receives `{ value, onRemove, locked, ref }` —
-     * spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.
-     * When omitted, the default `MultiSelect.Tag` is rendered for each selected value.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.TagValues lockedValues={["global"]}>
-     *   {(props) => (
-     *     <MultiSelect.Tag key={props.value} {...props} />
-     *   )}
-     * </MultiSelect.TagValues>
-     * ```
-     */
-    children?: (props: TagRenderProps) => ReactNode;
+  /**
+   * Values that cannot be removed. Locked tags have their remove button disabled,
+   * respond to Backspace/Delete key presses with a shake animation, and shake when
+   * Backspace is pressed on an empty input.
+   *
+   * The `locked` state is also forwarded to the render function via `props.locked`
+   * so custom tag components receive it automatically.
+   */
+  lockedValues?: string[];
+  /**
+   * Optional render function for each tag. Receives `{ value, onRemove, locked, ref }` —
+   * spread these onto `MultiSelect.Tag` (or your own element) for full keyboard-nav support.
+   * When omitted, the default `MultiSelect.Tag` is rendered for each selected value.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.TagValues lockedValues={["global"]}>
+   *   {(props) => (
+   *     <MultiSelect.Tag key={props.value} {...props} />
+   *   )}
+   * </MultiSelect.TagValues>
+   * ```
+   */
+  children?: (props: TagRenderProps) => ReactNode;
 };
 type MultiSelectInputProps = Omit<Primitive.ComboboxProps, "render"> & {
-    /**
-     * Called with the raw string value whenever the input text changes.
-     * Use this to drive external filtering (e.g. with matchSorter) without
-     * having to unwrap the DOM event. A convenience alternative to `onChange`.
-     */
-    onValueChange?: (value: string) => void;
+  /**
+   * Called with the raw string value whenever the input text changes.
+   * Use this to drive external filtering (e.g. with matchSorter) without
+   * having to unwrap the DOM event. A convenience alternative to `onChange`.
+   */
+  onValueChange?: (value: string) => void;
 };
 type MultiSelectContentProps = Omit<Primitive.ComboboxPopoverProps, "render"> & WithAsChild;
 type MultiSelectItemProps = Omit<Primitive.ComboboxItemProps, "render"> & WithAsChild;
@@ -99,172 +99,180 @@ type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "rende
  * ```
  */
 declare const MultiSelect: {
-    /**
-     * Root component for a multi-select combobox. Provides state management for
-     * selecting multiple values with typeahead filtering.
-     *
-     * @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>
-     * ```
-     */
-    readonly Root: {
-        ({ children, defaultSelectedValue, ...props }: MultiSelectProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    /**
-     * The trigger container for the multi-select. Wraps the tags and input
-     * in a styled container.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Trigger>
-     *   <MultiSelect.TagValues />
-     *   <MultiSelect.Input placeholder="Select items..." />
-     * </MultiSelect.Trigger>
-     * ```
-     */
-    readonly Trigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders the selected values as removable tags. Place this inside
-     * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
-     *
-     * Use `lockedValues` to prevent specific tags from being removed. Locked tags
-     * have their remove button disabled and shake when Backspace is pressed.
-     *
-     * @example
-     * ```tsx
-     * // Default tags with locking
-     * <MultiSelect.TagValues lockedValues={["global"]} />
-     *
-     * // Custom tags via children render function — locked is forwarded via props
-     * <MultiSelect.TagValues lockedValues={["global"]}>
-     *   {(props) => (
-     *     <MultiSelect.Tag key={props.value} {...props} />
-     *   )}
-     * </MultiSelect.TagValues>
-     * ```
-     */
-    readonly TagValues: {
-        ({ children, lockedValues }: MultiSelectTagValuesProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    /**
-     * The combobox input for filtering items. Place this inside
-     * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Input placeholder="Select items..." />
-     * ```
-     */
-    readonly Input: react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
-    /**
-     * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
-     * Displays the value label with a remove button and keyboard navigation support.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Tag
-     *   value="apple"
-     *   onRemove={() => removeValue("apple")}
-     * />
-     * ```
-     */
-    readonly Tag: react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
-    /**
-     * Renders a popover that contains multi-select content.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Content>
-     *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-     * </MultiSelect.Content>
-     * ```
-     */
-    readonly Content: react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
-     * with a separator border at the top.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.ContentFooter>
-     *   <p>Upgrade to unlock more options.</p>
-     * </MultiSelect.ContentFooter>
-     * ```
-     */
-    readonly ContentFooter: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-     * ```
-     */
-    readonly Item: react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a group for MultiSelect.Item elements.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Group>
-     *   <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
-     *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-     * </MultiSelect.Group>
-     * ```
-     */
-    readonly Group: react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a label in a multi-select group.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
-     * ```
-     */
-    readonly GroupLabel: react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.GroupDescription>
-     *   Include all points of presence within the region.
-     * </MultiSelect.GroupDescription>
-     * ```
-     */
-    readonly GroupDescription: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
-    /**
-     * Renders a separator between items or groups.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Separator />
-     * ```
-     */
-    readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
-        orientation?: "horizontal" | "vertical";
-        semantic?: boolean;
-    }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Renders a message when no items match the current filter.
-     *
-     * @example
-     * ```tsx
-     * <MultiSelect.Empty>No results found</MultiSelect.Empty>
-     * ```
-     */
-    readonly Empty: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Root component for a multi-select combobox. Provides state management for
+   * selecting multiple values with typeahead filtering.
+   *
+   * @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>
+   * ```
+   */
+  readonly Root: {
+    ({
+      children,
+      defaultSelectedValue,
+      ...props
+    }: MultiSelectProps): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * The trigger container for the multi-select. Wraps the tags and input
+   * in a styled container.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Trigger>
+   *   <MultiSelect.TagValues />
+   *   <MultiSelect.Input placeholder="Select items..." />
+   * </MultiSelect.Trigger>
+   * ```
+   */
+  readonly Trigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders the selected values as removable tags. Place this inside
+   * `MultiSelect.Trigger`, followed by `MultiSelect.Input`.
+   *
+   * Use `lockedValues` to prevent specific tags from being removed. Locked tags
+   * have their remove button disabled and shake when Backspace is pressed.
+   *
+   * @example
+   * ```tsx
+   * // Default tags with locking
+   * <MultiSelect.TagValues lockedValues={["global"]} />
+   *
+   * // Custom tags via children render function — locked is forwarded via props
+   * <MultiSelect.TagValues lockedValues={["global"]}>
+   *   {(props) => (
+   *     <MultiSelect.Tag key={props.value} {...props} />
+   *   )}
+   * </MultiSelect.TagValues>
+   * ```
+   */
+  readonly TagValues: {
+    ({
+      children,
+      lockedValues
+    }: MultiSelectTagValuesProps): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * The combobox input for filtering items. Place this inside
+   * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Input placeholder="Select items..." />
+   * ```
+   */
+  readonly Input: react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+  /**
+   * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
+   * Displays the value label with a remove button and keyboard navigation support.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Tag
+   *   value="apple"
+   *   onRemove={() => removeValue("apple")}
+   * />
+   * ```
+   */
+  readonly Tag: react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+  /**
+   * Renders a popover that contains multi-select content.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Content>
+   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   * </MultiSelect.Content>
+   * ```
+   */
+  readonly Content: react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
+   * with a separator border at the top.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.ContentFooter>
+   *   <p>Upgrade to unlock more options.</p>
+   * </MultiSelect.ContentFooter>
+   * ```
+   */
+  readonly ContentFooter: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a selectable item with a checkbox indicator inside a `MultiSelect.Content`.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   * ```
+   */
+  readonly Item: react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a group for MultiSelect.Item elements.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Group>
+   *   <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   * </MultiSelect.Group>
+   * ```
+   */
+  readonly Group: react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a label in a multi-select group.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   * ```
+   */
+  readonly GroupLabel: react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.GroupDescription>
+   *   Include all points of presence within the region.
+   * </MultiSelect.GroupDescription>
+   * ```
+   */
+  readonly GroupDescription: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+  /**
+   * Renders a separator between items or groups.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Separator />
+   * ```
+   */
+  readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
+    orientation?: "horizontal" | "vertical";
+    semantic?: boolean;
+  }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Renders a message when no items match the current filter.
+   *
+   * @example
+   * ```tsx
+   * <MultiSelect.Empty>No results found</MultiSelect.Empty>
+   * ```
+   */
+  readonly Empty: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 };
-
+//#endregion
 export { MultiSelect };
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/multi-select.js

@@ -1,2 +1,2 @@
-import{a as G}from"./chunk-EVU5XGB4.js";import{b as A}from"./chunk-MLXONRJD.js";import{a as k}from"./chunk-HKSO72E5.js";import"./chunk-5VDCC3YW.js";import{a as D}from"./chunk-IVQ626TU.js";import{a as T}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as y}from"./chunk-PFXFESEN.js";import*as d from"@ariakit/react";import{CheckIcon as re}from"@phosphor-icons/react/Check";import{LockIcon as oe}from"@phosphor-icons/react/Lock";import{XIcon as ne}from"@phosphor-icons/react/X";import{createContext as N,forwardRef as P,useCallback as O,useContext as S,useEffect as ae,useMemo as W,useRef as C}from"react";import{Fragment as le,jsx as s,jsxs as _}from"react/jsx-runtime";var L=t=>Array.isArray(t)&&t.every(r=>typeof r=="string"),ie=[],V=N({current:null}),K=N({current:[]}),I=N({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),B=({children:t,defaultSelectedValue:r=[],...o})=>{let n=C(null),u=C(void 0),i=C(null),m=C([]),f=W(()=>({onInputKeyDownRef:u,inputRef:i}),[]);return s(V.Provider,{value:n,children:s(I.Provider,{value:f,children:s(K.Provider,{value:m,children:s(d.ComboboxProvider,{defaultSelectedValue:r,...o,children:t})})})})};B.displayName="MultiSelect";var F=P(({"aria-invalid":t,className:r,children:o,onMouseDown:n,validation:u,...i},m)=>{let f=S(V),{inputRef:l}=S(I),h=t!=null&&t!=="false"?"error":typeof u=="function"?u():u;return s("div",{role:"group","data-slot":"multi-select-trigger",className:y("cursor-text select-none font-sans text-sm","border-form bg-form text-strong flex w-full flex-wrap items-center gap-1 rounded-md border px-2 py-1.5","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","hover:border-neutral-400","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":h||void 0,onMouseDown:b=>{b.target instanceof HTMLElement&&!b.target.closest("button, input, [role='option']")&&(b.preventDefault(),l.current?.focus()),n?.(b)},ref:k(f,m),...i,children:o})});F.displayName="MultiSelectTrigger";var H=P(({className:t,value:r,onRemove:o,locked:n=!1,onKeyDown:u,...i},m)=>{let f=C(null);return _("span",{ref:k(f,m),role:"option","aria-selected":!0,tabIndex:-1,"data-slot":"multi-select-tag","data-locked":n||void 0,className:y("cursor-default bg-neutral-100 border border-neutral-300 rounded-xs text-strong inline-flex items-center gap-1 pl-1.5 pr-1 py-0.5 text-xs font-semibold font-mono","focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent",t),onKeyDown:l=>{if(n&&(l.key==="Backspace"||l.key==="Delete")){l.preventDefault(),E(l.currentTarget);return}u?.(l)},...i,children:[r,s("button",{type:"button","aria-label":`Remove ${r}`,tabIndex:-1,"aria-disabled":n||void 0,className:y("cursor-pointer hover:bg-neutral-200 hover:text-strong text-strong/25 rounded-sm p-px size-4","aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/25"),onClick:l=>{if(l.stopPropagation(),n){let c=f.current;c&&E(c);return}o?.()},onMouseDown:l=>{l.preventDefault()},children:s(D,{svg:n?s(oe,{}):s(ne,{weight:"bold"}),className:"size-3"})})]})});H.displayName="MultiSelectTag";var X=({children:t,lockedValues:r=[]})=>{let o=d.useComboboxContext(),n=d.useStoreState(o,"selectedValue"),i=(L(n)?n:void 0)??ie,m=C(i);m.current=i;let f=S(K);f.current=r;let l=W(()=>new Set(r),[r]),c=C(new Map),{onInputKeyDownRef:h,inputRef:b}=S(I),x=C(new Set);ae(()=>()=>{x.current.forEach(cancelAnimationFrame)},[]);let M=e=>{let a;a=requestAnimationFrame(()=>{x.current.delete(a),e()}),x.current.add(a)},w=e=>{if(o){let a=o.getState().selectedValue;if(!L(a))return;o.setSelectedValue(a.filter(g=>g!==e))}},p=e=>{let a=m.current[e];if(a==null)return;let g=c.current.get(a);g&&(g.focus(),o?.show())},R=()=>{b.current?.focus()},ee=(e,a)=>{let g=i[a];switch(e.key){case"ArrowLeft":{e.preventDefault(),a>0&&p(a-1);break}case"ArrowRight":{e.preventDefault(),a<i.length-1?p(a+1):R();break}case"Backspace":case"Delete":{if(e.preventDefault(),g!=null){if(l.has(g)){let v=c.current.get(g);v&&E(v);break}if(w(g),e.key==="Backspace")if(a>0){let v=a-1;M(()=>p(v))}else M(()=>{m.current.length>0?p(0):R()});else M(()=>{a<m.current.length?p(a):R()})}break}case"ArrowUp":case"ArrowDown":{e.preventDefault(),R(),b.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&&R();break}}},te=e=>{if(e.key==="ArrowLeft"&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),p(i.length-1);return}if(e.key==="Backspace"&&e.currentTarget.value===""&&i.length>0){let a=i[i.length-1];if(a!=null)if(f.current.includes(a)){let g=c.current.get(a);g&&E(g)}else w(a)}};return h.current=te,s(le,{children:i.map((e,a)=>{let g={value:e,locked:l.has(e),onRemove:()=>{if(l.has(e)){let v=c.current.get(e);v&&E(v);return}w(e)},ref:v=>{v?c.current.set(e,v):c.current.delete(e)},onKeyDown:v=>ee(v,a),onClick:()=>p(a)};return t?t(g):s(H,{...g},e)})})};X.displayName="MultiSelectTagValues";var j=P(({className:t,onBlur:r,onChange:o,onFocus:n,onKeyDown:u,onValueChange:i,placeholder:m,...f},l)=>{let c=d.useComboboxContext(),{onInputKeyDownRef:h,inputRef:b}=S(I),x=d.useStoreState(c,"selectedValue"),w=((L(x)?x:void 0)?.length??0)>0;return s(d.Combobox,{autoSelect:!0,"data-slot":"multi-select-input",className:y("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",t),onChange:p=>{i?.(p.target.value),o?.(p)},onKeyDown:p=>{h.current?.(p),u?.(p)},onBlur:p=>{p.relatedTarget instanceof HTMLElement&&p.relatedTarget.closest('[data-slot="multi-select-tag"]')&&c?.show(),r?.(p)},onFocus:p=>{c?.show(),n?.(p)},placeholder:w?void 0:m,ref:k(b,l),...f})});j.displayName="MultiSelectInput";var z=P(({asChild:t=!1,backdrop:r=!1,children:o,className:n,modal:u=!0,sameWidth:i=!0,unmountOnHide:m=!0,...f},l)=>{let c=S(V),h=O(()=>c.current?.getBoundingClientRect()??null,[c]),b=O(x=>!(x.target instanceof Node&&c.current?.contains(x.target)),[c]);return s(d.ComboboxPopover,{"data-slot":"multi-select-content",className:y("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",n),backdrop:r,getAnchorRect:h,gutter:4,hideOnInteractOutside:b,modal:u,ref:l,render:t?({ref:x,...M})=>s(T,{ref:x,...M}):void 0,sameWidth:i,unmountOnHide:m,...f,children:o})});z.displayName="MultiSelectContent";var Y=P(({asChild:t=!1,children:r,className:o,focusOnHover:n=!0,value:u,onClick:i,...m},f)=>{let l=S(K),c=u!=null&&l.current.includes(u);return _(d.ComboboxItem,{"data-slot":"multi-select-item",className:y("mx-1 cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center justify-between 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",o),focusOnHover:n,onClick:h=>{if(c){h.preventDefault();return}i?.(h)},ref:f,render:t?({ref:h,...b})=>s(T,{ref:h,...b}):void 0,resetValueOnSelect:!0,value:u,...m,children:[r,s(d.ComboboxItemCheck,{children:s(D,{svg:s(re,{weight:"bold"}),className:"size-4 text-accent-600"})})]})});Y.displayName="MultiSelectItem";var q=P(({asChild:t=!1,children:r,...o},n)=>s(d.ComboboxGroup,{"data-slot":"multi-select-group",className:"mx-1",ref:n,render:t?({ref:u,...i})=>s(T,{ref:u,...i}):void 0,...o,children:r}));q.displayName="MultiSelectGroup";var U=P(({asChild:t=!1,children:r,className:o,...n},u)=>s(d.ComboboxGroupLabel,{"data-slot":"multi-select-group-label",className:y("text-muted px-2 py-1 text-xs font-medium",o),ref:u,render:t?({ref:i,...m})=>s(T,{ref:i,...m}):void 0,...n,children:r}));U.displayName="MultiSelectGroupLabel";var $=P(({className:t,children:r,...o},n)=>s("p",{"data-slot":"multi-select-group-description",className:y("text-muted px-2 pb-1 text-xs",t),ref:n,...o,children:r}));$.displayName="MultiSelectGroupDescription";var J=P(({className:t,...r},o)=>s(A,{"data-slot":"multi-select-separator",ref:o,className:y("my-1 w-auto",t),...r}));J.displayName="MultiSelectSeparator";var Q=P(({className:t,children:r,...o},n)=>s("div",{"data-slot":"multi-select-empty",className:y("mx-1 text-muted px-2 py-6 text-center text-sm",t),ref:n,role:"presentation",...o,children:r}));Q.displayName="MultiSelectEmpty";var Z=P(({className:t,children:r,...o},n)=>s("div",{ref:n,"data-slot":"multi-select-content-footer","data-content-footer":!0,className:y("bg-popover sticky bottom-0 border-t border-popover",t),...o,children:r}));Z.displayName="MultiSelectContentFooter";var se={Root:B,Trigger:F,TagValues:X,Input:j,Tag:H,Content:z,ContentFooter:Z,Item:Y,Group:q,GroupLabel:U,GroupDescription:$,Separator:J,Empty:Q};function E(t){G()||t.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{se as MultiSelect};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./icon-B5oNYYrJ.js";import{t as n}from"./slot-DdnjeV2n.js";import{t as r}from"./compose-refs-DeIsFv68.js";import{n as i}from"./separator-BcCNbHBg.js";import{t as a}from"./use-prefers-reduced-motion-BPlsKyCJ.js";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{XIcon as g}from"@phosphor-icons/react/X";import{CheckIcon as _}from"@phosphor-icons/react/Check";import*as v from"@ariakit/react";import{LockIcon as y}from"@phosphor-icons/react/Lock";const b=e=>Array.isArray(e)&&e.every(e=>typeof e==`string`),x=[],S=o({current:null}),C=o({current:[]}),w=o({onInputKeyDownRef:{current:void 0},inputRef:{current:null}}),T=({children:e,defaultSelectedValue:t=[],...n})=>{let r=f(null),i=f(void 0),a=f(null),o=f([]),s=d(()=>({onInputKeyDownRef:i,inputRef:a}),[]);return m(S.Provider,{value:r,children:m(w.Provider,{value:s,children:m(C.Provider,{value:o,children:m(v.ComboboxProvider,{defaultSelectedValue:t,...n,children:e})})})})};T.displayName=`MultiSelect`;const E=s(({"aria-invalid":t,className:n,children:i,onMouseDown:a,validation:o,...s},c)=>{let u=l(S),{inputRef:d}=l(w),f=t!=null&&t!==`false`?`error`:typeof o==`function`?o():o;return m(`div`,{role:`group`,"data-slot":`multi-select-trigger`,className:e(`cursor-text select-none font-sans text-sm`,`border-form bg-form text-strong flex w-full flex-wrap items-center gap-1 rounded-md border px-2 py-1.5`,`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`,`hover:border-neutral-400`,`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`,n),"data-validation":f||void 0,onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),d.current?.focus()),a?.(e)},ref:r(u,c),...s,children:i})});E.displayName=`MultiSelectTrigger`;const D=s(({className:n,value:i,onRemove:a,locked:o=!1,onKeyDown:s,...c},l)=>{let u=f(null);return h(`span`,{ref:r(u,l),role:`option`,"aria-selected":!0,tabIndex:-1,"data-slot":`multi-select-tag`,"data-locked":o||void 0,className:e(`cursor-default bg-neutral-100 border border-neutral-300 rounded-xs text-strong inline-flex items-center gap-1 pl-1.5 pr-1 py-0.5 text-xs font-semibold font-mono`,`focus-visible:outline-hidden focus-visible:border-accent-600/50 focus-visible:ring-3 focus-visible:ring-focus-accent`,n),onKeyDown:e=>{if(o&&(e.key===`Backspace`||e.key===`Delete`)){e.preventDefault(),z(e.currentTarget);return}s?.(e)},...c,children:[i,m(`button`,{type:`button`,"aria-label":`Remove ${i}`,tabIndex:-1,"aria-disabled":o||void 0,className:e(`cursor-pointer hover:bg-neutral-200 hover:text-strong text-strong/25 rounded-sm p-px size-4`,`aria-disabled:cursor-default aria-disabled:hover:bg-transparent aria-disabled:hover:text-strong/25`),onClick:e=>{if(e.stopPropagation(),o){let e=u.current;e&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-3`})})]})});D.displayName=`MultiSelectTag`;const O=({children:e,lockedValues:t=[]})=>{let n=v.useComboboxContext(),r=v.useStoreState(n,`selectedValue`),i=(b(r)?r:void 0)??x,a=f(i);a.current=i;let o=l(C);o.current=t;let s=d(()=>new Set(t),[t]),c=f(new Map),{onInputKeyDownRef:h,inputRef:g}=l(w),_=f(new Set);u(()=>()=>{_.current.forEach(cancelAnimationFrame)},[]);let y=e=>{let t;t=requestAnimationFrame(()=>{_.current.delete(t),e()}),_.current.add(t)},S=e=>{if(n){let t=n.getState().selectedValue;if(!b(t))return;n.setSelectedValue(t.filter(t=>t!==e))}},T=e=>{let t=a.current[e];if(t==null)return;let r=c.current.get(t);r&&(r.focus(),n?.show())},E=()=>{g.current?.focus()},O=(e,t)=>{let n=i[t];switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&T(t-1);break;case`ArrowRight`:e.preventDefault(),t<i.length-1?T(t+1):E();break;case`Backspace`:case`Delete`:if(e.preventDefault(),n!=null){if(s.has(n)){let e=c.current.get(n);e&&z(e);break}if(S(n),e.key===`Backspace`)if(t>0){let e=t-1;y(()=>T(e))}else y(()=>{a.current.length>0?T(0):E()});else y(()=>{t<a.current.length?T(t):E()})}break;case`ArrowUp`:case`ArrowDown`:e.preventDefault(),E(),g.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&&E();break}};return h.current=e=>{if(e.key===`ArrowLeft`&&e.currentTarget.selectionStart===0&&e.currentTarget.selectionEnd===0&&i.length>0){e.preventDefault(),T(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&&z(t)}else S(e)}},m(p,{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&&z(e);return}S(t)},ref:e=>{e?c.current.set(t,e):c.current.delete(t)},onKeyDown:e=>O(e,n),onClick:()=>T(n)};return e?e(r):m(D,{...r},t)})})};O.displayName=`MultiSelectTagValues`;const k=s(({className:t,onBlur:n,onChange:i,onFocus:a,onKeyDown:o,onValueChange:s,placeholder:c,...u},d)=>{let f=v.useComboboxContext(),{onInputKeyDownRef:p,inputRef:h}=l(w),g=v.useStoreState(f,`selectedValue`),_=((b(g)?g:void 0)?.length??0)>0;return m(v.Combobox,{autoSelect:!0,"data-slot":`multi-select-input`,className:e(`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`,t),onChange:e=>{s?.(e.target.value),i?.(e)},onKeyDown:e=>{p.current?.(e),o?.(e)},onBlur:e=>{e.relatedTarget instanceof HTMLElement&&e.relatedTarget.closest(`[data-slot="multi-select-tag"]`)&&f?.show(),n?.(e)},onFocus:e=>{f?.show(),a?.(e)},placeholder:_?void 0:c,ref:r(h,d),...u})});k.displayName=`MultiSelectInput`;const A=s(({asChild:t=!1,backdrop:r=!1,children:i,className:a,modal:o=!0,portalElement:s,sameWidth:u=!0,unmountOnHide:d=!0,...f},p)=>{let h=l(S),g=c(()=>h.current?.getBoundingClientRect()??null,[h]),_=c(e=>typeof s==`function`?s(e):s??h.current?.closest(`[data-mantle-modal-content]`)??e.ownerDocument.body,[s,h]),y=c(e=>!(e.target instanceof Node&&h.current?.contains(e.target)),[h]);return m(v.ComboboxPopover,{"data-slot":`multi-select-content`,className:e(`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:r,getAnchorRect:g,gutter:4,hideOnInteractOutside:y,modal:o,portalElement:_,ref:p,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,sameWidth:u,unmountOnHide:d,...f,children:i})});A.displayName=`MultiSelectContent`;const j=s(({asChild:r=!1,children:i,className:a,focusOnHover:o=!0,value:s,onClick:c,...u},d)=>{let f=l(C),p=s!=null&&f.current.includes(s);return h(v.ComboboxItem,{"data-slot":`multi-select-item`,className:e(`mx-1 cursor-pointer rounded-md px-2 py-1.5 text-strong text-sm font-normal flex min-w-0 items-center justify-between 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:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{children:m(t,{svg:m(_,{weight:`bold`}),className:`size-4 text-accent-600`})})]})});j.displayName=`MultiSelectItem`;const M=s(({asChild:e=!1,children:t,...r},i)=>m(v.ComboboxGroup,{"data-slot":`multi-select-group`,className:`mx-1`,ref:i,render:e?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...r,children:t}));M.displayName=`MultiSelectGroup`;const N=s(({asChild:t=!1,children:r,className:i,...a},o)=>m(v.ComboboxGroupLabel,{"data-slot":`multi-select-group-label`,className:e(`text-muted px-2 py-1 text-xs font-medium`,i),ref:o,render:t?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,...a,children:r}));N.displayName=`MultiSelectGroupLabel`;const P=s(({className:t,children:n,...r},i)=>m(`p`,{"data-slot":`multi-select-group-description`,className:e(`text-muted px-2 pb-1 text-xs`,t),ref:i,...r,children:n}));P.displayName=`MultiSelectGroupDescription`;const F=s(({className:t,...n},r)=>m(i,{"data-slot":`multi-select-separator`,ref:r,className:e(`my-1 w-auto`,t),...n}));F.displayName=`MultiSelectSeparator`;const I=s(({className:t,children:n,...r},i)=>m(`div`,{"data-slot":`multi-select-empty`,className:e(`mx-1 text-muted px-2 py-6 text-center text-sm`,t),ref:i,role:`presentation`,...r,children:n}));I.displayName=`MultiSelectEmpty`;const L=s(({className:t,children:n,...r},i)=>m(`div`,{ref:i,"data-slot":`multi-select-content-footer`,"data-content-footer":!0,className:e(`bg-popover sticky bottom-0 border-t border-popover`,t),...r,children:n}));L.displayName=`MultiSelectContentFooter`;const R={Root:T,Trigger:E,TagValues:O,Input:k,Tag:D,Content:A,ContentFooter:L,Item:j,Group:M,GroupLabel:N,GroupDescription:P,Separator:F,Empty:I};function z(e){a()||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{R as MultiSelect};
 //# sourceMappingURL=multi-select.js.map