@skdx/react 0.26.0

package/dist/tour/types.d.ts

@@ -0,0 +1,261 @@
+import type * as React from 'react';
+import type { Align, PopperContentProps, Side } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+/**
+ * How a step presents itself. `tooltip` and `floating` both anchor to the
+ * step's target; `dialog` renders centred even when a target is present, so a
+ * step can spotlight an element while explaining it from the middle of the
+ * screen. Published as `data-type` on `TourContent` either way.
+ */
+export type TourStepType = 'tooltip' | 'dialog' | 'floating';
+/** One step of a {@link Tour}. Steps are data, not markup — the whole list is passed to the root. */
+export interface TourStep {
+    /**
+     * The element this step points at, as a CSS selector or a ref. A step with
+     * no target renders centred and spotlights nothing — that is how a tour
+     * opens and closes.
+     * @default undefined — the step is centred, with no spotlight and no anchoring.
+     */
+    target?: string | React.RefObject<HTMLElement | null>;
+    /**
+     * Short name for the step, announced to screen readers alongside its
+     * position. Purely for the announcement — render the visible heading with
+     * `TourTitle`.
+     * @default undefined — only the position ("Step 2 of 5") is announced.
+     */
+    title?: string;
+    /**
+     * Side of the target this step's content is placed against, fed straight to
+     * the shared popper layer. `start`/`end` are logical and mirror under RTL.
+     * @default undefined — falls back to `TourContent`'s own `side`, which defaults to `bottom`.
+     */
+    placement?: Side;
+    /**
+     * Alignment along `placement`.
+     * @default undefined — falls back to `TourContent`'s own `align`, which defaults to `center`.
+     */
+    align?: Align;
+    /**
+     * How this step presents itself. `dialog` forces centred content even with a
+     * target set; the other two anchor.
+     * @default undefined — anchored when the step has a target, centred when it does not.
+     */
+    type?: TourStepType;
+}
+/** @internal Shared state distributed from {@link Tour} to its parts via context. Not part of the public API. */
+export interface TourContextValue {
+    steps: TourStep[];
+    step: number;
+    total: number;
+    activeStep: TourStep | undefined;
+    open: boolean;
+    /** True when the active step's content is positioned against a resolved target rather than centred. */
+    anchored: boolean;
+    target: HTMLElement | null;
+    spotlightStyle: React.CSSProperties;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    closeOnEscape: boolean;
+    closeOnInteractOutside: boolean;
+    setOpen: (open: boolean) => void;
+    goTo: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+    skip: () => void;
+    complete: () => void;
+}
+/** Props for the {@link Tour} root. */
+export interface TourProps {
+    /**
+     * The trigger and portal, typically — the tour's own DOM (backdrop,
+     * spotlight, content) is rendered by {@link TourPortal} elsewhere.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ordered steps. Required: a tour with no steps has nothing to show, and
+     * the array's length is what "Step 2 of 5" counts against.
+     */
+    steps: TourStep[];
+    /**
+     * Whether the tour is running, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the tour is running on mount, for uncontrolled usage.
+     * @default false — the tour waits for a trigger, so a first-visit tour is started deliberately rather than on every render.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the tour starts or ends, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Index of the active step, for controlled usage. Pair with `onStepChange`.
+     * @default undefined — uncontrolled, tracks the index itself.
+     */
+    step?: number;
+    /**
+     * Index the tour starts on, for uncontrolled usage. Useful for resuming a
+     * tour the user abandoned.
+     * @default 0
+     */
+    defaultStep?: number;
+    /**
+     * Fires with the new index whenever the active step changes, controlled or
+     * not. Not fired on completion or skip — those have their own callbacks.
+     * @default undefined — no-op if omitted.
+     */
+    onStepChange?: (step: number) => void;
+    /**
+     * Fires when the user advances past the last step. The tour closes either
+     * way; this is where you record that the user has seen it.
+     * @default undefined — the tour still closes, it just tells nobody.
+     */
+    onComplete?: () => void;
+    /**
+     * Fires when the tour ends early — the skip or close trigger, or Escape.
+     * @default undefined — the tour still closes, it just tells nobody.
+     */
+    onSkip?: () => void;
+    /**
+     * Whether pressing Escape ends the tour the same way skipping does.
+     * @default true — Escape must always get a user out of a modal layer; set `false` only when the tour genuinely cannot be abandoned, and then provide another way out.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether a pointer-down outside the content skips the tour.
+     * @default false — during a tour an outside click is almost always a misclick on the very UI being explained, and losing the tour to it is worse than ignoring it.
+     */
+    closeOnInteractOutside?: boolean;
+    /**
+     * Pixels of breathing room added around the target on every side when the
+     * spotlight geometry is published.
+     * @default 8 — the cutout clears the target's own focus ring instead of clipping it.
+     */
+    spotlightPadding?: number;
+    /**
+     * How long, in milliseconds, to keep polling for a step's target before
+     * giving up on it. Covers targets that mount late — a lazy route, a panel
+     * that opens on the previous step's action.
+     * @default 2000 — long enough for a lazy chunk to land, short enough that a genuinely absent target does not strand the tour.
+     */
+    targetTimeout?: number;
+    /**
+     * Fires when a step's target never appeared within `targetTimeout`. The tour
+     * then skips forward rather than rendering an unanchored popup.
+     * @default undefined — the step is still skipped, it just tells nobody.
+     */
+    onStepTargetMissing?: (index: number, step: TourStep) => void;
+    /**
+     * Builds the string announced to screen readers on every step change.
+     * Override it to translate, or to include more of the step than its title.
+     * @default undefined — announces the step's `title` (when set) followed by "Step {n} of {total}", in English.
+     */
+    getAnnouncement?: (step: TourStep, index: number, total: number) => string;
+}
+/** Props for {@link TourPortal}, which teleports the tour's layer to `document.body`. */
+export interface TourPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the tour is closed, instead of unmounting it.
+     * Useful for animation libraries that need the outgoing layer present in the
+     * DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link TourBackdrop}, the dimming layer with the spotlight cutout. */
+export interface TourBackdropProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep the backdrop mounted even while the tour is closed.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link TourSpotlight}, the highlight box over the active step's target. */
+export interface TourSpotlightProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Keep the spotlight mounted even while the tour is closed. It still renders
+     * nothing when the active step has no target — there is nothing to spotlight.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/**
+ * Props for {@link TourContent}, the active step's panel. Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`, `collisionBoundary`), which act as
+ * the defaults each step's own `placement`/`align` override.
+ */
+export interface TourContentProps extends PopperContentProps {
+    /**
+     * Keep the panel mounted even while the tour is closed.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Fires when Escape is pressed while the tour is open. Call
+     * `event.preventDefault()` to stop it from skipping the tour, regardless of
+     * `closeOnEscape`.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Call `event.preventDefault()`
+     * to stop it from skipping the tour when `closeOnInteractOutside` is set.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Fires when focus moves outside the content. Reported only — a tour never
+     * ends on focus alone, since moving focus into the UI being explained is the
+     * point. Receives a cancelable stand-in carrying the original `focusin` as
+     * its `detail`.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Fires for either kind of outside interaction, immediately before the
+     * specific handler above and with the same event.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for {@link TourTrigger}, the button that starts the tour. */
+export interface TourTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TourArrow}, the arrow pointing from the content back at the target. */
+export interface TourArrowProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link TourTitle}, the active step's accessible name. */
+export interface TourTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link TourDescription}, the active step's accessible description. */
+export interface TourDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link TourProgressText}, the visible "Step 2 of 5" line. */
+export interface TourProgressTextProps extends PrimitivePropsWithRef<'p'> {
+    /**
+     * Builds the visible progress string from the zero-based index and the total.
+     * @default undefined — renders "Step {index + 1} of {total}" in English.
+     */
+    format?: (index: number, total: number) => string;
+}
+/** Props for {@link TourNextTrigger}, which advances the tour. */
+export interface TourNextTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TourPrevTrigger}, which steps the tour back. */
+export interface TourPrevTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TourSkipTrigger}, which ends the tour early. */
+export interface TourSkipTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TourCloseTrigger}, the dismiss affordance. */
+export interface TourCloseTriggerProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/transfer/Transfer.cjs

