@ngrok/mantle 0.70.1 → 0.71.0

package/dist/multi-select.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
-import { o as WithValidation } from "./types-BeTbgoJd.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { o as WithValidation } from "./types-DG0WQLTL.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -80,6 +80,11 @@ type MultiSelectGroupLabelProps = Omit<Primitive.ComboboxGroupLabelProps, "rende
  * Built on top of Ariakit's Combobox primitives with full keyboard support
  * and WAI-ARIA compliance.
  *
+ * Use MultiSelect when the user can choose multiple values from a list, with selected
+ * items rendered as removable tags/chips. For single selection, use Combobox (with search)
+ * or Select (without).
+ *
+ * @see https://mantle.ngrok.com/components/multi-select
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  * @see https://ariakit.org/components/combobox
  *
@@ -120,6 +125,12 @@ declare const MultiSelect: {
    * Root component for a multi-select combobox. Provides state management for
    * selecting multiple values with typeahead filtering.
    *
+   * Use MultiSelect when the user can choose multiple values from a list, with selected
+   * items rendered as removable tags/chips. For single selection, use Combobox (with search)
+   * or Select (without).
+   *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectroot
+   *
    * @example
    * ```tsx
    * <MultiSelect.Root>
@@ -145,12 +156,19 @@ declare const MultiSelect: {
    * The trigger container for the multi-select. Wraps the tags and input
    * in a styled container.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttrigger
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Trigger>
-   *   <MultiSelect.TagValues />
-   *   <MultiSelect.Input placeholder="Select items..." />
-   * </MultiSelect.Trigger>
+   * <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 Trigger: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & WithValidation & _$react.RefAttributes<HTMLDivElement>>;
@@ -161,17 +179,35 @@ declare const MultiSelect: {
    * Use `lockedValues` to prevent specific tags from being removed. Locked tags
    * have their remove button disabled and shake when Backspace is pressed.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttagvalues
+   *
    * @example
    * ```tsx
-   * // Default tags with locking
-   * <MultiSelect.TagValues lockedValues={["global"]} />
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues lockedValues={["global"]} />
+   *     <MultiSelect.Input placeholder="Select items..." />
+   *   </MultiSelect.Trigger>
+   *   <MultiSelect.Content>
+   *     <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
+   * ```
    *
-   * // Custom tags via children render function — locked is forwarded via props
-   * <MultiSelect.TagValues lockedValues={["global"]}>
-   *   {(props) => (
-   *     <MultiSelect.Tag key={props.value} {...props} />
-   *   )}
-   * </MultiSelect.TagValues>
+   * @example
+   * Custom tags via children render function — `locked` is forwarded via props.
+   * ```tsx
+   * <MultiSelect.Root>
+   *   <MultiSelect.Trigger>
+   *     <MultiSelect.TagValues lockedValues={["global"]}>
+   *       {(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>
    * ```
    */
   readonly TagValues: {
@@ -185,9 +221,19 @@ declare const MultiSelect: {
    * The combobox input for filtering items. Place this inside
    * `MultiSelect.Trigger`, after `MultiSelect.TagValues`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectinput
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Input placeholder="Select items..." />
+   * <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 Input: _$react.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & _$react.RefAttributes<HTMLInputElement>>;
@@ -195,23 +241,41 @@ declare const MultiSelect: {
    * The default tag rendered inside `MultiSelect.TagValues` for each selected value.
    * Displays the value label with a remove button and keyboard navigation support.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselecttag
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Tag
-   *   value="apple"
-   *   onRemove={() => removeValue("apple")}
-   * />
+   * <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>
    * ```
    */
   readonly Tag: _$react.ForwardRefExoticComponent<Omit<TagProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
   /**
    * Renders a popover that contains multi-select content.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectcontent
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Content>
-   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-   * </MultiSelect.Content>
+   * <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>
    * ```
    */
   readonly Content: _$react.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -219,61 +283,136 @@ declare const MultiSelect: {
    * Renders a sticky footer pinned to the bottom inside `MultiSelect.Content`,
    * with a separator border at the top.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectcontentfooter
+   *
    * @example
    * ```tsx
-   * <MultiSelect.ContentFooter>
-   *   <p>Upgrade to unlock more options.</p>
-   * </MultiSelect.ContentFooter>
+   * <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>
+   *     </MultiSelect.ContentFooter>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   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`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectitem
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
+   * <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>
    * ```
    */
   readonly Item: _$react.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a group for MultiSelect.Item elements.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgroup
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Group>
-   *   <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
-   *   <MultiSelect.Item value="apple">Apple</MultiSelect.Item>
-   * </MultiSelect.Group>
+   * <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>
    * ```
    */
   readonly Group: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a label in a multi-select group.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgrouplabel
+   *
    * @example
    * ```tsx
-   * <MultiSelect.GroupLabel>Fruits</MultiSelect.GroupLabel>
+   * <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>
    * ```
    */
   readonly GroupLabel: _$react.ForwardRefExoticComponent<Omit<MultiSelectGroupLabelProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Renders a description below a `MultiSelect.GroupLabel` inside a `MultiSelect.Group`.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectgroupdescription
+   *
    * @example
    * ```tsx
-   * <MultiSelect.GroupDescription>
-   *   Include all points of presence within the region.
-   * </MultiSelect.GroupDescription>
+   * <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 within the region.
+   *       </MultiSelect.GroupDescription>
+   *       <MultiSelect.Item value="global">global</MultiSelect.Item>
+   *     </MultiSelect.Group>
+   *   </MultiSelect.Content>
+   * </MultiSelect.Root>
    * ```
    */
   readonly GroupDescription: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLParagraphElement>>;
   /**
    * Renders a separator between items or groups.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectseparator
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Separator />
+   * <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>
    * ```
    */
   readonly Separator: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
@@ -283,9 +422,21 @@ declare const MultiSelect: {
   /**
    * Renders a message when no items match the current filter.
    *
+   * @see https://mantle.ngrok.com/components/multi-select#multiselectempty
+   *
    * @example
    * ```tsx
-   * <MultiSelect.Empty>No results found</MultiSelect.Empty>
+   * <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>
    * ```
    */
   readonly Empty: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;

package/dist/multi-select.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DFIaEnQH.js";import{n as i}from"./separator-DyOGgFCs.js";import{t as a}from"./use-prefers-reduced-motion-BcwST13S.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,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;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 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`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,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-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`,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 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&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-4`})})]})});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(`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:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,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};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{t as r}from"./compose-refs-DZ3cPi47.js";import{n as i}from"./separator-DSOIrnhj.js";import{t as a}from"./use-prefers-reduced-motion-aXfsyo-k.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,onKeyDown:a,onMouseDown:o,validation:s,...c},u)=>{let d=l(S),{inputRef:f}=l(w),p=v.useComboboxContext(),h=t!=null&&t!==`false`?`error`:typeof s==`function`?s():s;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 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`,n),"data-validation":h||void 0,onKeyDown:e=>{e.key===`Escape`&&p?.getState().open&&(e.preventDefault(),p.hide()),a?.(e)},onMouseDown:e=>{e.target instanceof HTMLElement&&!e.target.closest(`button, input, [role='option']`)&&(e.preventDefault(),f.current?.focus()),o?.(e)},ref:r(d,u),...c,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-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`,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 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&&z(e);return}a?.()},onMouseDown:e=>{e.preventDefault()},children:m(t,{svg:o?m(y,{}):m(g,{weight:`bold`}),className:`size-4`})})]})});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(`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:d,render:r?({ref:e,...t})=>m(n,{ref:e,...t}):void 0,resetValueOnSelect:!0,value:s,...u,children:[i,m(v.ComboboxItemCheck,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,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