@skdx/react 0.28.0 → 0.30.0

package/dist/listbox/Listbox.d.cts

@@ -1,23 +1,12 @@
 import * as React from 'react';
 import type { ListboxContextValue, ListboxProps } from './types.cjs';
-/** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
+/** @internal Every option that can hold focus; disabled options are skipped. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
-export declare const ListboxProvider: {
-    (props: ListboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxContext: (consumerName: string) => ListboxContextValue;
+export declare const ListboxProvider: React.FC<ListboxContextValue & {
+    children: React.ReactNode;
+}>, useListboxContext: (consumerName: string) => ListboxContextValue;
 /**
- * WAI-ARIA listbox: always-visible list with one tab stop, arrow-key roving
- * focus, typeahead, and single/multiple selection. Use when options should
- * always be on screen (transfer lists, settings panels, detail pane lists).
- *
- * Focus is real (one option has `tabIndex={0}`, arrows move it). With `multiple`,
- * Shift+Arrow toggles, Shift+Space range-selects, Ctrl+Shift+Home/End extends,
- * Ctrl+A selects all (or clears if all selected). APG's modifier-key model.
- *
- * Works controlled or uncontrolled.
+ * Renders a WAI-ARIA listbox with roving-focus arrow-key navigation, typeahead, and single or multiple selection.
  *
  * @example
  * ```tsx
@@ -26,14 +15,8 @@ export declare const ListboxProvider: {
  *   <ListboxItem value="vue">Vue</ListboxItem>
  * </Listbox>
  * ```
- *
- * @example Multi-select with indicator—use `textValue` so checkmark doesn't match typeahead.
- * ```tsx
- * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
- *   <ListboxItem value="react" textValue="React">
- *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *   </ListboxItem>
- * </Listbox>
- * ```
  */
