@skdx/react 0.26.0 → 0.28.0

package/dist/tour/types.d.ts

@@ -1,66 +1,83 @@
 import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
 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.
- */
+import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+/** How step presents: `tooltip` / `floating` anchor to target, `dialog` centres. */
 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.
+     * Stable id for step; persist instead of index (which shifts on add/remove).
+     * @default undefined — `onStepChange` reports index alone.
+     */
+    id?: string;
+    /**
+     * Element step points at (CSS selector or ref); no target renders centred.
+     * @default undefined — centred with no spotlight.
      */
     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.
+     * Short name announced with step position (render visible heading with `TourTitle`).
+     * @default undefined — position only ("Step 2 of 5").
      */
     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`.
+     * Body text rendered as `TourDescription`.
+     * @default undefined — no description.
+     */
+    description?: string;
+    /**
+     * Side of target content is placed against (fed to popper).
+     * @default undefined — falls back to `TourContent`'s `side`.
      */
     placement?: Side;
     /**
      * Alignment along `placement`.
-     * @default undefined — falls back to `TourContent`'s own `align`, which defaults to `center`.
+     * @default undefined — falls back to `TourContent`'s `align`.
      */
     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.
+     * How step presents (`dialog` forces centre even with target).
+     * @default undefined — anchored if target exists, otherwise centred.
      */
     type?: TourStepType;
+    /**
+     * Whether step dims page (false renders no backdrop, drops `data-backdrop`).
+     * @default true
+     */
+    backdrop?: boolean;
 }
-/** @internal Shared state distributed from {@link Tour} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Tour} to its parts via context; not 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. */
+    /** True when content is positioned against target (not centred). */
     anchored: boolean;
+    /** Whether active step keeps dimming layer. */
+    hasBackdrop: boolean;
+    /** Whether root binds ArrowRight / ArrowLeft navigation on Content. */
+    keyboardNavigation: boolean;
     target: HTMLElement | null;
     spotlightStyle: React.CSSProperties;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether `TourTitle` currently renders (withhold dangling `aria-labelledby`). */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
+    /** Whether `TourDescription` currently renders (withhold dangling `aria-describedby`). */
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
     closeOnEscape: boolean;
     closeOnInteractOutside: boolean;
+    preventInteraction: boolean;
     setOpen: (open: boolean) => void;
     goTo: (index: number) => void;
     next: () => void;
@@ -69,53 +86,53 @@ export interface TourContextValue {
     complete: () => void;
 }
 /** Props for the {@link Tour} root. */
-export interface TourProps {
+export interface TourProps extends PassThroughProps {
     /**
-     * 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.
+     * Manually-composed parts for full control; given children, derived anatomy is not rendered.
+     * @default undefined — the tour derives its anatomy from `steps`.
      */
     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.
+     * Ordered steps whose length counts against the total in step numbering.
      */
     steps: TourStep[];
     /**
-     * Whether the tour is running, for controlled usage. Pair with `onOpenChange`.
-     * @default undefined — uncontrolled, tracks its own open state internally.
+     * Whether tour is running for controlled usage; Pair with `onOpenChange`.
+     * @default undefined — uncontrolled.
      */
     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.
+     * Whether tour runs on mount for uncontrolled usage.
+     * @default false — Set true to start on mount.
      */
     defaultOpen?: boolean;
     /**
-     * Fires with the new open state whenever the tour starts or ends, controlled or not.
+     * Fires with new open state when tour starts or ends.
      * @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.
+     * Fires when open-state change finishes on screen `onOpenChange`.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Active step index for controlled usage; Pair with `onStepChange`.
+     * @default undefined — uncontrolled.
      */
     step?: number;
     /**
-     * Index the tour starts on, for uncontrolled usage. Useful for resuming a
-     * tour the user abandoned.
+     * Index the tour starts on, for uncontrolled usage, useful for resuming an abandoned tour.
      * @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.
+     * Fires with the new index and step's `id` when the step changes; persist the id, not the index.
      * @default undefined — no-op if omitted.
      */
-    onStepChange?: (step: number) => void;
+    onStepChange?: (step: number, id?: string) => 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.
+     * Fires when the user advances past the last step; the tour closes either way regardless.
      * @default undefined — the tour still closes, it just tells nobody.
      */
     onComplete?: () => void;
@@ -126,46 +143,75 @@ export interface TourProps {
     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.
+     * @default true — set `false` only when the tour cannot be abandoned, and then render a {@link TourSkipTrigger} or {@link TourCloseTrigger} inside {@link TourContent}.
      */
     closeOnEscape?: boolean;
+    /**
+     * Whether the page behind the tour is marked `inert` and Content declares `aria-modal="true"`.
+     * @default false — a tour points at the page, so the page stays readable and operable.
+     */
+    preventInteraction?: 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.
+     * @default false — an outside click during a tour is usually a misclick on the UI being explained.
      */
     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.
+     * Pixels of breathing room added around the target on every side when the spotlight geometry is published.
+     * @default 8 — clears the target's own focus ring instead of clipping it.
      */
     spotlightPadding?: number;
+    /**
+     * Corner radius of the spotlight cutout in pixels, published as `--skdx-tour-radius`.
+     * @default 0
+     */
+    spotlightRadius?: number;
+    /**
+     * Whether and how a step's target is scrolled into view; `behavior` forces `auto` when `prefers-reduced-motion: reduce` matches.
+     * @default { block: 'center', inline: 'center' }
+     */
+    scrollIntoView?: boolean | ScrollIntoViewOptions;
     /**
      * 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.
+     * giving up — covers targets that mount late, like a lazy route.
      * @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.
+     * Fires when a step's target never appeared within `targetTimeout`; the tour then skips forward rather than rendering unanchored.
      * @default undefined — the step is still skipped, it just tells nobody.
      */
     onStepTargetMissing?: (index: number, step: TourStep) => void;
+    /**
+     * Whether ArrowRight/ArrowLeft navigate the tour when TourContent holds focus, mirrored under RTL; keys in `<input>` are never taken.
+     * @default false — arrow keys belong to whatever the step is pointing at.
+     */
+    keyboardNavigation?: boolean;
     /**
      * 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;
+    /**
+     * Whether the derived anatomy renders a {@link TourProgressText}. Ignored when `children` is given.
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * Whether the derived anatomy renders a {@link TourSkipTrigger}. Ignored when `children` is given.
+     * @default true
+     */
+    showSkip?: boolean;
+    /**
+     * Whether the derived anatomy renders a {@link TourSpotlight} over the active step's target. Ignored when `children` is given.
+     * @default true
+     */
+    spotlight?: boolean;
 }
 /** 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;
@@ -181,17 +227,15 @@ export interface TourBackdropProps extends PrimitivePropsWithRef<'div'> {
 /** 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.
+     * Keep the spotlight mounted even while the tour is closed; still renders nothing when the active step has no target.
      * @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.
+ * popper positioning props, which act as the defaults each step's own
+ * `placement`/`align` override.
  */
 export interface TourContentProps extends PopperContentProps {
     /**
@@ -200,32 +244,35 @@ export interface TourContentProps extends PopperContentProps {
      */
     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`.