@@ -0,0 +1 @@
+"use strict";var nr=Object.create;var F=Object.defineProperty;var or=Object.getOwnPropertyDescriptor;var ir=Object.getOwnPropertyNames;var lr=Object.getPrototypeOf,fr=Object.prototype.hasOwnProperty;var cr=(e,r)=>{for(var t in r)F(e,t,{get:r[t],enumerable:!0})},pe=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ir(r))!fr.call(e,a)&&a!==t&&F(e,a,{get:()=>r[a],enumerable:!(o=or(r,a))||o.enumerable});return e};var S=(e,r,t)=>(t=e!=null?nr(lr(e)):{},pe(r||!e||!e.__esModule?F(t,"default",{value:e,enumerable:!0}):t,e)),mr=e=>pe(F({},"__esModule",{value:!0}),e);var Lr={};cr(Lr,{Transfer:()=>ne,TransferControls:()=>fe,TransferEmpty:()=>ue,TransferItem:()=>O,TransferList:()=>oe,TransferListHeader:()=>ie,TransferListSearch:()=>le,TransferMoveAllTrigger:()=>me,TransferMoveTrigger:()=>ce,moveAnnouncement:()=>se});module.exports=mr(Lr);var f=S(require("react"),1),ae=require("../utils/createContext.cjs"),ge=require("../utils/liveAnnouncer.cjs"),be=require("../utils/part.cjs"),ve=require("../utils/primitive.cjs"),ye=require("../utils/useControllableState.cjs"),te=require("react/jsx-runtime"),I='[role="option"]:not([data-disabled])',[ur,g]=(0,ae.createSafeContext)("Transfer"),[he,Le]=(0,ae.createSafeContext)("TransferList"),N={toTarget:"source",toSource:"target"},Re={toTarget:"target",toSource:"source"},re={source:"available",target:"selected"},dr=[];function se({moved:e,remaining:r,from:t,to:o}){return`${e} ${e===1?"item":"items"} moved to ${re[o]}. ${r} remaining in ${re[t]}.`}function Tr(e,r,t){let o=re[Re[r]],a=t?"Move all":"Move";return e===0?`${a} items to ${o}, ${t?"nothing to move":"nothing selected"}`:`${a} ${e} ${e===1?"item":"items"} to ${o}`}function pr(e,r){return e.label.toLowerCase().includes(r.trim().toLowerCase())}var ne=f.forwardRef(({items:e,value:r,defaultValue:t,onValueChange:o,onMove:a,disabled:c=!1,searchable:u=!1,filter:b,getMoveLabel:T,getMoveAnnouncement:m,...p},M)=>{let h=f.useId(),[L,$]=(0,ye.useControllableState)({prop:r,defaultProp:t,onChange:o}),y=L??dr,[D,Y]=f.useState({source:[],target:[]}),[P,z]=f.useState({source:"",target:""}),[V,J]=f.useState({source:null,target:null}),[s,R]=f.useState({source:!1,target:!1}),k=f.useRef({source:null,target:null}),x=f.useRef({source:null,target:null}),A=f.useRef(null),v=f.useMemo(()=>({source:e.filter(n=>!y.includes(n.value)),target:e.filter(n=>y.includes(n.value))}),[e,y]),X=f.useMemo(()=>{if(!u)return v;let n=b??pr,l=i=>P[i].trim()===""?v[i]:v[i].filter(C=>n(C,P[i]));return{source:l("source"),target:l("target")}},[u,b,P,v]),Z=f.useMemo(()=>({source:D.source.filter(n=>v.source.some(l=>l.value===n)),target:D.target.filter(n=>v.target.some(l=>l.value===n))}),[D,v]),j=f.useCallback((n,l)=>{Y(i=>({...i,[n]:l}))},[]),Ze=f.useCallback((n,l)=>{z(i=>i[n]===l?i:{...i,[n]:l})},[]),de=f.useCallback((n,l)=>{J(i=>i[n]===l?i:{...i,[n]:l})},[]),je=f.useCallback((n,l)=>{R(i=>i[n]===l?i:{...i,[n]:l})},[]),er=f.useCallback((n,l)=>{x.current[n]=l},[]),rr=f.useCallback((n,l)=>{if(c)return;let i=N[n],C=Re[n],H=v[i],w=l.map(d=>H.find(ee=>ee.value===d)).filter(d=>d!==void 0&&!d.disabled);if(w.length===0)return;let K=w.map(d=>d.value),ar=X[i].filter(d=>!d.disabled),Te=K.map(d=>ar.findIndex(ee=>ee.value===d)).filter(d=>d>=0);A.current={side:i,index:Te.length>0?Math.min(...Te):0},$(n==="toTarget"?[...y,...K.filter(d=>!y.includes(d))]:y.filter(d=>!K.includes(d))),j(i,Z[i].filter(d=>!K.includes(d))),a?.(w,n);let sr={moved:w.length,remaining:H.length-w.length,direction:n,from:i,to:C};(0,ge.announce)((m??se)(sr))},[c,m,Z,a,j,$,v,y,X]),tr=f.useCallback((n,l,i)=>(T??Tr)(n,l,i),[T]);return f.useLayoutEffect(()=>{let n=A.current;if(!n)return;A.current=null;let l=x.current[n.side];if(!l)return;let i=Array.from(l.querySelectorAll(I)),C=i[Math.min(n.index,i.length-1)];if(C){let H=C.getAttribute("data-value");H&&de(n.side,H),C.focus()}else l.focus()}),(0,te.jsx)(ur,{baseId:h,disabled:c,searchable:u,sideItems:v,visibleItems:X,marked:Z,setMarked:j,query:P,setQuery:Ze,active:V,setActive:de,anchor:k,labelled:s,registerHeader:je,registerList:er,move:rr,moveLabel:tr,children:(0,te.jsx)(ve.Primitive.div,{"data-disabled":c?"":void 0,...p,...(0,be.skdxPart)("transfer","root",p.className),ref:M})})});ne.displayName="Transfer";var E=S(require("react"),1),ke=require("../listbox/Listbox.cjs"),Ie=require("../utils/clamp.cjs"),q=require("../utils/direction.cjs"),Ee=require("../utils/primitive.cjs"),De=require("../utils/useRovingFocus.cjs");var xe=S(require("react"),1),Se=require("../listbox/Listbox.cjs"),Me=require("../utils/part.cjs"),_=require("../utils/primitive.cjs"),Pe=require("../utils/useRovingFocus.cjs");var Ce=require("react/jsx-runtime");function gr(e){let r=e.closest('[role="listbox"]');return r?Array.from(r.querySelectorAll(I),t=>t.getAttribute("data-value")).filter(t=>t!==null):[]}var O=xe.forwardRef(({value:e,disabled:r=!1,...t},o)=>{let a=g("TransferItem"),{side:c}=Le("TransferItem"),u=r||a.disabled,b=a.marked[c].includes(e),T=()=>{u||(a.anchor.current[c]=e)};return(0,Ce.jsx)(Se.ListboxItem,{value:e,disabled:u,"data-side":c,"data-selected":b?"":void 0,tabIndex:(0,Pe.rovingTabIndex)(a.active[c]!==null,a.active[c]===e,u),...t,...(0,Me.skdxPart)("transfer","item",t.className),ref:o,onFocus:(0,_.composeEventHandlers)(t.onFocus,()=>{u||a.setActive(c,e)}),onClick:(0,_.composeEventHandlers)(t.onClick,m=>{if(u||!m.shiftKey){T();return}m.preventDefault();let p=gr(m.currentTarget),M=a.anchor.current[c]??e,h=p.indexOf(M),L=p.indexOf(e);a.setMarked(c,h===-1||L===-1?[e]:p.slice(Math.min(h,L),Math.max(h,L)+1))}),onKeyDown:(0,_.composeEventHandlers)(t.onKeyDown,m=>{(m.key===" "||m.key==="Enter")&&T()})})});O.displayName="TransferItem";var B=require("react/jsx-runtime"),br={source:"Available items",target:"Selected items"},vr={source:"ArrowRight",target:"ArrowLeft"};function yr(e,r,t){let o=e.indexOf(r),a=e.indexOf(t);return o===-1||a===-1?e.includes(t)?[t]:[]:e.slice(Math.min(o,a),Math.max(o,a)+1)}var oe=E.forwardRef(({side:e,children:r,...t},o)=>{let a=g("TransferList"),{anchor:c,baseId:u,disabled:b,labelled:T,marked:m,move:p,registerList:M,setActive:h,setMarked:L,visibleItems:$}=a,y=E.useRef(null),D=(0,q.useDirection)(),Y=E.useCallback(s=>{y.current=s,M(e,s),typeof o=="function"?o(s):o&&(o.current=s)},[o,M,e]);(0,De.useRovingTabStop)(y,I,"data-value",a.active[e],s=>h(e,s));let P=$[e],z=`${u}-${e}-header`,V=T[e]?z:void 0,J=()=>Array.from(y.current?.querySelectorAll(I)??[],s=>s.getAttribute("data-value")).filter(s=>s!==null);return(0,B.jsx)(he,{side:e,children:(0,B.jsx)(ke.Listbox,{multiple:!0,id:`${u}-${e}-list`,disabled:b,value:m[e],onValueChange:s=>L(e,s),"data-side":e,"data-empty":P.length===0?"":void 0,"aria-labelledby":V,"aria-label":V?void 0:br[e],tabIndex:b||P.some(s=>!s.disabled)?void 0:0,...t,ref:Y,onKeyDown:(0,Ee.composeEventHandlers)(t.onKeyDown,s=>{if(b)return;let R=J();if(R.length===0)return;let k=s.target.getAttribute?.("data-value")??null;if((s.ctrlKey||s.metaKey)&&s.key.toLowerCase()==="a"){s.preventDefault(),L(e,R);return}if(s.shiftKey&&(s.key==="ArrowDown"||s.key==="ArrowUp")){let x=k===null?-1:R.indexOf(k);if(x===-1)return;let A=(0,Ie.clamp)(x+(s.key==="ArrowDown"?1:-1),0,R.length-1),v=c.current[e]??R[x];c.current[e]=v,L(e,yr(R,v,R[A]));return}if((0,q.directionalKey)(s.key,s.currentTarget,D)===vr[e]){let x=m[e].length>0?m[e]:k?[k]:[];if(x.length===0)return;s.preventDefault(),p(e==="source"?"toTarget":"toSource",x)}}),children:r??P.map(s=>(0,B.jsx)(O,{value:s.value,disabled:s.disabled,textValue:s.label,children:s.label},s.value))})})});oe.displayName="TransferList";var Q=S(require("react"),1),Ae=require("../utils/part.cjs"),He=require("../utils/primitive.cjs");var we=require("react/jsx-runtime"),ie=Q.forwardRef(({side:e,...r},t)=>{let{baseId:o,registerHeader:a}=g("TransferListHeader");return Q.useLayoutEffect(()=>(a(e,!0),()=>a(e,!1)),[a,e]),(0,we.jsx)(He.Primitive.div,{id:`${o}-${e}-header`,"data-side":e,...r,...(0,Ae.skdxPart)("transfer","list-header",r.className),ref:t})});ie.displayName="TransferListHeader";var Ne=S(require("react"),1),Oe=require("../utils/part.cjs"),U=require("../utils/primitive.cjs");var $e=require("react/jsx-runtime"),hr={source:"Filter available items",target:"Filter selected items"},le=Ne.forwardRef(({side:e,...r},t)=>{let{baseId:o,disabled:a,query:c,searchable:u,setQuery:b}=g("TransferListSearch");return u?(0,$e.jsx)(U.Primitive.input,{type:"search",value:c[e],disabled:a,"data-side":e,"aria-label":hr[e],"aria-controls":`${o}-${e}-list`,...r,...(0,Oe.skdxPart)("transfer","list-search",r.className),ref:t,onChange:(0,U.composeEventHandlers)(r.onChange,T=>{b(e,T.currentTarget.value)})}):null});le.displayName="TransferListSearch";var Ve=S(require("react"),1),Ke=require("../utils/part.cjs"),Fe=require("../utils/primitive.cjs");var _e=require("react/jsx-runtime"),fe=Ve.forwardRef((e,r)=>{let{disabled:t}=g("TransferControls");return(0,_e.jsx)(Fe.Primitive.div,{role:"group","aria-label":"Move items","data-disabled":t?"":void 0,...e,...(0,Ke.skdxPart)("transfer","controls",e.className),ref:r})});fe.displayName="TransferControls";var Be=S(require("react"),1),qe=require("../utils/part.cjs"),G=require("../utils/primitive.cjs");var Qe=require("react/jsx-runtime"),ce=Be.forwardRef(({direction:e,...r},t)=>{let{disabled:o,marked:a,move:c,moveLabel:u,sideItems:b}=g("TransferMoveTrigger"),T=N[e],m=a[T].filter(M=>!b[T].find(h=>h.value===M)?.disabled),p=o||m.length===0;return(0,Qe.jsx)(G.Primitive.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,...(0,qe.skdxPart)("transfer","move-trigger",r.className),ref:t,onClick:(0,G.composeEventHandlers)(r.onClick,()=>{p||c(e,m)})})});ce.displayName="TransferMoveTrigger";var Ue=S(require("react"),1),Ge=require("../utils/part.cjs"),W=require("../utils/primitive.cjs");var We=require("react/jsx-runtime"),me=Ue.forwardRef(({direction:e,...r},t)=>{let{disabled:o,move:a,moveLabel:c,visibleItems:u}=g("TransferMoveAllTrigger"),b=N[e],T=u[b].filter(p=>!p.disabled).map(p=>p.value),m=o||T.length===0;return(0,We.jsx)(W.Primitive.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,...(0,Ge.skdxPart)("transfer","move-all-trigger",r.className),ref:t,onClick:(0,W.composeEventHandlers)(r.onClick,()=>{m||a(e,T)})})});me.displayName="TransferMoveAllTrigger";var Ye=S(require("react"),1),ze=require("../utils/part.cjs"),Je=require("../utils/primitive.cjs");var Xe=require("react/jsx-runtime"),ue=Ye.forwardRef(({side:e,...r},t)=>{let{visibleItems:o}=g("TransferEmpty");return o[e].length>0?null:(0,Xe.jsx)(Je.Primitive.div,{"data-side":e,"data-empty":"",...r,...(0,ze.skdxPart)("transfer","empty",r.className),ref:t})});ue.displayName="TransferEmpty";0&&(module.exports={Transfer,TransferControls,TransferEmpty,TransferItem,TransferList,TransferListHeader,TransferListSearch,TransferMoveAllTrigger,TransferMoveTrigger,moveAnnouncement});

