@skdx/react 0.26.0

package/dist/meter/MeterIndicator.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { MeterIndicatorProps } from './types.js';
+/**
+ * The visual fill of a `Meter`. Mirrors the root's `data-value` / `data-min` /
+ * `data-max` / `data-range` and sets a `--skdx-meter` CSS custom property (a
+ * percentage) so width/transform can be driven purely from CSS. Must be used
+ * inside a `Meter`.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Disk usage" value={82}>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/meter/index.d.cts

@@ -0,0 +1,3 @@
+export * from './Meter.cjs';
+export { MeterIndicator } from './MeterIndicator.cjs';
+export type { MeterProps, MeterIndicatorProps, MeterRange } from './types.cjs';

package/dist/meter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Meter.js';
+export { MeterIndicator } from './MeterIndicator.js';
+export type { MeterProps, MeterIndicatorProps, MeterRange } from './types.js';

package/dist/meter/types.d.cts

@@ -0,0 +1,56 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared range distributed from {@link Meter} to {@link MeterIndicator} via context. Not part of the public API. */
+export interface MeterContextValue {
+    value: number;
+    min: number;
+    max: number;
+    range: MeterRange | undefined;
+}
+/** Which band of the range the current value falls in, once `low`/`high`/`optimum` are supplied. */
+export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
+/** Props for the {@link Meter} root. */
+export interface MeterProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Current value, clamped into `[min, max]`. Always rendered — a meter has no
+     * indeterminate state, because `role="meter"` requires `aria-valuenow`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Lower bound of the range the value is measured against.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Upper bound of the range. Raised to `min` if a lower value is passed.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Upper edge of the low band. With `high` and `optimum` this defines the
+     * optimum/suboptimal/poor regions exposed as `data-range`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    low?: number;
+    /**
+     * Lower edge of the high band. See {@link MeterProps.low}.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    high?: number;
+    /**
+     * The ideal value. Below `low` means low values are optimum (disk usage),
+     * above `high` means high values are optimum (battery), between them means
+     * the middle band is optimum (blood pressure).
+     * @default undefined — the midpoint of the range when `low` or `high` is supplied.
+     */
+    optimum?: number;
+    /**
+     * Formats the `aria-valuetext`. Takes `min` as well as `max` because a
+     * meter's range need not start at zero.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
+     */
+    getValueLabel?: (value: number, min: number, max: number) => string;
+}
+/** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
+export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/meter/types.d.ts

@@ -0,0 +1,56 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared range distributed from {@link Meter} to {@link MeterIndicator} via context. Not part of the public API. */
+export interface MeterContextValue {
+    value: number;
+    min: number;
+    max: number;
+    range: MeterRange | undefined;
+}
+/** Which band of the range the current value falls in, once `low`/`high`/`optimum` are supplied. */
+export type MeterRange = 'optimum' | 'suboptimal' | 'poor';
+/** Props for the {@link Meter} root. */
+export interface MeterProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Current value, clamped into `[min, max]`. Always rendered — a meter has no
+     * indeterminate state, because `role="meter"` requires `aria-valuenow`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Lower bound of the range the value is measured against.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Upper bound of the range. Raised to `min` if a lower value is passed.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Upper edge of the low band. With `high` and `optimum` this defines the
+     * optimum/suboptimal/poor regions exposed as `data-range`.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    low?: number;
+    /**
+     * Lower edge of the high band. See {@link MeterProps.low}.
+     * @default undefined — no band is derived unless one threshold is supplied.
+     */
+    high?: number;
+    /**
+     * The ideal value. Below `low` means low values are optimum (disk usage),
+     * above `high` means high values are optimum (battery), between them means
+     * the middle band is optimum (blood pressure).
+     * @default undefined — the midpoint of the range when `low` or `high` is supplied.
+     */
+    optimum?: number;
+    /**
+     * Formats the `aria-valuetext`. Takes `min` as well as `max` because a
+     * meter's range need not start at zero.
+     * @default undefined — falls back to a rounded percentage of the position within [min, max].
+     */
+    getValueLabel?: (value: number, min: number, max: number) => string;
+}
+/** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
+export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/multi-select/MultiSelect.cjs

@@ -0,0 +1 @@
+"use strict";var ze=Object.create;var T=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var Qe=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var Ze=(t,o)=>{for(var e in o)T(t,e,{get:o[e],enumerable:!0})},X=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Qe(o))!Ye.call(t,l)&&l!==e&&T(t,l,{get:()=>o[l],enumerable:!(i=Je(o,l))||i.enumerable});return t};var M=(t,o,e)=>(e=t!=null?ze(Xe(t)):{},X(o||!t||!t.__esModule?T(e,"default",{value:t,enumerable:!0}):e,t)),_e=t=>X(T({},"__esModule",{value:!0}),t);var je={};Ze(je,{MultiSelect:()=>le,MultiSelectContent:()=>K,MultiSelectInput:()=>A,MultiSelectItem:()=>U,MultiSelectList:()=>G,MultiSelectPortal:()=>W,MultiSelectProvider:()=>oe,MultiSelectTag:()=>F,MultiSelectTagList:()=>V,MultiSelectTagRemove:()=>B,defaultGetSelectionLabel:()=>te,useMultiSelectContext:()=>s});module.exports=_e(je);var u=M(require("react"),1),Y=require("../utils/createContext.cjs"),Z=require("../utils/liveAnnouncer.cjs"),_=require("../utils/popper.cjs"),L=require("../utils/useControllableState.cjs"),j=require("../utils/useOpenChangeComplete.cjs"),ee=require("../utils/useOptionCollection.cjs"),w=require("react/jsx-runtime");function te(t){return t===0?"none selected":`${t} selected`}var[oe,s]=(0,Y.createSafeContext)("MultiSelect");function le({children:t,value:o,defaultValue:e=[],onValueChange:i,inputValue:l,defaultInputValue:n="",onInputValueChange:f,open:S,defaultOpen:g=!1,onOpenChange:v,onOpenChangeComplete:r,max:m,closeOnSelect:a=!1,filter:b,disabled:$=!1,readOnly:q=!1,invalid:Ve=!1,getSelectionLabel:z=te}){let Fe=u.useRef(null),k=u.useRef(null),Be=u.useId(),[x=[],R]=(0,L.useControllableState)({prop:o,defaultProp:e,onChange:i}),[D="",O]=(0,L.useControllableState)({prop:l,defaultProp:n,onChange:f}),[E=!1,h]=(0,L.useControllableState)({prop:S,defaultProp:g,onChange:v});(0,j.useOpenChangeComplete)(E,k,r);let d=(0,ee.useOptionCollection)({open:E,setOpen:h,contentRef:k}),P=$||q,We=m!==void 0&&x.length>=m,J=x.length,Q=u.useRef(!0);u.useEffect(()=>{if(Q.current){Q.current=!1;return}(0,Z.announce)(z(J))},[J,z]);let Ke=u.useCallback(c=>x.includes(c),[x]),Ge=u.useCallback(c=>{P||R((p=[])=>p.includes(c)?p.filter(H=>H!==c):p)},[P,R]),Ue=u.useCallback(()=>{P||R((c=[])=>c.length===0?c:c.slice(0,-1))},[P,R]),$e=u.useCallback(c=>{P||(R((p=[])=>p.includes(c)?p.filter(H=>H!==c):m!==void 0&&p.length>=m?p:[...p,c]),O(""),a&&h(!1))},[P,m,a,R,O,h]),qe=u.useCallback(c=>b===void 0||b(c,D),[b,D]);return(0,w.jsx)(_.PopperRoot,{children:(0,w.jsx)(oe,{inputRef:Fe,contentRef:k,listId:Be,value:x,isSelected:Ke,toggle:$e,deselect:Ge,removeLast:Ue,atMax:We,inputValue:D,onInputValueChange:O,open:E,onOpenChange:h,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:d.itemCount,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:qe,disabled:$,readOnly:q,invalid:Ve,children:t})})}le.displayName="MultiSelect";var ie=M(require("react"),1),ne=require("../utils/composeRefs.cjs"),re=require("../utils/part.cjs"),ae=require("../utils/popper.cjs"),C=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),A=ie.forwardRef((t,o)=>{let e=s("MultiSelectInput"),i=(0,ne.useComposedRefs)(o,e.inputRef);return(0,N.jsx)(ae.PopperAnchor,{asChild:!0,children:(0,N.jsx)(C.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,re.skdxPart)("multi-select","input",t.className),ref:i,value:e.inputValue,onChange:(0,C.composeEventHandlers)(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:(0,C.composeEventHandlers)(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:(0,C.composeEventHandlers)(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last");else if(l.key==="Enter"){let n=e.activeId?e.getItem(e.activeId):void 0;if(!n)return;l.preventDefault(),e.toggle(n.value)}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});A.displayName="MultiSelectInput";var se=M(require("react"),1),ce=require("../tag-group/TagGroup.cjs"),ue=require("../utils/part.cjs");var me=require("react/jsx-runtime"),V=se.forwardRef((t,o)=>{let e=s("MultiSelectTagList");return(0,me.jsx)(ce.TagGroup,{disabled:e.disabled||e.readOnly,...t,...(0,ue.skdxPart)("multi-select","tag-list",t.className),ref:o})});V.displayName="MultiSelectTagList";var pe=M(require("react"),1),fe=require("../tag/Tag.cjs"),de=require("../utils/part.cjs");var Me=require("react/jsx-runtime"),F=pe.forwardRef(({value:t,...o},e)=>{let i=s("MultiSelectTag"),l=i.value.indexOf(t);return(0,Me.jsx)(fe.Tag,{index:l,value:t,"data-value":t,onDelete:()=>i.deselect(t),...o,...(0,de.skdxPart)("multi-select","tag",o.className),ref:e})});F.displayName="MultiSelectTag";var ge=M(require("react"),1),Se=require("../tag/Tag.cjs"),Re=require("../utils/part.cjs"),Pe=require("react/jsx-runtime"),B=ge.forwardRef((t,o)=>(0,Pe.jsx)(Se.TagDelete,{...t,...(0,Re.skdxPart)("multi-select","tag-remove",t.className),ref:o}));B.displayName="MultiSelectTagRemove";var Ce=require("../utils/portal.cjs");var ye=require("react/jsx-runtime"),W=({forceMount:t,children:o,...e})=>{let i=s("MultiSelectPortal");return t||i.open?(0,ye.jsx)(Ce.Portal,{...e,children:o}):null};W.displayName="MultiSelectPortal";var ve=M(require("react"),1),xe=require("../utils/composeRefs.cjs"),Ie=require("../utils/part.cjs"),he=require("../utils/popper.cjs"),Te=require("../utils/primitive.cjs"),Le=require("../utils/useDismiss.cjs");var be=require("react/jsx-runtime"),K=ve.forwardRef(({forceMount:t,side:o="bottom",align:e="start",sideOffset:i=4,onEscapeKeyDown:l,onPointerDownOutside:n,onFocusOutside:f,onInteractOutside:S,...g},v)=>{let r=s("MultiSelectContent"),m=(0,xe.useComposedRefs)(v,r.contentRef);return(0,Le.useDismiss)({enabled:r.open,onEscapeKeyDown:a=>{l?.(a),a.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:S,onPointerDownOutside:a=>{n?.(a),a.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:a=>{f?.(a),a.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.inputRef]),!t&&!r.open?null:(0,be.jsx)(he.PopperContent,{component:"multi-select","data-state":r.open?"open":"closed",side:o,align:e,sideOffset:i,...g,...(0,Ie.skdxPart)("multi-select","content",g.className),ref:m,onMouseDown:(0,Te.composeEventHandlers)(g.onMouseDown,a=>a.preventDefault())})});K.displayName="MultiSelectContent";var ke=M(require("react"),1),De=require("../utils/part.cjs"),Oe=require("../utils/primitive.cjs");var Ee=require("react/jsx-runtime"),G=ke.forwardRef((t,o)=>{let e=s("MultiSelectList");return(0,Ee.jsx)(Oe.Primitive.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...(0,De.skdxPart)("multi-select","list",t.className),ref:o})});G.displayName="MultiSelectList";var y=M(require("react"),1),He=require("../utils/composeRefs.cjs"),we=require("../utils/part.cjs"),I=require("../utils/primitive.cjs"),Ne=require("../utils/useOptionCollection.cjs");var Ae=require("react/jsx-runtime"),U=y.forwardRef(({value:t,disabled:o,textValue:e,...i},l)=>{let n=s("MultiSelectItem"),f=y.useId(),S=y.useRef(null),g=(0,He.useComposedRefs)(l,S),{visible:v}=(0,Ne.useOptionEntry)({id:f,value:t,textValue:e,itemRef:S,matchesFilter:n.matchesFilter,registerItem:n.registerItem,unregisterItem:n.unregisterItem});if(!v)return null;let r=n.isSelected(t),m=o||n.disabled||n.readOnly||n.atMax&&!r,a=n.activeId===f;return(0,Ae.jsx)(I.Primitive.div,{role:"option",id:f,"data-value":t,"aria-selected":r,"aria-disabled":m?!0:void 0,"data-state":r?"selected":"unselected","data-highlighted":a?"":void 0,"data-disabled":m?"":void 0,...i,...(0,we.skdxPart)("multi-select","item",i.className),ref:g,onClick:(0,I.composeEventHandlers)(i.onClick,()=>{m||(n.toggle(t),n.inputRef.current?.focus())}),onPointerEnter:(0,I.composeEventHandlers)(i.onPointerEnter,()=>{m||n.setActiveId(f)})})});U.displayName="MultiSelectItem";0&&(module.exports={MultiSelect,MultiSelectContent,MultiSelectInput,MultiSelectItem,MultiSelectList,MultiSelectPortal,MultiSelectProvider,MultiSelectTag,MultiSelectTagList,MultiSelectTagRemove,defaultGetSelectionLabel,useMultiSelectContext});

package/dist/multi-select/MultiSelect.d.cts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { MultiSelectContextValue, MultiSelectProps } from './types.cjs';
+/**
+ * Select many values from a list and render the chosen set as removable tags.
+ * The tag half is not reimplemented here: `MultiSelectTagList`/`MultiSelectTag`/
+ * `MultiSelectTagRemove` are thin bindings over the existing `TagGroup`/`Tag`/
+ * `TagDelete`, which already own the single-tab-stop roving focus and the
+ * "move focus to the neighbour *before* the removal lands" rule that makes
+ * clearing several tags in a row possible from the keyboard.
+ */
+/** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
+export declare function defaultGetSelectionLabel(count: number): string;
+export declare const MultiSelectProvider: {
+    (props: MultiSelectContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMultiSelectContext: (consumerName: string) => MultiSelectContextValue;
+/**
+ * Root of a multi-select: a text field with a listbox of options, where every
+ * chosen value shows up as a removable tag. Owns the `string[]` selection, the
+ * draft text and the popup's open state, and hands them to every other
+ * `MultiSelect*` part via context. Renders no DOM of its own — the "field" box
+ * that visually contains the tags and the input is yours to lay out.
+ *
+ * The popup **stays open across selections** (`closeOnSelect` defaults to
+ * `false`): picking five things should cost five clicks, not five clicks and
+ * five reopenings. Backspace on an empty input removes the last tag, which is
+ * the gesture every tag field has trained users to expect.
+ *
+ * @example
+ * ```tsx
+ * function SkillsField() {
+ *   const [value, setValue] = React.useState<string[]>([]);
+ *   const [inputValue, setInputValue] = React.useState('');
+ *   const matches = SKILLS.filter((s) => s.toLowerCase().includes(inputValue.toLowerCase()));
+ *
+ *   return (
+ *     <MultiSelect value={value} onValueChange={setValue} inputValue={inputValue} onInputValueChange={setInputValue}>
+ *       <div className="field">
+ *         <MultiSelectTagList aria-label="Selected skills">
+ *           {value.map((skill) => (
+ *             <MultiSelectTag key={skill} value={skill}>
+ *               {skill}
+ *               <MultiSelectTagRemove>×</MultiSelectTagRemove>
+ *             </MultiSelectTag>
+ *           ))}
+ *         </MultiSelectTagList>
+ *         <MultiSelectInput aria-label="Skills" placeholder="Add a skill…" />
+ *       </div>
+ *       <MultiSelectPortal>
+ *         <MultiSelectContent>
+ *           <MultiSelectList aria-label="Skills">
+ *             {matches.map((skill) => (
+ *               <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>
+ *             ))}
+ *           </MultiSelectList>
+ *         </MultiSelectContent>
+ *       </MultiSelectPortal>
+ *     </MultiSelect>
+ *   );
+ * }
+ * ```
+ */
+export declare function MultiSelect({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, max, closeOnSelect, filter, disabled, readOnly, invalid, getSelectionLabel, }: MultiSelectProps): React.JSX.Element;
+export declare namespace MultiSelect {
+    var displayName: string;
+}