-export declare const Listbox: React.ForwardRefExoticComponent<Omit<ListboxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Listbox: {
+    ({ value, defaultValue, onValueChange, multiple, disabled, allowSelectAll, orientation, focusOnHover, disallowEmptySelection, options, renderOption, children, ref: forwardedRef, density, shape, size, ...props }: ListboxProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/Listbox.d.ts

@@ -1,23 +1,12 @@
 import * as React from 'react';
 import type { ListboxContextValue, ListboxProps } from './types.js';
-/** @internal Every option that can hold focus. Disabled options are skipped, never focused. */
+/** @internal Every option that can hold focus; disabled options are skipped. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
-export declare const ListboxProvider: {
-    (props: ListboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxContext: (consumerName: string) => ListboxContextValue;
+export declare const ListboxProvider: React.FC<ListboxContextValue & {
+    children: React.ReactNode;
+}>, useListboxContext: (consumerName: string) => ListboxContextValue;
 /**
- * WAI-ARIA listbox: always-visible list with one tab stop, arrow-key roving
- * focus, typeahead, and single/multiple selection. Use when options should
- * always be on screen (transfer lists, settings panels, detail pane lists).
- *
- * Focus is real (one option has `tabIndex={0}`, arrows move it). With `multiple`,
- * Shift+Arrow toggles, Shift+Space range-selects, Ctrl+Shift+Home/End extends,
- * Ctrl+A selects all (or clears if all selected). APG's modifier-key model.
- *
- * Works controlled or uncontrolled.
+ * Renders a WAI-ARIA listbox with roving-focus arrow-key navigation, typeahead, and single or multiple selection.
  *
  * @example
  * ```tsx
@@ -26,14 +15,8 @@ export declare const ListboxProvider: {
  *   <ListboxItem value="vue">Vue</ListboxItem>
  * </Listbox>
  * ```
- *
- * @example Multi-select with indicator—use `textValue` so checkmark doesn't match typeahead.
- * ```tsx
- * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
- *   <ListboxItem value="react" textValue="React">
- *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *   </ListboxItem>
- * </Listbox>
- * ```
  */
-export declare const Listbox: React.ForwardRefExoticComponent<Omit<ListboxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Listbox: {
+    ({ value, defaultValue, onValueChange, multiple, disabled, allowSelectAll, orientation, focusOnHover, disallowEmptySelection, options, renderOption, children, ref: forwardedRef, density, shape, size, ...props }: ListboxProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/Listbox.js

@@ -1 +1,2 @@
-import*as s from"react";import{createSafeContext as Me}from"../utils/createContext.js";import{skdxPart as Ge}from"../utils/part.js";import{composeEventHandlers as Se,Primitive as Ae}from"../utils/primitive.js";import{useControllableState as Ke}from"../utils/useControllableState.js";import{useRovingFocus as we}from"../utils/useRovingFocus.js";import{nextSelection as Ne,selectedValueOf as ze,toSelectionValues as F}from"../utils/useSelection.js";import{isTypeaheadKey as Fe,useTypeahead as Ue}from"../utils/useTypeahead.js";import*as v from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{skdxPart as Le}from"../utils/part.js";import{Primitive as ye}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var[ge,Y]=pe("ListboxGroup"),A=v.forwardRef((t,l)=>{let u=v.useId();return X(ge,{labelId:u,children:X(ye.div,{role:"group","aria-labelledby":u,...t,...Le("listbox","group",t.className),ref:l})})});A.displayName="ListboxGroup";import*as j from"react";import{createSafeContext as he}from"../utils/createContext.js";import{skdxPart as Re}from"../utils/part.js";import{composeEventHandlers as V,Primitive as Ie}from"../utils/primitive.js";import{rovingTabIndex as ke}from"../utils/useRovingFocus.js";import{jsx as $}from"react/jsx-runtime";var[Ce,ee]=he("ListboxItem"),K=j.forwardRef(({value:t,disabled:l=!1,textValue:u,posInSet:o,setSize:a,...x},L)=>{let b=D("ListboxItem"),m=l||b.disabled,h=b.isSelected(t),k=d=>{m||b.selectItem(t,d)};return $(Ce,{value:t,selected:h,disabled:m,children:$(Ie.div,{role:"option","aria-selected":h,"aria-disabled":m||void 0,"data-value":t,"data-text-value":u,"data-state":h?"checked":"unchecked","data-disabled":m?"":void 0,"aria-posinset":o,"aria-setsize":a,tabIndex:ke(b.activeValue!==null,b.activeValue===t,m),...x,...Re("listbox","item",x.className),ref:L,onClick:V(x.onClick,()=>k("pointer")),onFocus:V(x.onFocus,()=>{m||b.setActiveValue(t)}),onPointerEnter:V(x.onPointerEnter,d=>{b.focusOnHover&&!m&&d.currentTarget.focus()}),onKeyDown:V(x.onKeyDown,d=>{d.key!==" "&&d.key!=="Enter"||d.key===" "&&d.shiftKey&&b.multiple||(d.preventDefault(),k("keyboard"))})})})});K.displayName="ListboxItem";import*as te from"react";import{skdxPart as Pe}from"../utils/part.js";import{Primitive as ve}from"../utils/primitive.js";import{jsx as Ve}from"react/jsx-runtime";var w=te.forwardRef(({forceMount:t,...l},u)=>{let o=ee("ListboxItemIndicator");return t||o.selected?Ve(ve.span,{"aria-hidden":!0,...l,...Pe("listbox","item-indicator",l.className),ref:u}):null});w.displayName="ListboxItemIndicator";import*as oe from"react";import{skdxPart as De}from"../utils/part.js";import{Primitive as Oe}from"../utils/primitive.js";import{jsx as Ee}from"react/jsx-runtime";var N=oe.forwardRef((t,l)=>{let u=Y("ListboxLabel");return Ee(Oe.div,{id:u.labelId,...t,...De("listbox","label",t.className),ref:l})});N.displayName="ListboxLabel";import{Fragment as He,jsx as z,jsxs as re}from"react/jsx-runtime";var Te=t=>"options"in t,se=({options:t,renderOption:l})=>{let u=D("Listbox"),o=a=>re(K,{value:a.value,disabled:a.disabled,textValue:a.label,children:[z(w,{children:"\u2713"}),l?l(a,{selected:u.isSelected(a.value)}):a.label??a.value]},a.value);return z(He,{children:t.map(a=>Te(a)?re(A,{children:[z(N,{children:a.label}),a.options.map(o)]},a.label):o(a))})};import{jsx as U}from"react/jsx-runtime";function _e(t,l){return t.length===l.length&&t.every((u,o)=>u===l[o])}var ie='[role="option"]:not([data-disabled])',ae=10,[qe,D]=Me("Listbox");function I(t){return Array.from(t.querySelectorAll(ie))}function Ze(t){return t.getAttribute("data-text-value")??t.textContent??""}function O(t){return t.getAttribute("data-value")??""}var Be=s.forwardRef(({value:t,defaultValue:l,onValueChange:u,multiple:o=!1,disabled:a=!1,allowSelectAll:x=!0,orientation:L="vertical",focusOnHover:b=!1,disallowEmptySelection:m=!1,options:h,renderOption:k,children:d,...E},C)=>{let ne=d??U(se,{options:h??[],renderOption:k}),y=s.useRef(null),[T,_]=s.useState(null),q=s.useRef("programmatic"),Z=s.useRef(null),le=s.useMemo(()=>t===void 0?void 0:F(t,{multiple:o,label:"Listbox value"}),[t,o]),[c=[],B]=Ke({prop:le,defaultProp:F(l,{multiple:o,label:"Listbox defaultValue"}),onChange:e=>u?.({value:e,previousValue:Z.current,reason:q.current,selectedValue:ze(e)})}),R=s.useRef(c);R.current=c;let H=s.useCallback(e=>c.includes(e),[c]),P=s.useCallback((e,r)=>{_e(e,R.current)||(q.current=r,Z.current=R.current.length===0?null:R.current,B(e))},[B]),J=s.useCallback((e,r)=>P(Ne(R.current,e,o),r),[o,P]),M=s.useCallback((e,r)=>P(F(e,{multiple:o,label:"Listbox value"}),r),[o,P]),G=s.useRef(null),ce=we({orientation:L,loop:!1,itemSelector:ie,typeahead:!1}),ue=Ue(s.useCallback(()=>y.current?I(y.current).map(Ze):[],[]));s.useLayoutEffect(()=>{if(T!==null)return;let e=y.current;if(!e)return;let r=I(e),i=(r.find(p=>H(p.getAttribute("data-value")??""))??r[0])?.getAttribute("data-value");i&&_(i)},[T,H]);let Q=s.useCallback((e,r)=>{o&&m&&c.length===1&&c[0]===e||(G.current=e,J(e,r))},[J,o,m,c]),fe=()=>(c.length===0&&(G.current=null),G.current),S=(e,r,n)=>{let i=e.slice(r,n+1).map(O);M([...c,...i.filter(p=>!c.includes(p))],"keyboard")},me=e=>{if(!o)return!1;let r=y.current;if(!r)return!1;let n=I(r),i=n.indexOf(e.target);if(i===-1)return!1;let p=L==="horizontal"?"ArrowRight":"ArrowDown",be=L==="horizontal"?"ArrowLeft":"ArrowUp";if((e.key===p||e.key===be)&&e.shiftKey){e.preventDefault();let f=n[i+(e.key===p?1:-1)];return f&&(f.focus(),Q(O(f),"keyboard")),!0}if(e.key===" "&&e.shiftKey){e.preventDefault();let f=n.findIndex(xe=>O(xe)===fe()),W=Math.min(f===-1?i:f,i),g=Math.max(f===-1?i:f,i);return S(n,W,g),!0}if(e.ctrlKey&&e.shiftKey&&(e.key==="Home"||e.key==="End"))return e.preventDefault(),e.key==="Home"?S(n,0,i):S(n,i,n.length-1),!0;if(x&&(e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let f=n.map(O);return f.every(g=>c.includes(g))?o&&m||M(c.filter(g=>!f.includes(g)),"keyboard"):M([...c,...f.filter(g=>!c.includes(g))],"keyboard"),!0}return!1},de=e=>{if(e.key!=="PageUp"&&e.key!=="PageDown")return!1;let r=y.current;if(!r)return!1;let n=I(r),i=n.indexOf(e.target);if(i===-1)return!1;e.preventDefault();let p=e.key==="PageDown"?ae:-ae;return n[Math.min(n.length-1,Math.max(0,i+p))]?.focus(),!0};return U(qe,{multiple:o,selectedValues:c,isSelected:H,selectItem:Q,disabled:a,activeValue:T,setActiveValue:_,focusOnHover:b,children:U(Ae.div,{role:"listbox","aria-multiselectable":o?!0:void 0,"aria-disabled":a||void 0,"aria-orientation":L,"data-multiple":o?"":void 0,"data-disabled":a?"":void 0,"data-orientation":L,...E,...Ge("listbox","root",E.className),ref:e=>{y.current=e,typeof C=="function"?C(e):C&&(C.current=e)},onKeyDown:Se(E.onKeyDown,e=>{if(me(e)||de(e)||(ce(e),e.defaultPrevented||!Fe(e)))return;let r=y.current;if(!r)return;let n=I(r),i=ue(e.key,n.indexOf(e.target));i!==-1&&(e.preventDefault(),n[i].focus())}),children:ne})})});Be.displayName="Listbox";export{Be as Listbox,A as ListboxGroup,ge as ListboxGroupProvider,K as ListboxItem,w as ListboxItemIndicator,Ce as ListboxItemProvider,N as ListboxLabel,qe as ListboxProvider,ie as OPTION_SELECTOR,D as useListboxContext,Y as useListboxGroupContext,ee as useListboxItemContext};
+'use client';
+import*as s from"react";import{appearanceAttrs as he}from"../utils/appearance.js";import{createSafeContext as ge}from"../utils/createContext.js";import{directionalKey as Ee}from"../utils/direction.js";import{skdxPart as Re}from"../utils/part.js";import{Primitive as Ie,useComposedEventHandlers as Se}from"../utils/primitive.js";import{useControllableState as Ve}from"../utils/useControllableState.js";import{useRovingFocus as ke,useRovingTabStop as Pe}from"../utils/useRovingFocus.js";import{nextSelection as Ce,selectedValueOf as ve,toSelectionValues as D}from"../utils/useSelection.js";import{isTypeaheadKey as Me,useTypeahead as Ke}from"../utils/useTypeahead.js";import{Glyph as xe}from"../utils/Glyph.js";import{MenuGroupProvider as ee,useMenuGroupLabel as te}from"../utils/menuGroup.js";import{skdxPart as oe}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as J}from"react/jsx-runtime";var T=({ref:e,...n})=>{let{labelId:o,context:t}=te();return J(ee,{...t,children:J(re.div,{role:"group","aria-labelledby":n["aria-label"]===void 0?o:void 0,...n,...oe("listbox","group",n.className),ref:e})})};T.displayName="ListboxGroup";import{createSafeContext as ne}from"../utils/createContext.js";import{skdxPart as ae}from"../utils/part.js";import{composeEventHandlers as k,Primitive as ie}from"../utils/primitive.js";import{rovingTabIndex as se}from"../utils/useRovingFocus.js";import{jsx as U}from"react/jsx-runtime";var[le,_]=ne("ListboxItem"),A=({value:e,disabled:n=!1,textValue:o,posInSet:t,setSize:r,ref:l,...u})=>{let a=P("ListboxItem"),c=n||a.disabled,f=a.isSelected(e),x=m=>{c||a.selectItem(e,m)};return U(le,{value:e,selected:f,disabled:c,children:U(ie.div,{role:"option","aria-selected":f,"aria-disabled":c||void 0,"data-value":e,"data-text-value":o,"data-state":f?"checked":"unchecked","data-disabled":c?"":void 0,"aria-posinset":t,"aria-setsize":r,tabIndex:se(a.activeValue!==null,a.activeValue===e,c),...u,...ae("listbox","item",u.className),ref:l,onClick:k(u.onClick,()=>x("pointer")),onFocus:k(u.onFocus,()=>{c||a.setActiveValue(e)}),onPointerEnter:k(u.onPointerEnter,m=>{a.focusOnHover&&!c&&m.currentTarget.focus()}),onKeyDown:k(u.onKeyDown,m=>{m.key!==" "&&m.key!=="Enter"||m.key===" "&&m.shiftKey&&a.multiple||(m.preventDefault(),x("keyboard"))})})})};A.displayName="ListboxItem";import{skdxPart as ce}from"../utils/part.js";import{Primitive as ue}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var O=({forceMount:e,ref:n,...o})=>{let t=_("ListboxItemIndicator");return e||t.selected?me(ue.span,{"aria-hidden":!0,...o,...ce("listbox","item-indicator",o.className),ref:n}):null};O.displayName="ListboxItemIndicator";import{useMenuLabelId as de}from"../utils/menuGroup.js";import{skdxPart as fe}from"../utils/part.js";import{Primitive as be}from"../utils/primitive.js";import{jsx as pe}from"react/jsx-runtime";var H=({ref:e,...n})=>{let o=de();return pe(be.div,{id:o,...n,...fe("listbox","label",n.className),ref:e})};H.displayName="ListboxLabel";import{Fragment as ye,jsx as C,jsxs as q}from"react/jsx-runtime";var Le=e=>"options"in e,X=({options:e,renderOption:n})=>{let o=P("Listbox"),t=r=>q(A,{value:r.value,disabled:r.disabled,textValue:r.label,children:[C(O,{children:C(xe,{name:"check"})}),n?n(r,{selected:o.isSelected(r.value)}):r.label??r.value]},r.value);return C(ye,{children:e.map(r=>Le(r)?q(T,{children:[C(H,{children:r.label}),r.options.map(t)]},r.label):t(r))})};import{jsx as w}from"react/jsx-runtime";function Te(e,n){return e.length===n.length&&e.every((o,t)=>o===n[t])}var N='[role="option"]:not([data-disabled])',Z=10,[Ae,P]=ge("Listbox");function E(e){return Array.from(e.querySelectorAll(N))}function Oe(e){return e.getAttribute("data-text-value")??e.textContent??""}function R(e){return e.getAttribute("data-value")??""}function He(e,n){if(e.key!=="PageUp"&&e.key!=="PageDown"||!n)return!1;let o=E(n),t=o.indexOf(e.target);if(t===-1)return!1;e.preventDefault();let r=e.key==="PageDown"?Z:-Z;return o[Math.min(o.length-1,Math.max(0,t+r))]?.focus(),!0}function G(e,n,o,t){let r=e.slice(n,o+1).map(R);t.setSelection([...t.selectedValues,...r.filter(l=>!t.selectedValues.includes(l))],"keyboard")}function De(e,n,o,t,r){let l=r.orientation==="horizontal"?"ArrowRight":"ArrowDown",u=r.orientation==="horizontal"?"ArrowLeft":"ArrowUp",a=Ee(e.key,t);if(a!==l&&a!==u||!e.shiftKey)return!1;e.preventDefault();let c=n[o+(a===l?1:-1)];return c&&(c.focus(),r.selectItemAndAnchor(R(c),"keyboard")),!0}function we(e,n,o,t){if(e.key!==" "||!e.shiftKey)return!1;e.preventDefault();let r=n.findIndex(a=>R(a)===t.readAnchor()),l=Math.min(r===-1?o:r,o),u=Math.max(r===-1?o:r,o);return G(n,l,u,t),!0}function Ne(e,n,o,t){return!e.ctrlKey||!e.shiftKey||e.key!=="Home"&&e.key!=="End"?!1:(e.preventDefault(),e.key==="Home"?G(n,0,o,t):G(n,o,n.length-1,t),!0)}function Ge(e,n,o){if(!o.allowSelectAll||!(e.ctrlKey||e.metaKey)||e.key.toLowerCase()!=="a")return!1;e.preventDefault();let t=n.map(R);return t.every(l=>o.selectedValues.includes(l))?o.multiple&&o.disallowEmptySelection||o.setSelection(o.selectedValues.filter(l=>!t.includes(l)),"keyboard"):o.setSelection([...o.selectedValues,...t.filter(l=>!o.selectedValues.includes(l))],"keyboard"),!0}function ze(e,n,o){if(!o.multiple||!n)return!1;let t=E(n),r=t.indexOf(e.target);return r===-1?!1:De(e,t,r,n,o)||we(e,t,r,o)||Ne(e,t,r,o)||Ge(e,t,o)}function Fe({value:e,defaultValue:n,onValueChange:o,multiple:t}){let r=s.useRef("programmatic"),l=s.useRef([]),u=s.useMemo(()=>e===void 0?void 0:D(e,{multiple:t,label:"Listbox value"}),[e,t]),[a=[],c]=Ve({prop:u,defaultProp:D(n,{multiple:t,label:"Listbox defaultValue"}),onChange:d=>o?.({value:d,previousValue:l.current,reason:r.current,selectedValue:ve(d)})}),f=s.useRef(a);s.useInsertionEffect(()=>{f.current=a});let x=s.useCallback(d=>a.includes(d),[a]),m=s.useCallback((d,b)=>{Te(d,f.current)||(r.current=b,l.current=f.current,c(d))},[c]),L=s.useCallback((d,b)=>m(Ce(f.current,d,t),b),[t,m]);return{selectedValues:a,isSelected:x,selectItem:L,setSelection:(d,b)=>m(D(d,{multiple:t,label:"Listbox value"}),b)}}var We=({value:e,defaultValue:n,onValueChange:o,multiple:t=!1,disabled:r=!1,allowSelectAll:l=!0,orientation:u="vertical",focusOnHover:a=!1,disallowEmptySelection:c=!1,options:f,renderOption:x,children:m,ref:L,density:z,shape:d,size:b,...I})=>{let B=m??w(X,{options:f??[],renderOption:x}),p=s.useRef(null),[S,v]=s.useState(null),{selectedValues:y,isSelected:M,selectItem:F,setSelection:Q}=Fe({value:e,defaultValue:n,onValueChange:o,multiple:t}),K=s.useRef(null),Y=ke({orientation:u,loop:!1,itemSelector:N,typeahead:!1}),$=Ke(s.useCallback(()=>{let i=p.current;return i?E(i).map(Oe):[]},[]));Pe(p,N,"data-value",S,v),s.useLayoutEffect(()=>{if(S!==null)return;let i=p.current;if(!i)return;let g=E(i).find(V=>M(R(V)))?.getAttribute("data-value");g&&v(g)},[S,M]);let W=s.useCallback((i,h)=>{t&&c&&y.length===1&&y[0]===i||(K.current=i,F(i,h))},[F,t,c,y]),j={multiple:t,orientation:u,allowSelectAll:l,disallowEmptySelection:c,selectedValues:y,selectItemAndAnchor:W,setSelection:Q,readAnchor:()=>(y.length===0&&(K.current=null),K.current)};return w(Ae,{multiple:t,selectedValues:y,isSelected:M,selectItem:W,disabled:r,activeValue:S,setActiveValue:v,focusOnHover:a,children:w(Ie.div,{role:"listbox","aria-multiselectable":t?!0:void 0,"aria-disabled":r||void 0,"aria-orientation":u,"data-multiple":t?"":void 0,"data-disabled":r?"":void 0,"data-orientation":u,...I,...he({density:z,shape:d,size:b},I),...Re("listbox","root",I.className),ref:i=>{p.current=i,typeof L=="function"?L(i):L&&(L.current=i)},onKeyDown:Se(I.onKeyDown,i=>{if(ze(i,p.current,j)||He(i,p.current)||(Y(i),i.defaultPrevented||!Me(i)))return;let h=p.current;if(!h)return;let g=E(h),V=$(i.key,g.indexOf(i.target));V!==-1&&(i.preventDefault(),g[V].focus())}),children:B})})};We.displayName="Listbox";export{We as Listbox,T as ListboxGroup,A as ListboxItem,O as ListboxItemIndicator,le as ListboxItemProvider,H as ListboxLabel,Ae as ListboxProvider,N as OPTION_SELECTOR,P as useListboxContext,_ as useListboxItemContext};

package/dist/listbox/ListboxAnatomy.d.cts

@@ -1,15 +1,9 @@
 import type * as React from 'react';
 import type { ListboxOption, ListboxOptionOrGroup } from './types.cjs';
-/**
- * The anatomy a {@link Listbox} draws from `options`: one `ListboxItem` per
- * option, grouped under a `ListboxGroup`/`ListboxLabel` where `options` nests
- * a group.
- *
- * @internal
- */
+/** @internal The anatomy a {@link Listbox} draws from `options`. */
 export declare const ListboxAnatomy: ({ options, renderOption, }: {
     options: ListboxOptionOrGroup[];
-    renderOption?: (option: ListboxOption, state: {
+    renderOption?: ((option: ListboxOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
 }) => React.JSX.Element;

package/dist/listbox/ListboxAnatomy.d.ts

@@ -1,15 +1,9 @@
 import type * as React from 'react';
 import type { ListboxOption, ListboxOptionOrGroup } from './types.js';
-/**
- * The anatomy a {@link Listbox} draws from `options`: one `ListboxItem` per
- * option, grouped under a `ListboxGroup`/`ListboxLabel` where `options` nests
- * a group.
- *
- * @internal
- */
+/** @internal The anatomy a {@link Listbox} draws from `options`. */
 export declare const ListboxAnatomy: ({ options, renderOption, }: {
     options: ListboxOptionOrGroup[];
-    renderOption?: (option: ListboxOption, state: {
+    renderOption?: ((option: ListboxOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
 }) => React.JSX.Element;

package/dist/listbox/ListboxGroup.d.cts

@@ -1,15 +1,7 @@
-import * as React from 'react';
-import type { ListboxGroupContextValue, ListboxGroupProps } from './types.cjs';
-export declare const ListboxGroupProvider: {
-    (props: ListboxGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxGroupContext: (consumerName: string) => ListboxGroupContextValue;
+import type * as React from 'react';
+import type { ListboxGroupProps } from './types.cjs';
 /**
- * Groups related `ListboxItem`s under a {@link ListboxLabel}. Renders a
- * `<div role="group">` with `aria-labelledby` wired automatically to avoid
- * unnamed groups in screen reader announcements.
+ * Groups related `ListboxItem`s under a {@link ListboxLabel}, rendering a `<div role="group">` with `aria-labelledby` wired automatically.
  *
  * @example
  * ```tsx
@@ -19,4 +11,7 @@ export declare const ListboxGroupProvider: {
  * </ListboxGroup>
  * ```
  */
-export declare const ListboxGroup: React.ForwardRefExoticComponent<Omit<ListboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxGroup: {
+    ({ ref: forwardedRef, ...props }: ListboxGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxGroup.d.ts

@@ -1,15 +1,7 @@
-import * as React from 'react';
-import type { ListboxGroupContextValue, ListboxGroupProps } from './types.js';
-export declare const ListboxGroupProvider: {
-    (props: ListboxGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxGroupContext: (consumerName: string) => ListboxGroupContextValue;
+import type * as React from 'react';
+import type { ListboxGroupProps } from './types.js';
 /**
- * Groups related `ListboxItem`s under a {@link ListboxLabel}. Renders a
- * `<div role="group">` with `aria-labelledby` wired automatically to avoid
- * unnamed groups in screen reader announcements.
+ * Groups related `ListboxItem`s under a {@link ListboxLabel}, rendering a `<div role="group">` with `aria-labelledby` wired automatically.
  *
  * @example
  * ```tsx
@@ -19,4 +11,7 @@ export declare const ListboxGroupProvider: {
  * </ListboxGroup>
  * ```
  */
-export declare const ListboxGroup: React.ForwardRefExoticComponent<Omit<ListboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxGroup: {
+    ({ ref: forwardedRef, ...props }: ListboxGroupProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxItem.d.cts

@@ -1,28 +1,10 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemContextValue, ListboxItemProps } from './types.cjs';
-export declare const ListboxItemProvider: {
-    (props: ListboxItemContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxItemContext: (consumerName: string) => ListboxItemContextValue;
+export declare const ListboxItemProvider: React.FC<ListboxItemContextValue & {
+    children: React.ReactNode;
+}>, useListboxItemContext: (consumerName: string) => ListboxItemContextValue;
 /**
- * A single selectable option in a {@link Listbox}. Renders a
- * `<div role="option">` with `aria-selected`, `data-value`, `data-state`
- * (`"checked"` | `"unchecked"`), `data-disabled`, an optional
- * `data-text-value`, and the roving `tabIndex` that makes the whole list one
- * tab stop. Click, Enter, or Space selects it — replacing the selection, or
- * toggling it while the root is `multiple`. Focusing it moves the list's tab
- * stop onto it.
- *
- * Shift+Space is the one selection key an option does *not* claim: while the
- * root is `multiple` it selects a contiguous range, which needs the whole
- * option list and the root's selection anchor, so it is left to bubble to
- * {@link Listbox}.
- *
- * A disabled option is skipped by the arrows and by typeahead, and cannot be
- * selected; it stays in the DOM and keeps `aria-selected`, so it is still
- * announced as part of the list.
+ * A single selectable option in a {@link Listbox}, rendered as a `<div role="option">` that selects on click, Enter, or Space.
  *
  * @example
  * ```tsx
@@ -32,4 +14,7 @@ export declare const ListboxItemProvider: {
  * </ListboxItem>
  * ```
  */
-export declare const ListboxItem: React.ForwardRefExoticComponent<Omit<ListboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxItem: {
+    ({ value, disabled, textValue, posInSet, setSize, ref: forwardedRef, ...props }: ListboxItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxItem.d.ts

@@ -1,28 +1,10 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemContextValue, ListboxItemProps } from './types.js';
-export declare const ListboxItemProvider: {
-    (props: ListboxItemContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useListboxItemContext: (consumerName: string) => ListboxItemContextValue;
+export declare const ListboxItemProvider: React.FC<ListboxItemContextValue & {
+    children: React.ReactNode;
+}>, useListboxItemContext: (consumerName: string) => ListboxItemContextValue;
 /**
- * A single selectable option in a {@link Listbox}. Renders a
- * `<div role="option">` with `aria-selected`, `data-value`, `data-state`
- * (`"checked"` | `"unchecked"`), `data-disabled`, an optional
- * `data-text-value`, and the roving `tabIndex` that makes the whole list one
- * tab stop. Click, Enter, or Space selects it — replacing the selection, or
- * toggling it while the root is `multiple`. Focusing it moves the list's tab
- * stop onto it.
- *
- * Shift+Space is the one selection key an option does *not* claim: while the
- * root is `multiple` it selects a contiguous range, which needs the whole
- * option list and the root's selection anchor, so it is left to bubble to
- * {@link Listbox}.
- *
- * A disabled option is skipped by the arrows and by typeahead, and cannot be
- * selected; it stays in the DOM and keeps `aria-selected`, so it is still
- * announced as part of the list.
+ * A single selectable option in a {@link Listbox}, rendered as a `<div role="option">` that selects on click, Enter, or Space.
  *
  * @example
  * ```tsx
@@ -32,4 +14,7 @@ export declare const ListboxItemProvider: {
  * </ListboxItem>
  * ```
  */
-export declare const ListboxItem: React.ForwardRefExoticComponent<Omit<ListboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxItem: {
+    ({ value, disabled, textValue, posInSet, setSize, ref: forwardedRef, ...props }: ListboxItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxItemIndicator.d.cts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.cjs';
 /**
- * Marker shown while an option is selected, hidden from accessibility to
- * avoid duplicate announcements of `aria-selected`. Renders nothing while
- * unselected unless `forceMount` is set. Give the option a `textValue` to
- * avoid matching the glyph in typeahead.
+ * Marker shown while an option is selected, hidden from accessibility and rendering nothing while unselected unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -14,4 +11,7 @@ import type { ListboxItemIndicatorProps } from './types.cjs';
  * </ListboxItem>
  * ```
  */
-export declare const ListboxItemIndicator: React.ForwardRefExoticComponent<Omit<ListboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ListboxItemIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: ListboxItemIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxItemIndicator.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.js';
 /**
- * Marker shown while an option is selected, hidden from accessibility to
- * avoid duplicate announcements of `aria-selected`. Renders nothing while
- * unselected unless `forceMount` is set. Give the option a `textValue` to
- * avoid matching the glyph in typeahead.
+ * Marker shown while an option is selected, hidden from accessibility and rendering nothing while unselected unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -14,4 +11,7 @@ import type { ListboxItemIndicatorProps } from './types.js';
  * </ListboxItem>
  * ```
  */
-export declare const ListboxItemIndicator: React.ForwardRefExoticComponent<Omit<ListboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ListboxItemIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: ListboxItemIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxLabel.d.cts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxLabelProps } from './types.cjs';
 /**
- * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` with an
- * id for the group's `aria-labelledby`. Must be inside a `ListboxGroup`.
+ * The heading naming a {@link ListboxGroup}, rendered as a `<div>` carrying the id its group's `aria-labelledby` points at.
  *
  * @example
  * ```tsx
@@ -12,4 +11,7 @@ import type { ListboxLabelProps } from './types.cjs';
  * </ListboxGroup>
  * ```
  */
-export declare const ListboxLabel: React.ForwardRefExoticComponent<Omit<ListboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxLabel: {
+    ({ ref: forwardedRef, ...props }: ListboxLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/ListboxLabel.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxLabelProps } from './types.js';
 /**
- * The heading naming a {@link ListboxGroup}. Renders a plain `<div>` with an
- * id for the group's `aria-labelledby`. Must be inside a `ListboxGroup`.
+ * The heading naming a {@link ListboxGroup}, rendered as a `<div>` carrying the id its group's `aria-labelledby` points at.
  *
  * @example
  * ```tsx
@@ -12,4 +11,7 @@ import type { ListboxLabelProps } from './types.js';
  * </ListboxGroup>
  * ```
  */
-export declare const ListboxLabel: React.ForwardRefExoticComponent<Omit<ListboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ListboxLabel: {
+    ({ ref: forwardedRef, ...props }: ListboxLabelProps): React.ReactNode;
+    displayName: string;
+};

package/dist/listbox/primitives.d.cts

@@ -1,6 +1,5 @@
 /**
- * Advanced primitives for `Listbox` — the parts the recipe composes. Use
- * for full manual composition.
+ * Advanced primitives for `Listbox` — the parts the recipe composes, for full manual composition.
  *
  * @example
  * ```tsx

package/dist/listbox/primitives.d.ts

@@ -1,6 +1,5 @@
 /**
- * Advanced primitives for `Listbox` — the parts the recipe composes. Use
- * for full manual composition.
+ * Advanced primitives for `Listbox` — the parts the recipe composes, for full manual composition.
  *
  * @example
  * ```tsx