@skdx/react 0.27.0 → 0.29.0

package/dist/transfer/Transfer.d.ts

@@ -1,92 +1,35 @@
 import * as React from 'react';
-import type { TransferContextValue, TransferDirection, TransferListContextValue, TransferMoveDetail, TransferProps, TransferSide } from './types.js';
+import type { TransferContextValue, TransferDirection, TransferFilterMatchMode, TransferItemData, TransferListContextValue, TransferMoveDetail, TransferProps, TransferSearchResultsDetail, TransferSide } from './types.js';
 /** @internal Every option that can hold focus or be moved. Disabled options are skipped by both. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
-export declare const TransferProvider: {
-    (props: TransferContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTransferContext: (consumerName: string) => TransferContextValue;
-/**
- * Tells a `TransferItem` which list it is inside.
- *
- * Lives here rather than in `TransferList.tsx` because `TransferList` renders
- * `TransferItem`s by default and `TransferItem` needs the context back — a
- * module cycle that would leave one of the two `forwardRef` consts undefined
- * at import time.
- *
- * @internal
- */
-export declare const TransferListProvider: {
-    (props: TransferListContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTransferListContext: (consumerName: string) => TransferListContextValue;
+export declare const TransferProvider: React.FC<TransferContextValue & {
+    children: React.ReactNode;
+}>, useTransferContext: (consumerName: string) => TransferContextValue;
+/** @internal Tells a `TransferItem` which list it is inside. */
+export declare const TransferListProvider: React.FC<TransferListContextValue & {
+    children: React.ReactNode;
+}>, useTransferListContext: (consumerName: string) => TransferListContextValue;
 /** @internal Where a direction takes items *from*. */
 export declare const ORIGIN_OF: Record<TransferDirection, TransferSide>;
 /** @internal Where a direction takes items *to*. */
 export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
-/**
- * @internal The word each side is called in default accessible names and in
- * the move announcement. Deliberately the *same* word in both, so "Move 3
- * items to selected" and "3 items moved to selected" name the same list.
- */
+/** @internal Word each side is called in default accessible names and move announcements. */
 export declare const SIDE_NOUN: Record<TransferSide, string>;
-/**
- * The default wording of the post-move announcement. Split out so
- * {@link TransferProps.getMoveAnnouncement} has something to fall back to and
- * so a consumer can call it for the sides they do not want to re-word.
- */
+/** @internal Both sides, in a fixed order, so effects can walk them without allocating. */
+export declare const SIDES: readonly TransferSide[];
+/** Default move announcement (for {@link TransferProps.getMoveAnnouncement}} fallback). */
 export declare function moveAnnouncement({ moved, remaining, from, to }: TransferMoveDetail): string;
-/**
- * The accessible name of a move trigger: direction *and* count, because "→" is
- * unambiguous next to two labelled lists and meaningless read out on its own.
- *
- * With nothing to move the name says so rather than going silent — the trigger
- * stays focusable (`aria-disabled`, not `disabled`), so it is still the thing
- * that teaches a keyboard user the interaction, and it has to explain why
- * pressing it does nothing.
- *
- * @internal
- */
+/** Default search-results announcement (for {@link TransferProps.getSearchResultsAnnouncement}} fallback). */
+export declare function searchResultsAnnouncement({ shown, total, side, }: TransferSearchResultsDetail): string;
+/** Move-trigger accessible name (direction + count; trigger stays focusable with nothing to move to explain why). @internal */
 export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/** Built-in matcher (parameterised by `filterMatchMode`; case-insensitive and trimmed). */
+export declare function matchesFilterMode(item: TransferItemData, query: string, mode?: TransferFilterMatchMode): boolean;
 /**
- * A two-list transfer (also "pick list" or "dual list box"): a pool of items on
- * one side, the chosen ones on the other, and triggers that move items between
- * them. Renders a plain `<div>` — the two `role="listbox"` elements are its
- * `TransferList` parts.
- *
- * Membership is the only stored state: `value` holds the ids on the target
- * side, and both lists are *derived* from `items` plus that array, so the two
- * sides cannot drift apart. Each list additionally owns a transient
- * marked-for-move multi-selection, which is cleared for whichever side an item
- * leaves.
- *
- * Every move is reachable without a pointer. Each list is one Tab stop with its
- * own roving focus, the move triggers are real buttons with names that say
- * direction and count, each move is announced politely, and focus lands on the
- * option that took the moved item's place — never on `<body>`.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * @example
- * ```tsx
- * <Transfer items={FRAMEWORKS} defaultValue={['react']}>
- *   <TransferListHeader side="source">Available</TransferListHeader>
- *   <TransferList side="source" />
- *   <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
- *
- *   <TransferControls>
- *     <TransferMoveTrigger direction="toTarget">→</TransferMoveTrigger>
- *     <TransferMoveTrigger direction="toSource">←</TransferMoveTrigger>
- *   </TransferControls>
- *
- *   <TransferListHeader side="target">Selected</TransferListHeader>
- *   <TransferList side="target" />
- *   <TransferEmpty side="target">Nothing selected yet.</TransferEmpty>
- * </Transfer>
- * ```
+ * Two-list transfer whose triggers move items between a pool and a chosen list, both derived from `items` and `value` so they never drift.
+ * @example `<Transfer items={FRAMEWORKS} defaultValue={['react']} searchable />`
  */
-export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Transfer: {
+    ({ items, value, defaultValue, onValueChange, onMove, disabled, name, form, searchable, filter, filterMatchMode, getMoveLabel, getMoveAnnouncement, getSearchResultsAnnouncement, targetOrder, onListScroll, titles, emptyText, showMoveAll, renderItem, children, density, shape, size, ref: forwardedRef, ...props }: TransferProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/Transfer.js

@@ -1 +1,2 @@
-import*as f from"react";import{createSafeContext as j}from"../utils/createContext.js";import{announce as Me}from"../utils/liveAnnouncer.js";import{skdxPart as Pe}from"../utils/part.js";import{Primitive as Ce}from"../utils/primitive.js";import{useControllableState as ke}from"../utils/useControllableState.js";import{jsx as Z}from"react/jsx-runtime";var k='[role="option"]:not([data-disabled])',[Ie,g]=j("Transfer"),[ee,re]=j("TransferList"),w={toTarget:"source",toSource:"target"},te={toTarget:"target",toSource:"source"},W={source:"available",target:"selected"},Ee=[];function ae({moved:e,remaining:r,from:t,to:i}){return`${e} ${e===1?"item":"items"} moved to ${W[i]}. ${r} remaining in ${W[t]}.`}function De(e,r,t){let i=W[te[r]],n=t?"Move all":"Move";return e===0?`${n} items to ${i}, ${t?"nothing to move":"nothing selected"}`:`${n} ${e} ${e===1?"item":"items"} to ${i}`}function Ae(e,r){return e.label.toLowerCase().includes(r.trim().toLowerCase())}var se=f.forwardRef(({items:e,value:r,defaultValue:t,onValueChange:i,onMove:n,disabled:c=!1,searchable:u=!1,filter:b,getMoveLabel:T,getMoveAnnouncement:m,...p},S)=>{let h=f.useId(),[L,N]=ke({prop:r,defaultProp:t,onChange:i}),y=L??Ee,[E,F]=f.useState({source:[],target:[]}),[M,_]=f.useState({source:"",target:""}),[O,B]=f.useState({source:null,target:null}),[a,R]=f.useState({source:!1,target:!1}),C=f.useRef({source:null,target:null}),x=f.useRef({source:null,target:null}),D=f.useRef(null),v=f.useMemo(()=>({source:e.filter(s=>!y.includes(s.value)),target:e.filter(s=>y.includes(s.value))}),[e,y]),q=f.useMemo(()=>{if(!u)return v;let s=b??Ae,l=o=>M[o].trim()===""?v[o]:v[o].filter(P=>s(P,M[o]));return{source:l("source"),target:l("target")}},[u,b,M,v]),Q=f.useMemo(()=>({source:E.source.filter(s=>v.source.some(l=>l.value===s)),target:E.target.filter(s=>v.target.some(l=>l.value===s))}),[E,v]),U=f.useCallback((s,l)=>{F(o=>({...o,[s]:l}))},[]),ve=f.useCallback((s,l)=>{_(o=>o[s]===l?o:{...o,[s]:l})},[]),J=f.useCallback((s,l)=>{B(o=>o[s]===l?o:{...o,[s]:l})},[]),ye=f.useCallback((s,l)=>{R(o=>o[s]===l?o:{...o,[s]:l})},[]),he=f.useCallback((s,l)=>{x.current[s]=l},[]),Le=f.useCallback((s,l)=>{if(c)return;let o=w[s],P=te[s],A=v[o],H=l.map(d=>A.find(G=>G.value===d)).filter(d=>d!==void 0&&!d.disabled);if(H.length===0)return;let $=H.map(d=>d.value),xe=q[o].filter(d=>!d.disabled),X=$.map(d=>xe.findIndex(G=>G.value===d)).filter(d=>d>=0);D.current={side:o,index:X.length>0?Math.min(...X):0},N(s==="toTarget"?[...y,...$.filter(d=>!y.includes(d))]:y.filter(d=>!$.includes(d))),U(o,Q[o].filter(d=>!$.includes(d))),n?.(H,s);let Se={moved:H.length,remaining:A.length-H.length,direction:s,from:o,to:P};Me((m??ae)(Se))},[c,m,Q,n,U,N,v,y,q]),Re=f.useCallback((s,l,o)=>(T??De)(s,l,o),[T]);return f.useLayoutEffect(()=>{let s=D.current;if(!s)return;D.current=null;let l=x.current[s.side];if(!l)return;let o=Array.from(l.querySelectorAll(k)),P=o[Math.min(s.index,o.length-1)];if(P){let A=P.getAttribute("data-value");A&&J(s.side,A),P.focus()}else l.focus()}),Z(Ie,{baseId:h,disabled:c,searchable:u,sideItems:v,visibleItems:q,marked:Q,setMarked:U,query:M,setQuery:ve,active:O,setActive:J,anchor:C,labelled:a,registerHeader:ye,registerList:he,move:Le,moveLabel:Re,children:Z(Ce.div,{"data-disabled":c?"":void 0,...p,...Pe("transfer","root",p.className),ref:S})})});se.displayName="Transfer";import*as I from"react";import{Listbox as Ve}from"../listbox/Listbox.js";import{clamp as Ke}from"../utils/clamp.js";import{directionalKey as Fe,useDirection as _e}from"../utils/direction.js";import{composeEventHandlers as Be}from"../utils/primitive.js";import{useRovingTabStop as qe}from"../utils/useRovingFocus.js";import*as ne from"react";import{ListboxItem as He}from"../listbox/Listbox.js";import{skdxPart as we}from"../utils/part.js";import{composeEventHandlers as Y}from"../utils/primitive.js";import{rovingTabIndex as Ne}from"../utils/useRovingFocus.js";import{jsx as $e}from"react/jsx-runtime";function Oe(e){let r=e.closest('[role="listbox"]');return r?Array.from(r.querySelectorAll(k),t=>t.getAttribute("data-value")).filter(t=>t!==null):[]}var V=ne.forwardRef(({value:e,disabled:r=!1,...t},i)=>{let n=g("TransferItem"),{side:c}=re("TransferItem"),u=r||n.disabled,b=n.marked[c].includes(e),T=()=>{u||(n.anchor.current[c]=e)};return $e(He,{value:e,disabled:u,"data-side":c,"data-selected":b?"":void 0,tabIndex:Ne(n.active[c]!==null,n.active[c]===e,u),...t,...we("transfer","item",t.className),ref:i,onFocus:Y(t.onFocus,()=>{u||n.setActive(c,e)}),onClick:Y(t.onClick,m=>{if(u||!m.shiftKey){T();return}m.preventDefault();let p=Oe(m.currentTarget),S=n.anchor.current[c]??e,h=p.indexOf(S),L=p.indexOf(e);n.setMarked(c,h===-1||L===-1?[e]:p.slice(Math.min(h,L),Math.max(h,L)+1))}),onKeyDown:Y(t.onKeyDown,m=>{(m.key===" "||m.key==="Enter")&&T()})})});V.displayName="TransferItem";import{jsx as z}from"react/jsx-runtime";var Qe={source:"Available items",target:"Selected items"},Ue={source:"ArrowRight",target:"ArrowLeft"};function Ge(e,r,t){let i=e.indexOf(r),n=e.indexOf(t);return i===-1||n===-1?e.includes(t)?[t]:[]:e.slice(Math.min(i,n),Math.max(i,n)+1)}var oe=I.forwardRef(({side:e,children:r,...t},i)=>{let n=g("TransferList"),{anchor:c,baseId:u,disabled:b,labelled:T,marked:m,move:p,registerList:S,setActive:h,setMarked:L,visibleItems:N}=n,y=I.useRef(null),E=_e(),F=I.useCallback(a=>{y.current=a,S(e,a),typeof i=="function"?i(a):i&&(i.current=a)},[i,S,e]);qe(y,k,"data-value",n.active[e],a=>h(e,a));let M=N[e],_=`${u}-${e}-header`,O=T[e]?_:void 0,B=()=>Array.from(y.current?.querySelectorAll(k)??[],a=>a.getAttribute("data-value")).filter(a=>a!==null);return z(ee,{side:e,children:z(Ve,{multiple:!0,id:`${u}-${e}-list`,disabled:b,value:m[e],onValueChange:a=>L(e,a),"data-side":e,"data-empty":M.length===0?"":void 0,"aria-labelledby":O,"aria-label":O?void 0:Qe[e],tabIndex:b||M.some(a=>!a.disabled)?void 0:0,...t,ref:F,onKeyDown:Be(t.onKeyDown,a=>{if(b)return;let R=B();if(R.length===0)return;let C=a.target.getAttribute?.("data-value")??null;if((a.ctrlKey||a.metaKey)&&a.key.toLowerCase()==="a"){a.preventDefault(),L(e,R);return}if(a.shiftKey&&(a.key==="ArrowDown"||a.key==="ArrowUp")){let x=C===null?-1:R.indexOf(C);if(x===-1)return;let D=Ke(x+(a.key==="ArrowDown"?1:-1),0,R.length-1),v=c.current[e]??R[x];c.current[e]=v,L(e,Ge(R,v,R[D]));return}if(Fe(a.key,a.currentTarget,E)===Ue[e]){let x=m[e].length>0?m[e]:C?[C]:[];if(x.length===0)return;a.preventDefault(),p(e==="source"?"toTarget":"toSource",x)}}),children:r??M.map(a=>z(V,{value:a.value,disabled:a.disabled,textValue:a.label,children:a.label},a.value))})})});oe.displayName="TransferList";import*as K from"react";import{skdxPart as We}from"../utils/part.js";import{Primitive as Ye}from"../utils/primitive.js";import{jsx as ze}from"react/jsx-runtime";var ie=K.forwardRef(({side:e,...r},t)=>{let{baseId:i,registerHeader:n}=g("TransferListHeader");return K.useLayoutEffect(()=>(n(e,!0),()=>n(e,!1)),[n,e]),ze(Ye.div,{id:`${i}-${e}-header`,"data-side":e,...r,...We("transfer","list-header",r.className),ref:t})});ie.displayName="TransferListHeader";import*as le from"react";import{skdxPart as Je}from"../utils/part.js";import{composeEventHandlers as Xe,Primitive as Ze}from"../utils/primitive.js";import{jsx as er}from"react/jsx-runtime";var je={source:"Filter available items",target:"Filter selected items"},fe=le.forwardRef(({side:e,...r},t)=>{let{baseId:i,disabled:n,query:c,searchable:u,setQuery:b}=g("TransferListSearch");return u?er(Ze.input,{type:"search",value:c[e],disabled:n,"data-side":e,"aria-label":je[e],"aria-controls":`${i}-${e}-list`,...r,...Je("transfer","list-search",r.className),ref:t,onChange:Xe(r.onChange,T=>{b(e,T.currentTarget.value)})}):null});fe.displayName="TransferListSearch";import*as ce from"react";import{skdxPart as rr}from"../utils/part.js";import{Primitive as tr}from"../utils/primitive.js";import{jsx as ar}from"react/jsx-runtime";var me=ce.forwardRef((e,r)=>{let{disabled:t}=g("TransferControls");return ar(tr.div,{role:"group","aria-label":"Move items","data-disabled":t?"":void 0,...e,...rr("transfer","controls",e.className),ref:r})});me.displayName="TransferControls";import*as ue from"react";import{skdxPart as sr}from"../utils/part.js";import{composeEventHandlers as nr,Primitive as or}from"../utils/primitive.js";import{jsx as ir}from"react/jsx-runtime";var de=ue.forwardRef(({direction:e,...r},t)=>{let{disabled:i,marked:n,move:c,moveLabel:u,sideItems:b}=g("TransferMoveTrigger"),T=w[e],m=n[T].filter(S=>!b[T].find(h=>h.value===S)?.disabled),p=i||m.length===0;return ir(or.button,{type:"button","aria-disabled":p||void 0,"aria-label":u(m.length,e,!1),"data-direction":e,"data-count":m.length,"data-disabled":p?"":void 0,...r,...sr("transfer","move-trigger",r.className),ref:t,onClick:nr(r.onClick,()=>{p||c(e,m)})})});de.displayName="TransferMoveTrigger";import*as Te from"react";import{skdxPart as lr}from"../utils/part.js";import{composeEventHandlers as fr,Primitive as cr}from"../utils/primitive.js";import{jsx as mr}from"react/jsx-runtime";var pe=Te.forwardRef(({direction:e,...r},t)=>{let{disabled:i,move:n,moveLabel:c,visibleItems:u}=g("TransferMoveAllTrigger"),b=w[e],T=u[b].filter(p=>!p.disabled).map(p=>p.value),m=i||T.length===0;return mr(cr.button,{type:"button","aria-disabled":m||void 0,"aria-label":c(T.length,e,!0),"data-direction":e,"data-count":T.length,"data-disabled":m?"":void 0,...r,...lr("transfer","move-all-trigger",r.className),ref:t,onClick:fr(r.onClick,()=>{m||n(e,T)})})});pe.displayName="TransferMoveAllTrigger";import*as ge from"react";import{skdxPart as ur}from"../utils/part.js";import{Primitive as dr}from"../utils/primitive.js";import{jsx as Tr}from"react/jsx-runtime";var be=ge.forwardRef(({side:e,...r},t)=>{let{visibleItems:i}=g("TransferEmpty");return i[e].length>0?null:Tr(dr.div,{"data-side":e,"data-empty":"",...r,...ur("transfer","empty",r.className),ref:t})});be.displayName="TransferEmpty";export{se as Transfer,me as TransferControls,be as TransferEmpty,V as TransferItem,oe as TransferList,ie as TransferListHeader,fe as TransferListSearch,pe as TransferMoveAllTrigger,de as TransferMoveTrigger,ae as moveAnnouncement};
+'use client';
+import*as p from"react";import{createSafeContext as Te}from"../utils/createContext.js";import{MirroredValues as Rr}from"../utils/hiddenInput.js";import{announce as pe}from"../utils/liveAnnouncer.js";import{skdxPart as hr}from"../utils/part.js";import{Primitive as Sr}from"../utils/primitive.js";import{recipeAxis as Z}from"../utils/recipeAxis.js";import{useControllableState as Mr}from"../utils/useControllableState.js";import{Glyph as Q}from"../utils/Glyph.js";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as Ce}from"../utils/primitive.js";import{jsx as Pe}from"react/jsx-runtime";var W=({ref:e,...s})=>{let{disabled:r}=b("TransferControls");return Pe(Ce.div,{role:"group","aria-label":"Move items","data-disabled":r?"":void 0,...s,...Ee("transfer","controls",s.className),ref:e})};W.displayName="TransferControls";import{skdxPart as Ae}from"../utils/part.js";import{Primitive as De}from"../utils/primitive.js";import{jsx as Ne}from"react/jsx-runtime";var K=({side:e,children:s,ref:r,...n})=>{let{query:t,sideItems:o,visibleItems:a}=b("TransferEmpty");if(a[e].length>0)return null;let i=o[e].length===0?"empty":"no-results",l=i==="no-results"?t[e]:"";return Ne(De.div,{"data-side":e,"data-empty":"","data-reason":i,"data-query":l,...n,...Ae("transfer","empty",n.className),ref:r,children:typeof s=="function"?s({reason:i,query:l}):s})};K.displayName="TransferEmpty";import*as w from"react";import{Listbox as $e}from"../listbox/Listbox.js";import{clamp as _e}from"../utils/clamp.js";import{directionalKey as qe,useDirection as Qe}from"../utils/direction.js";import{composeEventHandlers as ze,useComposedEventHandlers as ie}from"../utils/primitive.js";import{useRovingTabStop as Be}from"../utils/useRovingFocus.js";import{ListboxItem as He}from"../listbox/Listbox.js";import{skdxPart as Oe}from"../utils/part.js";import{composeEventHandlers as Ke,useComposedEventHandlers as ae}from"../utils/primitive.js";import{rovingTabIndex as we}from"../utils/useRovingFocus.js";import{jsx as Fe}from"react/jsx-runtime";function Ve(e){let s=e.closest('[role="listbox"]');return s?Array.from(s.querySelectorAll(D),r=>r.getAttribute("data-value")).filter(r=>r!==null):[]}var X=({value:e,disabled:s=!1,ref:r,...n})=>{let t=b("TransferItem"),{anchorRef:o}=t,{side:a}=oe("TransferItem"),i=s||t.disabled,l=t.marked[a].includes(e),m=()=>{i||(o.current[a]=e)};return Fe(He,{value:e,disabled:i,"data-side":a,"data-selected":l?"":void 0,tabIndex:we(t.active[a]!==null,t.active[a]===e,i),...n,...Oe("transfer","item",n.className),ref:r,onFocus:Ke(n.onFocus,()=>{i||t.setActive(a,e)}),onClick:ae(n.onClick,T=>{if(i||!T.shiftKey){m();return}T.preventDefault();let v=Ve(T.currentTarget),d=o.current[a]??e,u=v.indexOf(d),f=v.indexOf(e);t.setMarked(a,u===-1||f===-1?[e]:v.slice(Math.min(u,f),Math.max(u,f)+1))}),onKeyDown:ae(n.onKeyDown,T=>{!T.shiftKey&&(T.key===" "||T.key==="Enter")&&m()})})};X.displayName="TransferItem";import{jsx as Y}from"react/jsx-runtime";var Ue={source:"Available items",target:"Selected items"},Ge={source:"ArrowRight",target:"ArrowLeft"};function J(e,s,r){let n=e.indexOf(s),t=e.indexOf(r);return n===-1||t===-1?e.includes(r)?[r]:[]:e.slice(Math.min(n,t),Math.max(n,t)+1)}function We(e,s){if(!(e.shiftKey&&(e.ctrlKey||e.metaKey)&&(e.key==="Home"||e.key==="End")))return!1;let{options:n,values:t,focusedValue:o,side:a,setMarked:i}=s;if(o===null)return!0;e.preventDefault();let l=e.key==="Home"?t[0]:t[t.length-1];return i(a,J(t,o,l)),n[e.key==="Home"?0:n.length-1].focus(),!0}function Xe(e,s){if(!((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"))return!1;let{values:r,marked:n,side:t,setMarked:o}=s;e.preventDefault();let a=r.every(i=>n[t].includes(i));return o(t,a?[]:r),!0}function Ye(e,s){if(!(e.shiftKey&&e.key===" "))return!1;let{values:r,focusedValue:n,anchorRef:t,side:o,setMarked:a}=s;if(n===null)return!0;e.preventDefault();let i=t.current[o]??n;return t.current[o]=i,a(o,J(r,i,n)),!0}function Je(e,s){if(!(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")))return!1;let{options:r,values:n,focusedValue:t,anchorRef:o,side:a,setMarked:i}=s,l=t===null?-1:n.indexOf(t);if(l===-1)return!0;let m=_e(l+(e.key==="ArrowDown"?1:-1),0,n.length-1);e.preventDefault();let T=o.current[a]??n[l];return o.current[a]=T,i(a,J(n,T,n[m])),r[m].focus(),!0}function Ze(e,s){let{dir:r,side:n,focusedValue:t,marked:o,move:a}=s;if(qe(e.key,e.currentTarget,r)!==Ge[n])return;let i=o[n];i.length===0&&(i=t?[t]:[]),i.length!==0&&(e.preventDefault(),a(n==="source"?"toTarget":"toSource",i))}var V=({side:e,renderItem:s,children:r,ref:n,...t})=>{let o=b("TransferList"),{anchorRef:a,baseId:i,disabled:l,labelled:m,marked:T,move:v,emitListScroll:d,registerList:u,setActive:f,setMarked:S,suppressFocusInRef:x,visibleItems:M}=o,h=w.useRef(null),N=Qe(),P=w.useCallback(c=>{h.current=c,u(e,c),typeof n=="function"?n(c):n&&(n.current=c)},[n,u,e]);Be(h,D,"data-value",o.active[e],c=>f(e,c));let L=M[e],k=`${i}-${e}-header`,A=m[e]?k:void 0,g=()=>Array.from(h.current?.querySelectorAll(D)??[]).filter(c=>c.getAttribute("data-value")!==null);return Y(fe,{side:e,children:Y($e,{multiple:!0,id:`${i}-${e}-list`,disabled:l,value:T[e],onValueChange:c=>S(e,c.value),"data-side":e,"data-empty":L.length===0?"":void 0,"aria-labelledby":A,"aria-label":A?void 0:Ue[e],tabIndex:l||L.some(c=>!c.disabled)?void 0:0,...t,ref:P,onScroll:ze(t.onScroll,c=>{d(e,c.currentTarget)}),onFocus:ie(t.onFocus,c=>{if(l)return;if(x.current){x.current=!1;return}let I=h.current,E=c.relatedTarget;if(!I||!E||I.contains(E))return;let C=g();if(C.length===0)return;let R=C.find(H=>T[e].includes(H.getAttribute("data-value")??""))??C[0];R!==c.target&&R.focus()}),onKeyDown:ie(t.onKeyDown,c=>{if(l)return;let I=g(),E=I.map(H=>H.getAttribute("data-value"));if(E.length===0)return;let C=c.target.getAttribute?.("data-value")??null,R={side:e,dir:N,options:I,values:E,focusedValue:C,anchorRef:a,marked:T,setMarked:S,move:v};We(c,R)||Xe(c,R)||Ye(c,R)||Je(c,R)||Ze(c,R)}),children:r??L.map(c=>Y(X,{value:c.value,disabled:c.disabled,textValue:c.label,children:s?s(c):c.label},c.value))})})};V.displayName="TransferList";import*as le from"react";import{skdxPart as je}from"../utils/part.js";import{Primitive as er}from"../utils/primitive.js";import{jsx as rr}from"react/jsx-runtime";var F=({side:e,ref:s,...r})=>{let{baseId:n,registerHeader:t}=b("TransferListHeader");return le.useLayoutEffect(()=>(t(e,!0),()=>t(e,!1)),[t,e]),rr(er.div,{id:`${n}-${e}-header`,"data-side":e,...r,...je("transfer","list-header",r.className),ref:s})};F.displayName="TransferListHeader";import{skdxPart as tr}from"../utils/part.js";import{composeEventHandlers as nr,Primitive as sr}from"../utils/primitive.js";import{jsx as or}from"react/jsx-runtime";var ar={source:"Filter available items",target:"Filter selected items"},$=({side:e,ref:s,...r})=>{let{baseId:n,disabled:t,query:o,searchable:a,setQuery:i}=b("TransferListSearch");return a?or(sr.input,{type:"search",value:o[e],disabled:t,"data-side":e,"aria-label":ar[e],"aria-controls":`${n}-${e}-list`,...r,...tr("transfer","list-search",r.className),ref:s,onChange:nr(r.onChange,l=>{i(e,l.currentTarget.value)})}):null};$.displayName="TransferListSearch";import{skdxPart as ir}from"../utils/part.js";import{composeEventHandlers as fr,Primitive as lr}from"../utils/primitive.js";import{jsx as cr}from"react/jsx-runtime";var _=({direction:e,ref:s,...r})=>{let{disabled:n,move:t,moveLabel:o,visibleItems:a}=b("TransferMoveAllTrigger"),i=O[e],l=a[i].filter(T=>!T.disabled).map(T=>T.value),m=n||l.length===0;return cr(lr.button,{type:"button","aria-disabled":m||void 0,"aria-label":o(l.length,e,!0),"data-direction":e,"data-count":l.length,"data-disabled":m?"":void 0,...r,...ir("transfer","move-all-trigger",r.className),ref:s,onClick:fr(r.onClick,()=>{m||t(e,l)})})};_.displayName="TransferMoveAllTrigger";import{skdxPart as dr}from"../utils/part.js";import{composeEventHandlers as ur,Primitive as mr}from"../utils/primitive.js";import{jsx as Tr}from"react/jsx-runtime";var q=({direction:e,ref:s,...r})=>{let{disabled:n,marked:t,move:o,moveLabel:a,sideItems:i}=b("TransferMoveTrigger"),l=O[e],m=t[l].filter(v=>!i[l].find(d=>d.value===v)?.disabled),T=n||m.length===0;return Tr(mr.button,{type:"button","aria-disabled":T||void 0,"aria-label":a(m.length,e,!1),"data-direction":e,"data-count":m.length,"data-disabled":T?"":void 0,...r,...dr("transfer","move-trigger",r.className),ref:s,onClick:ur(r.onClick,()=>{T||o(e,m)})})};q.displayName="TransferMoveTrigger";import{Fragment as br,jsx as y,jsxs as ue}from"react/jsx-runtime";var ce={source:"Available items",target:"Selected items"},de={empty:"Nothing here.",noMatch:'No match for "{query}".'},pr=()=>y(Q,{name:"arrow-right"}),gr=()=>y(Q,{name:"arrow-left"}),yr=()=>y(Q,{name:"chevrons-right"}),vr=()=>y(Q,{name:"chevrons-left"}),me=({density:e,shape:s,size:r,titles:n,renderItem:t,emptyText:o,showMoveAll:a})=>{let i=n?.source??ce.source,l=n?.target??ce.target,m=o?.empty??de.empty,T=o?.noMatch??de.noMatch,v=(d,u)=>d==="empty"?m:T.replaceAll("{query}",u);return ue(br,{children:[y(F,{side:"source",children:i}),y($,{side:"source"}),y(V,{side:"source",density:e,shape:s,size:r,renderItem:t}),y(K,{side:"source",children:({reason:d,query:u})=>v(d,u)}),ue(W,{children:[a?y(_,{direction:"toTarget",children:y(yr,{})}):null,y(q,{direction:"toTarget",children:y(pr,{})}),y(q,{direction:"toSource",children:y(gr,{})}),a?y(_,{direction:"toSource",children:y(vr,{})}):null]}),y(F,{side:"target",children:l}),y($,{side:"target"}),y(V,{side:"target",density:e,shape:s,size:r,renderItem:t}),y(K,{side:"target",children:({reason:d,query:u})=>v(d,u)})]})};import{jsx as j,jsxs as Fr}from"react/jsx-runtime";var D='[role="option"]:not([data-disabled])',[Lr,b]=Te("Transfer"),[fe,oe]=Te("TransferList"),O={toTarget:"source",toSource:"target"},ge={toTarget:"target",toSource:"source"},z={source:"available",target:"selected"},xr=["source","target"],kr=[];function Ir({moved:e,remaining:s,from:r,to:n}){return`${e} ${e===1?"item":"items"} moved to ${z[n]}. ${s} remaining in ${z[r]}.`}function Er({shown:e,total:s,side:r}){return`${e} of ${s} ${s===1?"item":"items"} shown in ${z[r]}.`}function Cr(e,s,r){let n=z[ge[s]],t=r?"Move all":"Move";return e===0?`${t} items to ${n}, ${r?"nothing to move":"nothing selected"}`:`${t} ${e} ${e===1?"item":"items"} to ${n}`}function Pr(e,s,r="contains"){let n=s.trim().toLowerCase();if(n==="")return!0;let t=e.label.toLowerCase();return r==="startsWith"?t.startsWith(n):r==="endsWith"?t.endsWith(n):t.includes(n)}function Ar(){let[e,s]=p.useState({source:[],target:[]}),[r,n]=p.useState({source:"",target:""}),[t,o]=p.useState({source:null,target:null}),[a,i]=p.useState({source:!1,target:!1}),l=p.useCallback((d,u)=>{s(f=>({...f,[d]:u}))},[]),m=p.useCallback((d,u)=>{n(f=>f[d]===u?f:{...f,[d]:u})},[]),T=p.useCallback((d,u)=>{o(f=>f[d]===u?f:{...f,[d]:u})},[]),v=p.useCallback((d,u)=>{i(f=>f[d]===u?f:{...f,[d]:u})},[]);return{markedState:e,query:r,setQuery:m,active:t,setActive:T,labelled:a,setMarked:l,registerHeader:v}}function Dr(){let e=p.useRef({source:null,target:null}),s=p.useRef({source:null,target:null}),r=p.useRef(null),n=p.useRef(!1),t=p.useCallback((o,a)=>{s.current[o]=a},[]);return{anchorRef:e,listNodes:s,pendingFocusRef:r,suppressFocusInRef:n,registerList:t}}function Nr(e){let{items:s,targetValues:r,targetOrder:n,searchable:t,filter:o,filterMatchMode:a,query:i,markedState:l}=e,m=p.useMemo(()=>{let d=s.filter(f=>!r.includes(f.value));if(n==="items")return{source:d,target:s.filter(f=>r.includes(f.value))};let u=new Map(s.map(f=>[f.value,f]));return{source:d,target:r.map(f=>u.get(f)).filter(f=>f!==void 0)}},[s,r,n]),T=p.useMemo(()=>{if(!t)return m;let d=o??((f,S)=>Pr(f,S,a)),u=f=>i[f].trim()===""?m[f]:m[f].filter(S=>d(S,i[f]));return{source:u("source"),target:u("target")}},[t,o,a,i,m]),v=p.useMemo(()=>({source:l.source.filter(d=>m.source.some(u=>u.value===d)),target:l.target.filter(d=>m.target.some(u=>u.value===d))}),[l,m]);return{sideItems:m,visibleItems:T,marked:v}}function Hr(e){let{disabled:s,sideItems:r,visibleItems:n,targetValues:t,targetOrder:o,marked:a,setMarked:i,setRawValue:l,onMove:m,getMoveAnnouncement:T,pendingFocusRef:v}=e;return p.useCallback((d,u)=>{if(s)return;let f=O[d],S=ge[d],x=r[f],M=u.map(g=>x.find(c=>c.value===g)).filter(g=>g!==void 0&&!g.disabled);if(M.length===0)return;let h=M.map(g=>g.value),N=n[f].filter(g=>!g.disabled),P=h.map(g=>N.findIndex(c=>c.value===g)).filter(g=>g>=0);v.current={side:f,index:P.length>0?Math.min(...P):0};let L=h.filter(g=>!t.includes(g)),k;d==="toTarget"?k=o==="prepend"?[...L,...t]:[...t,...L]:k=t.filter(g=>!h.includes(g)),l(k),i(f,a[f].filter(g=>!h.includes(g))),m?.({items:M,direction:d});let A={moved:M.length,remaining:x.length-M.length,direction:d,from:f,to:S};pe((T??Ir)(A))},[s,T,a,m,v,i,l,r,o,t,n])}function Or(e){return p.useCallback((s,r)=>{e?.({side:s,scrollTop:r.scrollTop,scrollHeight:r.scrollHeight,clientHeight:r.clientHeight})},[e])}function Kr(e,s,r,n,t){let o=p.useRef({source:"",target:""});p.useEffect(()=>{if(e)for(let a of xr)s[a]!==o.current[a]&&(o.current[a]=s[a],pe((t??Er)({shown:r[a].length,total:n[a].length,side:a,query:s[a]})))},[e,s,r,n,t])}function wr(e){return p.useCallback((s,r,n)=>(e??Cr)(s,r,n),[e])}function Vr(e,s,r,n){p.useLayoutEffect(()=>{let t=e.current;if(!t)return;e.current=null;let o=s.current[t.side];if(!o)return;let a=Array.from(o.querySelectorAll(D)),i=a[Math.min(t.index,a.length-1)];if(r.current=!0,i){let l=i.getAttribute("data-value");l&&n(t.side,l),i.focus()}else o.focus()})}var ye=({items:e,value:s,defaultValue:r,onValueChange:n,onMove:t,disabled:o=!1,name:a,form:i,searchable:l=!1,filter:m,filterMatchMode:T="contains",getMoveLabel:v,getMoveAnnouncement:d,getSearchResultsAnnouncement:u,targetOrder:f="items",onListScroll:S,titles:x,emptyText:M,showMoveAll:h=!1,renderItem:N,children:P,density:L,shape:k,size:A,ref:g,...c})=>{let I=p.useId(),[E,C]=Mr({prop:s,defaultProp:r,onChange:n}),R=E??kr,{markedState:H,query:B,setQuery:ve,active:be,setActive:ee,labelled:Re,setMarked:re,registerHeader:he}=Ar(),{anchorRef:Se,listNodes:Me,pendingFocusRef:te,suppressFocusInRef:ne,registerList:Le}=Dr(),{sideItems:U,visibleItems:G,marked:se}=Nr({items:e,targetValues:R,targetOrder:f,searchable:l,filter:m,filterMatchMode:T,query:B,markedState:H}),xe=Hr({disabled:o,sideItems:U,visibleItems:G,targetValues:R,targetOrder:f,marked:se,setMarked:re,setRawValue:C,onMove:t,getMoveAnnouncement:d,pendingFocusRef:te}),ke=Or(S);Kr(l,B,G,U,u);let Ie=wr(v);return Vr(te,Me,ne,ee),Fr(Lr,{baseId:I,disabled:o,searchable:l,sideItems:U,visibleItems:G,marked:se,setMarked:re,query:B,setQuery:ve,active:be,setActive:ee,anchorRef:Se,labelled:Re,registerHeader:he,registerList:Le,suppressFocusInRef:ne,move:xe,moveLabel:Ie,emitListScroll:ke,children:[j(Sr.div,{"data-disabled":o?"":void 0,...c,"data-density":void 0,"data-shape":void 0,"data-size":void 0,...hr("transfer","root",c.className),ref:g,children:P??j(me,{density:Z(L,c,"data-density"),shape:Z(k,c,"data-shape"),size:Z(A,c,"data-size"),titles:x,renderItem:N,emptyText:M,showMoveAll:h})}),j(Rr,{name:a,values:R,disabled:o,form:i})]})};ye.displayName="Transfer";export{ge as DESTINATION_OF,D as OPTION_SELECTOR,O as ORIGIN_OF,xr as SIDES,z as SIDE_NOUN,ye as Transfer,W as TransferControls,K as TransferEmpty,X as TransferItem,V as TransferList,F as TransferListHeader,fe as TransferListProvider,$ as TransferListSearch,_ as TransferMoveAllTrigger,q as TransferMoveTrigger,Lr as TransferProvider,Pr as matchesFilterMode,Ir as moveAnnouncement,Cr as moveTriggerLabel,Er as searchResultsAnnouncement,b as useTransferContext,oe as useTransferListContext};

package/dist/transfer/TransferAnatomy.d.cts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { TransferEmptyText, TransferItemData, TransferListProps, TransferTitles } from './types.cjs';
+/** @internal Default anatomy a {@link Transfer} draws with no manually-composed children. */
+export declare const TransferAnatomy: ({ density, shape, size, titles, renderItem, emptyText, showMoveAll, }: {
+    density?: TransferListProps["density"] | undefined;
+    shape?: TransferListProps["shape"] | undefined;
+    size?: TransferListProps["size"] | undefined;
+    titles?: TransferTitles | undefined;
+    renderItem?: ((item: TransferItemData) => React.ReactNode) | undefined;
+    emptyText?: TransferEmptyText | undefined;
+    showMoveAll?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/transfer/TransferAnatomy.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { TransferEmptyText, TransferItemData, TransferListProps, TransferTitles } from './types.js';
+/** @internal Default anatomy a {@link Transfer} draws with no manually-composed children. */
+export declare const TransferAnatomy: ({ density, shape, size, titles, renderItem, emptyText, showMoveAll, }: {
+    density?: TransferListProps["density"] | undefined;
+    shape?: TransferListProps["shape"] | undefined;
+    size?: TransferListProps["size"] | undefined;
+    titles?: TransferTitles | undefined;
+    renderItem?: ((item: TransferItemData) => React.ReactNode) | undefined;
+    emptyText?: TransferEmptyText | undefined;
+    showMoveAll?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/transfer/TransferControls.d.cts

@@ -1,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferControlsProps } from './types.cjs';
 /**
- * The named `role="group"` holding the move triggers. Without it the buttons
- * are announced as loose controls stranded between two lists; with it they are
- * announced as the thing that moves items between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the
- * triggers work outside it too. Use it anyway.
+ * Named group holding move triggers, grouping buttons semantically between two lists.
  *
  * @example
  * ```tsx
@@ -16,4 +11,7 @@ import type { TransferControlsProps } from './types.cjs';
  * </TransferControls>
  * ```
  */
-export declare const TransferControls: React.ForwardRefExoticComponent<Omit<TransferControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferControls: {
+    ({ ref: forwardedRef, ...props }: TransferControlsProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferControls.d.ts

@@ -1,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferControlsProps } from './types.js';
 /**
- * The named `role="group"` holding the move triggers. Without it the buttons
- * are announced as loose controls stranded between two lists; with it they are
- * announced as the thing that moves items between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the
- * triggers work outside it too. Use it anyway.
+ * Named group holding move triggers, grouping buttons semantically between two lists.
  *
  * @example
  * ```tsx
@@ -16,4 +11,7 @@ import type { TransferControlsProps } from './types.js';
  * </TransferControls>
  * ```
  */
-export declare const TransferControls: React.ForwardRefExoticComponent<Omit<TransferControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferControls: {
+    ({ ref: forwardedRef, ...props }: TransferControlsProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferEmpty.d.cts

@@ -1,22 +1,17 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferEmptyProps } from './types.cjs';
 /**
- * The message shown while one side has nothing to render — either genuinely
- * empty, or filtered down to nothing. Renders `null` otherwise, so it is safe
- * to leave in the tree permanently.
- *
- * It is a sibling of its `TransferList`, not a child: a `role="listbox"` may
- * only contain options and groups, and a bare paragraph inside one is invalid
- * ARIA that some screen readers drop entirely. Hence its own `side`.
- *
- * There is no `renderEmpty` prop. This part *is* the empty state, and a render
- * prop alongside it would be two ways to say the same thing that disagree the
- * moment someone uses both.
+ * Empty state message, sibling to `TransferList`, publishing `data-reason` and `data-query` for different messaging.
  *
  * @example
  * ```tsx
- * <TransferList side="source" />
- * <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
+ * <TransferList side=”source” />
+ * <TransferEmpty side=”source”>
+ *   {({ reason, query }) => (reason === 'empty' ? 'Nothing left to add.' : `No match for “${query}”.`)}
+ * </TransferEmpty>
  * ```
  */
-export declare const TransferEmpty: React.ForwardRefExoticComponent<Omit<TransferEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferEmpty: {
+    ({ side, children, ref: forwardedRef, ...props }: TransferEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferEmpty.d.ts

@@ -1,22 +1,17 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferEmptyProps } from './types.js';
 /**
- * The message shown while one side has nothing to render — either genuinely
- * empty, or filtered down to nothing. Renders `null` otherwise, so it is safe
- * to leave in the tree permanently.
- *
- * It is a sibling of its `TransferList`, not a child: a `role="listbox"` may
- * only contain options and groups, and a bare paragraph inside one is invalid
- * ARIA that some screen readers drop entirely. Hence its own `side`.
- *
- * There is no `renderEmpty` prop. This part *is* the empty state, and a render
- * prop alongside it would be two ways to say the same thing that disagree the
- * moment someone uses both.
+ * Empty state message, sibling to `TransferList`, publishing `data-reason` and `data-query` for different messaging.
  *
  * @example
  * ```tsx
- * <TransferList side="source" />
- * <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
+ * <TransferList side=”source” />
+ * <TransferEmpty side=”source”>
+ *   {({ reason, query }) => (reason === 'empty' ? 'Nothing left to add.' : `No match for “${query}”.`)}
+ * </TransferEmpty>
  * ```
  */
-export declare const TransferEmpty: React.ForwardRefExoticComponent<Omit<TransferEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferEmpty: {
+    ({ side, children, ref: forwardedRef, ...props }: TransferEmptyProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferItem.d.cts

@@ -1,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferItemProps } from './types.cjs';
-/**
- * One option inside a {@link TransferList} — a {@link ListboxItem} that also
- * knows which side it is on. Marking it does **not** move it: marking is the
- * transient "I want to move this" state, and a `TransferMoveTrigger` (or the
- * outward arrow key) is what commits the move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `data-side`, `data-selected` while marked, plus everything
- * `ListboxItem` already emits (`aria-selected`, `data-value`, `data-state`,
- * `data-disabled`).
- *
- * You only render this yourself when `TransferList`'s default rendering is not
- * enough — it otherwise renders one per visible item on its side.
- */
-export declare const TransferItem: React.ForwardRefExoticComponent<Omit<TransferItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Option inside a {@link TransferList} that marks itself for move via click, Enter, Space, or Shift+Click ranges, without moving. */
+export declare const TransferItem: {
+    ({ value, disabled, ref: forwardedRef, ...props }: TransferItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferItem.d.ts

@@ -1,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferItemProps } from './types.js';
-/**
- * One option inside a {@link TransferList} — a {@link ListboxItem} that also
- * knows which side it is on. Marking it does **not** move it: marking is the
- * transient "I want to move this" state, and a `TransferMoveTrigger` (or the
- * outward arrow key) is what commits the move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `data-side`, `data-selected` while marked, plus everything
- * `ListboxItem` already emits (`aria-selected`, `data-value`, `data-state`,
- * `data-disabled`).
- *
- * You only render this yourself when `TransferList`'s default rendering is not
- * enough — it otherwise renders one per visible item on its side.
- */
-export declare const TransferItem: React.ForwardRefExoticComponent<Omit<TransferItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Option inside a {@link TransferList} that marks itself for move via click, Enter, Space, or Shift+Click ranges, without moving. */
+export declare const TransferItem: {
+    ({ value, disabled, ref: forwardedRef, ...props }: TransferItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferList.d.cts

@@ -1,29 +1,7 @@
 import * as React from 'react';
 import type { TransferListProps } from './types.cjs';
-/**
- * One side of a {@link Transfer}: a multi-select `role="listbox"` built on
- * {@link Listbox}, with its own tab stop, its own roving focus, its own
- * typeahead, and its own marked-for-move selection. The two lists are two
- * independent roving-focus groups — Tab moves *between* them, arrows only ever
- * move within one.
- *
- * Renders one `TransferItem` per visible item on its side by default, using
- * each item's `label` as both its content and its typeahead `textValue`. Pass
- * children to render the options yourself; they still get their side, their
- * marked state, and their tab stop from the root.
- *
- * Beyond what `Listbox` already handles it adds three keyboard paths:
- *
- * - **Shift+ArrowUp/Down** extends the marked range from the anchor (the last
- *   option marked without Shift), the keyboard equivalent of Shift+Click.
- * - **Ctrl/Cmd+A** marks every enabled option currently visible in this list.
- * - **The outward horizontal arrow** moves the marked items to the other list
- *   — ArrowRight from the source under LTR, and ArrowLeft under `dir="rtl"`,
- *   because the target list is on the left there. With nothing marked it moves
- *   the focused option alone.
- *
- * Publishes `data-side` and, while it has nothing to render, `data-empty` plus
- * `tabIndex={0}` — an empty list stays reachable so focus after a move that
- * empties it has somewhere to land.
- */
-export declare const TransferList: React.ForwardRefExoticComponent<Omit<TransferListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** One side of a Transfer: a multi-select listbox with roving focus, typeahead, and marked-for-move selection, rendering a `TransferItem` per visible item by default. */
+export declare const TransferList: {
+    ({ side, renderItem, children, ref: forwardedRef, ...props }: TransferListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferList.d.ts

@@ -1,29 +1,7 @@
 import * as React from 'react';
 import type { TransferListProps } from './types.js';
-/**
- * One side of a {@link Transfer}: a multi-select `role="listbox"` built on
- * {@link Listbox}, with its own tab stop, its own roving focus, its own
- * typeahead, and its own marked-for-move selection. The two lists are two
- * independent roving-focus groups — Tab moves *between* them, arrows only ever
- * move within one.
- *
- * Renders one `TransferItem` per visible item on its side by default, using
- * each item's `label` as both its content and its typeahead `textValue`. Pass
- * children to render the options yourself; they still get their side, their
- * marked state, and their tab stop from the root.
- *
- * Beyond what `Listbox` already handles it adds three keyboard paths:
- *
- * - **Shift+ArrowUp/Down** extends the marked range from the anchor (the last
- *   option marked without Shift), the keyboard equivalent of Shift+Click.
- * - **Ctrl/Cmd+A** marks every enabled option currently visible in this list.
- * - **The outward horizontal arrow** moves the marked items to the other list
- *   — ArrowRight from the source under LTR, and ArrowLeft under `dir="rtl"`,
- *   because the target list is on the left there. With nothing marked it moves
- *   the focused option alone.
- *
- * Publishes `data-side` and, while it has nothing to render, `data-empty` plus
- * `tabIndex={0}` — an empty list stays reachable so focus after a move that
- * empties it has somewhere to land.
- */
-export declare const TransferList: React.ForwardRefExoticComponent<Omit<TransferListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** One side of a Transfer: a multi-select listbox with roving focus, typeahead, and marked-for-move selection, rendering a `TransferItem` per visible item by default. */
+export declare const TransferList: {
+    ({ side, renderItem, children, ref: forwardedRef, ...props }: TransferListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferListHeader.d.cts

@@ -1,18 +1,7 @@
 import * as React from 'react';
 import type { TransferListHeaderProps } from './types.cjs';
 /**
- * The visible heading naming one of the two lists, and the element that list
- * points `aria-labelledby` at. Give both sides one: "Available" and "Selected"
- * next to two otherwise identical listboxes is the whole difference between a
- * usable widget and two anonymous lists.
- *
- * It sits *beside* its `TransferList`, not inside it — a `role="listbox"` may
- * only contain options and groups, so a heading inside one is invalid ARIA.
- * That is also why it takes its own `side`: it has no list around it to
- * inherit one from.
- *
- * Rendering one is what switches its list from a generic fallback name
- * ("Available items") to this heading's text.
+ * Visible heading naming one of the two lists, the target of the list's `aria-labelledby`, sitting beside `TransferList` rather than inside it.
  *
  * @example
  * ```tsx
@@ -20,4 +9,7 @@ import type { TransferListHeaderProps } from './types.cjs';
  * <TransferList side="source" />
  * ```
  */
-export declare const TransferListHeader: React.ForwardRefExoticComponent<Omit<TransferListHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferListHeader: {
+    ({ side, ref: forwardedRef, ...props }: TransferListHeaderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferListHeader.d.ts

@@ -1,18 +1,7 @@
 import * as React from 'react';
 import type { TransferListHeaderProps } from './types.js';
 /**
- * The visible heading naming one of the two lists, and the element that list
- * points `aria-labelledby` at. Give both sides one: "Available" and "Selected"
- * next to two otherwise identical listboxes is the whole difference between a
- * usable widget and two anonymous lists.
- *
- * It sits *beside* its `TransferList`, not inside it — a `role="listbox"` may
- * only contain options and groups, so a heading inside one is invalid ARIA.
- * That is also why it takes its own `side`: it has no list around it to
- * inherit one from.
- *
- * Rendering one is what switches its list from a generic fallback name
- * ("Available items") to this heading's text.
+ * Visible heading naming one of the two lists, the target of the list's `aria-labelledby`, sitting beside `TransferList` rather than inside it.
  *
  * @example
  * ```tsx
@@ -20,4 +9,7 @@ import type { TransferListHeaderProps } from './types.js';
  * <TransferList side="source" />
  * ```
  */
-export declare const TransferListHeader: React.ForwardRefExoticComponent<Omit<TransferListHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TransferListHeader: {
+    ({ side, ref: forwardedRef, ...props }: TransferListHeaderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferListSearch.d.cts

@@ -1,17 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferListSearchProps } from './types.cjs';
 /**
- * The filter input for one list: an `<input type="search">` bound to that
- * side's query. Like {@link TransferListHeader} it is a sibling of its list
- * rather than a child, since a `role="listbox"` may only contain options — so
- * it takes its own `side`.
- *
- * Renders **nothing** while the root is not `searchable`. A filter box that
- * stays on screen but no longer filters is worse than no box at all, so the
- * one prop turns the input and the filtering on together.
- *
- * Filtering narrows what its list renders and therefore what "move all" moves:
- * "move all" moves what you can see, not what you cannot.
+ * Filter input for one side, an `<input type="search">` sibling of its list; renders nothing while root is not `searchable`.
  *
  * @example
  * ```tsx
@@ -21,4 +11,7 @@ import type { TransferListSearchProps } from './types.cjs';
  * </Transfer>
  * ```
  */
-export declare const TransferListSearch: React.ForwardRefExoticComponent<Omit<TransferListSearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TransferListSearch: {
+    ({ side, ref: forwardedRef, ...props }: TransferListSearchProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferListSearch.d.ts

@@ -1,17 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferListSearchProps } from './types.js';
 /**
- * The filter input for one list: an `<input type="search">` bound to that
- * side's query. Like {@link TransferListHeader} it is a sibling of its list
- * rather than a child, since a `role="listbox"` may only contain options — so
- * it takes its own `side`.
- *
- * Renders **nothing** while the root is not `searchable`. A filter box that
- * stays on screen but no longer filters is worse than no box at all, so the
- * one prop turns the input and the filtering on together.
- *
- * Filtering narrows what its list renders and therefore what "move all" moves:
- * "move all" moves what you can see, not what you cannot.
+ * Filter input for one side, an `<input type="search">` sibling of its list; renders nothing while root is not `searchable`.
  *
  * @example
  * ```tsx
@@ -21,4 +11,7 @@ import type { TransferListSearchProps } from './types.js';
  * </Transfer>
  * ```
  */
-export declare const TransferListSearch: React.ForwardRefExoticComponent<Omit<TransferListSearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TransferListSearch: {
+    ({ side, ref: forwardedRef, ...props }: TransferListSearchProps): React.ReactNode;
+    displayName: string;
+};

package/dist/transfer/TransferMoveAllTrigger.d.cts

@@ -1,19 +1,14 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TransferMoveAllTriggerProps } from './types.cjs';
 /**
- * The button that moves every item currently visible on one side, marked or
- * not. Same rules as {@link TransferMoveTrigger} — real button, name carries
- * direction and count, `aria-disabled` rather than `disabled` when there is
- * nothing to move.
- *
- * "Visible" is the operative word while the root is `searchable`: it moves what
- * the filter is showing, never items hidden behind a query the user has
- * forgotten is applied. Disabled items are excluded on both counts — the name
- * and the move.
+ * Moves every currently visible item on one side, excluding disabled items and any hidden by an active search query.
  *
  * @example
  * ```tsx
  * <TransferMoveAllTrigger direction="toTarget">⇒</TransferMoveAllTrigger>
  * ```
  */
-export declare const TransferMoveAllTrigger: React.ForwardRefExoticComponent<Omit<TransferMoveAllTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TransferMoveAllTrigger: {
+    ({ direction, ref: forwardedRef, ...props }: TransferMoveAllTriggerProps): React.ReactNode;
+    displayName: string;
+};