package/dist/multi-select/MultiSelect.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { MultiSelectContextValue, MultiSelectProps } from './types.js';
+/**
+ * Select many values from a list and render the chosen set as removable tags.
+ * The tag half is not reimplemented here: `MultiSelectTagList`/`MultiSelectTag`/
+ * `MultiSelectTagRemove` are thin bindings over the existing `TagGroup`/`Tag`/
+ * `TagDelete`, which already own the single-tab-stop roving focus and the
+ * "move focus to the neighbour *before* the removal lands" rule that makes
+ * clearing several tags in a row possible from the keyboard.
+ */
+/** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
+export declare function defaultGetSelectionLabel(count: number): string;
+export declare const MultiSelectProvider: {
+    (props: MultiSelectContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMultiSelectContext: (consumerName: string) => MultiSelectContextValue;
+/**
+ * Root of a multi-select: a text field with a listbox of options, where every
+ * chosen value shows up as a removable tag. Owns the `string[]` selection, the
+ * draft text and the popup's open state, and hands them to every other
+ * `MultiSelect*` part via context. Renders no DOM of its own — the "field" box
+ * that visually contains the tags and the input is yours to lay out.
+ *
+ * The popup **stays open across selections** (`closeOnSelect` defaults to
+ * `false`): picking five things should cost five clicks, not five clicks and
+ * five reopenings. Backspace on an empty input removes the last tag, which is
+ * the gesture every tag field has trained users to expect.
+ *
+ * @example
+ * ```tsx
+ * function SkillsField() {
+ *   const [value, setValue] = React.useState<string[]>([]);
+ *   const [inputValue, setInputValue] = React.useState('');
+ *   const matches = SKILLS.filter((s) => s.toLowerCase().includes(inputValue.toLowerCase()));
+ *
+ *   return (
+ *     <MultiSelect value={value} onValueChange={setValue} inputValue={inputValue} onInputValueChange={setInputValue}>
+ *       <div className="field">
+ *         <MultiSelectTagList aria-label="Selected skills">
+ *           {value.map((skill) => (
+ *             <MultiSelectTag key={skill} value={skill}>
+ *               {skill}
+ *               <MultiSelectTagRemove>×</MultiSelectTagRemove>
+ *             </MultiSelectTag>
+ *           ))}
+ *         </MultiSelectTagList>
+ *         <MultiSelectInput aria-label="Skills" placeholder="Add a skill…" />
+ *       </div>
+ *       <MultiSelectPortal>
+ *         <MultiSelectContent>
+ *           <MultiSelectList aria-label="Skills">
+ *             {matches.map((skill) => (
+ *               <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>
+ *             ))}
+ *           </MultiSelectList>
+ *         </MultiSelectContent>
+ *       </MultiSelectPortal>
+ *     </MultiSelect>
+ *   );
+ * }
+ * ```
+ */
+export declare function MultiSelect({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, max, closeOnSelect, filter, disabled, readOnly, invalid, getSelectionLabel, }: MultiSelectProps): React.JSX.Element;
+export declare namespace MultiSelect {
+    var displayName: string;
+}

