@skdx/react 0.28.0 → 0.30.0

package/dist/meter/primitives.d.ts

@@ -1,19 +0,0 @@
-/**
- * Advanced primitives for `Meter`: `Meter`, `MeterIndicator`, `MeterLabel`, and `MeterValue`.
- *
- * @example
- * ```tsx
- * import { Meter, MeterIndicator, MeterLabel, MeterValue } from '@skdx/react/primitives/meter';
- *
- * <Meter value={82} aria-label="Disk usage">
- *   <MeterLabel>Disk usage</MeterLabel>
- *   <MeterValue />
- *   <MeterIndicator />
- * </Meter>
- * ```
- */
-export { Meter } from './Meter.js';
-export { MeterLabel } from './MeterLabel.js';
-export { MeterValue } from './MeterValue.js';
-export { MeterIndicator } from './MeterIndicator.js';
-export type { MeterProps, MeterLabelProps, MeterValueProps, MeterIndicatorProps } from './types.js';

package/dist/meter/types.d.cts

@@ -1,83 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared range distributed from {@link Meter} to its parts via context. Not part of the public API. */
-export interface MeterContextValue {
-    value: number;
-    min: number;
-    max: number;
-    range: MeterRange | undefined;
-    /** The id the {@link MeterLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
-    labelId: string;
-    /** Registers the presence of a {@link MeterLabel}, so the root only wires `aria-labelledby` when one exists. */
-    setHasLabel: (hasLabel: boolean) => void;
-    /** The formatted readout, shared with {@link MeterValue} so the visible string and `aria-valuetext` cannot drift. */
-    valueLabel: string;
-}
-/** 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]`. Renders `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` defines the bands 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, above `high` means high values are optimum.
-     * @default undefined — the midpoint of the range when `low` or `high` is supplied.
-     */
-    optimum?: number;
-    /**
-     * Formats the `aria-valuetext` and the {@link MeterValue} readout. Takes `min` and `max`.
-     * @default undefined — falls back to a rounded percentage of the position within [min, max].
-     */
-    getValueLabel?: (value: number, min: number, max: number) => string;
-    /**
-     * `Intl.NumberFormat` options the value is formatted with for `aria-valuetext` and the {@link MeterValue} readout. Formats the raw value as `NumberField` does, so with `{ style: 'percent' }` the value is the fraction.
-     * @default undefined — falls back to a rounded percentage of the position within [min, max].
-     */
-    formatOptions?: Intl.NumberFormatOptions;
-    /**
-     * BCP-47 locale the formatting uses, so server and browser renders agree on separators.
-     * @default undefined — the runtime locale.
-     */
-    locale?: string;
-    /**
-     * Visible caption, rendered into a derived `MeterLabel` and wired to `aria-labelledby`. Ignored when `children` is given.
-     * @default undefined — no label element is rendered.
-     */
-    label?: string;
-    /**
-     * Renders a derived `MeterValue` readout alongside the fill. Ignored when `children` is given.
-     * @default false
-     */
-    showValue?: boolean;
-}
-/** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
-export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
-}
-/** Props for {@link MeterLabel}, the meter's visible name. */
-export interface MeterLabelProps extends PrimitivePropsWithRef<'span'> {
-}
-/** Props for {@link MeterValue}, the visible readout inside `Meter`. */
-export interface MeterValueProps extends PrimitivePropsWithRef<'span'> {
-}

package/dist/meter/types.d.ts

@@ -1,83 +0,0 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared range distributed from {@link Meter} to its parts via context. Not part of the public API. */
-export interface MeterContextValue {
-    value: number;
-    min: number;
-    max: number;
-    range: MeterRange | undefined;
-    /** The id the {@link MeterLabel} takes, and the root points `aria-labelledby` at while one is mounted. */
-    labelId: string;
-    /** Registers the presence of a {@link MeterLabel}, so the root only wires `aria-labelledby` when one exists. */
-    setHasLabel: (hasLabel: boolean) => void;
-    /** The formatted readout, shared with {@link MeterValue} so the visible string and `aria-valuetext` cannot drift. */
-    valueLabel: string;
-}
-/** 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]`. Renders `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` defines the bands 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, above `high` means high values are optimum.
-     * @default undefined — the midpoint of the range when `low` or `high` is supplied.
-     */
-    optimum?: number;
-    /**
-     * Formats the `aria-valuetext` and the {@link MeterValue} readout. Takes `min` and `max`.
-     * @default undefined — falls back to a rounded percentage of the position within [min, max].
-     */
-    getValueLabel?: (value: number, min: number, max: number) => string;
-    /**
-     * `Intl.NumberFormat` options the value is formatted with for `aria-valuetext` and the {@link MeterValue} readout. Formats the raw value as `NumberField` does, so with `{ style: 'percent' }` the value is the fraction.
-     * @default undefined — falls back to a rounded percentage of the position within [min, max].
-     */
-    formatOptions?: Intl.NumberFormatOptions;
-    /**
-     * BCP-47 locale the formatting uses, so server and browser renders agree on separators.
-     * @default undefined — the runtime locale.
-     */
-    locale?: string;
-    /**
-     * Visible caption, rendered into a derived `MeterLabel` and wired to `aria-labelledby`. Ignored when `children` is given.
-     * @default undefined — no label element is rendered.
-     */
-    label?: string;
-    /**
-     * Renders a derived `MeterValue` readout alongside the fill. Ignored when `children` is given.
-     * @default false
-     */
-    showValue?: boolean;
-}
-/** Props for {@link MeterIndicator}, the fill element inside `Meter`. */
-export interface MeterIndicatorProps extends PrimitivePropsWithRef<'div'> {
-}
-/** Props for {@link MeterLabel}, the meter's visible name. */
-export interface MeterLabelProps extends PrimitivePropsWithRef<'span'> {
-}
-/** Props for {@link MeterValue}, the visible readout inside `Meter`. */
-export interface MeterValueProps extends PrimitivePropsWithRef<'span'> {
-}

package/dist/multi-select/MultiSelect.cjs

