@skdx/react 0.27.0 → 0.29.0

package/dist/list/types.d.cts

@@ -0,0 +1,88 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { Space } from '../utils/resolveSpace.cjs';
+export type { Space };
+/** Tag names {@link List} accepts via `as`. Under `dl` each item is a term/description pair rather than an `<li>`. */
+export type ListTag = 'ul' | 'ol' | 'dl';
+/** Layout axis of a description list's pairs, emitted as `data-orientation`. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link ListProps.items} — a single term/description pair, read only under `as="dl"`. */
+export interface ListEntry {
+    /** The term half of the pair, rendered into a derived `ListTerm` (`<dt>`). */
+    label: React.ReactNode;
+    /** The description half of the pair, rendered into a derived `ListDescription` (`<dd>`). */
+    value: React.ReactNode;
+}
+/** @internal The element choice and default marker icon, distributed from {@link List} to every {@link ListItem}. */
+export interface ListContextValue {
+    icon: React.ReactNode;
+    /** The element the list root rendered, which decides whether an item is an `<li>` or a pair wrapper. */
+    as: ListTag;
+}
+/** Props for the {@link List} container root element. */
+export interface ListProps extends PrimitivePropsWithRef<'ul'> {
+    /**
+     * Element name to render, from the list's own tag allowlist; `dl` turns each item into a term/description pair.
+     * @default 'ul'
+     */
+    as?: ListTag | undefined;
+    /**
+     * Layout axis of the pairs, emitted as `data-orientation` for the stylesheet to lay out; read only under `as="dl"`.
+     * @default 'horizontal'
+     */
+    orientation?: ListOrientation | undefined;
+    /**
+     * Vertical rhythm rung the skin reads, mirrored to `data-density` on the root.
+     * @default undefined — the skin's own default density.
+     */
+    density?: 'compact' | 'comfortable' | (string & {}) | undefined;
+    /**
+     * Term/description pairs the list derives one `ListItem` from each; read only under `as="dl"` and ignored when `children` is given.
+     * @default undefined — nothing is derived.
+     */
+    items?: ListEntry[] | undefined;
+    /**
+     * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
+     * @default true
+     */
+    markers?: boolean | undefined;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space | undefined;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number | undefined;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean | undefined;
+    /**
+     * Default marker icon for every item, overridable per {@link ListItem}.
+     * @default undefined — the native marker is used.
+     */
+    icon?: React.ReactNode | undefined;
+}
+/** Props for the {@link ListTerm}, the term half of a description-list pair. */
+export interface ListTermProps extends PrimitivePropsWithRef<'dt'> {
+}
+/** Props for the {@link ListDescription}, the description half of a description-list pair. */
+export interface ListDescriptionProps extends PrimitivePropsWithRef<'dd'> {
+}
+/** Props for a single {@link ListItem} within a list — an `<li>`, or the pair wrapper under `as="dl"`. */
+export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number | undefined;
+    /**
+     * Marker icon for this item, overriding the List's own `icon`.
+     * @default undefined — the List's `icon` is used, if any.
+     */
+    icon?: React.ReactNode | undefined;
+}

package/dist/list/types.d.ts

