@skdx/react 0.27.0 → 0.29.0

package/dist/color-picker/useChannelSlider.d.cts

@@ -8,13 +8,10 @@ export interface UseChannelSliderOptions {
     /** Top of the range as ARIA reports it; the bottom is always 0. */
     max: number;
     /**
-     * Highest value actually reachable, when that is not `max`. Hue needs it:
-     * the axis genuinely spans 360°, but 360 *is* 0, so the track stops at the
-     * last hue on the step grid below it rather than folding round and throwing
-     * the thumb back to the left edge mid-drag.
+     * Highest value actually reachable, when that is not `max`; hue needs it since 360 is 0.
      * @default options.max
      */
-    limit?: number;
+    limit?: number | undefined;
     /** Current position on that range. */
     value: number;
     orientation: 'horizontal' | 'vertical';
@@ -25,11 +22,6 @@ export interface UseChannelSliderOptions {
     /** Receives an already clamped and step-snapped value. */
     onChange: (value: number) => void;
 }
-/**
- * @internal Element props plus the `data-*` keys TypeScript only permits when
- * they are written inline in JSX — the same escape the `--skdx-*` custom
- * property bags use, and for the same reason.
- */
 type ChannelSliderElementProps = React.ComponentPropsWithoutRef<'div'> & Record<`data-${string}`, string | number | undefined>;
 /** @internal What {@link useChannelSlider} hands back for the part to assemble. */
 export interface ChannelSlider {
@@ -43,41 +35,14 @@ export interface ChannelSlider {
     style: React.CSSProperties;
     dragging: boolean;
 }
-/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+/** @internal Rounds to two decimals so a fractional `step` doesn't leak float noise into the DOM. */
 export declare function round2(value: number): number;
-/**
- * @internal Rounds a raw channel value onto the `step` grid — with the
- * float-drift correction a fractional step needs, the same one `Slider` and
- * `AngleSlider` apply — and then into `0…max`. Shared by every channel in the
- * family so the hue track, the alpha track and the 2D area all land on the
- * same grid.
- */
+/** @internal Rounds a raw channel value onto the `step` grid, with float-drift correction, and clamps into `0...max`. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `AngleSlider` makes.
- */
+/** @internal `step: 0` means continuous under the pointer, not that the keyboard does nothing; arrows fall back to one unit. */
 export declare function arrowStep(step: number): number;
 /**
- * The behaviour shared by `ColorPickerHueSlider` and
- * `ColorPickerAlphaSlider`: a linear `role="slider"` track over `0…max` with
- * pointer drag, click-to-seek and a full keyboard path.
- *
- * The two parts differ only in their range, their wording and which field of
- * the colour they write, so the alternative to this hook is one file copied
- * onto another with three identifiers changed — and a keyboard bug fixed in
- * one of them.
- *
- * **The track has ends; it does not wrap.** Hue is circular, but a linear
- * control reporting `aria-valuemin=0`/`aria-valuemax=360` that silently
- * teleported from one end to the other would be lying to assistive tech.
- * `AngleSlider` is the wrapping control.
- *
- * Pointer geometry is physical (left-to-right, bottom-to-top), matching
- * `Slider`; only the arrow **keys** are mirrored under `dir="rtl"`, via
- * `directionalKey`.
- *
+ * Shared behavior for `ColorPickerHueSlider` and `ColorPickerAlphaSlider`: a linear `role="slider"` track with pointer drag, click-to-seek, and full keyboard support.
  * @internal
  */
 export declare function useChannelSlider(options: UseChannelSliderOptions): ChannelSlider;

package/dist/color-picker/useChannelSlider.d.ts

@@ -8,13 +8,10 @@ export interface UseChannelSliderOptions {
     /** Top of the range as ARIA reports it; the bottom is always 0. */
     max: number;
     /**
-     * Highest value actually reachable, when that is not `max`. Hue needs it:
-     * the axis genuinely spans 360°, but 360 *is* 0, so the track stops at the
-     * last hue on the step grid below it rather than folding round and throwing
-     * the thumb back to the left edge mid-drag.
+     * Highest value actually reachable, when that is not `max`; hue needs it since 360 is 0.
      * @default options.max
      */
-    limit?: number;
+    limit?: number | undefined;
     /** Current position on that range. */
     value: number;
     orientation: 'horizontal' | 'vertical';
@@ -25,11 +22,6 @@ export interface UseChannelSliderOptions {
     /** Receives an already clamped and step-snapped value. */
     onChange: (value: number) => void;
 }
-/**
- * @internal Element props plus the `data-*` keys TypeScript only permits when
- * they are written inline in JSX — the same escape the `--skdx-*` custom
- * property bags use, and for the same reason.
- */
 type ChannelSliderElementProps = React.ComponentPropsWithoutRef<'div'> & Record<`data-${string}`, string | number | undefined>;
 /** @internal What {@link useChannelSlider} hands back for the part to assemble. */
 export interface ChannelSlider {
@@ -43,41 +35,14 @@ export interface ChannelSlider {
     style: React.CSSProperties;
     dragging: boolean;
 }
-/** @internal Two decimals, so a fractional `step` neither leaks float noise into the DOM nor is rounded away. */
+/** @internal Rounds to two decimals so a fractional `step` doesn't leak float noise into the DOM. */
 export declare function round2(value: number): number;
-/**
- * @internal Rounds a raw channel value onto the `step` grid — with the
- * float-drift correction a fractional step needs, the same one `Slider` and
- * `AngleSlider` apply — and then into `0…max`. Shared by every channel in the
- * family so the hue track, the alpha track and the 2D area all land on the
- * same grid.
- */
+/** @internal Rounds a raw channel value onto the `step` grid, with float-drift correction, and clamps into `0...max`. */
 export declare function snapChannel(raw: number, step: number, max: number): number;
-/**
- * @internal `step: 0` means "continuous under the pointer", not "the keyboard
- * does nothing" — the arrows fall back to one unit so every value stays
- * reachable without a pointer, the same fallback `AngleSlider` makes.
- */
+/** @internal `step: 0` means continuous under the pointer, not that the keyboard does nothing; arrows fall back to one unit. */
 export declare function arrowStep(step: number): number;
 /**
- * The behaviour shared by `ColorPickerHueSlider` and
- * `ColorPickerAlphaSlider`: a linear `role="slider"` track over `0…max` with
- * pointer drag, click-to-seek and a full keyboard path.
- *
- * The two parts differ only in their range, their wording and which field of
- * the colour they write, so the alternative to this hook is one file copied
- * onto another with three identifiers changed — and a keyboard bug fixed in
- * one of them.
- *
- * **The track has ends; it does not wrap.** Hue is circular, but a linear
- * control reporting `aria-valuemin=0`/`aria-valuemax=360` that silently
- * teleported from one end to the other would be lying to assistive tech.
- * `AngleSlider` is the wrapping control.
- *
- * Pointer geometry is physical (left-to-right, bottom-to-top), matching
- * `Slider`; only the arrow **keys** are mirrored under `dir="rtl"`, via
- * `directionalKey`.
- *
+ * Shared behavior for `ColorPickerHueSlider` and `ColorPickerAlphaSlider`: a linear `role="slider"` track with pointer drag, click-to-seek, and full keyboard support.
  * @internal
  */
 export declare function useChannelSlider(options: UseChannelSliderOptions): ChannelSlider;

package/dist/color-picker/usePointerRatio.d.cts

@@ -9,7 +9,7 @@ export interface UsePointerRatioOptions {
     /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
     onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
     /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
-    onRatioChangeEnd?: (event: PointerEvent) => void;
+    onRatioChangeEnd?: ((event: PointerEvent) => void) | undefined;
 }
 /** Return value of {@link usePointerRatio}. */
 export interface UsePointerRatioResult {
@@ -19,21 +19,7 @@ export interface UsePointerRatioResult {
     dragging: boolean;
 }
 /**
- * The linear twin of `usePointerAngle`: turns a pointer position inside an
- * element into normalized `x`/`y` fractions in `[0, 1]`, for widgets whose
- * input is a *position* rather than a direction — the colour picker's 2D area
- * and its hue and alpha tracks.
- *
- * It exists rather than three copies of `Slider`'s pointer block because those
- * three parts each need a genuine drag-end signal (`onValueCommit` fires
- * once per drag) and each needs `data-dragging`, and because document-level
- * listeners keep a drag alive when the pointer leaves the window — which
- * element-level `pointermove` does not.
- *
- * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
- * `disabled`/`readOnly`: `x` is always measured left-to-right from the border
- * box, exactly as `Slider` measures it, and a part that must ignore pointer
- * input simply does not wire up `onPointerDown`.
+ * Turns pointer position inside an element into normalized `x`/`y` fractions in `[0, 1]`.
  *
  * @internal
  */

package/dist/color-picker/usePointerRatio.d.ts

@@ -9,7 +9,7 @@ export interface UsePointerRatioOptions {
     /** Fires with the position on pointer down and on every subsequent move that changes it, plus the native event. */
     onRatioChange: (ratio: PointerRatio, event: PointerEvent) => void;
     /** Fires once when the drag ends — `pointerup` or `pointercancel`. The final position was already reported by `onRatioChange`. */
-    onRatioChangeEnd?: (event: PointerEvent) => void;
+    onRatioChangeEnd?: ((event: PointerEvent) => void) | undefined;
 }
 /** Return value of {@link usePointerRatio}. */
 export interface UsePointerRatioResult {
@@ -19,21 +19,7 @@ export interface UsePointerRatioResult {
     dragging: boolean;
 }
 /**
- * The linear twin of `usePointerAngle`: turns a pointer position inside an
- * element into normalized `x`/`y` fractions in `[0, 1]`, for widgets whose
- * input is a *position* rather than a direction — the colour picker's 2D area
- * and its hue and alpha tracks.
- *
- * It exists rather than three copies of `Slider`'s pointer block because those
- * three parts each need a genuine drag-end signal (`onValueCommit` fires
- * once per drag) and each needs `data-dragging`, and because document-level
- * listeners keep a drag alive when the pointer leaves the window — which
- * element-level `pointermove` does not.
- *
- * Deliberately knows nothing about value ranges, channels, ARIA, RTL, or
- * `disabled`/`readOnly`: `x` is always measured left-to-right from the border
- * box, exactly as `Slider` measures it, and a part that must ignore pointer
- * input simply does not wire up `onPointerDown`.
+ * Turns pointer position inside an element into normalized `x`/`y` fractions in `[0, 1]`.
  *
  * @internal
  */

package/dist/combobox/Combobox.cjs

@@ -1 +1,2 @@
-"use strict";var Ue=Object.create;var L=Object.defineProperty;var Be=Object.getOwnPropertyDescriptor;var Je=Object.getOwnPropertyNames;var Qe=Object.getPrototypeOf,Xe=Object.prototype.hasOwnProperty;var Ye=(t,r)=>{for(var e in r)L(t,e,{get:r[e],enumerable:!0})},oe=(t,r,e,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of Je(r))!Xe.call(t,u)&&u!==e&&L(t,u,{get:()=>r[u],enumerable:!(l=Be(r,u))||l.enumerable});return t};var O=(t,r,e)=>(e=t!=null?Ue(Qe(t)):{},oe(r||!t||!t.__esModule?L(e,"default",{value:t,enumerable:!0}):e,t)),Ze=t=>oe(L({},"__esModule",{value:!0}),t);var je={};Ye(je,{Combobox:()=>ce,ComboboxContent:()=>U,ComboboxEmpty:()=>J,ComboboxInput:()=>z,ComboboxItem:()=>B,ComboboxPortal:()=>G,ComboboxProvider:()=>ue,OPTION_SELECTOR:()=>y,defaultGetResultCountLabel:()=>me,useComboboxContext:()=>R});module.exports=Ze(je);var n=O(require("react"),1),ne=require("../utils/createContext.cjs"),V=require("../utils/formControl.cjs"),re=require("../utils/hiddenInput.cjs"),ae=require("../utils/liveAnnouncer.cjs"),ie=require("../utils/popper.cjs"),_=require("../utils/useControllableState.cjs"),se=require("../utils/useOpenChangeComplete.cjs"),le=require("../utils/useSelection.cjs"),k=require("react/jsx-runtime"),y='[role="option"]:not([data-disabled])';function me(t){return`${t} result${t===1?"":"s"} available`}var[ue,R]=(0,ne.createSafeContext)("Combobox"),ce=n.forwardRef(function({children:r,value:e,defaultValue:l,onValueChange:u,multiple:m=!1,allowCustomValue:o=!1,filter:C="manual",autoHighlight:c=!1,loading:g=!1,inputValue:a,defaultInputValue:p="",onInputValueChange:f,open:I,defaultOpen:N=!1,onOpenChange:h,onOpenChangeComplete:Me,invalid:Se=!1,readOnly:Te=!1,getResultCountLabel:Q=me,name:X,required:Y=!1},Le){let Z=n.useRef(null),j=n.useRef(null),P=n.useRef(null),[v,E]=n.useState(null),[q,ee]=n.useState(()=>new Map),F=n.useRef(null),{selectedValues:W,isSelected:Ve,selectItem:te,setSelection:Ne}=(0,le.useSelection)({value:e,defaultValue:l,onValueChange:u,multiple:m}),[K="",w]=(0,_.useControllableState)({prop:a,defaultProp:p,onChange:f}),[d=!1,H]=(0,_.useControllableState)({prop:I,defaultProp:N,onChange:h});(0,se.useOpenChangeComplete)(d,P,Me);let[qe,Fe]=n.useState(d);d!==qe&&(Fe(d),d||E(null)),n.useEffect(()=>{if(!d)return;let i=requestAnimationFrame(()=>{let s=F.current;if(F.current=null,!s)return;let b=P.current?.querySelectorAll(y);if(!b||b.length===0)return;let S=s==="last"?b[b.length-1]:b[0];E(T=>T??S.id)});return()=>cancelAnimationFrame(i)},[d]);let M=q.size;n.useLayoutEffect(()=>{if(v===null)return;let i=Array.from(P.current?.querySelectorAll(y)??[]);i.some(s=>s.id===v)||E(i[0]?.id??null)}),n.useEffect(()=>{if(!c||!d||v!==null)return;let i=requestAnimationFrame(()=>{let s=P.current?.querySelector(y);s&&E(s.id)});return()=>cancelAnimationFrame(i)},[c,d,v,M]),n.useEffect(()=>{!d||g||(0,ae.announce)(Q(M))},[d,g,M,Q]);let We=n.useCallback(i=>{F.current=i,H(!0)},[H]),Ke=n.useCallback((i,s)=>{ee(b=>{let S=b.get(i);if(S?.value===s.value&&S.text===s.text)return b;let T=new Map(b);return T.set(i,s),T})},[]),_e=n.useCallback(i=>{ee(s=>{if(!s.has(i))return s;let b=new Map(s);return b.delete(i),b})},[]),$e=n.useCallback(i=>q.get(i),[q]),ze=n.useCallback(i=>C==="manual"||C(i,K),[C,K]),Ge=n.useCallback((i,s)=>{if(te(i),!m){w(s),H(!1);return}w("")},[te,m,w,H]);return n.useImperativeHandle(Le,()=>(0,V.formValidityHandle)(j),[]),(0,V.useFormReset)(Z,()=>{l!==void 0&&Ne(l),w(p)}),(0,k.jsx)(ie.PopperRoot,{children:(0,k.jsxs)(ue,{inputRef:Z,contentRef:P,contentId:n.useId(),multiple:m,selectedValues:W,isSelected:Ve,selectItem:Ge,inputValue:K,onInputValueChange:w,open:d,onOpenChange:H,activeId:v,setActiveId:E,openWithHighlight:We,itemCount:M,registerItem:Ke,unregisterItem:_e,getItem:$e,matchesFilter:ze,invalid:Se,readOnly:Te,loading:g,allowCustomValue:o,required:Y,children:[r,X&&(W.length>0?W:[""]).map((i,s)=>(0,k.jsx)(re.HiddenInput,{ref:s===0?j:void 0,type:"text",name:X,value:i,required:Y},i||s))]})})});ce.displayName="Combobox";var fe=O(require("react"),1),pe=require("../utils/composeRefs.cjs"),de=require("../utils/part.cjs"),be=require("../utils/popper.cjs"),D=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),z=fe.forwardRef((t,r)=>{let e=R("ComboboxInput"),l=(0,pe.useComposedRefs)(r,e.inputRef),u=o=>{let C=e.contentRef.current;if(!C)return;let c=Array.from(C.querySelectorAll(y));if(c.length===0)return;let a=c.findIndex(p=>p.id===e.activeId)+o;a<0&&(a=0),a>=c.length&&(a=c.length-1),e.setActiveId(c[a].id)},m=()=>{if(!e.activeId)return;let o=e.getItem(e.activeId);o&&e.selectItem(o.value,o.text||o.value)};return(0,$.jsx)(be.PopperAnchor,{asChild:!0,children:(0,$.jsx)(D.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-required":e.required?!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-loading":e.loading?"":void 0,"data-multiple":e.multiple?"":void 0,...t,...(0,de.skdxPart)("combobox","input",t.className),ref:l,value:e.inputValue,onChange:(0,D.composeEventHandlers)(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onKeyDown:(0,D.composeEventHandlers)(t.onKeyDown,o=>{o.key==="ArrowDown"?(o.preventDefault(),e.open?u(1):e.openWithHighlight("first")):o.key==="ArrowUp"?(o.preventDefault(),e.open?u(-1):e.openWithHighlight("last")):o.key==="Enter"?e.activeId?(o.preventDefault(),m()):e.allowCustomValue&&e.inputValue!==""&&(o.preventDefault(),e.selectItem(e.inputValue,e.inputValue)):o.key==="Escape"&&e.open&&!e.contentRef.current&&(o.preventDefault(),e.onOpenChange(!1))})})})});z.displayName="ComboboxInput";var xe=require("../utils/portal.cjs");var Ce=require("react/jsx-runtime"),G=({forceMount:t,children:r,...e})=>{let l=R("ComboboxPortal");return t||l.open?(0,Ce.jsx)(xe.Portal,{...e,children:r}):null};G.displayName="ComboboxPortal";var Re=O(require("react"),1),ge=require("../utils/composeRefs.cjs"),ye=require("../utils/part.cjs"),Ie=require("../utils/popper.cjs"),he=require("../utils/primitive.cjs"),Pe=require("../utils/useDismiss.cjs");var ve=require("react/jsx-runtime"),U=Re.forwardRef(({forceMount:t,side:r="bottom",align:e="start",sideOffset:l=4,onEscapeKeyDown:u,onPointerDownOutside:m,onFocusOutside:o,onInteractOutside:C,...c},g)=>{let a=R("ComboboxContent"),p=(0,ge.useComposedRefs)(g,a.contentRef);return(0,Pe.useDismiss)({enabled:a.open,onEscapeKeyDown:f=>{u?.(f),f.defaultPrevented||a.onOpenChange(!1)},onInteractOutside:C,onPointerDownOutside:f=>{m?.(f),f.defaultPrevented||a.onOpenChange(!1)},onFocusOutside:f=>{o?.(f),f.defaultPrevented||a.onOpenChange(!1)}},[a.contentRef,a.inputRef]),t||a.open?(0,ve.jsx)(Ie.PopperContent,{component:"combobox",role:"listbox",id:a.contentId,"aria-multiselectable":a.multiple?!0:void 0,"aria-busy":a.loading?!0:void 0,"data-state":a.open?"open":"closed","data-loading":a.loading?"":void 0,"data-multiple":a.multiple?"":void 0,side:r,align:e,sideOffset:l,...c,...(0,ye.skdxPart)("combobox","content",c.className),ref:p,onMouseDown:(0,he.composeEventHandlers)(c.onMouseDown,f=>f.preventDefault())}):null});U.displayName="ComboboxContent";var x=O(require("react"),1),Ee=require("../utils/composeRefs.cjs"),we=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var He=require("react/jsx-runtime"),B=x.forwardRef(({value:t,disabled:r,textValue:e,...l},u)=>{let m=R("ComboboxItem"),o=x.useId(),C=x.useRef(null),c=(0,Ee.useComposedRefs)(u,C),g=m.isSelected(t),a=m.activeId===o,[p,f]=x.useState(e??null);x.useLayoutEffect(()=>{let h=e??C.current?.textContent;h!=null&&h!==p&&f(h)});let I=p===null||m.matchesFilter(p);x.useEffect(()=>{if(I)return m.registerItem(o,{value:t,text:p??""}),()=>m.unregisterItem(o)},[o,I,t,p]);let N=()=>{r||(m.selectItem(t,p??t),m.inputRef.current?.focus())};return I?(0,He.jsx)(A.Primitive.div,{role:"option",id:o,"data-value":t,"aria-selected":g,"data-state":g?"checked":"unchecked","data-highlighted":a?"":void 0,"data-disabled":r?"":void 0,...l,...(0,we.skdxPart)("combobox","item",l.className),ref:c,onClick:(0,A.composeEventHandlers)(l.onClick,N),onPointerEnter:(0,A.composeEventHandlers)(l.onPointerEnter,()=>{r||m.setActiveId(o)})}):null});B.displayName="ComboboxItem";var Oe=O(require("react"),1),ke=require("../utils/part.cjs"),De=require("../utils/primitive.cjs");var Ae=require("react/jsx-runtime"),J=Oe.forwardRef((t,r)=>R("ComboboxEmpty").itemCount===0?(0,Ae.jsx)(De.Primitive.div,{role:"presentation",...t,...(0,ke.skdxPart)("combobox","empty",t.className),ref:r}):null);J.displayName="ComboboxEmpty";0&&(module.exports={Combobox,ComboboxContent,ComboboxEmpty,ComboboxInput,ComboboxItem,ComboboxPortal,ComboboxProvider,OPTION_SELECTOR,defaultGetResultCountLabel,useComboboxContext});
+'use client';
+"use strict";var Mo=Object.create;var K=Object.defineProperty;var So=Object.getOwnPropertyDescriptor;var Lo=Object.getOwnPropertyNames;var No=Object.getPrototypeOf,Go=Object.prototype.hasOwnProperty;var Ao=(o,t)=>{for(var n in t)K(o,n,{get:t[n],enumerable:!0})},he=(o,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of Lo(t))!Go.call(o,e)&&e!==n&&K(o,e,{get:()=>t[e],enumerable:!(i=So(t,e))||i.enumerable});return o};var ae=(o,t,n)=>(n=o!=null?Mo(No(o)):{},he(t||!o||!o.__esModule?K(n,"default",{value:o,enumerable:!0}):n,o)),Fo=o=>he(K({},"__esModule",{value:!0}),o);var Yo={};Ao(Yo,{Combobox:()=>no,ComboboxAnatomy:()=>me,ComboboxClear:()=>mo,ComboboxContent:()=>q,ComboboxEmpty:()=>B,ComboboxGroup:()=>W,ComboboxGroupLabel:()=>z,ComboboxGroupProvider:()=>Se,ComboboxInput:()=>U,ComboboxItem:()=>_,ComboboxPortal:()=>$,ComboboxProvider:()=>to,ComboboxTrigger:()=>io,OPTION_SELECTOR:()=>J,defaultGetResultCountLabel:()=>oo,defaultOptionsFilter:()=>Y,useComboboxContext:()=>C,useComboboxGroupContext:()=>le});module.exports=Fo(Yo);var s=ae(require("react"),1),$e=require("../utils/createContext.cjs"),Q=require("../utils/formControl.cjs"),Ye=require("../utils/hiddenInput.cjs"),Qe=require("../utils/liveAnnouncer.cjs"),Ze=require("../utils/popper.cjs"),ue=require("../utils/recipeAxis.cjs"),w=require("../utils/scoredFilter.cjs"),ce=require("../utils/useControllableState.cjs"),je=require("../utils/useOpenChangeComplete.cjs"),eo=require("../utils/useSelection.cjs");var ye=require("../utils/composeRefs.cjs"),Pe=require("../utils/part.cjs"),Ie=require("../utils/popper.cjs"),Oe=require("../utils/primitive.cjs"),ve=require("../utils/useDismiss.cjs");var Ee=require("react/jsx-runtime"),q=({forceMount:o,side:t="bottom",align:n="start",sideOffset:i=4,onEscapeKeyDown:e,onPointerDownOutside:a,onFocusOutside:m,onInteractOutside:u,ref:p,...c})=>{let l=C("ComboboxContent"),x=(0,ye.useComposedRefs)(p,l.contentRef);return(0,ve.useDismiss)({enabled:l.open,onEscapeKeyDown:b=>{e?.(b),b.defaultPrevented||l.onOpenChange(!1)},onInteractOutside:u,onPointerDownOutside:b=>{a?.(b),b.defaultPrevented||l.onOpenChange(!1)},onFocusOutside:b=>{m?.(b),b.defaultPrevented||l.onOpenChange(!1)}},[l.contentRef,l.inputRef,l.triggerRef]),o||l.open?(0,Ee.jsx)(Ie.PopperContent,{component:"combobox",role:"listbox",id:l.contentId,"aria-multiselectable":l.multiple?!0:void 0,"aria-busy":l.loading?!0:void 0,"data-state":l.open?"open":"closed","data-loading":l.loading?"":void 0,"data-multiple":l.multiple?"":void 0,side:t,align:n,sideOffset:i,...c,...(0,Pe.skdxPart)("combobox","content",c.className),ref:x,onMouseDown:(0,Oe.composeEventHandlers)(c.onMouseDown,b=>b.preventDefault())}):null};q.displayName="ComboboxContent";var ke=require("../utils/part.cjs"),He=require("../utils/primitive.cjs");var Ve=require("react/jsx-runtime"),B=({ref:o,...t})=>C("ComboboxEmpty").itemCount===0?(0,Ve.jsx)(He.Primitive.div,{role:"presentation",...t,...(0,ke.skdxPart)("combobox","empty",t.className),ref:o}):null;B.displayName="ComboboxEmpty";var Te=ae(require("react"),1),we=require("../utils/createContext.cjs"),De=require("../utils/part.cjs"),Me=require("../utils/primitive.cjs"),ie=require("react/jsx-runtime"),[Se,le]=(0,we.createSafeContext)("ComboboxGroup"),W=({ref:o,...t})=>{let n=Te.useId();return(0,ie.jsx)(Se,{labelId:n,children:(0,ie.jsx)(Me.Primitive.div,{role:"group","aria-labelledby":n,...t,...(0,De.skdxPart)("combobox","group",t.className),ref:o})})};W.displayName="ComboboxGroup";var Le=require("../utils/part.cjs"),Ne=require("../utils/primitive.cjs");var Ge=require("react/jsx-runtime"),z=({ref:o,...t})=>{let n=le("ComboboxGroupLabel");return(0,Ge.jsx)(Ne.Primitive.div,{id:n.labelId,...t,...(0,Le.skdxPart)("combobox","label",t.className),ref:o})};z.displayName="ComboboxGroupLabel";var Ae=require("../utils/appearance.cjs"),Fe=require("../utils/composeRefs.cjs"),Ke=require("../utils/part.cjs"),qe=require("../utils/popper.cjs"),O=require("../utils/primitive.cjs"),Be=require("../utils/scoredFilter.cjs");var se=require("react/jsx-runtime"),Ko=new Set(["Home","End","PageUp","PageDown"]),U=({ref:o,shape:t,size:n,...i})=>{let e=C("ComboboxInput"),a=(0,Fe.useComposedRefs)(o,e.inputRef),m=r=>{r&&(e.setActiveId(r.id,"keyboard"),r.scrollIntoView?.({block:"nearest"}))},u=()=>{let r=e.contentRef.current;return r?(0,Be.sortByOrder)(Array.from(r.querySelectorAll(J)),e.itemOrder):[]},p=r=>{let f=u();if(f.length===0)return;let I=f.findIndex(v=>v.id===e.activeId),d=I;I===-1&&(d=r===1?-1:0);let g=e.loop?(d+r+f.length)%f.length:Math.min(f.length-1,Math.max(0,d+r));m(f[g])},c=()=>{if(!e.activeId)return;let r=e.getItem(e.activeId);r&&e.selectItem(r.value,r.text||r.value,"keyboard")},l=r=>r.altKey&&r.key==="ArrowDown"?(r.preventDefault(),e.open||e.onOpenChange(!0),!0):r.altKey&&r.key==="ArrowUp"?(r.preventDefault(),e.activeId&&c(),e.open&&e.onOpenChange(!1),!0):!1,x=r=>{if(r.key==="ArrowDown")return r.preventDefault(),e.open?p(1):e.openWithHighlight("first"),!0;if(r.key==="ArrowUp")return r.preventDefault(),e.open?p(-1):e.openWithHighlight("last"),!0;if(Ko.has(r.key)&&e.open){r.preventDefault();let f=u(),I=r.key==="Home"||r.key==="PageUp";return m(I?f[0]:f[f.length-1]),!0}return!1},b=r=>{r.key==="Enter"?e.activeId?(r.preventDefault(),c()):e.allowCustomValue&&e.inputValue!==""?(r.preventDefault(),e.selectItem(e.inputValue,e.inputValue,"keyboard")):e.open&&e.onOpenChange(!1):r.key==="Escape"&&e.open&&!e.contentRef.current&&(r.preventDefault(),e.onOpenChange(!1))};return(0,se.jsx)(qe.PopperAnchor,{asChild:!0,children:(0,se.jsx)(O.Primitive.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",readOnly:e.readOnly,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"aria-invalid":e.invalid?!0:void 0,"aria-required":e.required?!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-loading":e.loading?"":void 0,"data-multiple":e.multiple?"":void 0,...i,...(0,Ae.appearanceAttrs)({shape:t,size:n},i),...(0,Ke.skdxPart)("combobox","input",i.className),ref:a,value:e.inputValue,onChange:(0,O.composeEventHandlers)(i.onChange,r=>{e.onInputValueChange(r.target.value),e.open||e.onOpenChange(!0)}),onClick:(0,O.composeEventHandlers)(i.onClick,()=>{e.openOn==="type"||e.readOnly||e.open||e.onOpenChange(!0)}),onFocus:(0,O.composeEventHandlers)(i.onFocus,()=>{e.openOn!=="focus"||e.readOnly||e.open||e.onOpenChange(!0)}),onBlur:(0,O.composeEventHandlers)(i.onBlur,r=>{let f=r.relatedTarget;f&&(f===r.currentTarget||e.contentRef.current?.contains(f))||e.reconcileDraftText()}),onKeyDown:(0,O.composeEventHandlers)(i.onKeyDown,r=>{l(r)||x(r)||b(r)})})})};U.displayName="ComboboxInput";var X=ae(require("react"),1),We=require("../utils/composeRefs.cjs"),ze=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),Ue=require("../utils/useOptionCollection.cjs");var Je=require("react/jsx-runtime"),_=({value:o,disabled:t,textValue:n,ref:i,...e})=>{let a=C("ComboboxItem"),m=X.useId(),u=X.useRef(null),p=(0,We.useComposedRefs)(i,u),c=a.isSelected(o),l=a.activeId===m,x=a.itemOrder?.get(m),{text:b,visible:r}=(0,Ue.useOptionEntry)({id:m,value:o,textValue:n,itemRef:u,matchesFilter:a.matchesFilter,registerItem:a.registerItem,unregisterItem:a.unregisterItem}),f=()=>{t||(a.selectItem(o,b??o,"pointer"),a.inputRef.current?.focus())};return r?(0,Je.jsx)(M.Primitive.div,{role:"option",id:m,"data-value":o,"aria-selected":c,"data-state":c?"checked":"unchecked","data-highlighted":l?"":void 0,"aria-disabled":t||void 0,"data-disabled":t?"":void 0,...e,...(0,ze.skdxPart)("combobox","item",e.className),ref:p,onClick:(0,M.composeEventHandlers)(e.onClick,f),onPointerEnter:(0,M.composeEventHandlers)(e.onPointerEnter,()=>{t||a.setActiveId(m,"pointer")}),style:x!==void 0?{order:x,...e.style}:e.style}):null};_.displayName="ComboboxItem";var Xe=require("../utils/portal.cjs");var _e=require("react/jsx-runtime"),$=({forceMount:o,children:t,...n})=>{let i=C("ComboboxPortal");return o||i.open?(0,_e.jsx)(Xe.Portal,{...n,children:t}):null};$.displayName="ComboboxPortal";var R=require("react/jsx-runtime"),qo=o=>"options"in o;function Y(o,t){return o.toLowerCase().includes(t.trim().toLowerCase())}var me=({shape:o,size:t,options:n,renderOption:i,placeholder:e,ariaLabel:a,passThrough:m})=>{let u=C("Combobox"),p=a??e,c=l=>(0,R.jsx)(_,{value:l.value,disabled:l.disabled,textValue:l.label,children:i?i(l,{selected:u.isSelected(l.value)}):l.label??l.value},l.value);return(0,R.jsxs)(R.Fragment,{children:[(0,R.jsx)(U,{...m,shape:o,size:t,"aria-label":p,placeholder:e}),(0,R.jsx)($,{children:(0,R.jsxs)(q,{"aria-label":p,children:[n.map(l=>qo(l)?(0,R.jsxs)(W,{children:[(0,R.jsx)(z,{children:l.label}),l.options.map(c)]},l.label):c(l)),(0,R.jsx)(B,{children:"No results"})]})})]})};var T=require("react/jsx-runtime"),J='[role="option"]:not([data-disabled])';function Bo(o,t){let n=o.querySelector('[data-part="viewport"]')??o;if(n===t||!n.contains(t))return;let i=n.getBoundingClientRect(),e=t.getBoundingClientRect();n.scrollTop+=e.top-i.top-(i.height-e.height)/2}function oo(o){return`${o} result${o===1?"":"s"} available`}var[to,C]=(0,$e.createSafeContext)("Combobox");function Wo(o,t){return o??(t?Y:"manual")}function zo(){let[o,t]=s.useState(()=>new Map),n=s.useCallback((a,m)=>{t(u=>{let p=u.get(a);if(p?.value===m.value&&p.text===m.text)return u;let c=new Map(u);return c.set(a,m),c})},[]),i=s.useCallback(a=>{t(m=>{if(!m.has(a))return m;let u=new Map(m);return u.delete(a),u})},[]),e=s.useCallback(a=>o.get(a),[o]);return{items:o,itemCount:o.size,registerItem:n,unregisterItem:i,getItem:e}}function Uo({value:o,defaultValue:t,onValueChange:n,multiple:i}){let e=s.useRef("programmatic"),a=s.useRef([]),{selectedValues:m,isSelected:u,selectItem:p,setSelection:c}=(0,eo.useSelection)({value:o,defaultValue:t,onValueChange:b=>n?.({value:b.value,previousValue:a.current,reason:e.current,selectedValue:b.selectedValue}),multiple:i,label:"Combobox"}),l=s.useCallback((b,r)=>{a.current=m,e.current=r,p(b)},[p,m]),x=s.useCallback((b,r)=>{a.current=m,e.current=r,c(b)},[c,m]);return{selectedValues:m,isSelected:u,commitSelection:l,setSelection:x}}function Jo({inputValue:o,defaultInputValue:t="",onInputValueChange:n,inputRef:i,defaultValue:e,setSelection:a}){let[m="",u]=(0,ce.useControllableState)({prop:o,defaultProp:t,onChange:n});return(0,Q.useFormReset)(i,()=>{e!==void 0&&a(e,"programmatic"),u(t)}),[m,u]}function Xo({open:o,defaultOpen:t=!1,onOpenChange:n,setActiveId:i}){let[e=!1,a]=(0,ce.useControllableState)({prop:o,defaultProp:t,onChange:n}),[m,u]=s.useState(e);return e!==m&&(u(e),e||i(null)),[e,a]}function _o({open:o,setOpen:t,autoHighlight:n,itemCount:i,items:e,contentRef:a,orderedOptions:m,onHighlightChange:u,activeId:p,setActiveId:c}){let l=s.useRef(null);s.useEffect(()=>{if(!o)return;let d=requestAnimationFrame(()=>{let g=l.current;if(l.current=null,!g)return;let v=a.current,E=m(v);if(!v||E.length===0)return;let N=g==="last"?E[E.length-1]:E[0];c(Z=>Z??N.id),Bo(v,N)});return()=>cancelAnimationFrame(d)},[o,m,a,c]);let x=s.useRef("auto"),b=s.useRef(null),r=s.useCallback((d,g="auto")=>{x.current=g,c(d)},[c]),f=p?e.get(p)?.value??null:null;s.useEffect(()=>{let d=b.current;f!==d&&(b.current=f,u?.({value:f,previousValue:d,reason:x.current}))},[f,u]),s.useLayoutEffect(()=>{if(p===null)return;let d=m(a.current);d.some(g=>g.id===p)||c(d[0]?.id??null)}),s.useEffect(()=>{if(!n||!o||p!==null)return;let d=requestAnimationFrame(()=>{let g=m(a.current)[0];g&&c(g.id)});return()=>cancelAnimationFrame(d)},[n,o,p,i,m,a,c]);let I=s.useCallback(d=>{l.current=d,t(!0)},[t]);return{setActiveIdWithReason:r,openWithHighlight:I}}function $o(o,t,n,i){s.useEffect(()=>{!o||t||(0,Qe.announce)(i(n))},[o,t,n,i])}var no=function({children:t,value:n,defaultValue:i,onValueChange:e,multiple:a=!1,allowCustomValue:m=!1,filter:u,autoHighlight:p=!1,loop:c=!0,openOn:l="type",onHighlightChange:x,loading:b=!1,inputValue:r,defaultInputValue:f,onInputValueChange:I,open:d,defaultOpen:g,onOpenChange:v,onOpenChangeComplete:E,invalid:N=!1,readOnly:Z=!1,disabled:be=!1,getResultCountLabel:co=oo,name:bo,form:po,required:pe=!1,options:fe,renderOption:fo,placeholder:Co,"aria-label":xo,shape:go,size:Ro,ref:ho,...j}){let k=Wo(u,fe),de=s.useRef(null),yo=s.useRef(null),Ce=s.useRef(null),ee=s.useRef(null),[xe,ge]=s.useState(null),{items:H,itemCount:oe,registerItem:Po,unregisterItem:Io,getItem:Oo}=zo(),{selectedValues:V,isSelected:vo,commitSelection:Re,setSelection:te}=Uo({value:n,defaultValue:i,onValueChange:e,multiple:a}),[D,y]=Jo({inputValue:r,defaultInputValue:f,onInputValueChange:I,inputRef:de,defaultValue:i,setSelection:te}),[G,A]=Xo({open:d,defaultOpen:g,onOpenChange:v,setActiveId:ge});(0,je.useOpenChangeComplete)(G,ee,E);let ne=s.useMemo(()=>k==="manual"?null:(0,w.rankByScore)([...H.keys()],h=>{let P=H.get(h);if(!P)return null;let F=k(P.text,D);return typeof F=="number"?F:null}),[k,D,H]),Eo=s.useCallback(h=>(0,w.sortByOrder)(Array.from(h?.querySelectorAll(J)??[]),ne),[ne]),{setActiveIdWithReason:ko,openWithHighlight:Ho}=_o({open:G,setOpen:A,autoHighlight:p,itemCount:oe,items:H,contentRef:ee,orderedOptions:Eo,onHighlightChange:x,activeId:xe,setActiveId:ge});$o(G,b,oe,co);let Vo=s.useCallback(h=>k==="manual"||(0,w.filterKeeps)(k(h,D)),[k,D]),re=s.useRef(null),To=s.useCallback((h,P,F)=>{if(Re(h,F),!a){re.current=P,y(P),A(!1);return}y("")},[Re,a,y,A]),wo=s.useCallback(()=>{V.length>0&&te([],"pointer"),re.current=null,y("")},[V.length,te,y]),Do=s.useCallback(()=>{if(m)return;let h=a?void 0:V[0];if(h===void 0){y("");return}for(let P of H.values())if(P.value===h){y(P.text||P.value);return}y(re.current??h)},[m,a,V,H,y]);return s.useImperativeHandle(ho,()=>(0,Q.formValidityHandle)(Ce),[]),(0,T.jsx)(Ze.PopperRoot,{children:(0,T.jsxs)(to,{inputRef:de,triggerRef:yo,contentRef:ee,contentId:s.useId(),multiple:a,selectedValues:V,isSelected:vo,selectItem:To,clear:wo,inputValue:D,onInputValueChange:y,open:G,onOpenChange:A,activeId:xe,itemOrder:ne,setActiveId:ko,openWithHighlight:Ho,loop:c,openOn:l,reconcileDraftText:Do,itemCount:oe,registerItem:Po,unregisterItem:Io,getItem:Oo,matchesFilter:Vo,invalid:N,readOnly:Z,disabled:be,loading:b,allowCustomValue:m,required:pe,children:[t??(0,T.jsx)(me,{shape:(0,ue.recipeAxis)(go,j,"data-shape"),size:(0,ue.recipeAxis)(Ro,j,"data-size"),options:fe??[],renderOption:fo,placeholder:Co,ariaLabel:xo,passThrough:j}),(0,T.jsx)(Ye.MirroredValues,{name:bo,values:V,required:pe,disabled:be,form:po,singleValued:!a,controlRef:Ce})]})})};no.displayName="Combobox";var ro=require("../utils/composeRefs.cjs"),ao=require("../utils/part.cjs"),S=require("../utils/primitive.cjs");var lo=require("react/jsx-runtime"),io=({ref:o,...t})=>{let n=C("ComboboxTrigger"),i=(0,ro.useComposedRefs)(o,n.triggerRef);return(0,lo.jsx)(S.Primitive.button,{type:"button",tabIndex:-1,"aria-expanded":n.open,"aria-controls":n.open?n.contentId:void 0,disabled:n.disabled,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,"data-state":n.open?"open":"closed",...t,...(0,ao.skdxPart)("combobox","trigger",t.className),ref:i,onMouseDown:(0,S.composeEventHandlers)(t.onMouseDown,e=>e.preventDefault()),onClick:(0,S.composeEventHandlers)(t.onClick,()=>{n.readOnly||(n.onOpenChange(!n.open),n.inputRef.current?.focus())})})};io.displayName="ComboboxTrigger";var so=require("../utils/part.cjs"),L=require("../utils/primitive.cjs");var uo=require("react/jsx-runtime"),mo=({ref:o,...t})=>{let n=C("ComboboxClear"),i=n.selectedValues.length===0&&n.inputValue==="";return(0,uo.jsx)(L.Primitive.button,{type:"button",tabIndex:-1,disabled:n.disabled||n.readOnly||i,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,...t,...(0,so.skdxPart)("combobox","clear",t.className),ref:o,onMouseDown:(0,L.composeEventHandlers)(t.onMouseDown,e=>e.preventDefault()),onClick:(0,L.composeEventHandlers)(t.onClick,()=>{n.clear(),n.inputRef.current?.focus()})})};mo.displayName="ComboboxClear";0&&(module.exports={Combobox,ComboboxAnatomy,ComboboxClear,ComboboxContent,ComboboxEmpty,ComboboxGroup,ComboboxGroupLabel,ComboboxGroupProvider,ComboboxInput,ComboboxItem,ComboboxPortal,ComboboxProvider,ComboboxTrigger,OPTION_SELECTOR,defaultGetResultCountLabel,defaultOptionsFilter,useComboboxContext,useComboboxGroupContext});

package/dist/combobox/Combobox.d.cts

@@ -1,79 +1,29 @@
 import * as React from 'react';
-import type { ComboboxContextValue, ComboboxProps } from './types.cjs';
-/**
- * WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus always
- * stays on the input; the highlighted option is tracked as virtual focus
- * via `aria-activedescendant`. Filtering is the consumer's responsibility by
- * default (`filter: 'manual'`) and moves inside the component as soon as a
- * `filter` predicate is supplied.
- */
+import type { ComboboxContextValue, ComboboxHandle, ComboboxProps } from './types.cjs';
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /** Default `getResultCountLabel`: `"1 result available"` / `"3 results available"`. */
 export declare function defaultGetResultCountLabel(count: number): string;
-export declare const ComboboxProvider: {
-    (props: ComboboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useComboboxContext: (consumerName: string) => ComboboxContextValue;
+export declare const ComboboxProvider: React.FC<ComboboxContextValue & {
+    children: React.ReactNode;
+}>, useComboboxContext: (consumerName: string) => ComboboxContextValue;
 /**
- * Root of a WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus
- * always stays on `ComboboxInput`; the highlighted option is tracked as
- * virtual focus via `aria-activedescendant` rather than moved with `tabIndex`.
- * Owns the selected value, the input's draft text, and the popup's open
- * state, handing all three down to every other `Combobox*` part via context.
- * Renders no DOM of its own.
- *
- * Filtering is the consumer's job by default (`filter: 'manual'`): you filter
- * your data by `inputValue` and render only the `ComboboxItem`s that match,
- * which is what an async or server-side search needs. Pass a `filter`
- * predicate instead and the component filters its own children.
- *
- * Works controlled (`value` + `onValueChange`, `inputValue` +
- * `onInputValueChange`, `open` + `onOpenChange`) or uncontrolled
- * (`defaultValue`, `defaultInputValue`, `defaultOpen`).
+ * WAI-ARIA 1.2 "combobox with list autocomplete": DOM focus stays on the input, and the highlighted option is virtual focus via `aria-activedescendant`.
  *
- * @example Consumer-side (default) filtering:
+ * @example
  * ```tsx
- * function FruitCombobox() {
- *   const [inputValue, setInputValue] = React.useState('');
- *   const filtered = FRUITS.filter((f) => f.toLowerCase().includes(inputValue.toLowerCase()));
- *
- *   return (
- *     <Combobox inputValue={inputValue} onInputValueChange={setInputValue}>
- *       <ComboboxInput placeholder="Search a fruit…" />
- *       <ComboboxPortal>
- *         <ComboboxContent>
- *           {filtered.length === 0 ? (
- *             <ComboboxEmpty>No results</ComboboxEmpty>
- *           ) : (
- *             filtered.map((fruit) => (
- *               <ComboboxItem value={fruit} key={fruit}>{fruit}</ComboboxItem>
- *             ))
- *           )}
- *         </ComboboxContent>
- *       </ComboboxPortal>
- *     </Combobox>
- *   );
- * }
- * ```
- *
- * @example Built-in filtering, multi-select, creatable:
- * ```tsx
- * <Combobox
- *   multiple
- *   allowCustomValue
- *   autoHighlight
- *   filter={(text, input) => text.toLowerCase().includes(input.toLowerCase())}
- * >
- *   <ComboboxInput placeholder="Search a fruit…" />
+ * <Combobox inputValue={query} onInputValueChange={setQuery}>
+ *   <ComboboxInput placeholder="Search…" />
  *   <ComboboxPortal>
  *     <ComboboxContent>
- *       {FRUITS.map((fruit) => <ComboboxItem value={fruit} key={fruit}>{fruit}</ComboboxItem>)}
- *       <ComboboxEmpty>No results</ComboboxEmpty>
+ *       {filtered.map((item) => <ComboboxItem value={item} key={item} />)}
  *     </ComboboxContent>
  *   </ComboboxPortal>
  * </Combobox>
  * ```
  */
-export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<import("../index.cjs").FormValidityHandle>>;
+export declare const Combobox: {
+    ({ children, value: valueProp, defaultValue, onValueChange, multiple, allowCustomValue, filter: filterProp, autoHighlight, loop, openOn, onHighlightChange, loading, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, invalid, readOnly, disabled, getResultCountLabel, name, form, required, options, renderOption, placeholder, "aria-label": ariaLabel, shape, size, ref: forwardedRef, ...rest }: Omit<ComboboxProps, "ref"> & {
+        ref?: React.Ref<ComboboxHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/combobox/Combobox.d.ts

@@ -1,79 +1,29 @@
 import * as React from 'react';
-import type { ComboboxContextValue, ComboboxProps } from './types.js';
-/**
- * WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus always
- * stays on the input; the highlighted option is tracked as virtual focus
- * via `aria-activedescendant`. Filtering is the consumer's responsibility by
- * default (`filter: 'manual'`) and moves inside the component as soon as a
- * `filter` predicate is supplied.
- */
+import type { ComboboxContextValue, ComboboxHandle, ComboboxProps } from './types.js';
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /** Default `getResultCountLabel`: `"1 result available"` / `"3 results available"`. */
 export declare function defaultGetResultCountLabel(count: number): string;
-export declare const ComboboxProvider: {
-    (props: ComboboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useComboboxContext: (consumerName: string) => ComboboxContextValue;
+export declare const ComboboxProvider: React.FC<ComboboxContextValue & {
+    children: React.ReactNode;
+}>, useComboboxContext: (consumerName: string) => ComboboxContextValue;
 /**
- * Root of a WAI-ARIA 1.2 "combobox with list autocomplete": real DOM focus
- * always stays on `ComboboxInput`; the highlighted option is tracked as
- * virtual focus via `aria-activedescendant` rather than moved with `tabIndex`.
- * Owns the selected value, the input's draft text, and the popup's open
- * state, handing all three down to every other `Combobox*` part via context.
- * Renders no DOM of its own.
- *
- * Filtering is the consumer's job by default (`filter: 'manual'`): you filter
- * your data by `inputValue` and render only the `ComboboxItem`s that match,
- * which is what an async or server-side search needs. Pass a `filter`
- * predicate instead and the component filters its own children.
- *
- * Works controlled (`value` + `onValueChange`, `inputValue` +
- * `onInputValueChange`, `open` + `onOpenChange`) or uncontrolled
- * (`defaultValue`, `defaultInputValue`, `defaultOpen`).
+ * WAI-ARIA 1.2 "combobox with list autocomplete": DOM focus stays on the input, and the highlighted option is virtual focus via `aria-activedescendant`.
  *
- * @example Consumer-side (default) filtering:
+ * @example
  * ```tsx
- * function FruitCombobox() {
- *   const [inputValue, setInputValue] = React.useState('');
- *   const filtered = FRUITS.filter((f) => f.toLowerCase().includes(inputValue.toLowerCase()));
- *
- *   return (
- *     <Combobox inputValue={inputValue} onInputValueChange={setInputValue}>
- *       <ComboboxInput placeholder="Search a fruit…" />
- *       <ComboboxPortal>
- *         <ComboboxContent>
- *           {filtered.length === 0 ? (
- *             <ComboboxEmpty>No results</ComboboxEmpty>
- *           ) : (
- *             filtered.map((fruit) => (
- *               <ComboboxItem value={fruit} key={fruit}>{fruit}</ComboboxItem>
- *             ))
- *           )}
- *         </ComboboxContent>
- *       </ComboboxPortal>
- *     </Combobox>
- *   );
- * }
- * ```
- *
- * @example Built-in filtering, multi-select, creatable:
- * ```tsx
- * <Combobox
- *   multiple
- *   allowCustomValue
- *   autoHighlight
- *   filter={(text, input) => text.toLowerCase().includes(input.toLowerCase())}
- * >
- *   <ComboboxInput placeholder="Search a fruit…" />
+ * <Combobox inputValue={query} onInputValueChange={setQuery}>
+ *   <ComboboxInput placeholder="Search…" />
  *   <ComboboxPortal>
  *     <ComboboxContent>
- *       {FRUITS.map((fruit) => <ComboboxItem value={fruit} key={fruit}>{fruit}</ComboboxItem>)}
- *       <ComboboxEmpty>No results</ComboboxEmpty>
+ *       {filtered.map((item) => <ComboboxItem value={item} key={item} />)}
  *     </ComboboxContent>
  *   </ComboboxPortal>
  * </Combobox>
  * ```
  */
-export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<import("../index.js").FormValidityHandle>>;
+export declare const Combobox: {
+    ({ children, value: valueProp, defaultValue, onValueChange, multiple, allowCustomValue, filter: filterProp, autoHighlight, loop, openOn, onHighlightChange, loading, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, invalid, readOnly, disabled, getResultCountLabel, name, form, required, options, renderOption, placeholder, "aria-label": ariaLabel, shape, size, ref: forwardedRef, ...rest }: Omit<ComboboxProps, "ref"> & {
+        ref?: React.Ref<ComboboxHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/combobox/Combobox.js

@@ -1 +1,2 @@
-import*as o from"react";import{createSafeContext as xe}from"../utils/createContext.js";import{formValidityHandle as Ce,useFormReset as Re}from"../utils/formControl.js";import{HiddenInput as ge}from"../utils/hiddenInput.js";import{announce as ye}from"../utils/liveAnnouncer.js";import{PopperRoot as Ie}from"../utils/popper.js";import{useControllableState as $}from"../utils/useControllableState.js";import{useOpenChangeComplete as he}from"../utils/useOpenChangeComplete.js";import{useSelection as Pe}from"../utils/useSelection.js";import{jsx as z,jsxs as He}from"react/jsx-runtime";var H='[role="option"]:not([data-disabled])';function ve(a){return`${a} result${a===1?"":"s"} available`}var[Ee,C]=xe("Combobox"),we=o.forwardRef(function({children:c,value:e,defaultValue:l,onValueChange:g,multiple:s=!1,allowCustomValue:t=!1,filter:x="manual",autoHighlight:m=!1,loading:R=!1,inputValue:n,defaultInputValue:f="",onInputValueChange:u,open:y,defaultOpen:A=!1,onOpenChange:I,onOpenChangeComplete:oe,invalid:ne=!1,readOnly:re=!1,getResultCountLabel:V=ve,name:N,required:q=!1},ae){let F=o.useRef(null),W=o.useRef(null),h=o.useRef(null),[P,v]=o.useState(null),[M,K]=o.useState(()=>new Map),S=o.useRef(null),{selectedValues:T,isSelected:ie,selectItem:_,setSelection:se}=Pe({value:e,defaultValue:l,onValueChange:g,multiple:s}),[L="",E]=$({prop:n,defaultProp:f,onChange:u}),[p=!1,w]=$({prop:y,defaultProp:A,onChange:I});he(p,h,oe);let[le,me]=o.useState(p);p!==le&&(me(p),p||v(null)),o.useEffect(()=>{if(!p)return;let r=requestAnimationFrame(()=>{let i=S.current;if(S.current=null,!i)return;let d=h.current?.querySelectorAll(H);if(!d||d.length===0)return;let k=i==="last"?d[d.length-1]:d[0];v(D=>D??k.id)});return()=>cancelAnimationFrame(r)},[p]);let O=M.size;o.useLayoutEffect(()=>{if(P===null)return;let r=Array.from(h.current?.querySelectorAll(H)??[]);r.some(i=>i.id===P)||v(r[0]?.id??null)}),o.useEffect(()=>{if(!m||!p||P!==null)return;let r=requestAnimationFrame(()=>{let i=h.current?.querySelector(H);i&&v(i.id)});return()=>cancelAnimationFrame(r)},[m,p,P,O]),o.useEffect(()=>{!p||R||ye(V(O))},[p,R,O,V]);let ue=o.useCallback(r=>{S.current=r,w(!0)},[w]),ce=o.useCallback((r,i)=>{K(d=>{let k=d.get(r);if(k?.value===i.value&&k.text===i.text)return d;let D=new Map(d);return D.set(r,i),D})},[]),fe=o.useCallback(r=>{K(i=>{if(!i.has(r))return i;let d=new Map(i);return d.delete(r),d})},[]),pe=o.useCallback(r=>M.get(r),[M]),de=o.useCallback(r=>x==="manual"||x(r,L),[x,L]),be=o.useCallback((r,i)=>{if(_(r),!s){E(i),w(!1);return}E("")},[_,s,E,w]);return o.useImperativeHandle(ae,()=>Ce(W),[]),Re(F,()=>{l!==void 0&&se(l),E(f)}),z(Ie,{children:He(Ee,{inputRef:F,contentRef:h,contentId:o.useId(),multiple:s,selectedValues:T,isSelected:ie,selectItem:be,inputValue:L,onInputValueChange:E,open:p,onOpenChange:w,activeId:P,setActiveId:v,openWithHighlight:ue,itemCount:O,registerItem:ce,unregisterItem:fe,getItem:pe,matchesFilter:de,invalid:ne,readOnly:re,loading:R,allowCustomValue:t,required:q,children:[c,N&&(T.length>0?T:[""]).map((r,i)=>z(ge,{ref:i===0?W:void 0,type:"text",name:N,value:r,required:q},r||i))]})})});we.displayName="Combobox";import*as B from"react";import{useComposedRefs as Oe}from"../utils/composeRefs.js";import{skdxPart as ke}from"../utils/part.js";import{PopperAnchor as De}from"../utils/popper.js";import{composeEventHandlers as G,Primitive as Ae}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var J=B.forwardRef((a,c)=>{let e=C("ComboboxInput"),l=Oe(c,e.inputRef),g=t=>{let x=e.contentRef.current;if(!x)return;let m=Array.from(x.querySelectorAll(H));if(m.length===0)return;let n=m.findIndex(f=>f.id===e.activeId)+t;n<0&&(n=0),n>=m.length&&(n=m.length-1),e.setActiveId(m[n].id)},s=()=>{if(!e.activeId)return;let t=e.getItem(e.activeId);t&&e.selectItem(t.value,t.text||t.value)};return U(De,{asChild:!0,children:U(Ae.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-required":e.required?!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-loading":e.loading?"":void 0,"data-multiple":e.multiple?"":void 0,...a,...ke("combobox","input",a.className),ref:l,value:e.inputValue,onChange:G(a.onChange,t=>{e.onInputValueChange(t.target.value),e.open||e.onOpenChange(!0)}),onKeyDown:G(a.onKeyDown,t=>{t.key==="ArrowDown"?(t.preventDefault(),e.open?g(1):e.openWithHighlight("first")):t.key==="ArrowUp"?(t.preventDefault(),e.open?g(-1):e.openWithHighlight("last")):t.key==="Enter"?e.activeId?(t.preventDefault(),s()):e.allowCustomValue&&e.inputValue!==""&&(t.preventDefault(),e.selectItem(e.inputValue,e.inputValue)):t.key==="Escape"&&e.open&&!e.contentRef.current&&(t.preventDefault(),e.onOpenChange(!1))})})})});J.displayName="ComboboxInput";import{Portal as Me}from"../utils/portal.js";import{jsx as Se}from"react/jsx-runtime";var Q=({forceMount:a,children:c,...e})=>{let l=C("ComboboxPortal");return a||l.open?Se(Me,{...e,children:c}):null};Q.displayName="ComboboxPortal";import*as X from"react";import{useComposedRefs as Te}from"../utils/composeRefs.js";import{skdxPart as Le}from"../utils/part.js";import{PopperContent as Ve}from"../utils/popper.js";import{composeEventHandlers as Ne}from"../utils/primitive.js";import{useDismiss as qe}from"../utils/useDismiss.js";import{jsx as Fe}from"react/jsx-runtime";var Y=X.forwardRef(({forceMount:a,side:c="bottom",align:e="start",sideOffset:l=4,onEscapeKeyDown:g,onPointerDownOutside:s,onFocusOutside:t,onInteractOutside:x,...m},R)=>{let n=C("ComboboxContent"),f=Te(R,n.contentRef);return qe({enabled:n.open,onEscapeKeyDown:u=>{g?.(u),u.defaultPrevented||n.onOpenChange(!1)},onInteractOutside:x,onPointerDownOutside:u=>{s?.(u),u.defaultPrevented||n.onOpenChange(!1)},onFocusOutside:u=>{t?.(u),u.defaultPrevented||n.onOpenChange(!1)}},[n.contentRef,n.inputRef]),a||n.open?Fe(Ve,{component:"combobox",role:"listbox",id:n.contentId,"aria-multiselectable":n.multiple?!0:void 0,"aria-busy":n.loading?!0:void 0,"data-state":n.open?"open":"closed","data-loading":n.loading?"":void 0,"data-multiple":n.multiple?"":void 0,side:c,align:e,sideOffset:l,...m,...Le("combobox","content",m.className),ref:f,onMouseDown:Ne(m.onMouseDown,u=>u.preventDefault())}):null});Y.displayName="ComboboxContent";import*as b from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{composeEventHandlers as Z,Primitive as _e}from"../utils/primitive.js";import{jsx as $e}from"react/jsx-runtime";var j=b.forwardRef(({value:a,disabled:c,textValue:e,...l},g)=>{let s=C("ComboboxItem"),t=b.useId(),x=b.useRef(null),m=We(g,x),R=s.isSelected(a),n=s.activeId===t,[f,u]=b.useState(e??null);b.useLayoutEffect(()=>{let I=e??x.current?.textContent;I!=null&&I!==f&&u(I)});let y=f===null||s.matchesFilter(f);b.useEffect(()=>{if(y)return s.registerItem(t,{value:a,text:f??""}),()=>s.unregisterItem(t)},[t,y,a,f]);let A=()=>{c||(s.selectItem(a,f??a),s.inputRef.current?.focus())};return y?$e(_e.div,{role:"option",id:t,"data-value":a,"aria-selected":R,"data-state":R?"checked":"unchecked","data-highlighted":n?"":void 0,"data-disabled":c?"":void 0,...l,...Ke("combobox","item",l.className),ref:m,onClick:Z(l.onClick,A),onPointerEnter:Z(l.onPointerEnter,()=>{c||s.setActiveId(t)})}):null});j.displayName="ComboboxItem";import*as ee from"react";import{skdxPart as ze}from"../utils/part.js";import{Primitive as Ge}from"../utils/primitive.js";import{jsx as Ue}from"react/jsx-runtime";var te=ee.forwardRef((a,c)=>C("ComboboxEmpty").itemCount===0?Ue(Ge.div,{role:"presentation",...a,...ze("combobox","empty",a.className),ref:c}):null);te.displayName="ComboboxEmpty";export{we as Combobox,Y as ComboboxContent,te as ComboboxEmpty,J as ComboboxInput,j as ComboboxItem,Q as ComboboxPortal,Ee as ComboboxProvider,H as OPTION_SELECTOR,ve as defaultGetResultCountLabel,C as useComboboxContext};
+'use client';
+import*as l from"react";import{createSafeContext as go}from"../utils/createContext.js";import{formValidityHandle as Ro,useFormReset as ho}from"../utils/formControl.js";import{MirroredValues as yo}from"../utils/hiddenInput.js";import{announce as Po}from"../utils/liveAnnouncer.js";import{PopperRoot as Io}from"../utils/popper.js";import{recipeAxis as fe}from"../utils/recipeAxis.js";import{filterKeeps as Oo,rankByScore as vo,sortByOrder as Eo}from"../utils/scoredFilter.js";import{useControllableState as de}from"../utils/useControllableState.js";import{useOpenChangeComplete as ko}from"../utils/useOpenChangeComplete.js";import{useSelection as Ho}from"../utils/useSelection.js";import{useComposedRefs as Fe}from"../utils/composeRefs.js";import{skdxPart as Ke}from"../utils/part.js";import{PopperContent as qe}from"../utils/popper.js";import{composeEventHandlers as Be}from"../utils/primitive.js";import{useDismiss as We}from"../utils/useDismiss.js";import{jsx as ze}from"react/jsx-runtime";var W=({forceMount:r,side:t="bottom",align:o="start",sideOffset:s=4,onEscapeKeyDown:e,onPointerDownOutside:a,onFocusOutside:m,onInteractOutside:u,ref:p,...c})=>{let i=C("ComboboxContent"),x=Fe(p,i.contentRef);return We({enabled:i.open,onEscapeKeyDown:b=>{e?.(b),b.defaultPrevented||i.onOpenChange(!1)},onInteractOutside:u,onPointerDownOutside:b=>{a?.(b),b.defaultPrevented||i.onOpenChange(!1)},onFocusOutside:b=>{m?.(b),b.defaultPrevented||i.onOpenChange(!1)}},[i.contentRef,i.inputRef,i.triggerRef]),r||i.open?ze(qe,{component:"combobox",role:"listbox",id:i.contentId,"aria-multiselectable":i.multiple?!0:void 0,"aria-busy":i.loading?!0:void 0,"data-state":i.open?"open":"closed","data-loading":i.loading?"":void 0,"data-multiple":i.multiple?"":void 0,side:t,align:o,sideOffset:s,...c,...Ke("combobox","content",c.className),ref:x,onMouseDown:Be(c.onMouseDown,b=>b.preventDefault())}):null};W.displayName="ComboboxContent";import{skdxPart as Ue}from"../utils/part.js";import{Primitive as Je}from"../utils/primitive.js";import{jsx as Xe}from"react/jsx-runtime";var z=({ref:r,...t})=>C("ComboboxEmpty").itemCount===0?Xe(Je.div,{role:"presentation",...t,...Ue("combobox","empty",t.className),ref:r}):null;z.displayName="ComboboxEmpty";import*as me from"react";import{createSafeContext as _e}from"../utils/createContext.js";import{skdxPart as $e}from"../utils/part.js";import{Primitive as Ye}from"../utils/primitive.js";import{jsx as se}from"react/jsx-runtime";var[Qe,ue]=_e("ComboboxGroup"),U=({ref:r,...t})=>{let o=me.useId();return se(Qe,{labelId:o,children:se(Ye.div,{role:"group","aria-labelledby":o,...t,...$e("combobox","group",t.className),ref:r})})};U.displayName="ComboboxGroup";import{skdxPart as Ze}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as eo}from"react/jsx-runtime";var J=({ref:r,...t})=>{let o=ue("ComboboxGroupLabel");return eo(je.div,{id:o.labelId,...t,...Ze("combobox","label",t.className),ref:r})};J.displayName="ComboboxGroupLabel";import{appearanceAttrs as oo}from"../utils/appearance.js";import{useComposedRefs as to}from"../utils/composeRefs.js";import{skdxPart as no}from"../utils/part.js";import{PopperAnchor as ro}from"../utils/popper.js";import{composeEventHandlers as V,Primitive as ao}from"../utils/primitive.js";import{sortByOrder as io}from"../utils/scoredFilter.js";import{jsx as ce}from"react/jsx-runtime";var lo=new Set(["Home","End","PageUp","PageDown"]),X=({ref:r,shape:t,size:o,...s})=>{let e=C("ComboboxInput"),a=to(r,e.inputRef),m=n=>{n&&(e.setActiveId(n.id,"keyboard"),n.scrollIntoView?.({block:"nearest"}))},u=()=>{let n=e.contentRef.current;return n?io(Array.from(n.querySelectorAll(_)),e.itemOrder):[]},p=n=>{let f=u();if(f.length===0)return;let P=f.findIndex(I=>I.id===e.activeId),d=P;P===-1&&(d=n===1?-1:0);let g=e.loop?(d+n+f.length)%f.length:Math.min(f.length-1,Math.max(0,d+n));m(f[g])},c=()=>{if(!e.activeId)return;let n=e.getItem(e.activeId);n&&e.selectItem(n.value,n.text||n.value,"keyboard")},i=n=>n.altKey&&n.key==="ArrowDown"?(n.preventDefault(),e.open||e.onOpenChange(!0),!0):n.altKey&&n.key==="ArrowUp"?(n.preventDefault(),e.activeId&&c(),e.open&&e.onOpenChange(!1),!0):!1,x=n=>{if(n.key==="ArrowDown")return n.preventDefault(),e.open?p(1):e.openWithHighlight("first"),!0;if(n.key==="ArrowUp")return n.preventDefault(),e.open?p(-1):e.openWithHighlight("last"),!0;if(lo.has(n.key)&&e.open){n.preventDefault();let f=u(),P=n.key==="Home"||n.key==="PageUp";return m(P?f[0]:f[f.length-1]),!0}return!1},b=n=>{n.key==="Enter"?e.activeId?(n.preventDefault(),c()):e.allowCustomValue&&e.inputValue!==""?(n.preventDefault(),e.selectItem(e.inputValue,e.inputValue,"keyboard")):e.open&&e.onOpenChange(!1):n.key==="Escape"&&e.open&&!e.contentRef.current&&(n.preventDefault(),e.onOpenChange(!1))};return ce(ro,{asChild:!0,children:ce(ao.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.contentId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",readOnly:e.readOnly,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"aria-invalid":e.invalid?!0:void 0,"aria-required":e.required?!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-loading":e.loading?"":void 0,"data-multiple":e.multiple?"":void 0,...s,...oo({shape:t,size:o},s),...no("combobox","input",s.className),ref:a,value:e.inputValue,onChange:V(s.onChange,n=>{e.onInputValueChange(n.target.value),e.open||e.onOpenChange(!0)}),onClick:V(s.onClick,()=>{e.openOn==="type"||e.readOnly||e.open||e.onOpenChange(!0)}),onFocus:V(s.onFocus,()=>{e.openOn!=="focus"||e.readOnly||e.open||e.onOpenChange(!0)}),onBlur:V(s.onBlur,n=>{let f=n.relatedTarget;f&&(f===n.currentTarget||e.contentRef.current?.contains(f))||e.reconcileDraftText()}),onKeyDown:V(s.onKeyDown,n=>{i(n)||x(n)||b(n)})})})};X.displayName="ComboboxInput";import*as L from"react";import{useComposedRefs as so}from"../utils/composeRefs.js";import{skdxPart as mo}from"../utils/part.js";import{composeEventHandlers as be,Primitive as uo}from"../utils/primitive.js";import{useOptionEntry as co}from"../utils/useOptionCollection.js";import{jsx as bo}from"react/jsx-runtime";var $=({value:r,disabled:t,textValue:o,ref:s,...e})=>{let a=C("ComboboxItem"),m=L.useId(),u=L.useRef(null),p=so(s,u),c=a.isSelected(r),i=a.activeId===m,x=a.itemOrder?.get(m),{text:b,visible:n}=co({id:m,value:r,textValue:o,itemRef:u,matchesFilter:a.matchesFilter,registerItem:a.registerItem,unregisterItem:a.unregisterItem}),f=()=>{t||(a.selectItem(r,b??r,"pointer"),a.inputRef.current?.focus())};return n?bo(uo.div,{role:"option",id:m,"data-value":r,"aria-selected":c,"data-state":c?"checked":"unchecked","data-highlighted":i?"":void 0,"aria-disabled":t||void 0,"data-disabled":t?"":void 0,...e,...mo("combobox","item",e.className),ref:p,onClick:be(e.onClick,f),onPointerEnter:be(e.onPointerEnter,()=>{t||a.setActiveId(m,"pointer")}),style:x!==void 0?{order:x,...e.style}:e.style}):null};$.displayName="ComboboxItem";import{Portal as po}from"../utils/portal.js";import{jsx as fo}from"react/jsx-runtime";var Y=({forceMount:r,children:t,...o})=>{let s=C("ComboboxPortal");return r||s.open?fo(po,{...o,children:t}):null};Y.displayName="ComboboxPortal";import{Fragment as xo,jsx as T,jsxs as Q}from"react/jsx-runtime";var Co=r=>"options"in r;function Z(r,t){return r.toLowerCase().includes(t.trim().toLowerCase())}var pe=({shape:r,size:t,options:o,renderOption:s,placeholder:e,ariaLabel:a,passThrough:m})=>{let u=C("Combobox"),p=a??e,c=i=>T($,{value:i.value,disabled:i.disabled,textValue:i.label,children:s?s(i,{selected:u.isSelected(i.value)}):i.label??i.value},i.value);return Q(xo,{children:[T(X,{...m,shape:r,size:t,"aria-label":p,placeholder:e}),T(Y,{children:Q(W,{"aria-label":p,children:[o.map(i=>Co(i)?Q(U,{children:[T(J,{children:i.label}),i.options.map(c)]},i.label):c(i)),T(z,{children:"No results"})]})})]})};import{jsx as j,jsxs as Ko}from"react/jsx-runtime";var _='[role="option"]:not([data-disabled])';function Vo(r,t){let o=r.querySelector('[data-part="viewport"]')??r;if(o===t||!o.contains(t))return;let s=o.getBoundingClientRect(),e=t.getBoundingClientRect();o.scrollTop+=e.top-s.top-(s.height-e.height)/2}function To(r){return`${r} result${r===1?"":"s"} available`}var[wo,C]=go("Combobox");function Do(r,t){return r??(t?Z:"manual")}function Mo(){let[r,t]=l.useState(()=>new Map),o=l.useCallback((a,m)=>{t(u=>{let p=u.get(a);if(p?.value===m.value&&p.text===m.text)return u;let c=new Map(u);return c.set(a,m),c})},[]),s=l.useCallback(a=>{t(m=>{if(!m.has(a))return m;let u=new Map(m);return u.delete(a),u})},[]),e=l.useCallback(a=>r.get(a),[r]);return{items:r,itemCount:r.size,registerItem:o,unregisterItem:s,getItem:e}}function So({value:r,defaultValue:t,onValueChange:o,multiple:s}){let e=l.useRef("programmatic"),a=l.useRef([]),{selectedValues:m,isSelected:u,selectItem:p,setSelection:c}=Ho({value:r,defaultValue:t,onValueChange:b=>o?.({value:b.value,previousValue:a.current,reason:e.current,selectedValue:b.selectedValue}),multiple:s,label:"Combobox"}),i=l.useCallback((b,n)=>{a.current=m,e.current=n,p(b)},[p,m]),x=l.useCallback((b,n)=>{a.current=m,e.current=n,c(b)},[c,m]);return{selectedValues:m,isSelected:u,commitSelection:i,setSelection:x}}function Lo({inputValue:r,defaultInputValue:t="",onInputValueChange:o,inputRef:s,defaultValue:e,setSelection:a}){let[m="",u]=de({prop:r,defaultProp:t,onChange:o});return ho(s,()=>{e!==void 0&&a(e,"programmatic"),u(t)}),[m,u]}function No({open:r,defaultOpen:t=!1,onOpenChange:o,setActiveId:s}){let[e=!1,a]=de({prop:r,defaultProp:t,onChange:o}),[m,u]=l.useState(e);return e!==m&&(u(e),e||s(null)),[e,a]}function Go({open:r,setOpen:t,autoHighlight:o,itemCount:s,items:e,contentRef:a,orderedOptions:m,onHighlightChange:u,activeId:p,setActiveId:c}){let i=l.useRef(null);l.useEffect(()=>{if(!r)return;let d=requestAnimationFrame(()=>{let g=i.current;if(i.current=null,!g)return;let I=a.current,O=m(I);if(!I||O.length===0)return;let w=g==="last"?O[O.length-1]:O[0];c(N=>N??w.id),Vo(I,w)});return()=>cancelAnimationFrame(d)},[r,m,a,c]);let x=l.useRef("auto"),b=l.useRef(null),n=l.useCallback((d,g="auto")=>{x.current=g,c(d)},[c]),f=p?e.get(p)?.value??null:null;l.useEffect(()=>{let d=b.current;f!==d&&(b.current=f,u?.({value:f,previousValue:d,reason:x.current}))},[f,u]),l.useLayoutEffect(()=>{if(p===null)return;let d=m(a.current);d.some(g=>g.id===p)||c(d[0]?.id??null)}),l.useEffect(()=>{if(!o||!r||p!==null)return;let d=requestAnimationFrame(()=>{let g=m(a.current)[0];g&&c(g.id)});return()=>cancelAnimationFrame(d)},[o,r,p,s,m,a,c]);let P=l.useCallback(d=>{i.current=d,t(!0)},[t]);return{setActiveIdWithReason:n,openWithHighlight:P}}function Ao(r,t,o,s){l.useEffect(()=>{!r||t||Po(s(o))},[r,t,o,s])}var Fo=function({children:t,value:o,defaultValue:s,onValueChange:e,multiple:a=!1,allowCustomValue:m=!1,filter:u,autoHighlight:p=!1,loop:c=!0,openOn:i="type",onHighlightChange:x,loading:b=!1,inputValue:n,defaultInputValue:f,onInputValueChange:P,open:d,defaultOpen:g,onOpenChange:I,onOpenChangeComplete:O,invalid:w=!1,readOnly:N=!1,disabled:ee=!1,getResultCountLabel:ge=To,name:Re,form:he,required:oe=!1,options:te,renderOption:ye,placeholder:Pe,"aria-label":Ie,shape:Oe,size:ve,ref:Ee,...G}){let v=Do(u,te),ne=l.useRef(null),ke=l.useRef(null),re=l.useRef(null),A=l.useRef(null),[ae,ie]=l.useState(null),{items:E,itemCount:F,registerItem:He,unregisterItem:Ve,getItem:Te}=Mo(),{selectedValues:k,isSelected:we,commitSelection:le,setSelection:K}=So({value:o,defaultValue:s,onValueChange:e,multiple:a}),[H,h]=Lo({inputValue:n,defaultInputValue:f,onInputValueChange:P,inputRef:ne,defaultValue:s,setSelection:K}),[D,M]=No({open:d,defaultOpen:g,onOpenChange:I,setActiveId:ie});ko(D,A,O);let q=l.useMemo(()=>v==="manual"?null:vo([...E.keys()],R=>{let y=E.get(R);if(!y)return null;let S=v(y.text,H);return typeof S=="number"?S:null}),[v,H,E]),De=l.useCallback(R=>Eo(Array.from(R?.querySelectorAll(_)??[]),q),[q]),{setActiveIdWithReason:Me,openWithHighlight:Se}=Go({open:D,setOpen:M,autoHighlight:p,itemCount:F,items:E,contentRef:A,orderedOptions:De,onHighlightChange:x,activeId:ae,setActiveId:ie});Ao(D,b,F,ge);let Le=l.useCallback(R=>v==="manual"||Oo(v(R,H)),[v,H]),B=l.useRef(null),Ne=l.useCallback((R,y,S)=>{if(le(R,S),!a){B.current=y,h(y),M(!1);return}h("")},[le,a,h,M]),Ge=l.useCallback(()=>{k.length>0&&K([],"pointer"),B.current=null,h("")},[k.length,K,h]),Ae=l.useCallback(()=>{if(m)return;let R=a?void 0:k[0];if(R===void 0){h("");return}for(let y of E.values())if(y.value===R){h(y.text||y.value);return}h(B.current??R)},[m,a,k,E,h]);return l.useImperativeHandle(Ee,()=>Ro(re),[]),j(Io,{children:Ko(wo,{inputRef:ne,triggerRef:ke,contentRef:A,contentId:l.useId(),multiple:a,selectedValues:k,isSelected:we,selectItem:Ne,clear:Ge,inputValue:H,onInputValueChange:h,open:D,onOpenChange:M,activeId:ae,itemOrder:q,setActiveId:Me,openWithHighlight:Se,loop:c,openOn:i,reconcileDraftText:Ae,itemCount:F,registerItem:He,unregisterItem:Ve,getItem:Te,matchesFilter:Le,invalid:w,readOnly:N,disabled:ee,loading:b,allowCustomValue:m,required:oe,children:[t??j(pe,{shape:fe(Oe,G,"data-shape"),size:fe(ve,G,"data-size"),options:te??[],renderOption:ye,placeholder:Pe,ariaLabel:Ie,passThrough:G}),j(yo,{name:Re,values:k,required:oe,disabled:ee,form:he,singleValued:!a,controlRef:re})]})})};Fo.displayName="Combobox";import{useComposedRefs as qo}from"../utils/composeRefs.js";import{skdxPart as Bo}from"../utils/part.js";import{composeEventHandlers as Ce,Primitive as Wo}from"../utils/primitive.js";import{jsx as Uo}from"react/jsx-runtime";var zo=({ref:r,...t})=>{let o=C("ComboboxTrigger"),s=qo(r,o.triggerRef);return Uo(Wo.button,{type:"button",tabIndex:-1,"aria-expanded":o.open,"aria-controls":o.open?o.contentId:void 0,disabled:o.disabled,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-state":o.open?"open":"closed",...t,...Bo("combobox","trigger",t.className),ref:s,onMouseDown:Ce(t.onMouseDown,e=>e.preventDefault()),onClick:Ce(t.onClick,()=>{o.readOnly||(o.onOpenChange(!o.open),o.inputRef.current?.focus())})})};zo.displayName="ComboboxTrigger";import{skdxPart as Jo}from"../utils/part.js";import{composeEventHandlers as xe,Primitive as Xo}from"../utils/primitive.js";import{jsx as $o}from"react/jsx-runtime";var _o=({ref:r,...t})=>{let o=C("ComboboxClear"),s=o.selectedValues.length===0&&o.inputValue==="";return $o(Xo.button,{type:"button",tabIndex:-1,disabled:o.disabled||o.readOnly||s,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...t,...Jo("combobox","clear",t.className),ref:r,onMouseDown:xe(t.onMouseDown,e=>e.preventDefault()),onClick:xe(t.onClick,()=>{o.clear(),o.inputRef.current?.focus()})})};_o.displayName="ComboboxClear";export{Fo as Combobox,pe as ComboboxAnatomy,_o as ComboboxClear,W as ComboboxContent,z as ComboboxEmpty,U as ComboboxGroup,J as ComboboxGroupLabel,Qe as ComboboxGroupProvider,X as ComboboxInput,$ as ComboboxItem,Y as ComboboxPortal,wo as ComboboxProvider,zo as ComboboxTrigger,_ as OPTION_SELECTOR,To as defaultGetResultCountLabel,Z as defaultOptionsFilter,C as useComboboxContext,ue as useComboboxGroupContext};

package/dist/combobox/ComboboxAnatomy.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { ComboboxInputProps, ComboboxOption, ComboboxOptionOrGroup } from './types.cjs';
+/** Case-insensitive substring match — the default filter for a derived `options` combobox or autocomplete. */
+export declare function defaultOptionsFilter(text: string, inputValue: string): boolean;
+/**
+ * Renders Combobox anatomy from `options`: input, portal, and listbox.
+ * @internal
+ */
+export declare const ComboboxAnatomy: ({ shape, size, options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    shape?: ComboboxInputProps["shape"] | undefined;
+    size?: ComboboxInputProps["size"] | undefined;
+    options: ComboboxOptionOrGroup[];
+    renderOption?: ((option: ComboboxOption, state: {
+        selected: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/combobox/ComboboxAnatomy.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { ComboboxInputProps, ComboboxOption, ComboboxOptionOrGroup } from './types.js';
+/** Case-insensitive substring match — the default filter for a derived `options` combobox or autocomplete. */
+export declare function defaultOptionsFilter(text: string, inputValue: string): boolean;
+/**
+ * Renders Combobox anatomy from `options`: input, portal, and listbox.
+ * @internal
+ */
+export declare const ComboboxAnatomy: ({ shape, size, options, renderOption, placeholder, ariaLabel, passThrough, }: {
+    shape?: ComboboxInputProps["shape"] | undefined;
+    size?: ComboboxInputProps["size"] | undefined;
+    options: ComboboxOptionOrGroup[];
+    renderOption?: ((option: ComboboxOption, state: {
+        selected: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/combobox/ComboboxClear.d.cts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { ComboboxClearProps } from './types.cjs';
+/**
+ * Clears selection and draft text; disabled when empty or the root is `disabled`/`readOnly`.
+ *
+ * @example
+ * ```tsx
+ * <ComboboxClear aria-label="Clear selection">✕</ComboboxClear>
+ * ```
+ */
+export declare const ComboboxClear: {
+    ({ ref: forwardedRef, ...props }: ComboboxClearProps): React.ReactNode;
+    displayName: string;
+};

package/dist/combobox/ComboboxClear.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { ComboboxClearProps } from './types.js';
+/**
+ * Clears selection and draft text; disabled when empty or the root is `disabled`/`readOnly`.
+ *
+ * @example
+ * ```tsx
+ * <ComboboxClear aria-label="Clear selection">✕</ComboboxClear>
+ * ```
+ */
+export declare const ComboboxClear: {
+    ({ ref: forwardedRef, ...props }: ComboboxClearProps): React.ReactNode;
+    displayName: string;
+};