package/dist/multi-select/MultiSelect.js

@@ -0,0 +1 @@
+import*as c from"react";import{createSafeContext as se}from"../utils/createContext.js";import{announce as ce}from"../utils/liveAnnouncer.js";import{PopperRoot as ue}from"../utils/popper.js";import{useControllableState as k}from"../utils/useControllableState.js";import{useOpenChangeComplete as me}from"../utils/useOpenChangeComplete.js";import{useOptionCollection as pe}from"../utils/useOptionCollection.js";import{jsx as A}from"react/jsx-runtime";function fe(t){return t===0?"none selected":`${t} selected`}var[de,u]=se("MultiSelect");function Me({children:t,value:l,defaultValue:e=[],onValueChange:n,inputValue:o,defaultInputValue:i="",onInputValueChange:f,open:g,defaultOpen:M=!1,onOpenChange:C,onOpenChangeComplete:r,max:m,closeOnSelect:a=!1,filter:x,disabled:O=!1,readOnly:E=!1,invalid:j=!1,getSelectionLabel:H=fe}){let ee=c.useRef(null),I=c.useRef(null),te=c.useId(),[y=[],S]=k({prop:l,defaultProp:e,onChange:n}),[h="",T]=k({prop:o,defaultProp:i,onChange:f}),[L=!1,v]=k({prop:g,defaultProp:M,onChange:C});me(L,I,r);let d=pe({open:L,setOpen:v,contentRef:I}),R=O||E,oe=m!==void 0&&y.length>=m,w=y.length,N=c.useRef(!0);c.useEffect(()=>{if(N.current){N.current=!1;return}ce(H(w))},[w,H]);let le=c.useCallback(s=>y.includes(s),[y]),ie=c.useCallback(s=>{R||S((p=[])=>p.includes(s)?p.filter(b=>b!==s):p)},[R,S]),ne=c.useCallback(()=>{R||S((s=[])=>s.length===0?s:s.slice(0,-1))},[R,S]),re=c.useCallback(s=>{R||(S((p=[])=>p.includes(s)?p.filter(b=>b!==s):m!==void 0&&p.length>=m?p:[...p,s]),T(""),a&&v(!1))},[R,m,a,S,T,v]),ae=c.useCallback(s=>x===void 0||x(s,h),[x,h]);return A(ue,{children:A(de,{inputRef:ee,contentRef:I,listId:te,value:y,isSelected:le,toggle:re,deselect:ie,removeLast:ne,atMax:oe,inputValue:h,onInputValueChange:T,open:L,onOpenChange:v,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:d.itemCount,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:ae,disabled:O,readOnly:E,invalid:j,children:t})})}Me.displayName="MultiSelect";import*as F from"react";import{useComposedRefs as ge}from"../utils/composeRefs.js";import{skdxPart as Se}from"../utils/part.js";import{PopperAnchor as Re}from"../utils/popper.js";import{composeEventHandlers as D,Primitive as Pe}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var B=F.forwardRef((t,l)=>{let e=u("MultiSelectInput"),n=ge(l,e.inputRef);return V(Re,{asChild:!0,children:V(Pe.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...Se("multi-select","input",t.className),ref:n,value:e.inputValue,onChange:D(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onBlur:D(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:D(t.onKeyDown,o=>{if(o.key==="ArrowDown")o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first");else if(o.key==="ArrowUp")o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last");else if(o.key==="Enter"){let i=e.activeId?e.getItem(e.activeId):void 0;if(!i)return;o.preventDefault(),e.toggle(i.value)}else o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.onOpenChange(!1)):o.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});B.displayName="MultiSelectInput";import*as W from"react";import{TagGroup as Ce}from"../tag-group/TagGroup.js";import{skdxPart as ye}from"../utils/part.js";import{jsx as ve}from"react/jsx-runtime";var K=W.forwardRef((t,l)=>{let e=u("MultiSelectTagList");return ve(Ce,{disabled:e.disabled||e.readOnly,...t,...ye("multi-select","tag-list",t.className),ref:l})});K.displayName="MultiSelectTagList";import*as G from"react";import{Tag as xe}from"../tag/Tag.js";import{skdxPart as Ie}from"../utils/part.js";import{jsx as he}from"react/jsx-runtime";var U=G.forwardRef(({value:t,...l},e)=>{let n=u("MultiSelectTag"),o=n.value.indexOf(t);return he(xe,{index:o,value:t,"data-value":t,onDelete:()=>n.deselect(t),...l,...Ie("multi-select","tag",l.className),ref:e})});U.displayName="MultiSelectTag";import*as $ from"react";import{TagDelete as Te}from"../tag/Tag.js";import{skdxPart as Le}from"../utils/part.js";import{jsx as be}from"react/jsx-runtime";var q=$.forwardRef((t,l)=>be(Te,{...t,...Le("multi-select","tag-remove",t.className),ref:l}));q.displayName="MultiSelectTagRemove";import{Portal as ke}from"../utils/portal.js";import{jsx as De}from"react/jsx-runtime";var z=({forceMount:t,children:l,...e})=>{let n=u("MultiSelectPortal");return t||n.open?De(ke,{...e,children:l}):null};z.displayName="MultiSelectPortal";import*as J from"react";import{useComposedRefs as Oe}from"../utils/composeRefs.js";import{skdxPart as Ee}from"../utils/part.js";import{PopperContent as He}from"../utils/popper.js";import{composeEventHandlers as we}from"../utils/primitive.js";import{useDismiss as Ne}from"../utils/useDismiss.js";import{jsx as Ae}from"react/jsx-runtime";var Q=J.forwardRef(({forceMount:t,side:l="bottom",align:e="start",sideOffset:n=4,onEscapeKeyDown:o,onPointerDownOutside:i,onFocusOutside:f,onInteractOutside:g,...M},C)=>{let r=u("MultiSelectContent"),m=Oe(C,r.contentRef);return Ne({enabled:r.open,onEscapeKeyDown:a=>{o?.(a),a.defaultPrevented||r.onOpenChange(!1)},onInteractOutside:g,onPointerDownOutside:a=>{i?.(a),a.defaultPrevented||r.onOpenChange(!1)},onFocusOutside:a=>{f?.(a),a.defaultPrevented||r.onOpenChange(!1)}},[r.contentRef,r.inputRef]),!t&&!r.open?null:Ae(He,{component:"multi-select","data-state":r.open?"open":"closed",side:l,align:e,sideOffset:n,...M,...Ee("multi-select","content",M.className),ref:m,onMouseDown:we(M.onMouseDown,a=>a.preventDefault())})});Q.displayName="MultiSelectContent";import*as X from"react";import{skdxPart as Ve}from"../utils/part.js";import{Primitive as Fe}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var Y=X.forwardRef((t,l)=>{let e=u("MultiSelectList");return Be(Fe.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...Ve("multi-select","list",t.className),ref:l})});Y.displayName="MultiSelectList";import*as P from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{composeEventHandlers as Z,Primitive as Ge}from"../utils/primitive.js";import{useOptionEntry as Ue}from"../utils/useOptionCollection.js";import{jsx as $e}from"react/jsx-runtime";var _=P.forwardRef(({value:t,disabled:l,textValue:e,...n},o)=>{let i=u("MultiSelectItem"),f=P.useId(),g=P.useRef(null),M=We(o,g),{visible:C}=Ue({id:f,value:t,textValue:e,itemRef:g,matchesFilter:i.matchesFilter,registerItem:i.registerItem,unregisterItem:i.unregisterItem});if(!C)return null;let r=i.isSelected(t),m=l||i.disabled||i.readOnly||i.atMax&&!r,a=i.activeId===f;return $e(Ge.div,{role:"option",id:f,"data-value":t,"aria-selected":r,"aria-disabled":m?!0:void 0,"data-state":r?"selected":"unselected","data-highlighted":a?"":void 0,"data-disabled":m?"":void 0,...n,...Ke("multi-select","item",n.className),ref:M,onClick:Z(n.onClick,()=>{m||(i.toggle(t),i.inputRef.current?.focus())}),onPointerEnter:Z(n.onPointerEnter,()=>{m||i.setActiveId(f)})})});_.displayName="MultiSelectItem";export{Me as MultiSelect,Q as MultiSelectContent,B as MultiSelectInput,_ as MultiSelectItem,Y as MultiSelectList,z as MultiSelectPortal,de as MultiSelectProvider,U as MultiSelectTag,K as MultiSelectTagList,q as MultiSelectTagRemove,fe as defaultGetSelectionLabel,u as useMultiSelectContext};

package/dist/multi-select/MultiSelectContent.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { MultiSelectContentProps } from './types.cjs';
+/**
+ * The popup shell of a {@link MultiSelect}, positioned against the input via
+ * floating-ui (see {@link MultiSelectContentProps}). Renders a plain `<div>`
+ * with `data-state`, `data-side` and `data-align`, and writes the four
+ * measurement custom properties `--skdx-multi-select-available-width`,
+ * `--skdx-multi-select-available-height`, `--skdx-multi-select-trigger-width`
+ * and `--skdx-multi-select-transform-origin` onto itself after each
+ * reposition — so a panel whose height must stop at the viewport edge is CSS,
+ * not JavaScript.
+ *
+ * Carries **no ARIA role**: the listbox is {@link MultiSelectList}, one level
+ * in, leaving room for a "3 of 8 selected" header or a footer that is not an
+ * option. Prevents `mousedown` from stealing focus off the input, which is
+ * what lets the popup stay open across a run of selections.
+ *
+ * Closes on Escape (leaving focus on the input, which never lost it) or on an
+ * outside interaction — pointer-down outside or focus moving outside, each
+ * reported to `onPointerDownOutside`/`onFocusOutside` and, just before them and
+ * with the same event, to `onInteractOutside`. Any of those (or
+ * `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open. The input
+ * counts as inside: clicking or tabbing back into it is not an outside
+ * interaction.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectContent>
+ *   <MultiSelectList aria-label="Skills">
+ *     <MultiSelectItem value="React">React</MultiSelectItem>
+ *   </MultiSelectList>
+ * </MultiSelectContent>
+ * ```
+ */
+export declare const MultiSelectContent: React.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectContent.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { MultiSelectContentProps } from './types.js';
+/**
+ * The popup shell of a {@link MultiSelect}, positioned against the input via
+ * floating-ui (see {@link MultiSelectContentProps}). Renders a plain `<div>`
+ * with `data-state`, `data-side` and `data-align`, and writes the four
+ * measurement custom properties `--skdx-multi-select-available-width`,
+ * `--skdx-multi-select-available-height`, `--skdx-multi-select-trigger-width`
+ * and `--skdx-multi-select-transform-origin` onto itself after each
+ * reposition — so a panel whose height must stop at the viewport edge is CSS,
+ * not JavaScript.
+ *
+ * Carries **no ARIA role**: the listbox is {@link MultiSelectList}, one level
+ * in, leaving room for a "3 of 8 selected" header or a footer that is not an
+ * option. Prevents `mousedown` from stealing focus off the input, which is
+ * what lets the popup stay open across a run of selections.
+ *
+ * Closes on Escape (leaving focus on the input, which never lost it) or on an
+ * outside interaction — pointer-down outside or focus moving outside, each
+ * reported to `onPointerDownOutside`/`onFocusOutside` and, just before them and
+ * with the same event, to `onInteractOutside`. Any of those (or
+ * `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open. The input
+ * counts as inside: clicking or tabbing back into it is not an outside
+ * interaction.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectContent>
+ *   <MultiSelectList aria-label="Skills">
+ *     <MultiSelectItem value="React">React</MultiSelectItem>
+ *   </MultiSelectList>
+ * </MultiSelectContent>
+ * ```
+ */
+export declare const MultiSelectContent: React.ForwardRefExoticComponent<Omit<MultiSelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectInput.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { MultiSelectInputProps } from './types.cjs';
+/**
+ * The text field a {@link MultiSelect} is driven from, and the popper anchor
+ * the option popup positions against. Renders an
+ * `<input type="text" role="combobox">` with `aria-expanded`, `aria-controls`
+ * pointing at `MultiSelectList`, `aria-autocomplete="list"`,
+ * `aria-activedescendant` tracking the virtually-focused option, and
+ * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ *
+ * Real DOM focus never leaves it while the popup is open — Arrow Down/Up move
+ * a *virtual* highlight, and Enter toggles the highlighted option without
+ * closing (unless the root sets `closeOnSelect`). **Backspace on an empty
+ * field removes the last tag**, the gesture every tag field has trained users
+ * to expect; with text in the field it does the ordinary thing and deletes a
+ * character.
+ *
+ * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectInput aria-label="Skills" placeholder="Add a skill…" />
+ * ```
+ */
+export declare const MultiSelectInput: React.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/multi-select/MultiSelectInput.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { MultiSelectInputProps } from './types.js';
+/**
+ * The text field a {@link MultiSelect} is driven from, and the popper anchor
+ * the option popup positions against. Renders an
+ * `<input type="text" role="combobox">` with `aria-expanded`, `aria-controls`
+ * pointing at `MultiSelectList`, `aria-autocomplete="list"`,
+ * `aria-activedescendant` tracking the virtually-focused option, and
+ * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ *
+ * Real DOM focus never leaves it while the popup is open — Arrow Down/Up move
+ * a *virtual* highlight, and Enter toggles the highlighted option without
+ * closing (unless the root sets `closeOnSelect`). **Backspace on an empty
+ * field removes the last tag**, the gesture every tag field has trained users
+ * to expect; with text in the field it does the ordinary thing and deletes a
+ * character.
+ *
+ * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectInput aria-label="Skills" placeholder="Add a skill…" />
+ * ```
+ */
+export declare const MultiSelectInput: React.ForwardRefExoticComponent<Omit<MultiSelectInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/multi-select/MultiSelectItem.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { MultiSelectItemProps } from './types.cjs';
+/**
+ * One option inside {@link MultiSelectList}. Renders a `<div role="option">`
+ * with `aria-selected`, `data-value`, `data-state="selected" | "unselected"`,
+ * `data-highlighted` for virtual focus — the attribute to style the keyboard
+ * cursor from, since real DOM focus stays on the input — and `data-disabled`.
+ *
+ * Clicking or pressing Enter **toggles** it and leaves the popup open (unless
+ * the root sets `closeOnSelect`), so picking five options costs five clicks.
+ * The draft text is cleared on every selection: it was the search that found
+ * this option, and keeping it would leave the list filtered down to the one
+ * item just picked.
+ *
+ * Once the root's `max` is reached, still-unselected options become
+ * `aria-disabled` and stop responding rather than silently swallowing clicks —
+ * an option that looks available and does nothing is worse than one that says
+ * it is unavailable. Already-selected options stay live, so the way out of a
+ * full selection is always visible.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectItem value="React">React</MultiSelectItem>
+ * ```
+ */
+export declare const MultiSelectItem: React.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectItem.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { MultiSelectItemProps } from './types.js';
+/**
+ * One option inside {@link MultiSelectList}. Renders a `<div role="option">`
+ * with `aria-selected`, `data-value`, `data-state="selected" | "unselected"`,
+ * `data-highlighted` for virtual focus — the attribute to style the keyboard
+ * cursor from, since real DOM focus stays on the input — and `data-disabled`.
+ *
+ * Clicking or pressing Enter **toggles** it and leaves the popup open (unless
+ * the root sets `closeOnSelect`), so picking five options costs five clicks.
+ * The draft text is cleared on every selection: it was the search that found
+ * this option, and keeping it would leave the list filtered down to the one
+ * item just picked.
+ *
+ * Once the root's `max` is reached, still-unselected options become
+ * `aria-disabled` and stop responding rather than silently swallowing clicks —
+ * an option that looks available and does nothing is worse than one that says
+ * it is unavailable. Already-selected options stay live, so the way out of a
+ * full selection is always visible.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectItem value="React">React</MultiSelectItem>
+ * ```
+ */
+export declare const MultiSelectItem: React.ForwardRefExoticComponent<Omit<MultiSelectItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectList.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { MultiSelectListProps } from './types.cjs';
+/**
+ * The `role="listbox"` holding a {@link MultiSelect}'s options, marked
+ * `aria-multiselectable="true"` so assistive technology announces it as a list
+ * you take several things from rather than one. Carries the id the input's
+ * `aria-controls` points at, so it must render whenever the popup does.
+ *
+ * The attribute is set by presence rather than value: `aria-multiselectable="false"`
+ * is still read as multi-selectable by some screen readers, so it is never
+ * written.
+ *
+ * `role="listbox"` has no implicit accessible name — pass `aria-label` or
+ * `aria-labelledby` saying what the options are.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectList aria-label="Skills">
+ *   <MultiSelectItem value="React">React</MultiSelectItem>
+ * </MultiSelectList>
+ * ```
+ */
+export declare const MultiSelectList: React.ForwardRefExoticComponent<Omit<MultiSelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectList.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { MultiSelectListProps } from './types.js';
+/**
+ * The `role="listbox"` holding a {@link MultiSelect}'s options, marked
+ * `aria-multiselectable="true"` so assistive technology announces it as a list
+ * you take several things from rather than one. Carries the id the input's
+ * `aria-controls` points at, so it must render whenever the popup does.
+ *
+ * The attribute is set by presence rather than value: `aria-multiselectable="false"`
+ * is still read as multi-selectable by some screen readers, so it is never
+ * written.
+ *
+ * `role="listbox"` has no implicit accessible name — pass `aria-label` or
+ * `aria-labelledby` saying what the options are.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectList aria-label="Skills">
+ *   <MultiSelectItem value="React">React</MultiSelectItem>
+ * </MultiSelectList>
+ * ```
+ */
+export declare const MultiSelectList: React.ForwardRefExoticComponent<Omit<MultiSelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/multi-select/MultiSelectPortal.d.cts

@@ -0,0 +1,22 @@
+import type { MultiSelectPortalProps } from './types.cjs';
+/**
+ * Teleports its children (typically {@link MultiSelectContent}) to
+ * `document.body` — or to `container`, via `PortalProps` — while the
+ * {@link MultiSelect}'s popup is open. Worth having here in particular: the
+ * field wrapping the tags and the input is usually a fixed-height box with
+ * `overflow: hidden`, which is precisely what would clip the option list.
+ * Renders nothing while closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectPortal>
+ *   <MultiSelectContent>
+ *     <MultiSelectList aria-label="Skills">…</MultiSelectList>
+ *   </MultiSelectContent>
+ * </MultiSelectPortal>
+ * ```
+ */
+export declare const MultiSelectPortal: {
+    ({ forceMount, children, ...props }: MultiSelectPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/multi-select/MultiSelectPortal.d.ts

@@ -0,0 +1,22 @@
+import type { MultiSelectPortalProps } from './types.js';
+/**
+ * Teleports its children (typically {@link MultiSelectContent}) to
+ * `document.body` — or to `container`, via `PortalProps` — while the
+ * {@link MultiSelect}'s popup is open. Worth having here in particular: the
+ * field wrapping the tags and the input is usually a fixed-height box with
+ * `overflow: hidden`, which is precisely what would clip the option list.
+ * Renders nothing while closed unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectPortal>
+ *   <MultiSelectContent>
+ *     <MultiSelectList aria-label="Skills">…</MultiSelectList>
+ *   </MultiSelectContent>
+ * </MultiSelectPortal>
+ * ```
+ */
+export declare const MultiSelectPortal: {
+    ({ forceMount, children, ...props }: MultiSelectPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/multi-select/MultiSelectTag.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { MultiSelectTagProps } from './types.cjs';
+/**
+ * One selected value, rendered as a removable {@link Tag} inside
+ * {@link MultiSelectTagList}. Takes only a `value` — the index the roving tab
+ * stop is keyed on is read from the root's selection, so the tags can be
+ * rendered from any list without the consumer keeping a parallel index.
+ *
+ * Everything about removal is inherited from `Tag`: `Delete`/`Backspace` on a
+ * focused tag removes it, and focus moves to the neighbouring tag *before* the
+ * removal lands, so clearing three tags takes three key presses instead of
+ * three presses and three trips back through the document. `value` also names
+ * the {@link MultiSelectTagRemove} button, so a strip of them announces
+ * "Remove React", "Remove TypeScript" rather than a row of identical
+ * "Remove"s.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectTag value="React">
+ *   React
+ *   <MultiSelectTagRemove>×</MultiSelectTagRemove>
+ * </MultiSelectTag>
+ * ```
+ */
+export declare const MultiSelectTag: React.ForwardRefExoticComponent<Omit<MultiSelectTagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;