@@ -0,0 +1,88 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { Space } from '../utils/resolveSpace.js';
+export type { Space };
+/** Tag names {@link List} accepts via `as`. Under `dl` each item is a term/description pair rather than an `<li>`. */
+export type ListTag = 'ul' | 'ol' | 'dl';
+/** Layout axis of a description list's pairs, emitted as `data-orientation`. */
+export type ListOrientation = 'horizontal' | 'vertical';
+/** One entry of {@link ListProps.items} — a single term/description pair, read only under `as="dl"`. */
+export interface ListEntry {
+    /** The term half of the pair, rendered into a derived `ListTerm` (`<dt>`). */
+    label: React.ReactNode;
+    /** The description half of the pair, rendered into a derived `ListDescription` (`<dd>`). */
+    value: React.ReactNode;
+}
+/** @internal The element choice and default marker icon, distributed from {@link List} to every {@link ListItem}. */
+export interface ListContextValue {
+    icon: React.ReactNode;
+    /** The element the list root rendered, which decides whether an item is an `<li>` or a pair wrapper. */
+    as: ListTag;
+}
+/** Props for the {@link List} container root element. */
+export interface ListProps extends PrimitivePropsWithRef<'ul'> {
+    /**
+     * Element name to render, from the list's own tag allowlist; `dl` turns each item into a term/description pair.
+     * @default 'ul'
+     */
+    as?: ListTag | undefined;
+    /**
+     * Layout axis of the pairs, emitted as `data-orientation` for the stylesheet to lay out; read only under `as="dl"`.
+     * @default 'horizontal'
+     */
+    orientation?: ListOrientation | undefined;
+    /**
+     * Vertical rhythm rung the skin reads, mirrored to `data-density` on the root.
+     * @default undefined — the skin's own default density.
+     */
+    density?: 'compact' | 'comfortable' | (string & {}) | undefined;
+    /**
+     * Term/description pairs the list derives one `ListItem` from each; read only under `as="dl"` and ignored when `children` is given.
+     * @default undefined — nothing is derived.
+     */
+    items?: ListEntry[] | undefined;
+    /**
+     * `false` removes the marker and sets `role="list"` on the container, since Safari/VoiceOver otherwise drops list semantics.
+     * @default true
+     */
+    markers?: boolean | undefined;
+    /**
+     * Gap between items, from the spacing scale.
+     * @default undefined — no inline declaration.
+     */
+    spacing?: Space | undefined;
+    /**
+     * Starting number, passed through to `<ol start>`. Ignored unless `as="ol"`.
+     * @default undefined — browser default numbering.
+     */
+    start?: number | undefined;
+    /**
+     * Reverses the numbering direction, passed through to `<ol reversed>`. Ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed?: boolean | undefined;
+    /**
+     * Default marker icon for every item, overridable per {@link ListItem}.
+     * @default undefined — the native marker is used.
+     */
+    icon?: React.ReactNode | undefined;
+}
+/** Props for the {@link ListTerm}, the term half of a description-list pair. */
+export interface ListTermProps extends PrimitivePropsWithRef<'dt'> {
+}
+/** Props for the {@link ListDescription}, the description half of a description-list pair. */
+export interface ListDescriptionProps extends PrimitivePropsWithRef<'dd'> {
+}
+/** Props for a single {@link ListItem} within a list — an `<li>`, or the pair wrapper under `as="dl"`. */
+export interface ListItemProps extends PrimitivePropsWithRef<'li'> {
+    /**
+     * Ordinal value, passed through to `<li value>`. Only meaningful inside an `<ol>`.
+     * @default undefined — sequential numbering.
+     */
+    value?: number | undefined;
+    /**
+     * Marker icon for this item, overriding the List's own `icon`.
+     * @default undefined — the List's `icon` is used, if any.
+     */
+    icon?: React.ReactNode | undefined;
+}

package/dist/listbox/Listbox.cjs

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

package/dist/listbox/Listbox.d.cts

