@skdx/react 0.27.0 → 0.29.0

package/dist/tour/types.d.ts

@@ -1,66 +1,90 @@
 import type * as React from 'react';
+import type { AutoFocusEvent } from '../utils/dismissal.js';
+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.
- */
+/** 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. */
+/** Payload of {@link TourProps.onStepChange}: the new index and the step's `id`. */
+export interface TourStepChange {
+    /** Zero-based index of the step now active. */
+    index: number;
+    /** The active step's `id`, when it declares one. */
+    id?: string | undefined;
+}
+/** One step of a {@link Tour}. Stepper 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 the index with no id.
+     */
+    id?: string | undefined;
+    /**
+     * Element step points at (CSS selector or ref); no target renders centred.
+     * @default undefined — centred with no spotlight.
+     */
+    target?: string | React.RefObject<HTMLElement | null> | undefined;
+    /**
+     * Short name announced with step position (render visible heading with `TourTitle`).
+     * @default undefined — position only ("Step 2 of 5").
      */
-    target?: string | React.RefObject<HTMLElement | null>;
+    title?: string | undefined;
     /**
-     * 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.
+     * Body text rendered as `TourDescription`.
+     * @default undefined — no description.
      */
-    title?: string;
+    description?: string | undefined;
     /**
-     * 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`.
+     * Side of target content is placed against (fed to popper).
+     * @default undefined — falls back to `TourContent`'s `side`.
      */
-    placement?: Side;
+    placement?: Side | undefined;
     /**
      * 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;
+    align?: Align | undefined;
     /**
-     * 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;
+    type?: TourStepType | undefined;
+    /**
+     * Whether step dims page (false renders no backdrop, drops `data-backdrop`).
+     * @default true
+     */
+    backdrop?: boolean | undefined;
 }
-/** @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,106 +93,138 @@ 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;
+    children?: React.ReactNode | undefined;
     /**
-     * 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 | undefined;
+    /**
+     * Whether tour runs on mount for uncontrolled usage.
+     * @default false — Set true to start on mount.
      */
-    open?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
-     * 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.
+     * Fires with new open state when tour starts or ends.
+     * @default undefined — no-op if omitted.
      */
-    defaultOpen?: boolean;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
-     * Fires with the new open state whenever the tour starts or ends, controlled or not.
+     * Fires when open-state change finishes on screen `onOpenChange`.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * Index of the active step, for controlled usage. Pair with `onStepChange`.
-     * @default undefined — uncontrolled, tracks the index itself.
+     * Active step index for controlled usage; Pair with `onStepChange`.
+     * @default undefined — uncontrolled.
      */
-    step?: number;
+    step?: number | undefined;
     /**
-     * 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;
+    defaultStep?: number | undefined;
     /**
-     * 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 `{ index, id }` when the step changes; persist the id, not the index.
      * @default undefined — no-op if omitted.
      */
-    onStepChange?: (step: number) => void;
+    onStepChange?: ((change: TourStepChange) => void) | undefined;
     /**
-     * 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;
+    onComplete?: (() => void) | undefined;
     /**
      * 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;
+    onSkip?: (() => void) | undefined;
     /**
      * 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 | undefined;
+    /**
+     * 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.
      */