@@ -1 +0,0 @@
-"use strict";var tl=Object.create;var F=Object.defineProperty;var ll=Object.getOwnPropertyDescriptor;var ol=Object.getOwnPropertyNames;var rl=Object.getPrototypeOf,il=Object.prototype.hasOwnProperty;var nl=(t,r)=>{for(var e in r)F(t,e,{get:r[e],enumerable:!0})},ve=(t,r,e,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of ol(r))!il.call(t,p)&&p!==e&&F(t,p,{get:()=>r[p],enumerable:!(c=ll(r,p))||c.enumerable});return t};var C=(t,r,e)=>(e=t!=null?tl(rl(t)):{},ve(r||!t||!t.__esModule?F(e,"default",{value:t,enumerable:!0}):e,t)),al=t=>ve(F({},"__esModule",{value:!0}),t);var sl={};nl(sl,{MultiSelect:()=>Tt,MultiSelectClear:()=>W,MultiSelectContent:()=>q,MultiSelectEmpty:()=>$,MultiSelectGroup:()=>_,MultiSelectGroupLabel:()=>z,MultiSelectGroupProvider:()=>Be,MultiSelectInput:()=>J,MultiSelectItem:()=>Q,MultiSelectList:()=>X,MultiSelectPortal:()=>Y,MultiSelectProvider:()=>kt,MultiSelectTag:()=>Z,MultiSelectTagList:()=>j,MultiSelectTagRemove:()=>ee,defaultGetSelectionLabel:()=>It,useMultiSelectContext:()=>u,useMultiSelectGroupContext:()=>pe});module.exports=al(sl);var n=C(require("react"),1),bt=require("../utils/createContext.cjs"),le=require("../utils/formControl.cjs"),ht=require("../utils/hiddenInput.cjs"),vt=require("../utils/liveAnnouncer.cjs"),Pt=require("../utils/popper.cjs"),oe=require("../utils/scoredFilter.cjs"),te=require("../utils/useControllableState.cjs"),xt=require("../utils/useOpenChangeComplete.cjs"),re=require("../utils/useOptionCollection.cjs");var yt=C(require("react"),1);var Pe=C(require("react"),1),xe=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var Ie=require("react/jsx-runtime"),W=Pe.forwardRef((t,r)=>{let e=u("MultiSelectClear"),c=e.value.length===0&&e.inputValue==="";return(0,Ie.jsx)(B.Primitive.button,{type:"button",disabled:e.disabled||e.readOnly||c,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,xe.skdxPart)("multi-select","clear",t.className),ref:r,onClick:(0,B.composeEventHandlers)(t.onClick,()=>{e.clear(),e.inputRef.current?.focus()})})});W.displayName="MultiSelectClear";var ke=C(require("react"),1),Te=require("../utils/composeRefs.cjs"),Oe=require("../utils/part.cjs"),Ee=require("../utils/popper.cjs"),Le=require("../utils/primitive.cjs"),He=require("../utils/useDismiss.cjs");var De=require("react/jsx-runtime"),q=ke.forwardRef(({forceMount:t,side:r="bottom",align:e="start",sideOffset:c=4,onEscapeKeyDown:p,onPointerDownOutside:l,onFocusOutside:f,onInteractOutside:g,...M},T)=>{let m=u("MultiSelectContent"),h=(0,Te.useComposedRefs)(T,m.contentRef);return(0,He.useDismiss)({enabled:m.open,onEscapeKeyDown:o=>{p?.(o),o.defaultPrevented||m.onOpenChange(!1)},onInteractOutside:g,onPointerDownOutside:o=>{l?.(o),o.defaultPrevented||m.onOpenChange(!1)},onFocusOutside:o=>{f?.(o),o.defaultPrevented||m.onOpenChange(!1)}},[m.contentRef,m.inputRef]),!t&&!m.open?null:(0,De.jsx)(Ee.PopperContent,{component:"multi-select","data-state":m.open?"open":"closed","aria-busy":m.loading?!0:void 0,"data-loading":m.loading?"":void 0,side:r,align:e,sideOffset:c,...M,...(0,Oe.skdxPart)("multi-select","content",M.className),ref:h,onMouseDown:(0,Le.composeEventHandlers)(M.onMouseDown,o=>o.preventDefault())})});q.displayName="MultiSelectContent";var Ge=C(require("react"),1),we=require("../utils/part.cjs"),Ne=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),$=Ge.forwardRef((t,r)=>u("MultiSelectEmpty").itemCount===0?(0,Ae.jsx)(Ne.Primitive.div,{role:"presentation","aria-live":"polite",...t,...(0,we.skdxPart)("multi-select","empty",t.className),ref:r}):null);$.displayName="MultiSelectEmpty";var U=C(require("react"),1),Ve=require("../utils/createContext.cjs"),Ke=require("../utils/part.cjs"),Fe=require("../utils/primitive.cjs"),me=require("react/jsx-runtime"),[Be,pe]=(0,Ve.createSafeContext)("MultiSelectGroup"),_=U.forwardRef((t,r)=>{let e=U.useId();return(0,me.jsx)(Be,{labelId:e,children:(0,me.jsx)(Fe.Primitive.div,{role:"group","aria-labelledby":e,...t,...(0,Ke.skdxPart)("multi-select","group",t.className),ref:r})})});_.displayName="MultiSelectGroup";var We=C(require("react"),1),qe=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),z=We.forwardRef((t,r)=>{let e=pe("MultiSelectGroupLabel");return(0,Ue.jsx)($e.Primitive.div,{id:e.labelId,...t,...(0,qe.skdxPart)("multi-select","group-label",t.className),ref:r})});z.displayName="MultiSelectGroupLabel";var _e=C(require("react"),1),ze=require("../utils/composeRefs.cjs"),Je=require("../utils/part.cjs"),Qe=require("../utils/popper.cjs"),L=require("../utils/primitive.cjs");var fe=require("react/jsx-runtime"),J=_e.forwardRef((t,r)=>{let e=u("MultiSelectInput"),c=(0,ze.useComposedRefs)(r,e.inputRef),p=l=>{let f=e.activeId,g=e.moveActive(l);if(g===null||g===f)return;let M=e.getItem(g);M&&e.toggle(M.value,"keyboard")};return(0,fe.jsx)(Qe.PopperAnchor,{asChild:!0,children:(0,fe.jsx)(L.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,"aria-busy":e.loading?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-loading":e.loading?"":void 0,"data-state":e.open?"open":"closed",...t,...(0,Je.skdxPart)("multi-select","input",t.className),ref:c,value:e.inputValue,onChange:(0,L.composeEventHandlers)(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:(0,L.composeEventHandlers)(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:(0,L.composeEventHandlers)(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?l.shiftKey?p(1):e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?l.shiftKey?p(-1):e.moveActive(-1):e.openWithHighlight("last");else if((l.key==="Home"||l.key==="End")&&l.ctrlKey&&l.shiftKey){if(!e.open)return;l.preventDefault(),e.selectToEdge(l.key==="Home"?"first":"last")}else if(l.key==="Home"||l.key==="End"){if(!e.open)return;l.preventDefault(),e.moveActiveToEdge(l.key==="Home"?"first":"last")}else if((l.ctrlKey||l.metaKey)&&l.key.toLowerCase()==="a"){if(!e.open||!e.allowSelectAll)return;l.preventDefault(),e.selectAllOrClear()}else if(l.key===" "&&l.shiftKey){if(!e.open||e.activeId===null)return;l.preventDefault(),e.selectRange()}else if(l.key==="Enter"){let f=e.activeId?e.getItem(e.activeId):void 0;if(!f)return;l.preventDefault(),e.toggle(f.value,"keyboard")}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});J.displayName="MultiSelectInput";var H=C(require("react"),1),Xe=require("../utils/composeRefs.cjs"),Ye=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),Ze=require("../utils/useOptionCollection.cjs");var je=require("react/jsx-runtime"),Q=H.forwardRef(({value:t,disabled:r,textValue:e,...c},p)=>{let l=u("MultiSelectItem"),f=H.useId(),g=H.useRef(null),M=(0,Xe.useComposedRefs)(p,g),{visible:T}=(0,Ze.useOptionEntry)({id:f,value:t,textValue:e,itemRef:g,matchesFilter:l.matchesFilter,registerItem:l.registerItem,unregisterItem:l.unregisterItem});if(!T)return null;let m=l.isSelected(t),h=r||l.disabled||l.readOnly||l.atMax&&!m,o=l.activeId===f,R=l.itemOrder?.get(f);return(0,je.jsx)(A.Primitive.div,{role:"option",id:f,"data-value":t,"aria-selected":m,"aria-disabled":h?!0:void 0,"data-state":m?"checked":"unchecked","data-highlighted":o?"":void 0,"data-disabled":h?"":void 0,...c,...(0,Ye.skdxPart)("multi-select","item",c.className),ref:M,onClick:(0,A.composeEventHandlers)(c.onClick,()=>{h||(l.toggle(t,"pointer"),l.inputRef.current?.focus())}),onPointerEnter:(0,A.composeEventHandlers)(c.onPointerEnter,()=>{h||l.setActiveId(f)}),style:R!==void 0?{order:R,...c.style}:c.style})});Q.displayName="MultiSelectItem";var et=C(require("react"),1),tt=require("../utils/part.cjs"),lt=require("../utils/primitive.cjs");var ot=require("react/jsx-runtime"),X=et.forwardRef((t,r)=>{let e=u("MultiSelectList");return(0,ot.jsx)(lt.Primitive.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...(0,tt.skdxPart)("multi-select","list",t.className),ref:r})});X.displayName="MultiSelectList";var rt=require("../utils/portal.cjs");var it=require("react/jsx-runtime"),Y=({forceMount:t,children:r,...e})=>{let c=u("MultiSelectPortal");return t||c.open?(0,it.jsx)(rt.Portal,{...e,children:r}):null};Y.displayName="MultiSelectPortal";var nt=C(require("react"),1),at=require("../tag/Tag.cjs"),st=require("../utils/part.cjs");var ct=require("react/jsx-runtime"),Z=nt.forwardRef(({value:t,...r},e)=>{let c=u("MultiSelectTag"),p=c.value.indexOf(t);return(0,ct.jsx)(at.Tag,{index:p,label:t,"data-value":t,onDelete:()=>c.deselect(t),...r,...(0,st.skdxPart)("multi-select","tag",r.className),ref:e})});Z.displayName="MultiSelectTag";var ut=C(require("react"),1),mt=require("../tag-group/TagGroup.cjs"),pt=require("../utils/part.cjs");var ft=require("react/jsx-runtime"),j=ut.forwardRef((t,r)=>{let e=u("MultiSelectTagList");return(0,ft.jsx)(mt.TagGroup,{disabled:e.disabled||e.readOnly,...t,...(0,pt.skdxPart)("multi-select","tag-list",t.className),ref:r})});j.displayName="MultiSelectTagList";var dt=C(require("react"),1),Mt=require("../tag/Tag.cjs"),St=require("../utils/part.cjs"),gt=require("react/jsx-runtime"),ee=dt.forwardRef((t,r)=>(0,gt.jsx)(Mt.TagDelete,{...t,...(0,St.skdxPart)("multi-select","tag-remove",t.className),ref:r}));ee.displayName="MultiSelectTagRemove";var d=require("react/jsx-runtime"),Rt=t=>"options"in t,Ct=({options:t,renderOption:r,renderTag:e,placeholder:c,clearable:p,ariaLabel:l,passThrough:f})=>{let g=u("MultiSelect"),M=l??c,T=yt.useMemo(()=>{let o=new Map;for(let R of t)for(let I of Rt(R)?R.options:[R])o.set(I.value,I);return o},[t]),m=o=>e?e(o):o.label??o.value,h=o=>(0,d.jsx)(Q,{value:o.value,disabled:o.disabled,textValue:o.label,children:r?r(o,{selected:g.isSelected(o.value)}):o.label??o.value},o.value);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(j,{"aria-label":M?`${M} \u2014 selected`:void 0,children:g.value.map(o=>(0,d.jsxs)(Z,{value:o,children:[m(T.get(o)??{value:o}),(0,d.jsx)(ee,{children:"\xD7"})]},o))}),(0,d.jsx)(J,{...f,"aria-label":M,placeholder:c}),p?(0,d.jsx)(W,{"aria-label":"Clear selection",children:"\xD7"}):null,(0,d.jsx)(Y,{children:(0,d.jsxs)(q,{children:[(0,d.jsx)(X,{"aria-label":M,children:t.map(o=>Rt(o)?(0,d.jsxs)(_,{children:[(0,d.jsx)(z,{children:o.label}),o.options.map(h)]},o.label):h(o))}),(0,d.jsx)($,{children:"No options"})]})})]})};var D=require("react/jsx-runtime");function It(t){return t===0?"none selected":`${t} selected`}var[kt,u]=(0,bt.createSafeContext)("MultiSelect"),Tt=n.forwardRef(function({children:r,value:e,defaultValue:c=[],onValueChange:p,inputValue:l,defaultInputValue:f="",onInputValueChange:g,open:M,defaultOpen:T=!1,onOpenChange:m,onOpenChangeComplete:h,max:o,closeOnSelect:R=!1,filter:I,disabled:ie=!1,readOnly:de=!1,invalid:Ot=!1,name:Et,required:Lt=!1,form:Ht,getSelectionLabel:Me=It,allowSelectAll:Dt=!0,loading:ne=!1,options:Gt,renderOption:wt,renderTag:Nt,placeholder:At,clearable:Vt=!1,"aria-label":Kt,...Ft},Bt){let Se=n.useRef(null),ge=n.useRef(null),V=n.useRef(null),Wt=n.useId(),Re=n.useRef("programmatic"),ae=n.useRef(null),[P=[],ye]=(0,te.useControllableState)({prop:e,defaultProp:c,onChange:i=>{let a=ae.current??[];p?.({value:i,previousValue:ae.current,reason:Re.current,added:i.filter(s=>!a.includes(s)),removed:a.filter(s=>!i.includes(s))})}}),se=n.useRef(P);se.current=P;let y=n.useCallback((i,a)=>{Re.current=a,ae.current=se.current.length===0?null:se.current,ye(i)},[ye]),[G="",x]=(0,te.useControllableState)({prop:l,defaultProp:f,onChange:g}),[ce=!1,k]=(0,te.useControllableState)({prop:M,defaultProp:T,onChange:m});(0,xt.useOpenChangeComplete)(ce,V,h);let qt=n.useCallback(i=>{if(typeof I!="function")return null;let a=I(i.text,G);return typeof a=="number"?a:null},[I,G]),v=(0,re.useOptionCollection)({open:ce,setOpen:k,contentRef:V,scoreItem:qt}),{itemOrder:ue}=v,S=ie||de,$t=o!==void 0&&P.length>=o,Ce=P.length,be=n.useRef(!0);n.useEffect(()=>{if(be.current){be.current=!1;return}ne||(0,vt.announce)(Me(Ce))},[Ce,Me,ne]);let Ut=n.useCallback(i=>P.includes(i),[P]),_t=n.useCallback(i=>{S||y((a=[])=>a.includes(i)?a.filter(s=>s!==i):a,"pointer")},[S,y]),zt=n.useCallback(()=>{S||y((i=[])=>i.length===0?i:i.slice(0,-1),"keyboard")},[S,y]),he=n.useRef(null),Jt=n.useCallback((i,a)=>{S||(he.current=i,y((s=[])=>s.includes(i)?s.filter(b=>b!==i):o!==void 0&&s.length>=o?s:[...s,i],a),x(""),R&&k(!1))},[S,o,R,y,x,k]),O=n.useCallback(i=>{y((a=[])=>{let s=[...a];for(let b of i)if(!s.includes(b)){if(o!==void 0&&s.length>=o)break;s.push(b)}return s.length===a.length?a:s},"keyboard"),x(""),R&&k(!1)},[o,R,y,x,k]),{activeId:K}=v,E=n.useCallback(()=>{let i=V.current;if(!i)return[];let a=Array.from(i.querySelectorAll(re.OPTION_SELECTOR));return(0,oe.sortByOrder)(a,ue)},[ue]),Qt=n.useCallback(()=>{if(S)return;let i=E(),a=i.findIndex(N=>N.id===K);if(a===-1)return;let s=i.findIndex(N=>N.dataset.value===he.current),b=s===-1?a:s,[w,el]=b<=a?[b,a]:[a,b];O(i.slice(w,el+1).map(N=>N.dataset.value??""))},[S,K,E,O]),Xt=n.useCallback(i=>{if(S)return;let a=E(),s=a.findIndex(w=>w.id===K);if(s===-1)return;let b=i==="first"?a.slice(0,s+1):a.slice(s);O(b.map(w=>w.dataset.value??""))},[S,K,E,O]),Yt=n.useCallback(()=>{if(S)return;let i=E().map(s=>s.dataset.value??"");i.length>0&&i.every(s=>P.includes(s))?(y((s=[])=>s.filter(b=>!i.includes(b)),"keyboard"),x(""),R&&k(!1)):O(i)},[S,P,E,O,y,x,R,k]),Zt=n.useCallback(()=>{S||(y([],"pointer"),x(""))},[S,y,x]),jt=n.useCallback(i=>I===void 0||(0,oe.filterKeeps)(I(i,G)),[I,G]);return n.useImperativeHandle(Bt,()=>(0,le.formValidityHandle)(ge),[]),(0,le.useFormReset)(Se,()=>{y(c,"programmatic"),x(f)}),(0,D.jsx)(Pt.PopperRoot,{children:(0,D.jsxs)(kt,{inputRef:Se,contentRef:V,listId:Wt,value:P,isSelected:Ut,toggle:Jt,selectRange:Qt,selectToEdge:Xt,selectAllOrClear:Yt,allowSelectAll:Dt,clear:Zt,deselect:_t,removeLast:zt,atMax:$t,inputValue:G,onInputValueChange:x,open:ce,onOpenChange:k,activeId:v.activeId,itemOrder:ue,setActiveId:v.setActiveId,moveActive:v.moveActive,moveActiveToEdge:v.moveActiveToEdge,openWithHighlight:v.openWithHighlight,itemCount:v.itemCount,registerItem:v.registerItem,unregisterItem:v.unregisterItem,getItem:v.getItem,matchesFilter:jt,disabled:ie,readOnly:de,invalid:Ot,loading:ne,children:[r??(0,D.jsx)(Ct,{options:Gt??[],renderOption:wt,renderTag:Nt,placeholder:At,clearable:Vt,ariaLabel:Kt,passThrough:Ft}),(0,D.jsx)(ht.MirroredValues,{name:Et,values:P,required:Lt,disabled:ie,form:Ht,controlRef:ge})]})})});Tt.displayName="MultiSelect";0&&(module.exports={MultiSelect,MultiSelectClear,MultiSelectContent,MultiSelectEmpty,MultiSelectGroup,MultiSelectGroupLabel,MultiSelectGroupProvider,MultiSelectInput,MultiSelectItem,MultiSelectList,MultiSelectPortal,MultiSelectProvider,MultiSelectTag,MultiSelectTagList,MultiSelectTagRemove,defaultGetSelectionLabel,useMultiSelectContext,useMultiSelectGroupContext});

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

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectContextValue, MultiSelectProps } from './types.cjs';
-/**
- * Select many values from a list, rendered as removable tags.
- * Tag parts reuse `TagGroup`/`Tag`/`TagDelete`, which own roving focus
- * and move focus to the preceding tag on deletion (allowing rapid keyboard clearing).
- */
-/** 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;
-/**
- * Select multiple values from a list, rendering them as removable tags. Popup
- * stays open across selections (use `closeOnSelect` to change). Keyboard: Shift+Arrow
- * extends selection, Shift+Space selects range, Control+Shift+Home/End sweeps to edge,
- * Control+A toggles all (when open). Backspace on empty input removes last tag.
- *
- * With a `name`, mirrors native hidden controls per selected value for form submission;
- * ref carries `checkValidity()` / `reportValidity()` — type with {@link MultiSelectHandle}.
- *
- * Render with `options` prop and default anatomy, or manually compose with children —
- * see {@link MultiSelectAnatomy}.
- *
- * @example
- * ```tsx
- * <MultiSelect options={[{ value: 'react', label: 'React' }]} aria-label="Skills" />
- * ```
- *
- * @example Full manual composition:
- * ```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={(detail) => setValue(detail.value)}
- *       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 const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;

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

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectContextValue, MultiSelectProps } from './types.js';
-/**
- * Select many values from a list, rendered as removable tags.
- * Tag parts reuse `TagGroup`/`Tag`/`TagDelete`, which own roving focus
- * and move focus to the preceding tag on deletion (allowing rapid keyboard clearing).
- */
-/** 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;
-/**
- * Select multiple values from a list, rendering them as removable tags. Popup
- * stays open across selections (use `closeOnSelect` to change). Keyboard: Shift+Arrow
- * extends selection, Shift+Space selects range, Control+Shift+Home/End sweeps to edge,
- * Control+A toggles all (when open). Backspace on empty input removes last tag.
- *
- * With a `name`, mirrors native hidden controls per selected value for form submission;
- * ref carries `checkValidity()` / `reportValidity()` — type with {@link MultiSelectHandle}.
- *
- * Render with `options` prop and default anatomy, or manually compose with children —
- * see {@link MultiSelectAnatomy}.
- *
- * @example
- * ```tsx
- * <MultiSelect options={[{ value: 'react', label: 'React' }]} aria-label="Skills" />
- * ```
- *
- * @example Full manual composition:
- * ```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={(detail) => setValue(detail.value)}
- *       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 const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;

package/dist/multi-select/MultiSelect.js

@@ -1 +0,0 @@
-import*as i from"react";import{createSafeContext as _t}from"../utils/createContext.js";import{formValidityHandle as zt,useFormReset as Jt}from"../utils/formControl.js";import{MirroredValues as Qt}from"../utils/hiddenInput.js";import{announce as Xt}from"../utils/liveAnnouncer.js";import{PopperRoot as Yt}from"../utils/popper.js";import{filterKeeps as Zt,sortByOrder as jt}from"../utils/scoredFilter.js";import{useControllableState as oe}from"../utils/useControllableState.js";import{useOpenChangeComplete as el}from"../utils/useOpenChangeComplete.js";import{OPTION_SELECTOR as tl,useOptionCollection as ll}from"../utils/useOptionCollection.js";import*as Te from"react";import*as de from"react";import{skdxPart as lt}from"../utils/part.js";import{composeEventHandlers as ot,Primitive as rt}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var $=de.forwardRef((t,s)=>{let e=u("MultiSelectClear"),c=e.value.length===0&&e.inputValue==="";return it(rt.button,{type:"button",disabled:e.disabled||e.readOnly||c,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...lt("multi-select","clear",t.className),ref:s,onClick:ot(t.onClick,()=>{e.clear(),e.inputRef.current?.focus()})})});$.displayName="MultiSelectClear";import*as Me from"react";import{useComposedRefs as nt}from"../utils/composeRefs.js";import{skdxPart as at}from"../utils/part.js";import{PopperContent as st}from"../utils/popper.js";import{composeEventHandlers as ct}from"../utils/primitive.js";import{useDismiss as ut}from"../utils/useDismiss.js";import{jsx as mt}from"react/jsx-runtime";var U=Me.forwardRef(({forceMount:t,side:s="bottom",align:e="start",sideOffset:c=4,onEscapeKeyDown:R,onPointerDownOutside:l,onFocusOutside:p,onInteractOutside:M,...f},k)=>{let m=u("MultiSelectContent"),C=nt(k,m.contentRef);return ut({enabled:m.open,onEscapeKeyDown:o=>{R?.(o),o.defaultPrevented||m.onOpenChange(!1)},onInteractOutside:M,onPointerDownOutside:o=>{l?.(o),o.defaultPrevented||m.onOpenChange(!1)},onFocusOutside:o=>{p?.(o),o.defaultPrevented||m.onOpenChange(!1)}},[m.contentRef,m.inputRef]),!t&&!m.open?null:mt(st,{component:"multi-select","data-state":m.open?"open":"closed","aria-busy":m.loading?!0:void 0,"data-loading":m.loading?"":void 0,side:s,align:e,sideOffset:c,...f,...at("multi-select","content",f.className),ref:C,onMouseDown:ct(f.onMouseDown,o=>o.preventDefault())})});U.displayName="MultiSelectContent";import*as Se from"react";import{skdxPart as pt}from"../utils/part.js";import{Primitive as ft}from"../utils/primitive.js";import{jsx as dt}from"react/jsx-runtime";var _=Se.forwardRef((t,s)=>u("MultiSelectEmpty").itemCount===0?dt(ft.div,{role:"presentation","aria-live":"polite",...t,...pt("multi-select","empty",t.className),ref:s}):null);_.displayName="MultiSelectEmpty";import*as N from"react";import{createSafeContext as Mt}from"../utils/createContext.js";import{skdxPart as St}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{jsx as ge}from"react/jsx-runtime";var[Rt,Re]=Mt("MultiSelectGroup"),z=N.forwardRef((t,s)=>{let e=N.useId();return ge(Rt,{labelId:e,children:ge(gt.div,{role:"group","aria-labelledby":e,...t,...St("multi-select","group",t.className),ref:s})})});z.displayName="MultiSelectGroup";import*as ye from"react";import{skdxPart as yt}from"../utils/part.js";import{Primitive as Ct}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var J=ye.forwardRef((t,s)=>{let e=Re("MultiSelectGroupLabel");return bt(Ct.div,{id:e.labelId,...t,...yt("multi-select","group-label",t.className),ref:s})});J.displayName="MultiSelectGroupLabel";import*as be from"react";import{useComposedRefs as ht}from"../utils/composeRefs.js";import{skdxPart as vt}from"../utils/part.js";import{PopperAnchor as Pt}from"../utils/popper.js";import{composeEventHandlers as Q,Primitive as xt}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var X=be.forwardRef((t,s)=>{let e=u("MultiSelectInput"),c=ht(s,e.inputRef),R=l=>{let p=e.activeId,M=e.moveActive(l);if(M===null||M===p)return;let f=e.getItem(M);f&&e.toggle(f.value,"keyboard")};return Ce(Pt,{asChild:!0,children:Ce(xt.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,"aria-busy":e.loading?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-loading":e.loading?"":void 0,"data-state":e.open?"open":"closed",...t,...vt("multi-select","input",t.className),ref:c,value:e.inputValue,onChange:Q(t.onChange,l=>{e.onInputValueChange(l.target.value),e.open||e.onOpenChange(!0)}),onBlur:Q(t.onBlur,()=>{e.open&&e.onOpenChange(!1)}),onKeyDown:Q(t.onKeyDown,l=>{if(l.key==="ArrowDown")l.preventDefault(),e.open?l.shiftKey?R(1):e.moveActive(1):e.openWithHighlight("first");else if(l.key==="ArrowUp")l.preventDefault(),e.open?l.shiftKey?R(-1):e.moveActive(-1):e.openWithHighlight("last");else if((l.key==="Home"||l.key==="End")&&l.ctrlKey&&l.shiftKey){if(!e.open)return;l.preventDefault(),e.selectToEdge(l.key==="Home"?"first":"last")}else if(l.key==="Home"||l.key==="End"){if(!e.open)return;l.preventDefault(),e.moveActiveToEdge(l.key==="Home"?"first":"last")}else if((l.ctrlKey||l.metaKey)&&l.key.toLowerCase()==="a"){if(!e.open||!e.allowSelectAll)return;l.preventDefault(),e.selectAllOrClear()}else if(l.key===" "&&l.shiftKey){if(!e.open||e.activeId===null)return;l.preventDefault(),e.selectRange()}else if(l.key==="Enter"){let p=e.activeId?e.getItem(e.activeId):void 0;if(!p)return;l.preventDefault(),e.toggle(p.value,"keyboard")}else l.key==="Escape"?e.open&&!e.contentRef.current&&(l.preventDefault(),e.onOpenChange(!1)):l.key==="Backspace"&&e.inputValue===""&&e.removeLast()})})})});X.displayName="MultiSelectInput";import*as E from"react";import{useComposedRefs as It}from"../utils/composeRefs.js";import{skdxPart as kt}from"../utils/part.js";import{composeEventHandlers as he,Primitive as Tt}from"../utils/primitive.js";import{useOptionEntry as Ot}from"../utils/useOptionCollection.js";import{jsx as Et}from"react/jsx-runtime";var Y=E.forwardRef(({value:t,disabled:s,textValue:e,...c},R)=>{let l=u("MultiSelectItem"),p=E.useId(),M=E.useRef(null),f=It(R,M),{visible:k}=Ot({id:p,value:t,textValue:e,itemRef:M,matchesFilter:l.matchesFilter,registerItem:l.registerItem,unregisterItem:l.unregisterItem});if(!k)return null;let m=l.isSelected(t),C=s||l.disabled||l.readOnly||l.atMax&&!m,o=l.activeId===p,S=l.itemOrder?.get(p);return Et(Tt.div,{role:"option",id:p,"data-value":t,"aria-selected":m,"aria-disabled":C?!0:void 0,"data-state":m?"checked":"unchecked","data-highlighted":o?"":void 0,"data-disabled":C?"":void 0,...c,...kt("multi-select","item",c.className),ref:f,onClick:he(c.onClick,()=>{C||(l.toggle(t,"pointer"),l.inputRef.current?.focus())}),onPointerEnter:he(c.onPointerEnter,()=>{C||l.setActiveId(p)}),style:S!==void 0?{order:S,...c.style}:c.style})});Y.displayName="MultiSelectItem";import*as ve from"react";import{skdxPart as Lt}from"../utils/part.js";import{Primitive as Ht}from"../utils/primitive.js";import{jsx as Dt}from"react/jsx-runtime";var Z=ve.forwardRef((t,s)=>{let e=u("MultiSelectList");return Dt(Ht.div,{role:"listbox",id:e.listId,"aria-multiselectable":!0,...t,...Lt("multi-select","list",t.className),ref:s})});Z.displayName="MultiSelectList";import{Portal as Gt}from"../utils/portal.js";import{jsx as wt}from"react/jsx-runtime";var j=({forceMount:t,children:s,...e})=>{let c=u("MultiSelectPortal");return t||c.open?wt(Gt,{...e,children:s}):null};j.displayName="MultiSelectPortal";import*as Pe from"react";import{Tag as Nt}from"../tag/Tag.js";import{skdxPart as At}from"../utils/part.js";import{jsx as Vt}from"react/jsx-runtime";var ee=Pe.forwardRef(({value:t,...s},e)=>{let c=u("MultiSelectTag"),R=c.value.indexOf(t);return Vt(Nt,{index:R,label:t,"data-value":t,onDelete:()=>c.deselect(t),...s,...At("multi-select","tag",s.className),ref:e})});ee.displayName="MultiSelectTag";import*as xe from"react";import{TagGroup as Kt}from"../tag-group/TagGroup.js";import{skdxPart as Ft}from"../utils/part.js";import{jsx as Bt}from"react/jsx-runtime";var te=xe.forwardRef((t,s)=>{let e=u("MultiSelectTagList");return Bt(Kt,{disabled:e.disabled||e.readOnly,...t,...Ft("multi-select","tag-list",t.className),ref:s})});te.displayName="MultiSelectTagList";import*as Ie from"react";import{TagDelete as Wt}from"../tag/Tag.js";import{skdxPart as qt}from"../utils/part.js";import{jsx as $t}from"react/jsx-runtime";var le=Ie.forwardRef((t,s)=>$t(Wt,{...t,...qt("multi-select","tag-remove",t.className),ref:s}));le.displayName="MultiSelectTagRemove";import{Fragment as Ut,jsx as x,jsxs as A}from"react/jsx-runtime";var ke=t=>"options"in t,Oe=({options:t,renderOption:s,renderTag:e,placeholder:c,clearable:R,ariaLabel:l,passThrough:p})=>{let M=u("MultiSelect"),f=l??c,k=Te.useMemo(()=>{let o=new Map;for(let S of t)for(let P of ke(S)?S.options:[S])o.set(P.value,P);return o},[t]),m=o=>e?e(o):o.label??o.value,C=o=>x(Y,{value:o.value,disabled:o.disabled,textValue:o.label,children:s?s(o,{selected:M.isSelected(o.value)}):o.label??o.value},o.value);return A(Ut,{children:[x(te,{"aria-label":f?`${f} \u2014 selected`:void 0,children:M.value.map(o=>A(ee,{value:o,children:[m(k.get(o)??{value:o}),x(le,{children:"\xD7"})]},o))}),x(X,{...p,"aria-label":f,placeholder:c}),R?x($,{"aria-label":"Clear selection",children:"\xD7"}):null,x(j,{children:A(U,{children:[x(Z,{"aria-label":f,children:t.map(o=>ke(o)?A(z,{children:[x(J,{children:o.label}),o.options.map(C)]},o.label):C(o))}),x(_,{children:"No options"})]})})]})};import{jsx as re,jsxs as nl}from"react/jsx-runtime";function ol(t){return t===0?"none selected":`${t} selected`}var[rl,u]=_t("MultiSelect"),il=i.forwardRef(function({children:s,value:e,defaultValue:c=[],onValueChange:R,inputValue:l,defaultInputValue:p="",onInputValueChange:M,open:f,defaultOpen:k=!1,onOpenChange:m,onOpenChangeComplete:C,max:o,closeOnSelect:S=!1,filter:P,disabled:V=!1,readOnly:ie=!1,invalid:Ee=!1,name:Le,required:He=!1,form:De,getSelectionLabel:ne=ol,allowSelectAll:Ge=!0,loading:K=!1,options:we,renderOption:Ne,renderTag:Ae,placeholder:Ve,clearable:Ke=!1,"aria-label":Fe,...Be},We){let ae=i.useRef(null),se=i.useRef(null),G=i.useRef(null),qe=i.useId(),ce=i.useRef("programmatic"),F=i.useRef(null),[h=[],ue]=oe({prop:e,defaultProp:c,onChange:r=>{let n=F.current??[];R?.({value:r,previousValue:F.current,reason:ce.current,added:r.filter(a=>!n.includes(a)),removed:n.filter(a=>!r.includes(a))})}}),B=i.useRef(h);B.current=h;let g=i.useCallback((r,n)=>{ce.current=n,F.current=B.current.length===0?null:B.current,ue(r)},[ue]),[L="",v]=oe({prop:l,defaultProp:p,onChange:M}),[W=!1,I]=oe({prop:f,defaultProp:k,onChange:m});el(W,G,C);let $e=i.useCallback(r=>{if(typeof P!="function")return null;let n=P(r.text,L);return typeof n=="number"?n:null},[P,L]),b=ll({open:W,setOpen:I,contentRef:G,scoreItem:$e}),{itemOrder:q}=b,d=V||ie,Ue=o!==void 0&&h.length>=o,me=h.length,pe=i.useRef(!0);i.useEffect(()=>{if(pe.current){pe.current=!1;return}K||Xt(ne(me))},[me,ne,K]);let _e=i.useCallback(r=>h.includes(r),[h]),ze=i.useCallback(r=>{d||g((n=[])=>n.includes(r)?n.filter(a=>a!==r):n,"pointer")},[d,g]),Je=i.useCallback(()=>{d||g((r=[])=>r.length===0?r:r.slice(0,-1),"keyboard")},[d,g]),fe=i.useRef(null),Qe=i.useCallback((r,n)=>{d||(fe.current=r,g((a=[])=>a.includes(r)?a.filter(y=>y!==r):o!==void 0&&a.length>=o?a:[...a,r],n),v(""),S&&I(!1))},[d,o,S,g,v,I]),T=i.useCallback(r=>{g((n=[])=>{let a=[...n];for(let y of r)if(!a.includes(y)){if(o!==void 0&&a.length>=o)break;a.push(y)}return a.length===n.length?n:a},"keyboard"),v(""),S&&I(!1)},[o,S,g,v,I]),{activeId:w}=b,O=i.useCallback(()=>{let r=G.current;if(!r)return[];let n=Array.from(r.querySelectorAll(tl));return jt(n,q)},[q]),Xe=i.useCallback(()=>{if(d)return;let r=O(),n=r.findIndex(D=>D.id===w);if(n===-1)return;let a=r.findIndex(D=>D.dataset.value===fe.current),y=a===-1?n:a,[H,tt]=y<=n?[y,n]:[n,y];T(r.slice(H,tt+1).map(D=>D.dataset.value??""))},[d,w,O,T]),Ye=i.useCallback(r=>{if(d)return;let n=O(),a=n.findIndex(H=>H.id===w);if(a===-1)return;let y=r==="first"?n.slice(0,a+1):n.slice(a);T(y.map(H=>H.dataset.value??""))},[d,w,O,T]),Ze=i.useCallback(()=>{if(d)return;let r=O().map(a=>a.dataset.value??"");r.length>0&&r.every(a=>h.includes(a))?(g((a=[])=>a.filter(y=>!r.includes(y)),"keyboard"),v(""),S&&I(!1)):T(r)},[d,h,O,T,g,v,S,I]),je=i.useCallback(()=>{d||(g([],"pointer"),v(""))},[d,g,v]),et=i.useCallback(r=>P===void 0||Zt(P(r,L)),[P,L]);return i.useImperativeHandle(We,()=>zt(se),[]),Jt(ae,()=>{g(c,"programmatic"),v(p)}),re(Yt,{children:nl(rl,{inputRef:ae,contentRef:G,listId:qe,value:h,isSelected:_e,toggle:Qe,selectRange:Xe,selectToEdge:Ye,selectAllOrClear:Ze,allowSelectAll:Ge,clear:je,deselect:ze,removeLast:Je,atMax:Ue,inputValue:L,onInputValueChange:v,open:W,onOpenChange:I,activeId:b.activeId,itemOrder:q,setActiveId:b.setActiveId,moveActive:b.moveActive,moveActiveToEdge:b.moveActiveToEdge,openWithHighlight:b.openWithHighlight,itemCount:b.itemCount,registerItem:b.registerItem,unregisterItem:b.unregisterItem,getItem:b.getItem,matchesFilter:et,disabled:V,readOnly:ie,invalid:Ee,loading:K,children:[s??re(Oe,{options:we??[],renderOption:Ne,renderTag:Ae,placeholder:Ve,clearable:Ke,ariaLabel:Fe,passThrough:Be}),re(Qt,{name:Le,values:h,required:He,disabled:V,form:De,controlRef:se})]})})});il.displayName="MultiSelect";export{il as MultiSelect,$ as MultiSelectClear,U as MultiSelectContent,_ as MultiSelectEmpty,z as MultiSelectGroup,J as MultiSelectGroupLabel,Rt as MultiSelectGroupProvider,X as MultiSelectInput,Y as MultiSelectItem,Z as MultiSelectList,j as MultiSelectPortal,rl as MultiSelectProvider,ee as MultiSelectTag,te as MultiSelectTagList,le as MultiSelectTagRemove,ol as defaultGetSelectionLabel,u as useMultiSelectContext,Re as useMultiSelectGroupContext};

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { PassThroughProps } from '../utils/passThrough.cjs';
-import type { MultiSelectOption, MultiSelectOptionOrGroup } from './types.cjs';
-/**
- * The anatomy a {@link MultiSelect} draws from `options`: the tag list (one
- * removable `MultiSelectTag` per selected value), the input, a `MultiSelectClear`
- * button when `clearable`, and the popup listbox with one `MultiSelectItem`
- * per option — grouped where `options` nests a group.
- *
- * @internal
- */
-export declare const MultiSelectAnatomy: ({ options, renderOption, renderTag, placeholder, clearable, ariaLabel, passThrough, }: {
-    options: MultiSelectOptionOrGroup[];
-    renderOption?: (option: MultiSelectOption, state: {
-        selected: boolean;
-    }) => React.ReactNode;
-    renderTag?: (option: MultiSelectOption) => React.ReactNode;
-    placeholder?: string;
-    clearable: boolean;
-    ariaLabel?: string;
-    passThrough?: PassThroughProps;
-}) => React.JSX.Element;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { PassThroughProps } from '../utils/passThrough.js';
-import type { MultiSelectOption, MultiSelectOptionOrGroup } from './types.js';
-/**
- * The anatomy a {@link MultiSelect} draws from `options`: the tag list (one
- * removable `MultiSelectTag` per selected value), the input, a `MultiSelectClear`
- * button when `clearable`, and the popup listbox with one `MultiSelectItem`
- * per option — grouped where `options` nests a group.
- *
- * @internal
- */
-export declare const MultiSelectAnatomy: ({ options, renderOption, renderTag, placeholder, clearable, ariaLabel, passThrough, }: {
-    options: MultiSelectOptionOrGroup[];
-    renderOption?: (option: MultiSelectOption, state: {
-        selected: boolean;
-    }) => React.ReactNode;
-    renderTag?: (option: MultiSelectOption) => React.ReactNode;
-    placeholder?: string;
-    clearable: boolean;
-    ariaLabel?: string;
-    passThrough?: PassThroughProps;
-}) => React.JSX.Element;

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectClearProps } from './types.cjs';
-/**
- * Optional button that empties a {@link MultiSelect} in one press — the whole
- * selection *and* the draft text — and hands focus back to
- * {@link MultiSelectInput}. Without it the only way out of
- * a large selection is removing every tag one at a time.
- *
- * Rendered beside the Input rather than inside a tag, and deliberately *not*
- * inside {@link MultiSelectTagList}, whose roving tab stop belongs to the
- * tags: this is its own tab stop, a plain `<button type="button">` so it never
- * submits the surrounding form.
- *
- * Disabled while there is nothing to clear, and while the root is `disabled`
- * or `readOnly` — neither may empty a selection. The empty case matters more
- * than it looks: a "clear" that stays live over an empty field is a control
- * that does nothing, which a screen-reader user cannot tell from one that is
- * broken.
- *
- * Give it an `aria-label`: a "✕" glyph is not an accessible name.
- *
- * @example
- * ```tsx
- * <MultiSelectClear aria-label="Clear selection">✕</MultiSelectClear>
- * ```
- */
-export declare const MultiSelectClear: React.ForwardRefExoticComponent<Omit<MultiSelectClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectClearProps } from './types.js';
-/**
- * Optional button that empties a {@link MultiSelect} in one press — the whole
- * selection *and* the draft text — and hands focus back to
- * {@link MultiSelectInput}. Without it the only way out of
- * a large selection is removing every tag one at a time.
- *
- * Rendered beside the Input rather than inside a tag, and deliberately *not*
- * inside {@link MultiSelectTagList}, whose roving tab stop belongs to the
- * tags: this is its own tab stop, a plain `<button type="button">` so it never
- * submits the surrounding form.
- *
- * Disabled while there is nothing to clear, and while the root is `disabled`
- * or `readOnly` — neither may empty a selection. The empty case matters more
- * than it looks: a "clear" that stays live over an empty field is a control
- * that does nothing, which a screen-reader user cannot tell from one that is
- * broken.
- *
- * Give it an `aria-label`: a "✕" glyph is not an accessible name.
- *
- * @example
- * ```tsx
- * <MultiSelectClear aria-label="Clear selection">✕</MultiSelectClear>
- * ```
- */
-export declare const MultiSelectClear: React.ForwardRefExoticComponent<Omit<MultiSelectClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectContentProps } from './types.cjs';
-/**
- * Popup shell: positioned against input via floating-ui, writes measurement custom properties
- * (`--skdx-multi-select-available-width`, etc.) for CSS-based viewport clamping.
- * No ARIA role (listbox is {@link MultiSelectList}, one level in). Prevents mousedown from
- * stealing focus so popup stays open during selections. Closes on Escape or 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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectContentProps } from './types.js';
-/**
- * Popup shell: positioned against input via floating-ui, writes measurement custom properties
- * (`--skdx-multi-select-available-width`, etc.) for CSS-based viewport clamping.
- * No ARIA role (listbox is {@link MultiSelectList}, one level in). Prevents mousedown from
- * stealing focus so popup stays open during selections. Closes on Escape or 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/MultiSelectEmpty.d.cts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectEmptyProps } from './types.cjs';
-/**
- * Fallback when no `MultiSelectItem`s are rendered. Outside listbox so message never announced as option. `aria-live="polite"`.
- *
- * @example
- * ```tsx
- * <MultiSelectContent>
- *   {matches.length === 0 ? (
- *     <MultiSelectEmpty>No results</MultiSelectEmpty>
- *   ) : (
- *     <MultiSelectList aria-label="Skills">
- *       {matches.map((skill) => <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>)}
- *     </MultiSelectList>
- *   )}
- * </MultiSelectContent>
- * ```
- */
-export declare const MultiSelectEmpty: React.ForwardRefExoticComponent<Omit<MultiSelectEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectEmptyProps } from './types.js';
-/**
- * Fallback when no `MultiSelectItem`s are rendered. Outside listbox so message never announced as option. `aria-live="polite"`.
- *
- * @example
- * ```tsx
- * <MultiSelectContent>
- *   {matches.length === 0 ? (
- *     <MultiSelectEmpty>No results</MultiSelectEmpty>
- *   ) : (
- *     <MultiSelectList aria-label="Skills">
- *       {matches.map((skill) => <MultiSelectItem key={skill} value={skill}>{skill}</MultiSelectItem>)}
- *     </MultiSelectList>
- *   )}
- * </MultiSelectContent>
- * ```
- */
-export declare const MultiSelectEmpty: React.ForwardRefExoticComponent<Omit<MultiSelectEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectGroupContextValue, MultiSelectGroupProps } from './types.cjs';
-export declare const MultiSelectGroupProvider: {
-    (props: MultiSelectGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useMultiSelectGroupContext: (consumerName: string) => MultiSelectGroupContextValue;
-/**
- * Groups related {@link MultiSelectItem}s under `MultiSelectGroupLabel` — automatic wiring with `aria-labelledby`.
- *
- * Critical for filtering listboxes where groups reorder/empty on every keystroke — named group is the only structure screen readers can hold on to.
- *
- * @example
- * ```tsx
- * <MultiSelectGroup>
- *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
- *   <MultiSelectItem value="react">React</MultiSelectItem>
- * </MultiSelectGroup>
- * ```
- */
-export declare const MultiSelectGroup: React.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import type { MultiSelectGroupContextValue, MultiSelectGroupProps } from './types.js';
-export declare const MultiSelectGroupProvider: {
-    (props: MultiSelectGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useMultiSelectGroupContext: (consumerName: string) => MultiSelectGroupContextValue;
-/**
- * Groups related {@link MultiSelectItem}s under `MultiSelectGroupLabel` — automatic wiring with `aria-labelledby`.
- *
- * Critical for filtering listboxes where groups reorder/empty on every keystroke — named group is the only structure screen readers can hold on to.
- *
- * @example
- * ```tsx
- * <MultiSelectGroup>
- *   <MultiSelectGroupLabel>Frameworks</MultiSelectGroupLabel>
- *   <MultiSelectItem value="react">React</MultiSelectItem>
- * </MultiSelectGroup>
- * ```
- */
-export declare const MultiSelectGroup: React.ForwardRefExoticComponent<Omit<MultiSelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;