@skdx/react 0.27.0 → 0.29.0

package/dist/autocomplete/Autocomplete.d.ts

@@ -1,40 +1,24 @@
 import * as React from 'react';
-import type { AutocompleteContextValue, AutocompleteProps } from './types.js';
-/**
- * WAI-ARIA 1.2 "combobox with list autocomplete", with one deliberate
- * difference from {@link Combobox}: the committed value does not have to come
- * from the list. Type "foo", blur, and "foo" is the answer.
- */
-/** Default `getSuggestionCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
+import type { AutocompleteContextValue, AutocompleteHandle, AutocompleteProps } from './types.js';
+/** Default `getResultCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
 export declare function defaultGetSuggestionCountLabel(count: number): string;
-export declare const AutocompleteProvider: {
-    (props: AutocompleteContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
+export declare const AutocompleteProvider: React.FC<AutocompleteContextValue & {
+    children: React.ReactNode;
+}>, useAutocompleteContext: (consumerName: string) => AutocompleteContextValue;
 /**
- * Root of a free-text field with suggestions. Owns **two separate** pieces of
- * state — the draft text in the input (`inputValue`) and the committed value
- * (`value`) — plus the popup's open state, and hands all three down to every
- * other `Autocomplete*` part via context. Renders no DOM of its own.
+ * Free-text field with suggestions. Owns draft text (`inputValue`), committed
+ * value (`value`), and popup state; distributes via context. Renders no DOM itself.
  *
- * The distinction from [`Combobox`](../combobox/Combobox.md) is `allowCustomValue`,
- * which defaults to `true` here and `false` there. A combobox constrains the
- * answer to its list; an autocomplete only *suggests* one. Typing "foo" and
- * tabbing away commits "foo", whether or not "foo" was ever an option — which
- * is what a city field, a tag field, or a search box actually needs, and what
- * a closed-set select must never do.
+ * Accepts any text on blur (unlike {@link Combobox} which constrains to the list).
+ * Filter suggestions yourself with `inputValue`, or pass a `filter` predicate.
  *
- * Filtering is the consumer's job by default: you filter your data by
- * `inputValue` and render only the `AutocompleteItem`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.
+ * Keyboard: Arrow Down/Up highlight (via `aria-activedescendant`, not DOM focus).
+ * Home/End jump to first/last (only open; closed, they're text-caret keys).
+ * Enter commits highlight, Escape closes and restores committed text, Tab commits draft.
  *
- * Keyboard: Arrow Down/Up move the highlight **without moving DOM focus**
- * (real focus never leaves the input; the highlight is virtual, via
- * `aria-activedescendant`). Enter commits the highlighted suggestion. Escape
- * closes and puts the last committed text back. Tab commits the raw draft.
+ * Set `name` for submission, `form` for external form association, use
+ * {@link AutocompleteHandle} for validation. Set `loading` during fetches to silence
+ * result-count announcements.
  *
  * @example Consumer-side (default) filtering:
  * ```tsx
@@ -59,23 +43,10 @@ export declare const AutocompleteProvider: {
  *   );
  * }
  * ```
- *
- * @example Built-in filtering, open on focus:
- * ```tsx
- * <Autocomplete openOnFocus filter={(text, input) => text.toLowerCase().startsWith(input.toLowerCase())}>
- *   <AutocompleteInput aria-label="City" />
- *   <AutocompleteTrigger aria-label="Show suggestions">▾</AutocompleteTrigger>
- *   <AutocompletePortal>
- *     <AutocompleteContent>
- *       <AutocompleteList aria-label="Cities">
- *         {CITIES.map((city) => <AutocompleteItem value={city} key={city}>{city}</AutocompleteItem>)}
- *       </AutocompleteList>
- *     </AutocompleteContent>
- *   </AutocompletePortal>
- * </Autocomplete>
- * ```
  */