-    closeOnEscape?: boolean;
+    preventInteraction?: boolean | undefined;
     /**
      * 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;
+    closeOnInteractOutside?: boolean | undefined;
     /**
-     * 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;
+    spotlightPadding?: number | undefined;
+    /**
+     * Corner radius of the spotlight cutout in pixels, published as `--skdx-tour-radius`.
+     * @default 0
+     */
+    spotlightRadius?: number | undefined;
+    /**
+     * 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 | undefined;
     /**
      * 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;
+    targetTimeout?: number | undefined;
     /**
-     * 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;
+    onStepTargetMissing?: ((detail: {
+        index: number;
+        step: TourStep;
+    }) => void) | undefined;
+    /**
+     * 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 | undefined;
     /**
      * 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;
+    getAnnouncement?: ((step: TourStep, index: number, total: number) => string) | undefined;
+    /**
+     * Whether the derived anatomy renders a {@link TourProgressText}. Ignored when `children` is given.
+     * @default true
+     */
+    showProgress?: boolean | undefined;
+    /**
+     * Whether the derived anatomy renders a {@link TourSkipTrigger}. Ignored when `children` is given.
+     * @default true
+     */
+    showSkip?: boolean | undefined;
+    /**
+     * Whether the derived anatomy renders a {@link TourSpotlight} over the active step's target. Ignored when `children` is given.
+     * @default true
+     */
+    spotlight?: boolean | undefined;
 }
 /** 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;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link TourBackdrop}, the dimming layer with the spotlight cutout. */
 export interface TourBackdropProps extends PrimitivePropsWithRef<'div'> {
@@ -176,56 +232,53 @@ export interface TourBackdropProps extends PrimitivePropsWithRef<'div'> {
      * Keep the backdrop mounted even while the tour is closed.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** 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;
+    forceMount?: boolean | undefined;
 }
-/**
- * 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.
- */
+/** Props for {@link TourContent}, extending the shared popper positioning props each step's `placement`/`align` can override. */
 export interface TourContentProps extends PopperContentProps {
     /**
      * Keep the panel mounted even while the tour is closed.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * 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;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
-     * 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;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
-     * 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;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
-     * 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;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+    /**
+     * 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) | undefined;
+    /**
+     * 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) | undefined;
 }
 /** Props for {@link TourTrigger}, the button that starts the tour. */
 export interface TourTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -245,13 +298,21 @@ 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;
+    format?: ((index: number, total: number) => string) | undefined;
+}
+/** 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 | undefined;
 }
 /** Props for {@link TourSkipTrigger}, which ends the tour early. */
 export interface TourSkipTriggerProps extends PrimitivePropsWithRef<'button'> {

package/dist/transfer/Transfer.cjs

@@ -1 +1,2 @@
-"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 client';
+"use strict";var ur=Object.create;var G=Object.defineProperty;var mr=Object.getOwnPropertyDescriptor;var Tr=Object.getOwnPropertyNames;var pr=Object.getPrototypeOf,gr=Object.prototype.hasOwnProperty;var yr=(e,t)=>{for(var r in t)G(e,r,{get:t[r],enumerable:!0})},be=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Tr(t))!gr.call(e,n)&&n!==r&&G(e,n,{get:()=>t[n],enumerable:!(s=mr(t,n))||s.enumerable});return e};var oe=(e,t,r)=>(r=e!=null?ur(pr(e)):{},be(t||!e||!e.__esModule?G(r,"default",{value:e,enumerable:!0}):r,e)),vr=e=>be(G({},"__esModule",{value:!0}),e);var _r={};yr(_r,{DESTINATION_OF:()=>ue,OPTION_SELECTOR:()=>P,ORIGIN_OF:()=>N,SIDES:()=>Je,SIDE_NOUN:()=>U,Transfer:()=>me,TransferControls:()=>W,TransferEmpty:()=>w,TransferItem:()=>X,TransferList:()=>$,TransferListHeader:()=>_,TransferListProvider:()=>le,TransferListSearch:()=>q,TransferMoveAllTrigger:()=>Q,TransferMoveTrigger:()=>z,TransferProvider:()=>Ye,matchesFilterMode:()=>rr,moveAnnouncement:()=>Ze,moveTriggerLabel:()=>er,searchResultsAnnouncement:()=>je,useTransferContext:()=>b,useTransferListContext:()=>ie});module.exports=vr(_r);var p=oe(require("react"),1),ce=require("../utils/createContext.cjs"),Ue=require("../utils/hiddenInput.cjs"),de=require("../utils/liveAnnouncer.cjs"),Ge=require("../utils/part.cjs"),We=require("../utils/primitive.cjs"),te=require("../utils/recipeAxis.cjs"),Xe=require("../utils/useControllableState.cjs");var B=require("../utils/Glyph.cjs");var Re=require("../utils/part.cjs"),he=require("../utils/primitive.cjs");var Se=require("react/jsx-runtime"),W=({ref:e,...t})=>{let{disabled:r}=b("TransferControls");return(0,Se.jsx)(he.Primitive.div,{role:"group","aria-label":"Move items","data-disabled":r?"":void 0,...t,...(0,Re.skdxPart)("transfer","controls",t.className),ref:e})};W.displayName="TransferControls";var Me=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs");var xe=require("react/jsx-runtime"),w=({side:e,children:t,ref:r,...s})=>{let{query:n,sideItems:o,visibleItems:a}=b("TransferEmpty");if(a[e].length>0)return null;let i=o[e].length===0?"empty":"no-results",l=i==="no-results"?n[e]:"";return(0,xe.jsx)(Le.Primitive.div,{"data-side":e,"data-empty":"","data-reason":i,"data-query":l,...s,...(0,Me.skdxPart)("transfer","empty",s.className),ref:r,children:typeof t=="function"?t({reason:i,query:l}):t})};w.displayName="TransferEmpty";var J=oe(require("react"),1),Pe=require("../listbox/Listbox.cjs"),Ae=require("../utils/clamp.cjs"),Z=require("../utils/direction.cjs"),F=require("../utils/primitive.cjs"),De=require("../utils/useRovingFocus.cjs");var ke=require("../listbox/Listbox.cjs"),Ie=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),Ee=require("../utils/useRovingFocus.cjs");var Ce=require("react/jsx-runtime");function br(e){let t=e.closest('[role="listbox"]');return t?Array.from(t.querySelectorAll(P),r=>r.getAttribute("data-value")).filter(r=>r!==null):[]}var X=({value:e,disabled:t=!1,ref:r,...s})=>{let n=b("TransferItem"),{anchorRef:o}=n,{side:a}=ie("TransferItem"),i=t||n.disabled,l=n.marked[a].includes(e),m=()=>{i||(o.current[a]=e)};return(0,Ce.jsx)(ke.ListboxItem,{value:e,disabled:i,"data-side":a,"data-selected":l?"":void 0,tabIndex:(0,Ee.rovingTabIndex)(n.active[a]!==null,n.active[a]===e,i),...s,...(0,Ie.skdxPart)("transfer","item",s.className),ref:r,onFocus:(0,V.composeEventHandlers)(s.onFocus,()=>{i||n.setActive(a,e)}),onClick:(0,V.useComposedEventHandlers)(s.onClick,T=>{if(i||!T.shiftKey){m();return}T.preventDefault();let v=br(T.currentTarget),d=o.current[a]??e,u=v.indexOf(d),f=v.indexOf(e);n.setMarked(a,u===-1||f===-1?[e]:v.slice(Math.min(u,f),Math.max(u,f)+1))}),onKeyDown:(0,V.useComposedEventHandlers)(s.onKeyDown,T=>{!T.shiftKey&&(T.key===" "||T.key==="Enter")&&m()})})};X.displayName="TransferItem";var Y=require("react/jsx-runtime"),Rr={source:"Available items",target:"Selected items"},hr={source:"ArrowRight",target:"ArrowLeft"};function fe(e,t,r){let s=e.indexOf(t),n=e.indexOf(r);return s===-1||n===-1?e.includes(r)?[r]:[]:e.slice(Math.min(s,n),Math.max(s,n)+1)}function Sr(e,t){if(!(e.shiftKey&&(e.ctrlKey||e.metaKey)&&(e.key==="Home"||e.key==="End")))return!1;let{options:s,values:n,focusedValue:o,side:a,setMarked:i}=t;if(o===null)return!0;e.preventDefault();let l=e.key==="Home"?n[0]:n[n.length-1];return i(a,fe(n,o,l)),s[e.key==="Home"?0:s.length-1].focus(),!0}function Mr(e,t){if(!((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"))return!1;let{values:r,marked:s,side:n,setMarked:o}=t;e.preventDefault();let a=r.every(i=>s[n].includes(i));return o(n,a?[]:r),!0}function Lr(e,t){if(!(e.shiftKey&&e.key===" "))return!1;let{values:r,focusedValue:s,anchorRef:n,side:o,setMarked:a}=t;if(s===null)return!0;e.preventDefault();let i=n.current[o]??s;return n.current[o]=i,a(o,fe(r,i,s)),!0}function xr(e,t){if(!(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")))return!1;let{options:r,values:s,focusedValue:n,anchorRef:o,side:a,setMarked:i}=t,l=n===null?-1:s.indexOf(n);if(l===-1)return!0;let m=(0,Ae.clamp)(l+(e.key==="ArrowDown"?1:-1),0,s.length-1);e.preventDefault();let T=o.current[a]??s[l];return o.current[a]=T,i(a,fe(s,T,s[m])),r[m].focus(),!0}function kr(e,t){let{dir:r,side:s,focusedValue:n,marked:o,move:a}=t;if((0,Z.directionalKey)(e.key,e.currentTarget,r)!==hr[s])return;let i=o[s];i.length===0&&(i=n?[n]:[]),i.length!==0&&(e.preventDefault(),a(s==="source"?"toTarget":"toSource",i))}var $=({side:e,renderItem:t,children:r,ref:s,...n})=>{let o=b("TransferList"),{anchorRef:a,baseId:i,disabled:l,labelled:m,marked:T,move:v,emitListScroll:d,registerList:u,setActive:f,setMarked:S,suppressFocusInRef:x,visibleItems:M}=o,h=J.useRef(null),O=(0,Z.useDirection)(),A=J.useCallback(c=>{h.current=c,u(e,c),typeof s=="function"?s(c):s&&(s.current=c)},[s,u,e]);(0,De.useRovingTabStop)(h,P,"data-value",o.active[e],c=>f(e,c));let L=M[e],k=`${i}-${e}-header`,D=m[e]?k:void 0,y=()=>Array.from(h.current?.querySelectorAll(P)??[]).filter(c=>c.getAttribute("data-value")!==null);return(0,Y.jsx)(le,{side:e,children:(0,Y.jsx)(Pe.Listbox,{multiple:!0,id:`${i}-${e}-list`,disabled:l,value:T[e],onValueChange:c=>S(e,c.value),"data-side":e,"data-empty":L.length===0?"":void 0,"aria-labelledby":D,"aria-label":D?void 0:Rr[e],tabIndex:l||L.some(c=>!c.disabled)?void 0:0,...n,ref:A,onScroll:(0,F.composeEventHandlers)(n.onScroll,c=>{d(e,c.currentTarget)}),onFocus:(0,F.useComposedEventHandlers)(n.onFocus,c=>{if(l)return;if(x.current){x.current=!1;return}let I=h.current,E=c.relatedTarget;if(!I||!E||I.contains(E))return;let C=y();if(C.length===0)return;let R=C.find(K=>T[e].includes(K.getAttribute("data-value")??""))??C[0];R!==c.target&&R.focus()}),onKeyDown:(0,F.useComposedEventHandlers)(n.onKeyDown,c=>{if(l)return;let I=y(),E=I.map(K=>K.getAttribute("data-value"));if(E.length===0)return;let C=c.target.getAttribute?.("data-value")??null,R={side:e,dir:O,options:I,values:E,focusedValue:C,anchorRef:a,marked:T,setMarked:S,move:v};Sr(c,R)||Mr(c,R)||Lr(c,R)||xr(c,R)||kr(c,R)}),children:r??L.map(c=>(0,Y.jsx)(X,{value:c.value,disabled:c.disabled,textValue:c.label,children:t?t(c):c.label},c.value))})})};$.displayName="TransferList";var Ne=oe(require("react"),1),He=require("../utils/part.cjs"),Oe=require("../utils/primitive.cjs");var Ke=require("react/jsx-runtime"),_=({side:e,ref:t,...r})=>{let{baseId:s,registerHeader:n}=b("TransferListHeader");return Ne.useLayoutEffect(()=>(n(e,!0),()=>n(e,!1)),[n,e]),(0,Ke.jsx)(Oe.Primitive.div,{id:`${s}-${e}-header`,"data-side":e,...r,...(0,He.skdxPart)("transfer","list-header",r.className),ref:t})};_.displayName="TransferListHeader";var we=require("../utils/part.cjs"),j=require("../utils/primitive.cjs");var Ve=require("react/jsx-runtime"),Ir={source:"Filter available items",target:"Filter selected items"},q=({side:e,ref:t,...r})=>{let{baseId:s,disabled:n,query:o,searchable:a,setQuery:i}=b("TransferListSearch");return a?(0,Ve.jsx)(j.Primitive.input,{type:"search",value:o[e],disabled:n,"data-side":e,"aria-label":Ir[e],"aria-controls":`${s}-${e}-list`,...r,...(0,we.skdxPart)("transfer","list-search",r.className),ref:t,onChange:(0,j.composeEventHandlers)(r.onChange,l=>{i(e,l.currentTarget.value)})}):null};q.displayName="TransferListSearch";var Fe=require("../utils/part.cjs"),ee=require("../utils/primitive.cjs");var $e=require("react/jsx-runtime"),Q=({direction:e,ref:t,...r})=>{let{disabled:s,move:n,moveLabel:o,visibleItems:a}=b("TransferMoveAllTrigger"),i=N[e],l=a[i].filter(T=>!T.disabled).map(T=>T.value),m=s||l.length===0;return(0,$e.jsx)(ee.Primitive.button,{type:"button","aria-disabled":m||void 0,"aria-label":o(l.length,e,!0),"data-direction":e,"data-count":l.length,"data-disabled":m?"":void 0,...r,...(0,Fe.skdxPart)("transfer","move-all-trigger",r.className),ref:t,onClick:(0,ee.composeEventHandlers)(r.onClick,()=>{m||n(e,l)})})};Q.displayName="TransferMoveAllTrigger";var _e=require("../utils/part.cjs"),re=require("../utils/primitive.cjs");var qe=require("react/jsx-runtime"),z=({direction:e,ref:t,...r})=>{let{disabled:s,marked:n,move:o,moveLabel:a,sideItems:i}=b("TransferMoveTrigger"),l=N[e],m=n[l].filter(v=>!i[l].find(d=>d.value===v)?.disabled),T=s||m.length===0;return(0,qe.jsx)(re.Primitive.button,{type:"button","aria-disabled":T||void 0,"aria-label":a(m.length,e,!1),"data-direction":e,"data-count":m.length,"data-disabled":T?"":void 0,...r,...(0,_e.skdxPart)("transfer","move-trigger",r.className),ref:t,onClick:(0,re.composeEventHandlers)(r.onClick,()=>{T||o(e,m)})})};z.displayName="TransferMoveTrigger";var g=require("react/jsx-runtime"),Qe={source:"Available items",target:"Selected items"},ze={empty:"Nothing here.",noMatch:'No match for "{query}".'},Er=()=>(0,g.jsx)(B.Glyph,{name:"arrow-right"}),Cr=()=>(0,g.jsx)(B.Glyph,{name:"arrow-left"}),Pr=()=>(0,g.jsx)(B.Glyph,{name:"chevrons-right"}),Ar=()=>(0,g.jsx)(B.Glyph,{name:"chevrons-left"}),Be=({density:e,shape:t,size:r,titles:s,renderItem:n,emptyText:o,showMoveAll:a})=>{let i=s?.source??Qe.source,l=s?.target??Qe.target,m=o?.empty??ze.empty,T=o?.noMatch??ze.noMatch,v=(d,u)=>d==="empty"?m:T.replaceAll("{query}",u);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(_,{side:"source",children:i}),(0,g.jsx)(q,{side:"source"}),(0,g.jsx)($,{side:"source",density:e,shape:t,size:r,renderItem:n}),(0,g.jsx)(w,{side:"source",children:({reason:d,query:u})=>v(d,u)}),(0,g.jsxs)(W,{children:[a?(0,g.jsx)(Q,{direction:"toTarget",children:(0,g.jsx)(Pr,{})}):null,(0,g.jsx)(z,{direction:"toTarget",children:(0,g.jsx)(Er,{})}),(0,g.jsx)(z,{direction:"toSource",children:(0,g.jsx)(Cr,{})}),a?(0,g.jsx)(Q,{direction:"toSource",children:(0,g.jsx)(Ar,{})}):null]}),(0,g.jsx)(_,{side:"target",children:l}),(0,g.jsx)(q,{side:"target"}),(0,g.jsx)($,{side:"target",density:e,shape:t,size:r,renderItem:n}),(0,g.jsx)(w,{side:"target",children:({reason:d,query:u})=>v(d,u)})]})};var H=require("react/jsx-runtime"),P='[role="option"]:not([data-disabled])',[Ye,b]=(0,ce.createSafeContext)("Transfer"),[le,ie]=(0,ce.createSafeContext)("TransferList"),N={toTarget:"source",toSource:"target"},ue={toTarget:"target",toSource:"source"},U={source:"available",target:"selected"},Je=["source","target"],Dr=[];function Ze({moved:e,remaining:t,from:r,to:s}){return`${e} ${e===1?"item":"items"} moved to ${U[s]}. ${t} remaining in ${U[r]}.`}function je({shown:e,total:t,side:r}){return`${e} of ${t} ${t===1?"item":"items"} shown in ${U[r]}.`}function er(e,t,r){let s=U[ue[t]],n=r?"Move all":"Move";return e===0?`${n} items to ${s}, ${r?"nothing to move":"nothing selected"}`:`${n} ${e} ${e===1?"item":"items"} to ${s}`}function rr(e,t,r="contains"){let s=t.trim().toLowerCase();if(s==="")return!0;let n=e.label.toLowerCase();return r==="startsWith"?n.startsWith(s):r==="endsWith"?n.endsWith(s):n.includes(s)}function Nr(){let[e,t]=p.useState({source:[],target:[]}),[r,s]=p.useState({source:"",target:""}),[n,o]=p.useState({source:null,target:null}),[a,i]=p.useState({source:!1,target:!1}),l=p.useCallback((d,u)=>{t(f=>({...f,[d]:u}))},[]),m=p.useCallback((d,u)=>{s(f=>f[d]===u?f:{...f,[d]:u})},[]),T=p.useCallback((d,u)=>{o(f=>f[d]===u?f:{...f,[d]:u})},[]),v=p.useCallback((d,u)=>{i(f=>f[d]===u?f:{...f,[d]:u})},[]);return{markedState:e,query:r,setQuery:m,active:n,setActive:T,labelled:a,setMarked:l,registerHeader:v}}function Hr(){let e=p.useRef({source:null,target:null}),t=p.useRef({source:null,target:null}),r=p.useRef(null),s=p.useRef(!1),n=p.useCallback((o,a)=>{t.current[o]=a},[]);return{anchorRef:e,listNodes:t,pendingFocusRef:r,suppressFocusInRef:s,registerList:n}}function Or(e){let{items:t,targetValues:r,targetOrder:s,searchable:n,filter:o,filterMatchMode:a,query:i,markedState:l}=e,m=p.useMemo(()=>{let d=t.filter(f=>!r.includes(f.value));if(s==="items")return{source:d,target:t.filter(f=>r.includes(f.value))};let u=new Map(t.map(f=>[f.value,f]));return{source:d,target:r.map(f=>u.get(f)).filter(f=>f!==void 0)}},[t,r,s]),T=p.useMemo(()=>{if(!n)return m;let d=o??((f,S)=>rr(f,S,a)),u=f=>i[f].trim()===""?m[f]:m[f].filter(S=>d(S,i[f]));return{source:u("source"),target:u("target")}},[n,o,a,i,m]),v=p.useMemo(()=>({source:l.source.filter(d=>m.source.some(u=>u.value===d)),target:l.target.filter(d=>m.target.some(u=>u.value===d))}),[l,m]);return{sideItems:m,visibleItems:T,marked:v}}function Kr(e){let{disabled:t,sideItems:r,visibleItems:s,targetValues:n,targetOrder:o,marked:a,setMarked:i,setRawValue:l,onMove:m,getMoveAnnouncement:T,pendingFocusRef:v}=e;return p.useCallback((d,u)=>{if(t)return;let f=N[d],S=ue[d],x=r[f],M=u.map(y=>x.find(c=>c.value===y)).filter(y=>y!==void 0&&!y.disabled);if(M.length===0)return;let h=M.map(y=>y.value),O=s[f].filter(y=>!y.disabled),A=h.map(y=>O.findIndex(c=>c.value===y)).filter(y=>y>=0);v.current={side:f,index:A.length>0?Math.min(...A):0};let L=h.filter(y=>!n.includes(y)),k;d==="toTarget"?k=o==="prepend"?[...L,...n]:[...n,...L]:k=n.filter(y=>!h.includes(y)),l(k),i(f,a[f].filter(y=>!h.includes(y))),m?.({items:M,direction:d});let D={moved:M.length,remaining:x.length-M.length,direction:d,from:f,to:S};(0,de.announce)((T??Ze)(D))},[t,T,a,m,v,i,l,r,o,n,s])}function wr(e){return p.useCallback((t,r)=>{e?.({side:t,scrollTop:r.scrollTop,scrollHeight:r.scrollHeight,clientHeight:r.clientHeight})},[e])}function Vr(e,t,r,s,n){let o=p.useRef({source:"",target:""});p.useEffect(()=>{if(e)for(let a of Je)t[a]!==o.current[a]&&(o.current[a]=t[a],(0,de.announce)((n??je)({shown:r[a].length,total:s[a].length,side:a,query:t[a]})))},[e,t,r,s,n])}function Fr(e){return p.useCallback((t,r,s)=>(e??er)(t,r,s),[e])}function $r(e,t,r,s){p.useLayoutEffect(()=>{let n=e.current;if(!n)return;e.current=null;let o=t.current[n.side];if(!o)return;let a=Array.from(o.querySelectorAll(P)),i=a[Math.min(n.index,a.length-1)];if(r.current=!0,i){let l=i.getAttribute("data-value");l&&s(n.side,l),i.focus()}else o.focus()})}var me=({items:e,value:t,defaultValue:r,onValueChange:s,onMove:n,disabled:o=!1,name:a,form:i,searchable:l=!1,filter:m,filterMatchMode:T="contains",getMoveLabel:v,getMoveAnnouncement:d,getSearchResultsAnnouncement:u,targetOrder:f="items",onListScroll:S,titles:x,emptyText:M,showMoveAll:h=!1,renderItem:O,children:A,density:L,shape:k,size:D,ref:y,...c})=>{let I=p.useId(),[E,C]=(0,Xe.useControllableState)({prop:t,defaultProp:r,onChange:s}),R=E??Dr,{markedState:K,query:ne,setQuery:tr,active:nr,setActive:Te,labelled:sr,setMarked:pe,registerHeader:ar}=Nr(),{anchorRef:or,listNodes:ir,pendingFocusRef:ge,suppressFocusInRef:ye,registerList:fr}=Hr(),{sideItems:se,visibleItems:ae,marked:ve}=Or({items:e,targetValues:R,targetOrder:f,searchable:l,filter:m,filterMatchMode:T,query:ne,markedState:K}),lr=Kr({disabled:o,sideItems:se,visibleItems:ae,targetValues:R,targetOrder:f,marked:ve,setMarked:pe,setRawValue:C,onMove:n,getMoveAnnouncement:d,pendingFocusRef:ge}),cr=wr(S);Vr(l,ne,ae,se,u);let dr=Fr(v);return $r(ge,ir,ye,Te),(0,H.jsxs)(Ye,{baseId:I,disabled:o,searchable:l,sideItems:se,visibleItems:ae,marked:ve,setMarked:pe,query:ne,setQuery:tr,active:nr,setActive:Te,anchorRef:or,labelled:sr,registerHeader:ar,registerList:fr,suppressFocusInRef:ye,move:lr,moveLabel:dr,emitListScroll:cr,children:[(0,H.jsx)(We.Primitive.div,{"data-disabled":o?"":void 0,...c,"data-density":void 0,"data-shape":void 0,"data-size":void 0,...(0,Ge.skdxPart)("transfer","root",c.className),ref:y,children:A??(0,H.jsx)(Be,{density:(0,te.recipeAxis)(L,c,"data-density"),shape:(0,te.recipeAxis)(k,c,"data-shape"),size:(0,te.recipeAxis)(D,c,"data-size"),titles:x,renderItem:O,emptyText:M,showMoveAll:h})}),(0,H.jsx)(Ue.MirroredValues,{name:a,values:R,disabled:o,form:i})]})};me.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,92 +1,35 @@
 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: {
-    (props: TransferContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTransferContext: (consumerName: string) => TransferContextValue;
-/**
- * Tells a `TransferItem` which list it is inside.
- *
- * Lives here rather than in `TransferList.tsx` because `TransferList` renders
- * `TransferItem`s by default and `TransferItem` needs the context back — a
- * module cycle that would leave one of the two `forwardRef` consts undefined
- * at import time.
- *
- * @internal
- */
-export declare const TransferListProvider: {
-    (props: TransferListContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTransferListContext: (consumerName: string) => TransferListContextValue;
+export declare const TransferProvider: React.FC<TransferContextValue & {
+    children: React.ReactNode;
+}>, useTransferContext: (consumerName: string) => TransferContextValue;
+/** @internal Tells a `TransferItem` which list it is inside. */
+export declare const TransferListProvider: React.FC<TransferListContextValue & {
+    children: React.ReactNode;
+}>, useTransferListContext: (consumerName: string) => TransferListContextValue;
 /** @internal Where a direction takes items *from*. */
 export declare const ORIGIN_OF: Record<TransferDirection, TransferSide>;
 /** @internal Where a direction takes items *to*. */
 export declare const DESTINATION_OF: Record<TransferDirection, TransferSide>;
-/**
- * @internal The word each side is called in default accessible names and in
- * the move announcement. Deliberately the *same* word in both, so "Move 3
- * items to selected" and "3 items moved to selected" name the same list.
- */
+/** @internal Word each side is called in default accessible names and move announcements. */
 export declare const SIDE_NOUN: Record<TransferSide, string>;
-/**
- * The default wording of the post-move announcement. Split out so
- * {@link TransferProps.getMoveAnnouncement} has something to fall back to and
- * so a consumer can call it for the sides they do not want to re-word.
- */
+/** @internal Both sides, in a fixed order, so effects can walk them without allocating. */
+export declare const SIDES: readonly TransferSide[];
+/** Default move announcement (for {@link TransferProps.getMoveAnnouncement}} fallback). */
 export declare function moveAnnouncement({ moved, remaining, from, to }: TransferMoveDetail): string;
-/**
- * The accessible name of a move trigger: direction *and* count, because "→" is
- * unambiguous next to two labelled lists and meaningless read out on its own.
- *
- * With nothing to move the name says so rather than going silent — the trigger
- * stays focusable (`aria-disabled`, not `disabled`), so it is still the thing
- * that teaches a keyboard user the interaction, and it has to explain why
- * pressing it does nothing.
- *
- * @internal
- */
+/** Default search-results announcement (for {@link TransferProps.getSearchResultsAnnouncement}} fallback). */
+export declare function searchResultsAnnouncement({ shown, total, side, }: TransferSearchResultsDetail): string;
+/** Move-trigger accessible name (direction + count; trigger stays focusable with nothing to move to explain why). @internal */
 export declare function moveTriggerLabel(count: number, direction: TransferDirection, all: boolean): string;
+/** Built-in matcher (parameterised by `filterMatchMode`; case-insensitive and trimmed). */
+export declare function matchesFilterMode(item: TransferItemData, query: string, mode?: TransferFilterMatchMode): boolean;
 /**
- * A two-list transfer (also "pick list" or "dual list box"): a pool of items on
- * one side, the chosen ones on the other, and triggers that move items between
- * them. Renders a plain `<div>` — the two `role="listbox"` elements are its
- * `TransferList` parts.
- *
- * Membership is the only stored state: `value` holds the ids on the target
- * side, and both lists are *derived* from `items` plus that array, so the two
- * sides cannot drift apart. Each list additionally owns a transient
- * marked-for-move multi-selection, which is cleared for whichever side an item
- * leaves.
- *
- * Every move is reachable without a pointer. Each list is one Tab stop with its
- * own roving focus, the move triggers are real buttons with names that say
- * direction and count, each move is announced politely, and focus lands on the
- * option that took the moved item's place — never on `<body>`.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * @example
- * ```tsx
- * <Transfer items={FRAMEWORKS} defaultValue={['react']}>
- *   <TransferListHeader side="source">Available</TransferListHeader>
- *   <TransferList side="source" />
- *   <TransferEmpty side="source">Nothing left to add.</TransferEmpty>
- *
- *   <TransferControls>
- *     <TransferMoveTrigger direction="toTarget">→</TransferMoveTrigger>
- *     <TransferMoveTrigger direction="toSource">←</TransferMoveTrigger>
- *   </TransferControls>
- *
- *   <TransferListHeader side="target">Selected</TransferListHeader>
- *   <TransferList side="target" />
- *   <TransferEmpty side="target">Nothing selected yet.</TransferEmpty>
- * </Transfer>
- * ```
+ * Two-list transfer whose triggers move items between a pool and a chosen list, both derived from `items` and `value` so they never drift.
+ * @example `<Transfer items={FRAMEWORKS} defaultValue={['react']} searchable />`
  */
-export declare const Transfer: React.ForwardRefExoticComponent<Omit<TransferProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Transfer: {
+    ({ items, value, defaultValue, onValueChange, onMove, disabled, name, form, searchable, filter, filterMatchMode, getMoveLabel, getMoveAnnouncement, getSearchResultsAnnouncement, targetOrder, onListScroll, titles, emptyText, showMoveAll, renderItem, children, density, shape, size, ref: forwardedRef, ...props }: TransferProps): React.ReactNode;
+    displayName: string;
+};