package/dist/transfer/Transfer.d.cts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { TransferContextValue, TransferDirection, TransferListContextValue, TransferMoveDetail, TransferProps, TransferSide } from './types.cjs';
+/** @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;
+/** @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.
+ */
+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.
+ */
+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
+ */
+export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/**
+ * 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>
+ * ```
+ */
+export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/Transfer.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { TransferContextValue, TransferDirection, TransferListContextValue, TransferMoveDetail, TransferProps, 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;
+/** @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.
+ */
+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.
+ */
+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
+ */
+export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/**
+ * 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>
+ * ```
+ */
+export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/Transfer.js

@@ -0,0 +1 @@
+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};

package/dist/transfer/TransferControls.d.cts

@@ -0,0 +1,19 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TransferControls>
+ *   <TransferMoveTrigger direction="toTarget">→</TransferMoveTrigger>
+ *   <TransferMoveTrigger direction="toSource">←</TransferMoveTrigger>
+ * </TransferControls>
+ * ```
+ */
+export declare const TransferControls: React.ForwardRefExoticComponent<Omit<TransferControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/TransferControls.d.ts

@@ -0,0 +1,19 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TransferControls>
+ *   <TransferMoveTrigger direction="toTarget">→</TransferMoveTrigger>
+ *   <TransferMoveTrigger direction="toSource">←</TransferMoveTrigger>
+ * </TransferControls>
+ * ```
+ */
+export declare const TransferControls: React.ForwardRefExoticComponent<Omit<TransferControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/TransferEmpty.d.cts

@@ -0,0 +1,22 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TransferList side="source" />
+ * <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
+ * ```
+ */
+export declare const TransferEmpty: React.ForwardRefExoticComponent<Omit<TransferEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/TransferEmpty.d.ts

@@ -0,0 +1,22 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <TransferList side="source" />
+ * <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
+ * ```
+ */
+export declare const TransferEmpty: React.ForwardRefExoticComponent<Omit<TransferEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/TransferItem.d.cts

@@ -0,0 +1,20 @@
+import * 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>>;

package/dist/transfer/TransferItem.d.ts

@@ -0,0 +1,20 @@
+import * 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>>;