+     * Fires when Escape is pressed while the tour is open; call `event.preventDefault()` to stop it from skipping the tour.
      * @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.
+     * Fires on pointer-down outside the content; call `event.preventDefault()` to stop it from skipping the tour.
      * @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`.
+     * Fires when focus moves outside the content; reported only, since a tour never ends on focus alone.
      * @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.
+     * 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;
+    /**
+     * Fires before focus moves into the panel; call preventDefault to place focus yourself, once per tour or per-step.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /**
+     * Fires before focus returns to the previously focused element; call preventDefault to suppress that return.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
 }
 /** Props for {@link TourTrigger}, the button that starts the tour. */
 export interface TourTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -247,11 +294,19 @@ export interface TourProgressTextProps extends PrimitivePropsWithRef<'p'> {
      */
     format?: (index: number, total: number) => string;
 }
+/** Props for {@link TourActions}, the row the navigation triggers sit in. */
+export interface TourActionsProps extends PrimitivePropsWithRef<'div'> {
+}
 /** 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'> {
+    /**
+     * Disables this button; automatically set on the first step.
+     * @default false
+     */
+    disabled?: boolean;
 }
 /** Props for {@link TourSkipTrigger}, which ends the tour early. */
 export interface TourSkipTriggerProps extends PrimitivePropsWithRef<'button'> {

package/dist/transfer/Transfer.cjs

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

package/dist/transfer/Transfer.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TransferContextValue, TransferDirection, TransferListContextValue, TransferMoveDetail, TransferProps, TransferSide } from './types.cjs';
+import type { TransferContextValue, TransferDirection, TransferFilterMatchMode, TransferItemData, TransferListContextValue, TransferMoveDetail, TransferProps, TransferSearchResultsDetail, 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: {
@@ -34,59 +34,23 @@ export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
  * 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.
- */
+/** @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>`.
- *
+ * Two-list transfer: pool on one side, chosen on other, triggers move between.
+ * Membership is only state; both lists derived from `items` + `value` so sides never drift.
+ * All moves keyboard-reachable; roving focus per list; named buttons; focus lands on moved item place, never 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>
- * ```
+ * Derives headed searchable lists from `titles` and `renderItem`, or renders children verbatim.
+ * @example `<Transfer items={FRAMEWORKS} defaultValue={['react']} searchable />`
+ * @example Full manual composition from `@skdx/react/primitives/transfer` for unrestricted control.
  */
 export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/transfer/Transfer.d.ts

@@ -1,5 +1,5 @@
 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: {
@@ -34,59 +34,23 @@ export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
  * 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.
- */
+/** @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>`.
- *
+ * Two-list transfer: pool on one side, chosen on other, triggers move between.
+ * Membership is only state; both lists derived from `items` + `value` so sides never drift.
+ * All moves keyboard-reachable; roving focus per list; named buttons; focus lands on moved item place, never 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>
- * ```
+ * Derives headed searchable lists from `titles` and `renderItem`, or renders children verbatim.
+ * @example `<Transfer items={FRAMEWORKS} defaultValue={['react']} searchable />`
+ * @example Full manual composition from `@skdx/react/primitives/transfer` for unrestricted control.
  */
 export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;