-export declare function Autocomplete({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, filter, disabled, readOnly, invalid, getSuggestionCountLabel, }: AutocompleteProps): React.JSX.Element;
-export declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare const Autocomplete: {
+    ({ children, value: valueProp, defaultValue, onValueChange, inputValue: inputValueProp, defaultInputValue, onInputValueChange, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, allowCustomValue, openOnFocus, autoHighlight, loop, filter: filterProp, disabled, readOnly, invalid, loading, name, form, getResultCountLabel, options, renderOption, placeholder, clearable, "aria-label": ariaLabel, ref: forwardedRef, ...rest }: Omit<AutocompleteProps, "ref"> & {
+        ref?: React.Ref<AutocompleteHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/Autocomplete.js

@@ -1 +1,2 @@
-import*as r from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{announce as ie}from"../utils/liveAnnouncer.js";import{PopperRoot as me}from"../utils/popper.js";import{useControllableState as T}from"../utils/useControllableState.js";import{useOpenChangeComplete as le}from"../utils/useOpenChangeComplete.js";import{useOptionCollection as ae}from"../utils/useOptionCollection.js";import{jsx as M}from"react/jsx-runtime";function se(t){return`${t} suggestion${t===1?"":"s"} available`}var[ue,l]=pe("Autocomplete");function ce({children:t,value:n,defaultValue:e="",onValueChange:p,inputValue:a,defaultInputValue:o,onInputValueChange:u,open:P,defaultOpen:A=!1,onOpenChange:y,onOpenChangeComplete:i,allowCustomValue:c=!0,openOnFocus:m=!1,filter:f,disabled:C=!1,readOnly:x=!1,invalid:Y=!1,getSuggestionCountLabel:H=se}){let Z=r.useRef(null),_=r.useRef(null),D=r.useRef(null),j=r.useId(),[w="",b]=T({prop:n,defaultProp:e,onChange:p}),[g="",R]=T({prop:a,defaultProp:o??e,onChange:u}),[h=!1,s]=T({prop:P,defaultProp:A,onChange:y});le(h,D,i);let d=ae({open:h,setOpen:s,contentRef:D}),{itemCount:O}=d,E=r.useRef(g);r.useEffect(()=>{h&&ie(H(O))},[h,O,H]);let ee=r.useCallback((v,L)=>{C||x||(b(v),R(L),E.current=L,s(!1))},[C,x,b,R,s]),te=r.useCallback(()=>{if(!(C||x)){if(!c){R(E.current),s(!1);return}b(g),E.current=g,s(!1)}},[C,x,c,g,b,R,s]),oe=r.useCallback(()=>{R(E.current),s(!1)},[R,s]),ne=r.useCallback(v=>f===void 0||f(v,g),[f,g]),re=r.useCallback(v=>v!==""&&v===w,[w]);return M(me,{children:M(ue,{inputRef:Z,triggerRef:_,contentRef:D,listId:j,value:w,isSelected:re,inputValue:g,onInputValueChange:R,open:h,onOpenChange:s,activeId:d.activeId,setActiveId:d.setActiveId,moveActive:d.moveActive,openWithHighlight:d.openWithHighlight,itemCount:O,registerItem:d.registerItem,unregisterItem:d.unregisterItem,getItem:d.getItem,matchesFilter:ne,commitItem:ee,commitInputValue:te,revert:oe,allowCustomValue:c,openOnFocus:m,disabled:C,readOnly:x,invalid:Y,children:t})})}ce.displayName="Autocomplete";import*as V from"react";import{useComposedRefs as fe}from"../utils/composeRefs.js";import{skdxPart as de}from"../utils/part.js";import{PopperAnchor as Ae}from"../utils/popper.js";import{composeEventHandlers as k,Primitive as ge}from"../utils/primitive.js";import{jsx as N}from"react/jsx-runtime";var F=V.forwardRef((t,n)=>{let e=l("AutocompleteInput"),p=fe(n,e.inputRef),a=()=>{let o=e.activeId?e.getItem(e.activeId):void 0;return o?(e.commitItem(o.value,o.text||o.value),!0):!1};return N(Ae,{asChild:!0,children:N(ge.input,{type:"text",role:"combobox","aria-expanded":e.open,"aria-controls":e.listId,"aria-autocomplete":"list","aria-activedescendant":e.activeId??void 0,autoComplete:"off",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-disabled":e.disabled?"":void 0,"data-state":e.open?"open":"closed",...t,...de("autocomplete","input",t.className),ref:p,value:e.inputValue,onChange:k(t.onChange,o=>{e.onInputValueChange(o.target.value),e.open||e.onOpenChange(!0)}),onFocus:k(t.onFocus,()=>{e.openOnFocus&&!e.readOnly&&!e.open&&e.onOpenChange(!0)}),onBlur:k(t.onBlur,()=>{e.commitInputValue()}),onKeyDown:k(t.onKeyDown,o=>{o.key==="ArrowDown"?(o.preventDefault(),e.open?e.moveActive(1):e.openWithHighlight("first")):o.key==="ArrowUp"?(o.preventDefault(),e.open?e.moveActive(-1):e.openWithHighlight("last")):o.key==="Enter"?a()?o.preventDefault():e.allowCustomValue&&e.inputValue!==""&&(o.preventDefault(),e.commitInputValue()):o.key==="Escape"?e.open&&!e.contentRef.current&&(o.preventDefault(),e.revert()):o.key==="Tab"&&e.commitInputValue()})})})});F.displayName="AutocompleteInput";import*as B from"react";import{useComposedRefs as Re}from"../utils/composeRefs.js";import{skdxPart as Pe}from"../utils/part.js";import{composeEventHandlers as S,Primitive as ve}from"../utils/primitive.js";import{jsx as Ie}from"react/jsx-runtime";var W=B.forwardRef((t,n)=>{let e=l("AutocompleteTrigger"),p=Re(n,e.triggerRef);return Ie(ve.button,{type:"button",tabIndex:-1,"aria-expanded":e.open,"aria-controls":e.listId,disabled:e.disabled,"data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-state":e.open?"open":"closed",...t,...Pe("autocomplete","trigger",t.className),ref:p,onMouseDown:S(t.onMouseDown,a=>a.preventDefault()),onClick:S(t.onClick,()=>{e.readOnly||(e.onOpenChange(!e.open),e.inputRef.current?.focus())})})});W.displayName="AutocompleteTrigger";import{Portal as ye}from"../utils/portal.js";import{jsx as Ce}from"react/jsx-runtime";var K=({forceMount:t,children:n,...e})=>{let p=l("AutocompletePortal");return t||p.open?Ce(ye,{...e,children:n}):null};K.displayName="AutocompletePortal";import*as $ from"react";import{useComposedRefs as xe}from"../utils/composeRefs.js";import{skdxPart as he}from"../utils/part.js";import{PopperContent as be}from"../utils/popper.js";import{composeEventHandlers as Ee}from"../utils/primitive.js";import{useDismiss as ke}from"../utils/useDismiss.js";import{jsx as De}from"react/jsx-runtime";var G=$.forwardRef(({forceMount:t,side:n="bottom",align:e="start",sideOffset:p=4,onEscapeKeyDown:a,onPointerDownOutside:o,onFocusOutside:u,onInteractOutside:P,...A},y)=>{let i=l("AutocompleteContent"),c=xe(y,i.contentRef);return ke({enabled:i.open,onEscapeKeyDown:m=>{a?.(m),m.defaultPrevented||i.revert()},onInteractOutside:P,onPointerDownOutside:m=>{o?.(m),m.defaultPrevented||i.onOpenChange(!1)},onFocusOutside:m=>{u?.(m),m.defaultPrevented||i.onOpenChange(!1)}},[i.contentRef,i.inputRef,i.triggerRef]),!t&&!i.open?null:De(be,{component:"autocomplete","data-state":i.open?"open":"closed",side:n,align:e,sideOffset:p,...A,...he("autocomplete","content",A.className),ref:c,onMouseDown:Ee(A.onMouseDown,m=>m.preventDefault())})});G.displayName="AutocompleteContent";import*as U from"react";import{skdxPart as we}from"../utils/part.js";import{Primitive as Oe}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var q=U.forwardRef((t,n)=>{let e=l("AutocompleteList");return Te(Oe.div,{role:"listbox",id:e.listId,...t,...we("autocomplete","list",t.className),ref:n})});q.displayName="AutocompleteList";import*as I from"react";import{useComposedRefs as He}from"../utils/composeRefs.js";import{skdxPart as Le}from"../utils/part.js";import{composeEventHandlers as z,Primitive as Me}from"../utils/primitive.js";import{useOptionEntry as Ne}from"../utils/useOptionCollection.js";import{jsx as Ve}from"react/jsx-runtime";var J=I.forwardRef(({value:t,disabled:n,textValue:e,...p},a)=>{let o=l("AutocompleteItem"),u=I.useId(),P=I.useRef(null),A=He(a,P),{text:y,visible:i}=Ne({id:u,value:t,textValue:e,itemRef:P,matchesFilter:o.matchesFilter,registerItem:o.registerItem,unregisterItem:o.unregisterItem});if(!i)return null;let c=o.isSelected(t),m=o.activeId===u,f=n||o.disabled||o.readOnly;return Ve(Me.div,{role:"option",id:u,"data-value":t,"aria-selected":c,"aria-disabled":f?!0:void 0,"data-state":c?"checked":"unchecked","data-highlighted":m?"":void 0,"data-disabled":f?"":void 0,...p,...Le("autocomplete","item",p.className),ref:A,onClick:z(p.onClick,()=>{f||(o.commitItem(t,y??t),o.inputRef.current?.focus())}),onPointerEnter:z(p.onPointerEnter,()=>{f||o.setActiveId(u)})})});J.displayName="AutocompleteItem";import*as Q from"react";import{skdxPart as Fe}from"../utils/part.js";import{Primitive as Se}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var X=Q.forwardRef((t,n)=>l("AutocompleteEmpty").itemCount===0?Be(Se.div,{role:"presentation",...t,...Fe("autocomplete","empty",t.className),ref:n}):null);X.displayName="AutocompleteEmpty";export{ce as Autocomplete,G as AutocompleteContent,X as AutocompleteEmpty,F as AutocompleteInput,J as AutocompleteItem,q as AutocompleteList,K as AutocompletePortal,ue as AutocompleteProvider,W as AutocompleteTrigger,se as defaultGetSuggestionCountLabel,l as useAutocompleteContext};
+'use client';
+import*as r from"react";import{createSafeContext as yt}from"../utils/createContext.js";import{formValidityHandle as Rt}from"../utils/formControl.js";import{announce as gt}from"../utils/liveAnnouncer.js";import{PopperRoot as Ct}from"../utils/popper.js";import{filterKeeps as bt,sortByOrder as vt}from"../utils/scoredFilter.js";import{useControllableState as Z}from"../utils/useControllableState.js";import{useOpenChangeComplete as Pt}from"../utils/useOpenChangeComplete.js";import{OPTION_SELECTOR as It,useOptionCollection as ht}from"../utils/useOptionCollection.js";import{Glyph as ft}from"../utils/Glyph.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as ne,Primitive as De}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";var B=({ref:o,...e})=>{let t=m("AutocompleteClear"),i=t.value===""&&t.inputValue==="";return Te(De.button,{type:"button",tabIndex:-1,disabled:t.disabled||t.readOnly||i,"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...e,...Ge("autocomplete","clear",e.className),ref:o,onMouseDown:ne(e.onMouseDown,l=>l.preventDefault()),onClick:ne(e.onClick,()=>{t.clear(),t.inputRef.current?.focus()})})};B.displayName="AutocompleteClear";import{useComposedRefs as Le}from"../utils/composeRefs.js";import{skdxPart as He}from"../utils/part.js";import{PopperContent as we}from"../utils/popper.js";import{composeEventHandlers as Fe}from"../utils/primitive.js";import{useDismiss as Me}from"../utils/useDismiss.js";import{jsx as Se}from"react/jsx-runtime";var W=({forceMount:o,side:e="bottom",align:t="start",sideOffset:i=4,onEscapeKeyDown:l,onPointerDownOutside:a,onFocusOutside:c,onInteractOutside:s,ref:d,...n})=>{let u=m("AutocompleteContent"),y=Le(d,u.contentRef);return Me({enabled:u.open,onEscapeKeyDown:p=>{l?.(p),p.defaultPrevented||u.revert()},onInteractOutside:s,onPointerDownOutside:p=>{a?.(p),p.defaultPrevented||u.onOpenChange(!1)},onFocusOutside:p=>{c?.(p),p.defaultPrevented||u.onOpenChange(!1)}},[u.contentRef,u.inputRef,u.triggerRef]),!o&&!u.open?null:Se(we,{component:"autocomplete","aria-busy":u.loading?!0:void 0,"data-loading":u.loading?"":void 0,"data-state":u.open?"open":"closed",side:e,align:t,sideOffset:i,...n,...He("autocomplete","content",n.className),ref:y,onMouseDown:Fe(n.onMouseDown,p=>p.preventDefault())})};W.displayName="AutocompleteContent";import{skdxPart as Ke}from"../utils/part.js";import{Primitive as Be}from"../utils/primitive.js";import{jsx as We}from"react/jsx-runtime";var J=({ref:o,...e})=>m("AutocompleteEmpty").itemCount===0?We(Be.div,{role:"presentation",...e,...Ke("autocomplete","empty",e.className),ref:o}):null;J.displayName="AutocompleteEmpty";import*as ae from"react";import{createSafeContext as Je}from"../utils/createContext.js";import{skdxPart as Xe}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";var[qe,ue]=Je("AutocompleteGroup"),X=({ref:o,...e})=>{let t=ae.useId();return le(qe,{labelId:t,children:le(_e.div,{role:"group","aria-labelledby":t,...e,...Xe("autocomplete","group",e.className),ref:o})})};X.displayName="AutocompleteGroup";import{skdxPart as Ue}from"../utils/part.js";import{Primitive as $e}from"../utils/primitive.js";import{jsx as ze}from"react/jsx-runtime";var _=({ref:o,...e})=>{let t=ue("AutocompleteGroupLabel");return ze($e.div,{id:t.labelId,...e,...Ue("autocomplete","label",e.className),ref:o})};_.displayName="AutocompleteGroupLabel";import{useComposedRefs as Qe}from"../utils/composeRefs.js";import{skdxPart as Ye}from"../utils/part.js";import{PopperAnchor as Ze}from"../utils/popper.js";import{composeEventHandlers as L,Primitive as je}from"../utils/primitive.js";import{jsx as pe}from"react/jsx-runtime";function me(o){let e=o.activeId?o.getItem(o.activeId):void 0;return e?(o.commitItem(e.value,e.text||e.value,"keyboard"),!0):!1}function et(o,e){return e.altKey&&e.key==="ArrowDown"?(e.preventDefault(),o.open||o.onOpenChange(!0),!0):e.altKey&&e.key==="ArrowUp"?(e.preventDefault(),!me(o)&&o.open&&o.onOpenChange(!1),!0):!1}function tt(o,e){return e.key==="ArrowDown"?(e.preventDefault(),o.open?o.moveActive(1):o.openWithHighlight("first"),!0):e.key==="ArrowUp"?(e.preventDefault(),o.open?o.moveActive(-1):o.openWithHighlight("last"),!0):e.key==="Home"||e.key==="End"?(o.open&&(e.preventDefault(),o.moveActiveToEdge(e.key==="Home"?"first":"last")),!0):!1}function ot(o,e){e.key==="Enter"?me(o)?e.preventDefault():o.allowCustomValue&&o.inputValue!==""?(e.preventDefault(),o.commitInputValue("keyboard")):o.open&&o.onOpenChange(!1):e.key==="Escape"?o.open&&!o.contentRef.current&&(e.preventDefault(),o.revert()):e.key==="Tab"&&o.commitInputValue("keyboard")}var q=({ref:o,...e})=>{let t=m("AutocompleteInput"),i=Qe(o,t.inputRef);return pe(Ze,{asChild:!0,children:pe(je.input,{type:"text",role:"combobox","aria-expanded":t.open,"aria-controls":t.listId,"aria-autocomplete":"list","aria-activedescendant":t.activeId??void 0,autoComplete:"off",name:t.name,form:t.form,disabled:t.disabled,readOnly:t.readOnly,"aria-invalid":t.invalid?!0:void 0,"aria-readonly":t.readOnly?!0:void 0,"aria-busy":t.loading?!0:void 0,"data-invalid":t.invalid?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-loading":t.loading?"":void 0,"data-disabled":t.disabled?"":void 0,"data-state":t.open?"open":"closed",...e,...Ye("autocomplete","input",e.className),ref:i,value:t.inputValue,onChange:L(e.onChange,l=>{t.onInputValueChange(l.target.value),t.open||t.onOpenChange(!0)}),onFocus:L(e.onFocus,()=>{t.openOnFocus&&!t.readOnly&&!t.open&&t.onOpenChange(!0)}),onBlur:L(e.onBlur,()=>{t.commitInputValue("pointer")}),onKeyDown:L(e.onKeyDown,l=>{t.disabled||et(t,l)||tt(t,l)||ot(t,l)})})})};q.displayName="AutocompleteInput";import*as H from"react";import{useComposedRefs as rt}from"../utils/composeRefs.js";import{skdxPart as nt}from"../utils/part.js";import{composeEventHandlers as ie,Primitive as lt}from"../utils/primitive.js";import{useOptionEntry as at}from"../utils/useOptionCollection.js";import{jsx as ut}from"react/jsx-runtime";var U=({value:o,disabled:e,textValue:t,ref:i,...l})=>{let a=m("AutocompleteItem"),c=H.useId(),s=H.useRef(null),d=rt(i,s),{text:n,visible:u}=at({id:c,value:o,textValue:t,itemRef:s,matchesFilter:a.matchesFilter,registerItem:a.registerItem,unregisterItem:a.unregisterItem});if(!u)return null;let y=a.isSelected(o),p=a.activeId===c,g=e||a.disabled||a.readOnly,I=a.itemOrder?.get(c);return ut(lt.div,{role:"option",id:c,"data-value":o,"aria-selected":y,"aria-disabled":g?!0:void 0,"data-state":y?"checked":"unchecked","data-highlighted":p?"":void 0,"data-disabled":g?"":void 0,...l,...nt("autocomplete","item",l.className),ref:d,onClick:ie(l.onClick,()=>{g||(a.commitItem(o,n??o,"pointer"),a.inputRef.current?.focus())}),onPointerEnter:ie(l.onPointerEnter,()=>{g||a.setActiveId(c)}),style:I!==void 0?{order:I,...l.style}:l.style})};U.displayName="AutocompleteItem";import{skdxPart as pt}from"../utils/part.js";import{Primitive as mt}from"../utils/primitive.js";import{jsx as it}from"react/jsx-runtime";var $=({ref:o,...e})=>{let t=m("AutocompleteList");return it(mt.div,{role:"listbox",id:t.listId,...e,...pt("autocomplete","list",e.className),ref:o})};$.displayName="AutocompleteList";import{Portal as ct}from"../utils/portal.js";import{jsx as st}from"react/jsx-runtime";var z=({forceMount:o,children:e,...t})=>{let i=m("AutocompletePortal");return o||i.open?st(ct,{...t,children:e}):null};z.displayName="AutocompletePortal";import{defaultOptionsFilter as Q}from"../combobox/Combobox.js";import{Fragment as At,jsx as P,jsxs as w}from"react/jsx-runtime";var dt=o=>"options"in o,ce=({options:o,renderOption:e,placeholder:t,ariaLabel:i,clearable:l=!1,passThrough:a})=>{let c=m("Autocomplete"),s=i??t,d=n=>P(U,{value:n.value,disabled:n.disabled,textValue:n.label,children:e?e(n,{selected:c.isSelected(n.value)}):n.label??n.value},n.value);return w(At,{children:[w("div",{className:"skdx-autocomplete__field","data-clearable":l?"":void 0,children:[P(q,{...a,"aria-label":s,placeholder:t}),l?P(B,{"aria-label":"Clear",children:P(ft,{name:"close"})}):null]}),P(z,{children:w(W,{children:[P($,{"aria-label":s,children:o.map(n=>dt(n)?w(X,{children:[P(_,{children:n.label}),n.options.map(d)]},n.label):d(n))}),P(J,{children:"No suggestions"})]})})]})};import{jsx as Y}from"react/jsx-runtime";function Ot(o){return`${o} suggestion${o===1?"":"s"} available`}var[xt,m]=yt("Autocomplete");function Vt(o,e){return o??(e?Q:void 0)}function kt({value:o,defaultValue:e="",onValueChange:t,inputValue:i,defaultInputValue:l,onInputValueChange:a}){let c=r.useRef("programmatic"),s=r.useRef(!1),d=r.useRef(null),[n="",u]=Z({prop:o,defaultProp:e,onChange:N=>t?.({value:N,previousValue:d.current,reason:c.current,created:s.current})}),y=r.useRef(n);r.useInsertionEffect(()=>{y.current=n});let p=r.useCallback((N,h,O)=>{c.current=h,s.current=O,d.current=y.current===""?null:y.current,u(N)},[u]),[g="",I]=Z({prop:i,defaultProp:l??e,onChange:a}),F=r.useRef(g);return{value:n,setValue:p,inputValue:g,setInputValue:I,committedTextRef:F}}var Et=function({children:e,value:t,defaultValue:i,onValueChange:l,inputValue:a,defaultInputValue:c,onInputValueChange:s,open:d,defaultOpen:n=!1,onOpenChange:u,onOpenChangeComplete:y,allowCustomValue:p=!0,openOnFocus:g=!1,autoHighlight:I=!1,loop:F=!0,filter:N,disabled:h=!1,readOnly:O=!1,invalid:fe=!1,loading:M=!1,name:de,form:Ae,getResultCountLabel:j=Ot,options:ee,renderOption:ye,placeholder:Re,clearable:ge,"aria-label":Ce,ref:be,...ve}){let k=Vt(N,ee),te=r.useRef(null),Pe=r.useRef(null),G=r.useRef(null),Ie=r.useId(),{value:S,setValue:E,inputValue:v,setInputValue:C,committedTextRef:b}=kt({value:t,defaultValue:i,onValueChange:l,inputValue:a,defaultInputValue:c,onInputValueChange:s}),[x=!1,A]=Z({prop:d,defaultProp:n,onChange:u});Pt(x,G,y);let he=r.useCallback(f=>typeof k!="function"||bt(k(f,v)),[k,v]),Oe=r.useCallback(f=>{if(typeof k!="function")return null;let V=k(f.text,v);return typeof V=="number"?V:null},[k,v]),R=ht({open:x,setOpen:A,contentRef:G,loop:F,scoreItem:Oe}),{itemCount:D,itemOrder:K}=R,{activeId:oe,setActiveId:re}=R;r.useEffect(()=>{if(!I||!x||oe!==null)return;let f=requestAnimationFrame(()=>{let V=Array.from(G.current?.querySelectorAll(It)??[]),T=vt(V,K)[0];T&&re(T.id)});return()=>cancelAnimationFrame(f)},[I,x,oe,D,re,K]),r.useEffect(()=>{!x||M||gt(j(D))},[x,M,D,j]),r.useImperativeHandle(be,()=>Rt(te),[]);let xe=r.useCallback((f,V,T)=>{h||O||(E(f,T,!1),C(V),b.current=V,A(!1))},[h,O,E,C,A,b]),Ve=r.useCallback(f=>{if(!(h||O)){if(!p){C(b.current),A(!1);return}E(v,f,!0),b.current=v,A(!1)}},[h,O,p,v,E,C,A,b]),ke=r.useCallback(()=>{E("","pointer",!0),C(""),b.current="",A(!1)},[E,C,A,b]),Ee=r.useCallback(()=>{C(b.current),A(!1)},[C,A,b]),Ne=r.useCallback(f=>f!==""&&f===S,[S]);return Y(Ct,{children:Y(xt,{inputRef:te,triggerRef:Pe,contentRef:G,listId:Ie,value:S,isSelected:Ne,inputValue:v,onInputValueChange:C,open:x,onOpenChange:A,activeId:R.activeId,itemOrder:K,setActiveId:R.setActiveId,moveActive:R.moveActive,moveActiveToEdge:R.moveActiveToEdge,openWithHighlight:R.openWithHighlight,itemCount:D,registerItem:R.registerItem,unregisterItem:R.unregisterItem,getItem:R.getItem,matchesFilter:he,commitItem:xe,commitInputValue:Ve,revert:Ee,clear:ke,allowCustomValue:p,openOnFocus:g,disabled:h,readOnly:O,invalid:fe,loading:M,name:de,form:Ae,children:e??Y(ce,{options:ee??[],renderOption:ye,placeholder:Re,ariaLabel:Ce,clearable:ge,passThrough:ve})})})};Et.displayName="Autocomplete";import{useComposedRefs as Nt}from"../utils/composeRefs.js";import{skdxPart as Gt}from"../utils/part.js";import{composeEventHandlers as se,Primitive as Dt}from"../utils/primitive.js";import{jsx as Lt}from"react/jsx-runtime";var Tt=({ref:o,...e})=>{let t=m("AutocompleteTrigger"),i=Nt(o,t.triggerRef);return Lt(Dt.button,{type:"button",tabIndex:-1,"aria-expanded":t.open,"aria-controls":t.listId,disabled:t.disabled,"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-state":t.open?"open":"closed",...e,...Gt("autocomplete","trigger",e.className),ref:i,onMouseDown:se(e.onMouseDown,l=>l.preventDefault()),onClick:se(e.onClick,()=>{t.readOnly||(t.onOpenChange(!t.open),t.inputRef.current?.focus())})})};Tt.displayName="AutocompleteTrigger";export{Et as Autocomplete,B as AutocompleteClear,W as AutocompleteContent,J as AutocompleteEmpty,X as AutocompleteGroup,_ as AutocompleteGroupLabel,qe as AutocompleteGroupProvider,q as AutocompleteInput,U as AutocompleteItem,$ as AutocompleteList,z as AutocompletePortal,xt as AutocompleteProvider,Tt as AutocompleteTrigger,Ot as defaultGetSuggestionCountLabel,Q as defaultOptionsFilter,m as useAutocompleteContext,ue as useAutocompleteGroupContext};

package/dist/autocomplete/AutocompleteAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { AutocompleteOption, AutocompleteOptionOrGroup } from './types.cjs';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.cjs';
+/** @internal Renders Autocomplete anatomy from `options`: input, portal, and listbox. */
+export declare const AutocompleteAnatomy: ({ options, renderOption, placeholder, ariaLabel, clearable, passThrough, }: {
+    options: AutocompleteOptionOrGroup[];
+    renderOption?: ((option: AutocompleteOption, state: {
+        selected: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    clearable?: boolean | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/autocomplete/AutocompleteAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { AutocompleteOption, AutocompleteOptionOrGroup } from './types.js';
+export { defaultOptionsFilter } from '../combobox/ComboboxAnatomy.js';
+/** @internal Renders Autocomplete anatomy from `options`: input, portal, and listbox. */
+export declare const AutocompleteAnatomy: ({ options, renderOption, placeholder, ariaLabel, clearable, passThrough, }: {
+    options: AutocompleteOptionOrGroup[];
+    renderOption?: ((option: AutocompleteOption, state: {
+        selected: boolean;
+    }) => React.ReactNode) | undefined;
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    clearable?: boolean | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/autocomplete/AutocompleteClear.d.cts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { AutocompleteClearProps } from './types.cjs';
+/**
+ * Optional button that empties an {@link Autocomplete} in one action — the
+ * draft text *and* the committed value — and hands focus back to
+ * {@link AutocompleteInput}.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly`.
+ *
+ * `tabIndex={-1}`: the input is the widget, and a second tab stop per
+ * affordance makes a form of autocompletes expensive to skip. Give it an
+ * `aria-label` — a "✕" glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteClear aria-label="Clear">✕</AutocompleteClear>
+ * ```
+ */
+export declare const AutocompleteClear: {
+    ({ ref: forwardedRef, ...props }: AutocompleteClearProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteClear.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { AutocompleteClearProps } from './types.js';
+/**
+ * Optional button that empties an {@link Autocomplete} in one action — the
+ * draft text *and* the committed value — and hands focus back to
+ * {@link AutocompleteInput}.
+ *
+ * Disabled while there is nothing to clear, and while the root is `disabled`
+ * or `readOnly`.
+ *
+ * `tabIndex={-1}`: the input is the widget, and a second tab stop per
+ * affordance makes a form of autocompletes expensive to skip. Give it an
+ * `aria-label` — a "✕" glyph is not an accessible name.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteClear aria-label="Clear">✕</AutocompleteClear>
+ * ```
+ */
+export declare const AutocompleteClear: {
+    ({ ref: forwardedRef, ...props }: AutocompleteClearProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteContent.d.cts

@@ -1,29 +1,19 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteContentProps } from './types.cjs';
 /**
  * The popup shell of an {@link Autocomplete}, positioned against the input via
- * floating-ui (see {@link AutocompleteContentProps}). Renders a plain `<div>`
- * with `data-state`, `data-side` and `data-align`, and — like every popper in
- * this package — writes the four measurement custom properties
- * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
- * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
- * onto itself after each reposition, so the panel can be sized and animated
- * from CSS alone rather than measured again in JavaScript.
+ * floating-ui. Renders a plain `<div>` with `data-state`/`data-side`/`data-align`,
+ * and publishes `--skdx-autocomplete-available-width`/`-available-height`/`-trigger-width`/`-transform-origin`
+ * after each reposition. Carries `aria-busy`/`data-loading` while the root is `loading`.
  *
- * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
- * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
- * inside the popup without becoming a bogus `role="option"`-less child of a
- * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
- * focus must never leave `AutocompleteInput`, or the blur would commit and
- * close before the click landed. Unmounts when closed unless `forceMount`.
+ * Carries no ARIA role — the listbox is {@link AutocompleteList}. Prevents
+ * `mousedown` from stealing focus off the input. Unmounts when closed unless
+ * `forceMount`.
  *
- * Escape reverts the draft text to the last committed value and closes; an
- * outside interaction — pointer-down outside or focus moving outside — closes
- * too, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
- * before them and with the same event, to `onInteractOutside`. Any of those
- * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open, and
- * on Escape leaves the draft text alone as well. The input counts as inside:
- * clicking or tabbing back into it is not an outside interaction.
+ * Escape reverts the draft text and closes; an outside pointer-down or focus
+ * move closes too, each reported to its handler and, first, to
+ * `onInteractOutside`. Any of those calling `event.preventDefault()` keeps it
+ * open. The input counts as inside.
  *
  * @example
  * ```tsx
@@ -34,4 +24,7 @@ import type { AutocompleteContentProps } from './types.cjs';
  * </AutocompleteContent>
  * ```
  */
-export declare const AutocompleteContent: React.ForwardRefExoticComponent<Omit<AutocompleteContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteContent: {
+    ({ forceMount, side, align, sideOffset, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref: forwardedRef, ...props }: AutocompleteContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteContent.d.ts

@@ -1,29 +1,19 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteContentProps } from './types.js';
 /**
  * The popup shell of an {@link Autocomplete}, positioned against the input via
- * floating-ui (see {@link AutocompleteContentProps}). Renders a plain `<div>`
- * with `data-state`, `data-side` and `data-align`, and — like every popper in
- * this package — writes the four measurement custom properties
- * `--skdx-autocomplete-available-width`, `--skdx-autocomplete-available-height`,
- * `--skdx-autocomplete-trigger-width` and `--skdx-autocomplete-transform-origin`
- * onto itself after each reposition, so the panel can be sized and animated
- * from CSS alone rather than measured again in JavaScript.
+ * floating-ui. Renders a plain `<div>` with `data-state`/`data-side`/`data-align`,
+ * and publishes `--skdx-autocomplete-available-width`/`-available-height`/`-trigger-width`/`-transform-origin`
+ * after each reposition. Carries `aria-busy`/`data-loading` while the root is `loading`.
  *
- * It carries **no ARIA role**: the listbox is {@link AutocompleteList}, one
- * level in, so a header, a footer or an {@link AutocompleteEmpty} can sit
- * inside the popup without becoming a bogus `role="option"`-less child of a
- * listbox. Prevents `mousedown` from stealing focus off the input — real DOM
- * focus must never leave `AutocompleteInput`, or the blur would commit and
- * close before the click landed. Unmounts when closed unless `forceMount`.
+ * Carries no ARIA role — the listbox is {@link AutocompleteList}. Prevents
+ * `mousedown` from stealing focus off the input. Unmounts when closed unless
+ * `forceMount`.
  *
- * Escape reverts the draft text to the last committed value and closes; an
- * outside interaction — pointer-down outside or focus moving outside — closes
- * too, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
- * before them and with the same event, to `onInteractOutside`. Any of those
- * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open, and
- * on Escape leaves the draft text alone as well. The input counts as inside:
- * clicking or tabbing back into it is not an outside interaction.
+ * Escape reverts the draft text and closes; an outside pointer-down or focus
+ * move closes too, each reported to its handler and, first, to
+ * `onInteractOutside`. Any of those calling `event.preventDefault()` keeps it
+ * open. The input counts as inside.
  *
  * @example
  * ```tsx
@@ -34,4 +24,7 @@ import type { AutocompleteContentProps } from './types.js';
  * </AutocompleteContent>
  * ```
  */
-export declare const AutocompleteContent: React.ForwardRefExoticComponent<Omit<AutocompleteContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteContent: {
+    ({ forceMount, side, align, sideOffset, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref: forwardedRef, ...props }: AutocompleteContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteEmpty.d.cts

@@ -1,19 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteEmptyProps } from './types.cjs';
 /**
- * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
- * are currently rendered — because the consumer's filtered results are empty,
- * or because the root's `filter` predicate rejected every one. Renders a
- * `<div role="presentation">`; renders nothing while at least one suggestion
- * is registered.
+ * Fallback when no suggestions are rendered. Word as "no matches", not "invalid" — with `allowCustomValue`, empty list means user's text is accepted.
  *
- * Word it as "no matches", not "invalid": with the default
- * `allowCustomValue`, an empty list does **not** mean the user's text is
- * rejected — it means nothing was suggested and their own text is the answer.
- *
- * Belongs inside {@link AutocompleteContent} and *outside*
- * {@link AutocompleteList} — a non-option child of a listbox is a broken
- * listbox.
+ * Must be inside `AutocompleteContent` but outside `AutocompleteList` (non-option children break listbox).
  *
  * @example
  * ```tsx
@@ -23,4 +13,7 @@ import type { AutocompleteEmptyProps } from './types.cjs';
  * </AutocompleteContent>
  * ```
  */
-export declare const AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteEmpty: {
+    ({ ref: forwardedRef, ...props }: AutocompleteEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteEmpty.d.ts

@@ -1,19 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteEmptyProps } from './types.js';
 /**
- * Fallback shown in place of the suggestion list when no `AutocompleteItem`s
- * are currently rendered — because the consumer's filtered results are empty,
- * or because the root's `filter` predicate rejected every one. Renders a
- * `<div role="presentation">`; renders nothing while at least one suggestion
- * is registered.
+ * Fallback when no suggestions are rendered. Word as "no matches", not "invalid" — with `allowCustomValue`, empty list means user's text is accepted.
  *
- * Word it as "no matches", not "invalid": with the default
- * `allowCustomValue`, an empty list does **not** mean the user's text is
- * rejected — it means nothing was suggested and their own text is the answer.
- *
- * Belongs inside {@link AutocompleteContent} and *outside*
- * {@link AutocompleteList} — a non-option child of a listbox is a broken
- * listbox.
+ * Must be inside `AutocompleteContent` but outside `AutocompleteList` (non-option children break listbox).
  *
  * @example
  * ```tsx
@@ -23,4 +13,7 @@ import type { AutocompleteEmptyProps } from './types.js';
  * </AutocompleteContent>
  * ```
  */
-export declare const AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteEmpty: {
+    ({ ref: forwardedRef, ...props }: AutocompleteEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteGroup.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AutocompleteGroupContextValue, AutocompleteGroupProps } from './types.cjs';
+export declare const AutocompleteGroupProvider: React.FC<AutocompleteGroupContextValue & {
+    children: React.ReactNode;
+}>, useAutocompleteGroupContext: (consumerName: string) => AutocompleteGroupContextValue;
+/**
+ * Groups related {@link AutocompleteItem}s under an
+ * {@link AutocompleteGroupLabel}. Renders `<div role="group">` labeled via
+ * `aria-labelledby`.
+ *
+ * Purely structural: doesn't register suggestions or affect highlighting.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroup: {
+    ({ ref: forwardedRef, ...props }: AutocompleteGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteGroup.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AutocompleteGroupContextValue, AutocompleteGroupProps } from './types.js';
+export declare const AutocompleteGroupProvider: React.FC<AutocompleteGroupContextValue & {
+    children: React.ReactNode;
+}>, useAutocompleteGroupContext: (consumerName: string) => AutocompleteGroupContextValue;
+/**
+ * Groups related {@link AutocompleteItem}s under an
+ * {@link AutocompleteGroupLabel}. Renders `<div role="group">` labeled via
+ * `aria-labelledby`.
+ *
+ * Purely structural: doesn't register suggestions or affect highlighting.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroup: {
+    ({ ref: forwardedRef, ...props }: AutocompleteGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteGroupLabel.d.cts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { AutocompleteGroupLabelProps } from './types.cjs';
+/**
+ * The heading naming an {@link AutocompleteGroup}, wired via `aria-labelledby`.
+ * Must be rendered inside an `AutocompleteGroup`.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroupLabel: {
+    ({ ref: forwardedRef, ...props }: AutocompleteGroupLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteGroupLabel.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { AutocompleteGroupLabelProps } from './types.js';
+/**
+ * The heading naming an {@link AutocompleteGroup}, wired via `aria-labelledby`.
+ * Must be rendered inside an `AutocompleteGroup`.
+ *
+ * @example
+ * ```tsx
+ * <AutocompleteGroup>
+ *   <AutocompleteGroupLabel>Recent</AutocompleteGroupLabel>
+ *   <AutocompleteItem value="paris">Paris</AutocompleteItem>
+ * </AutocompleteGroup>
+ * ```
+ */
+export declare const AutocompleteGroupLabel: {
+    ({ ref: forwardedRef, ...props }: AutocompleteGroupLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteInput.d.cts

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteInputProps } from './types.cjs';
 /**
- * The free-text field an {@link Autocomplete} is built around. Keeps real DOM
- * focus for the whole interaction and doubles as the popper anchor the popup
- * positions against. Renders an `<input type="text" role="combobox">` with
- * `aria-expanded`, `aria-controls` pointing at `AutocompleteList`,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused suggestion, `autoComplete="off"`, and
- * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ * The free-text field an {@link Autocomplete} is built around. Keeps real DOM focus for the whole interaction
+ * and doubles as the popper anchor the popup positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `aria-activedescendant`, `autoComplete="off"`.
  *
  * Keyboard, in full:
  *
  * | Key | Effect |
  * | --- | --- |
  * | Arrow Down / Up | opens the popup, or moves the highlight — **DOM focus never moves** |
- * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`) |
+ * | Alt + Arrow Down | opens the popup **without** highlighting anything |
+ * | Alt + Arrow Up | commits the highlighted suggestion and closes |
+ * | Home / End | **while open only**, moves the highlight to the first / last suggestion |
+ * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`), else just closes |
  * | Escape | closes and puts the last committed text back |
  * | Tab | commits the raw text and moves on — the free-text escape hatch |
  *
- * Blur commits the raw text too, which is the behaviour that separates this
- * family from `Combobox`: typing "foo" and clicking elsewhere keeps "foo".
- * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`
- * pointing at it.
+ * Blur commits the raw text too — the behaviour that separates this family from `Combobox`: typing "foo" and
+ * clicking elsewhere keeps "foo". Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example
  * ```tsx
  * <AutocompleteInput aria-label="City" placeholder="Where to?" />
  * ```
  */
-export declare const AutocompleteInput: React.ForwardRefExoticComponent<Omit<AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const AutocompleteInput: {
+    ({ ref: forwardedRef, ...props }: AutocompleteInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteInput.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AutocompleteInputProps } from './types.js';
 /**
- * The free-text field an {@link Autocomplete} is built around. Keeps real DOM
- * focus for the whole interaction and doubles as the popper anchor the popup
- * positions against. Renders an `<input type="text" role="combobox">` with
- * `aria-expanded`, `aria-controls` pointing at `AutocompleteList`,
- * `aria-autocomplete="list"`, `aria-activedescendant` tracking the
- * virtually-focused suggestion, `autoComplete="off"`, and
- * `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
+ * The free-text field an {@link Autocomplete} is built around. Keeps real DOM focus for the whole interaction
+ * and doubles as the popper anchor the popup positions against. Renders an `<input type="text" role="combobox">`
+ * with `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `aria-activedescendant`, `autoComplete="off"`.
  *
  * Keyboard, in full:
  *
  * | Key | Effect |
  * | --- | --- |
  * | Arrow Down / Up | opens the popup, or moves the highlight — **DOM focus never moves** |
- * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`) |
+ * | Alt + Arrow Down | opens the popup **without** highlighting anything |
+ * | Alt + Arrow Up | commits the highlighted suggestion and closes |
+ * | Home / End | **while open only**, moves the highlight to the first / last suggestion |
+ * | Enter | commits the highlighted suggestion; with nothing highlighted, commits the raw text (when `allowCustomValue`), else just closes |
  * | Escape | closes and puts the last committed text back |
  * | Tab | commits the raw text and moves on — the free-text escape hatch |
  *
- * Blur commits the raw text too, which is the behaviour that separates this
- * family from `Combobox`: typing "foo" and clicking elsewhere keeps "foo".
- * Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`
- * pointing at it.
+ * Blur commits the raw text too — the behaviour that separates this family from `Combobox`: typing "foo" and
+ * clicking elsewhere keeps "foo". Give it an accessible name — `aria-label`, `aria-labelledby`, or a `Label`.
  *
  * @example
  * ```tsx
  * <AutocompleteInput aria-label="City" placeholder="Where to?" />
  * ```
  */
-export declare const AutocompleteInput: React.ForwardRefExoticComponent<Omit<AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const AutocompleteInput: {
+    ({ ref: forwardedRef, ...props }: AutocompleteInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/autocomplete/AutocompleteItem.d.cts

@@ -1,28 +1,13 @@
 import * as React from 'react';
 import type { AutocompleteItemProps } from './types.cjs';
 /**
- * One suggestion inside {@link AutocompleteList}. Renders a
- * `<div role="option">` with `data-value`, `aria-selected` (true only for the
- * suggestion matching the *committed* value), `data-state`
- * (`"checked" | "unchecked"`), `data-highlighted` for virtual focus — the
- * attribute the brand layer styles the "keyboard cursor" from, since real DOM
- * focus stays on the input — and `data-disabled`.
- *
- * Registers itself, and its text, with the root: that is how
- * {@link AutocompleteEmpty} knows the list is empty, how the suggestion-count
- * announcement gets its number, and how Enter knows what the highlighted
- * option commits to. Click commits the suggestion, writes its text into the
- * input, closes the popup and returns focus to the input. Pointer hover moves
- * the highlight onto it.
- *
- * With a `filter` predicate on the root, a rejected item renders **nothing at
- * all** and unregisters itself — it is absent from the DOM rather than hidden,
- * because a hidden option is still reachable through `aria-activedescendant`
- * and would still be counted as a suggestion.
- *
+ * Suggestion inside {@link AutocompleteList} that commits to the input on click.
  * @example
  * ```tsx
  * <AutocompleteItem value="Oslo">Oslo</AutocompleteItem>
  * ```
  */
-export declare const AutocompleteItem: React.ForwardRefExoticComponent<Omit<AutocompleteItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AutocompleteItem: {
+    ({ value, disabled, textValue, ref: forwardedRef, ...props }: AutocompleteItemProps): React.ReactNode;
+    displayName: string;
+};