@@ -1,51 +1,22 @@
 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;
 /**
- * A standalone WAI-ARIA listbox: an always-visible list of options with one
- * tab stop, arrow-key roving focus, typeahead, and single or multiple
- * selection. Renders a `<div role="listbox">` carrying
- * `aria-multiselectable="true"` while `multiple`, plus `data-multiple` and
- * `data-disabled`.
- *
- * This is the selection list without the popup: `Select` is this plus a
- * trigger and a floating layer, `Combobox` is this plus a text filter and
- * virtual focus. Reach for `Listbox` when the options should always be on
- * screen — a transfer/pick-list, a settings panel, a master list beside a
- * detail pane.
- *
- * Focus is real, not virtual: exactly one option carries `tabIndex={0}` (the
- * selected one, else the first enabled one) and the arrows move it, so the
- * list is one Tab stop from the outside and `document.activeElement` is always
- * the option a screen reader is announcing.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Renders a WAI-ARIA listbox with roving-focus arrow-key navigation, typeahead, and single or multiple selection.
  *
  * @example
  * ```tsx
  * <Listbox aria-label="Framework" defaultValue="react">
  *   <ListboxItem value="react">React</ListboxItem>
  *   <ListboxItem value="vue">Vue</ListboxItem>
- *   <ListboxItem value="svelte">Svelte</ListboxItem>
- * </Listbox>
- * ```
- *
- * @example Multi-select, with an indicator — note `textValue`, because the
- * checkmark would otherwise be part of what typeahead matches:
- * ```tsx
- * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
- *   <ListboxItem value="react" textValue="React">
- *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *     React
- *   </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,51 +1,22 @@
 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;
 /**
- * A standalone WAI-ARIA listbox: an always-visible list of options with one
- * tab stop, arrow-key roving focus, typeahead, and single or multiple
- * selection. Renders a `<div role="listbox">` carrying
- * `aria-multiselectable="true"` while `multiple`, plus `data-multiple` and
- * `data-disabled`.
- *
- * This is the selection list without the popup: `Select` is this plus a
- * trigger and a floating layer, `Combobox` is this plus a text filter and
- * virtual focus. Reach for `Listbox` when the options should always be on
- * screen — a transfer/pick-list, a settings panel, a master list beside a
- * detail pane.
- *
- * Focus is real, not virtual: exactly one option carries `tabIndex={0}` (the
- * selected one, else the first enabled one) and the arrows move it, so the
- * list is one Tab stop from the outside and `document.activeElement` is always
- * the option a screen reader is announcing.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Renders a WAI-ARIA listbox with roving-focus arrow-key navigation, typeahead, and single or multiple selection.
  *
  * @example
  * ```tsx
  * <Listbox aria-label="Framework" defaultValue="react">
  *   <ListboxItem value="react">React</ListboxItem>
  *   <ListboxItem value="vue">Vue</ListboxItem>
- *   <ListboxItem value="svelte">Svelte</ListboxItem>
- * </Listbox>
- * ```
- *
- * @example Multi-select, with an indicator — note `textValue`, because the
- * checkmark would otherwise be part of what typeahead matches:
- * ```tsx
- * <Listbox multiple aria-label="Frameworks" defaultValue={['react']}>
- *   <ListboxItem value="react" textValue="React">
- *     <ListboxItemIndicator>✓</ListboxItemIndicator>
- *     React
- *   </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 n from"react";import{createSafeContext as K}from"../utils/createContext.js";import{skdxPart as O}from"../utils/part.js";import{composeEventHandlers as F,Primitive as q}from"../utils/primitive.js";import{useRovingFocus as _}from"../utils/useRovingFocus.js";import{useSelection as z}from"../utils/useSelection.js";import{isTypeaheadKey as B,useTypeahead as J}from"../utils/useTypeahead.js";import{jsx as y}from"react/jsx-runtime";var P='[role="option"]:not([data-disabled])',[Q,v]=K("Listbox");function L(t){return Array.from(t.querySelectorAll(P))}function U(t){return t.getAttribute("data-text-value")??t.textContent??""}var W=n.forwardRef(({value:t,defaultValue:i,onValueChange:s,multiple:o=!1,disabled:d=!1,...a},r)=>{let l=n.useRef(null),[m,c]=n.useState(null),{selectedValues:S,isSelected:p,selectItem:M}=z({value:t,defaultValue:i,onValueChange:s,multiple:o}),N=_({orientation:"vertical",loop:!1,itemSelector:P,typeahead:!1}),w=J(n.useCallback(()=>l.current?L(l.current).map(U):[],[]));return n.useLayoutEffect(()=>{if(m!==null)return;let e=l.current;if(!e)return;let u=L(e),x=(u.find(A=>p(A.getAttribute("data-value")??""))??u[0])?.getAttribute("data-value");x&&c(x)},[m,p]),y(Q,{multiple:o,selectedValues:S,isSelected:p,selectItem:M,disabled:d,activeValue:m,setActiveValue:c,children:y(q.div,{role:"listbox","aria-multiselectable":o?!0:void 0,"aria-disabled":d||void 0,"data-multiple":o?"":void 0,"data-disabled":d?"":void 0,...a,...O("listbox","root",a.className),ref:e=>{l.current=e,typeof r=="function"?r(e):r&&(r.current=e)},onKeyDown:F(a.onKeyDown,e=>{if(N(e),e.defaultPrevented||!B(e))return;let u=l.current;if(!u)return;let f=L(u),x=w(e.key,f.indexOf(e.target));x!==-1&&(e.preventDefault(),f[x].focus())})})})});W.displayName="Listbox";import*as C from"react";import{createSafeContext as X}from"../utils/createContext.js";import{skdxPart as Y}from"../utils/part.js";import{composeEventHandlers as I,Primitive as Z}from"../utils/primitive.js";import{rovingTabIndex as $}from"../utils/useRovingFocus.js";import{jsx as R}from"react/jsx-runtime";var[j,h]=X("ListboxItem"),E=C.forwardRef(({value:t,disabled:i=!1,textValue:s,...o},d)=>{let a=v("ListboxItem"),r=i||a.disabled,l=a.isSelected(t),m=()=>{r||a.selectItem(t)};return R(j,{value:t,selected:l,disabled:r,children:R(Z.div,{role:"option","aria-selected":l,"aria-disabled":r||void 0,"data-value":t,"data-text-value":s,"data-state":l?"checked":"unchecked","data-disabled":r?"":void 0,tabIndex:$(a.activeValue!==null,a.activeValue===t,r),...o,...Y("listbox","item",o.className),ref:d,onClick:I(o.onClick,m),onFocus:I(o.onFocus,()=>{r||a.setActiveValue(t)}),onKeyDown:I(o.onKeyDown,c=>{c.key!==" "&&c.key!=="Enter"||(c.preventDefault(),m())})})})});E.displayName="ListboxItem";import*as T from"react";import{skdxPart as tt}from"../utils/part.js";import{Primitive as et}from"../utils/primitive.js";import{jsx as ot}from"react/jsx-runtime";var k=T.forwardRef(({forceMount:t,...i},s)=>{let o=h("ListboxItemIndicator");return t||o.selected?ot(et.span,{"aria-hidden":!0,...i,...tt("listbox","item-indicator",i.className),ref:s}):null});k.displayName="ListboxItemIndicator";import*as b from"react";import{createSafeContext as rt}from"../utils/createContext.js";import{skdxPart as it}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var[at,g]=rt("ListboxGroup"),D=b.forwardRef((t,i)=>{let s=b.useId();return V(at,{labelId:s,children:V(st.div,{role:"group","aria-labelledby":s,...t,...it("listbox","group",t.className),ref:i})})});D.displayName="ListboxGroup";import*as G from"react";import{skdxPart as nt}from"../utils/part.js";import{Primitive as lt}from"../utils/primitive.js";import{jsx as mt}from"react/jsx-runtime";var H=G.forwardRef((t,i)=>{let s=g("ListboxLabel");return mt(lt.div,{id:s.labelId,...t,...nt("listbox","label",t.className),ref:i})});H.displayName="ListboxLabel";export{W as Listbox,D as ListboxGroup,E as ListboxItem,k as ListboxItemIndicator,H as ListboxLabel,Q as ListboxProvider,P as OPTION_SELECTOR,v as useListboxContext};
+'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

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

package/dist/listbox/ListboxAnatomy.d.ts

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

package/dist/listbox/ListboxGroup.d.cts

@@ -1,20 +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">` whose `aria-labelledby` points at that label.
- *
- * The wiring is automatic here, unlike `SelectGroup`/`SelectLabel`, which are
- * purely presentational: a `Select`'s groups sit inside a popup the user
- * opened deliberately, whereas a standalone listbox is often one of several on
- * a page, so an unnamed group leaves a screen reader announcing "group" with
- * nothing to distinguish it.
+ * Groups related `ListboxItem`s under a {@link ListboxLabel}, rendering a `<div role="group">` with `aria-labelledby` wired automatically.
  *
  * @example
  * ```tsx
@@ -24,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,20 +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">` whose `aria-labelledby` points at that label.
- *
- * The wiring is automatic here, unlike `SelectGroup`/`SelectLabel`, which are
- * purely presentational: a `Select`'s groups sit inside a popup the user
- * opened deliberately, whereas a standalone listbox is often one of several on
- * a page, so an unnamed group leaves a screen reader announcing "group" with
- * nothing to distinguish it.
+ * Groups related `ListboxItem`s under a {@link ListboxLabel}, rendering a `<div role="group">` with `aria-labelledby` wired automatically.
  *
  * @example
  * ```tsx
@@ -24,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,23 +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.
- *
- * 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
@@ -27,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,23 +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.
- *
- * 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
@@ -27,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,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.cjs';
 /**
- * Marker shown inside a {@link ListboxItem} while that option is selected
- * (typically a checkmark). Renders an `aria-hidden` `<span>` — the option's
- * `aria-selected` already carries the state, so announcing the glyph too would
- * say it twice; renders nothing while its option isn't selected unless
- * `forceMount` is set.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Marker shown while an option is selected, hidden from accessibility and rendering nothing while unselected unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -18,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,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ListboxItemIndicatorProps } from './types.js';
 /**
- * Marker shown inside a {@link ListboxItem} while that option is selected
- * (typically a checkmark). Renders an `aria-hidden` `<span>` — the option's
- * `aria-selected` already carries the state, so announcing the glyph too would
- * say it twice; renders nothing while its option isn't selected unless
- * `forceMount` is set.
- *
- * Give the option a `textValue` whenever you render an indicator: typeahead
- * otherwise matches against the option's whole text content, glyph included.
+ * Marker shown while an option is selected, hidden from accessibility and rendering nothing while unselected unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -18,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,12 +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>` carrying
- * the id its group points `aria-labelledby` at, so the group is named without
- * the label itself becoming an option.
- *
- * Must be rendered inside a `ListboxGroup` — a label with no group to name has
- * nothing to attach to.
+ * The heading naming a {@link ListboxGroup}, rendered as a `<div>` carrying the id its group's `aria-labelledby` points at.
  *
  * @example
  * ```tsx
@@ -16,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;
+};