@techsio/ui-kit 0.41.2 → 0.43.0

package/dist/internal/molecules/drawer.context.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { drawerVariants } from "./drawer.styles.js";
+import * as __rspack_external__zag_js_drawer_a300f837 from "@zag-js/drawer";
+import * as __rspack_external__zag_js_presence_229d2f05 from "@zag-js/presence";
+const DrawerContext = /*#__PURE__*/ createContext(null);
+const DrawerStackStoreContext = /*#__PURE__*/ createContext(void 0);
+const DrawerStackContext = /*#__PURE__*/ createContext(null);
+function useDrawer(props = {}) {
+    const generatedId = useId();
+    const inheritedStack = useContext(DrawerStackStoreContext);
+    const { defaultSnapPoint, id = generatedId, stack = inheritedStack, ...machineProps } = props;
+    const machineOptions = {
+        id,
+        stack,
+        ...machineProps
+    };
+    if ("defaultSnapPoint" in props) Object.assign(machineOptions, {
+        defaultSnapPoint
+    });
+    const service = useMachine(__rspack_external__zag_js_drawer_a300f837.machine, machineOptions);
+    return __rspack_external__zag_js_drawer_a300f837.connect(service, normalizeProps);
+}
+function useDrawerContext() {
+    const context = useContext(DrawerContext);
+    if (!context) throw new Error("Drawer components must be used within Drawer.Root");
+    return context;
+}
+function useDrawerStackContext() {
+    const context = useContext(DrawerStackContext);
+    if (!context) throw new Error("Drawer stack components must be used within Drawer.Stack");
+    return context;
+}
+function useDrawerPresence({ immediate, lazyMount = true, onEnterComplete, onExitComplete, present, skipAnimationOnMount = false, unmountOnExit = true }) {
+    const wasEverPresent = useRef(false);
+    const service = useMachine(__rspack_external__zag_js_presence_229d2f05.machine, {
+        immediate,
+        onEnterComplete,
+        onExitComplete,
+        present
+    });
+    const api = __rspack_external__zag_js_presence_229d2f05.connect(service, normalizeProps);
+    const latestSetNode = useRef(api.setNode);
+    latestSetNode.current = api.setNode;
+    const presenceRef = useRef((node)=>{
+        latestSetNode.current(node);
+        return ()=>{
+            latestSetNode.current(null);
+        };
+    }).current;
+    if (api.present) wasEverPresent.current = true;
+    const unmounted = !(api.present || wasEverPresent.current) && lazyMount || !api.present && wasEverPresent.current && unmountOnExit;
+    return {
+        api,
+        ref: presenceRef,
+        skipAnimationOnMount,
+        unmounted
+    };
+}
+function DrawerProvider({ api, children, immediate, lazyMount = true, onEnterComplete, onExitComplete, size, skipAnimationOnMount = false, unmountOnExit = true }) {
+    const presenceOptions = {
+        immediate,
+        lazyMount,
+        skipAnimationOnMount,
+        unmountOnExit
+    };
+    const contentPresence = useDrawerPresence({
+        ...presenceOptions,
+        onEnterComplete,
+        onExitComplete,
+        present: api.open
+    });
+    const styles = drawerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(DrawerContext.Provider, {
+        value: {
+            api,
+            presence: contentPresence,
+            presenceOptions,
+            styles
+        },
+        children: children
+    });
+}
+function getDrawerPresenceProps(open, presenceState) {
+    let dataState = null;
+    if (!(presenceState.api.skip && presenceState.skipAnimationOnMount)) dataState = open ? "open" : "closed";
+    return {
+        "data-state": dataState,
+        hidden: !presenceState.api.present
+    };
+}
+function composeRefs(...refs) {
+    return (node)=>{
+        const cleanups = [];
+        for (const ref of refs)if ("function" == typeof ref) {
+            const cleanup = ref(node);
+            cleanups.push("function" == typeof cleanup ? cleanup : ()=>ref(null));
+        } else if (ref) {
+            ref.current = node;
+            cleanups.push(()=>{
+                ref.current = null;
+            });
+        }
+        return ()=>{
+            for (const cleanup of cleanups)cleanup();
+        };
+    };
+}
+function useComposedRefs(firstRef, secondRef) {
+    return useMemo(()=>composeRefs(firstRef, secondRef), [
+        firstRef,
+        secondRef
+    ]);
+}
+function DrawerStackProvider({ children }) {
+    const [stack] = useState(()=>__rspack_external__zag_js_drawer_a300f837.createStack());
+    const snapshot = useSyncExternalStore(stack.subscribe, stack.getSnapshot, stack.getSnapshot);
+    const api = useMemo(()=>__rspack_external__zag_js_drawer_a300f837.connectStack(snapshot, normalizeProps), [
+        snapshot
+    ]);
+    return /*#__PURE__*/ jsx(DrawerStackStoreContext.Provider, {
+        value: stack,
+        children: /*#__PURE__*/ jsx(DrawerStackContext.Provider, {
+            value: api,
+            children: children
+        })
+    });
+}
+export { DrawerProvider, DrawerStackProvider, getDrawerPresenceProps, useComposedRefs, useDrawer, useDrawerContext, useDrawerPresence, useDrawerStackContext };

package/dist/internal/molecules/drawer.styles.js

@@ -0,0 +1,107 @@
+import { tv } from "../../utils.js";
+const drawerVariants = tv({
+    slots: {
+        backdrop: [
+            "drawer-backdrop-layer fixed inset-0 bg-drawer-backdrop-bg",
+            "drawer-backdrop-motion"
+        ],
+        positioner: [
+            "drawer-physical-axis drawer-positioner-layer pointer-events-none fixed inset-0 flex",
+            "data-[swipe-direction=up]:items-start",
+            "data-[swipe-direction=down]:items-end",
+            "data-[swipe-direction=left]:justify-start",
+            "data-[swipe-direction=right]:justify-end"
+        ],
+        content: [
+            "drawer-content-layer drawer-content-bleed pointer-events-auto relative flex max-h-full max-w-full flex-col",
+            "bg-drawer-content-bg text-drawer-content-fg shadow-drawer-content",
+            "border-(length:--border-width-drawer) border-drawer-content-border",
+            "focus-visible:drawer-focus-ring",
+            "drawer-content-motion",
+            "data-[swipe-direction=up]:drawer-content-top data-[swipe-direction=up]:w-full data-[swipe-direction=up]:border-t-0",
+            "data-[swipe-direction=down]:drawer-content-bottom data-[swipe-direction=down]:w-full data-[swipe-direction=down]:border-b-0",
+            "data-[swipe-direction=left]:drawer-content-left data-[swipe-direction=left]:h-full data-[swipe-direction=left]:border-l-0",
+            "data-[swipe-direction=right]:drawer-content-right data-[swipe-direction=right]:h-full data-[swipe-direction=right]:border-r-0"
+        ],
+        header: [
+            "flex shrink-0 flex-col gap-drawer-header p-drawer-header",
+            "border-b-(length:--border-width-drawer) border-drawer-content-border"
+        ],
+        body: "flex min-h-0 flex-1 flex-col overflow-y-auto p-drawer-body",
+        footer: [
+            "flex shrink-0 items-center justify-end gap-drawer-footer p-drawer-footer",
+            "border-t-(length:--border-width-drawer) border-drawer-content-border"
+        ],
+        title: "drawer-title-typography font-drawer-title text-drawer-title-fg",
+        description: "drawer-description-typography text-drawer-description-fg",
+        trigger: "",
+        closeTrigger: "",
+        grabber: [
+            "group absolute flex items-center justify-center p-drawer-grabber",
+            "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:bottom-0",
+            "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:top-0",
+            "data-[swipe-direction=start]:inset-y-0 data-[swipe-direction=start]:end-0",
+            "data-[swipe-direction=end]:inset-y-0 data-[swipe-direction=end]:start-0"
+        ],
+        grabberIndicator: [
+            "rounded-drawer-grabber bg-drawer-grabber-bg",
+            "group-data-[swipe-direction=up]:h-drawer-grabber-thickness group-data-[swipe-direction=up]:w-drawer-grabber-length",
+            "group-data-[swipe-direction=down]:h-drawer-grabber-thickness group-data-[swipe-direction=down]:w-drawer-grabber-length",
+            "group-data-[swipe-direction=start]:h-drawer-grabber-length group-data-[swipe-direction=start]:w-drawer-grabber-thickness",
+            "group-data-[swipe-direction=end]:h-drawer-grabber-length group-data-[swipe-direction=end]:w-drawer-grabber-thickness"
+        ],
+        swipeArea: [
+            "drawer-swipe-area-layer fixed",
+            "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:bottom-0 data-[swipe-direction=up]:h-drawer-swipe-area",
+            "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:top-0 data-[swipe-direction=down]:h-drawer-swipe-area",
+            "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:right-0 data-[swipe-direction=left]:w-drawer-swipe-area",
+            "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:left-0 data-[swipe-direction=right]:w-drawer-swipe-area"
+        ],
+        indent: "drawer-indent",
+        indentBackground: "drawer-indent-background"
+    },
+    variants: {
+        size: {
+            xs: {
+                content: [
+                    "data-[swipe-direction=down]:h-drawer-xs data-[swipe-direction=up]:h-drawer-xs",
+                    "data-[swipe-direction=left]:w-drawer-xs data-[swipe-direction=right]:w-drawer-xs"
+                ]
+            },
+            sm: {
+                content: [
+                    "data-[swipe-direction=down]:h-drawer-sm data-[swipe-direction=up]:h-drawer-sm",
+                    "data-[swipe-direction=left]:w-drawer-sm data-[swipe-direction=right]:w-drawer-sm"
+                ]
+            },
+            md: {
+                content: [
+                    "data-[swipe-direction=down]:h-drawer-md data-[swipe-direction=up]:h-drawer-md",
+                    "data-[swipe-direction=left]:w-drawer-md data-[swipe-direction=right]:w-drawer-md"
+                ]
+            },
+            lg: {
+                content: [
+                    "data-[swipe-direction=down]:h-drawer-lg data-[swipe-direction=up]:h-drawer-lg",
+                    "data-[swipe-direction=left]:w-drawer-lg data-[swipe-direction=right]:w-drawer-lg"
+                ]
+            },
+            xl: {
+                content: [
+                    "data-[swipe-direction=down]:h-drawer-xl data-[swipe-direction=up]:h-drawer-xl",
+                    "data-[swipe-direction=left]:w-drawer-xl data-[swipe-direction=right]:w-drawer-xl"
+                ]
+            },
+            full: {
+                content: [
+                    "data-[swipe-direction=down]:h-full data-[swipe-direction=up]:h-full",
+                    "data-[swipe-direction=left]:w-full data-[swipe-direction=right]:w-full"
+                ]
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+export { drawerVariants };

package/dist/internal/organisms/sidebar.context.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useDrawer } from "../../molecules/drawer.js";
+const SidebarContext = /*#__PURE__*/ createContext(null);
+const SidebarPanelContext = /*#__PURE__*/ createContext(null);
+const SIDES = [
+    "start",
+    "end"
+];
+function createSidebarFocusRegistry() {
+    const origins = {
+        end: null,
+        start: null
+    };
+    const revisions = {
+        end: 0,
+        start: 0
+    };
+    const clear = (side, revision)=>{
+        const origin = origins[side];
+        if (origin && (void 0 === revision || origin.revision === revision)) origins[side] = null;
+    };
+    return {
+        blur: ({ mode, node, relatedTarget, side })=>{
+            if (relatedTarget && node.contains(relatedTarget)) return;
+            const document = node.ownerDocument;
+            const clearBlurredOrigin = ()=>{
+                const origin = origins[side];
+                if (!origin || origin.mode !== mode || origin.node !== node) return;
+                if (node.contains(document.activeElement)) return;
+                if (node.isConnected && node.getClientRects().length > 0) return void clear(side, origin.revision);
+                const expireLease = ()=>{
+                    const leasedOrigin = origins[side];
+                    if (leasedOrigin?.revision === origin.revision && leasedOrigin.mode === mode && (!node.isConnected || 0 === node.getClientRects().length)) origins[side] = null;
+                };
+                const view = document.defaultView;
+                if (view) view.requestAnimationFrame(expireLease);
+                else globalThis.queueMicrotask(expireLease);
+            };
+            if (relatedTarget) return void clearBlurredOrigin();
+            const view = document.defaultView;
+            if (view) view.queueMicrotask(clearBlurredOrigin);
+            else globalThis.queueMicrotask(clearBlurredOrigin);
+        },
+        capture: ({ mode, node, side, triggerValue })=>{
+            revisions[side] += 1;
+            origins[side] = {
+                document: node.ownerDocument,
+                mode,
+                node,
+                revision: revisions[side],
+                side,
+                triggerValue
+            };
+        },
+        claim: (side, fromMode)=>{
+            const origin = origins[side];
+            if (origin?.mode !== fromMode) return null;
+            origins[side] = null;
+            return origin;
+        },
+        clear,
+        getRevision: (side)=>revisions[side],
+        peek: (side)=>origins[side]
+    };
+}
+function getDesktopServerSnapshot() {
+    return true;
+}
+function createSidebarBreakpointStore() {
+    let node = null;
+    return {
+        getSnapshot: ()=>node ? "none" !== getComputedStyle(node).display : true,
+        ref: (nextNode)=>{
+            node = nextNode;
+        },
+        subscribe: (listener)=>{
+            const target = node?.ownerDocument.defaultView;
+            let subscribed = true;
+            target?.addEventListener("resize", listener);
+            target?.queueMicrotask(()=>{
+                if (subscribed) listener();
+            });
+            return ()=>{
+                subscribed = false;
+                target?.removeEventListener("resize", listener);
+            };
+        }
+    };
+}
+function useSidebarDesktopBreakpoint() {
+    const [store] = useState(createSidebarBreakpointStore);
+    const isDesktop = useSyncExternalStore(store.subscribe, store.getSnapshot, getDesktopServerSnapshot);
+    return {
+        breakpointRef: store.ref,
+        isDesktop
+    };
+}
+function normalizeExpanded(sides) {
+    return SIDES.filter((side)=>sides.includes(side));
+}
+function normalizeCollapsible(policy) {
+    return {
+        start: policy?.start ?? "icon",
+        end: policy?.end ?? "icon"
+    };
+}
+function useSidebarState({ collapsible: collapsiblePolicy, defaultExpanded = SIDES, defaultMobileOpen = null, dir, expanded: controlledExpanded, id, mobileOpen: controlledMobileOpen, onExpandedChange, onMobileOpenChange } = {}) {
+    const generatedId = useId();
+    const rootId = id ?? generatedId;
+    const resolvedDir = dir ?? "ltr";
+    const collapsible = normalizeCollapsible(collapsiblePolicy);
+    const [focus] = useState(createSidebarFocusRegistry);
+    const { breakpointRef, isDesktop } = useSidebarDesktopBreakpoint();
+    const wasDesktop = useRef(isDesktop);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(()=>normalizeExpanded(defaultExpanded));
+    const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(defaultMobileOpen);
+    const expanded = normalizeExpanded(controlledExpanded ?? uncontrolledExpanded);
+    const effectiveExpanded = normalizeExpanded([
+        ...expanded,
+        ...SIDES.filter((side)=>"none" === collapsible[side])
+    ]);
+    const mobileOpen = void 0 === controlledMobileOpen ? uncontrolledMobileOpen : controlledMobileOpen;
+    const changeMobileOpen = (open)=>{
+        if (void 0 === controlledMobileOpen) setUncontrolledMobileOpen(open);
+        if (open !== mobileOpen) onMobileOpenChange?.({
+            open
+        });
+    };
+    const setExpanded = (side, nextExpanded)=>{
+        if ("none" === collapsible[side]) return;
+        const next = normalizeExpanded(nextExpanded ? [
+            ...expanded,
+            side
+        ] : expanded.filter((candidate)=>candidate !== side));
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(next);
+        if (next.length !== expanded.length) onExpandedChange?.({
+            expanded: [
+                ...next
+            ]
+        });
+    };
+    useLayoutEffect(()=>{
+        if (isDesktop && !wasDesktop.current && null !== mobileOpen) {
+            if (void 0 === controlledMobileOpen) setUncontrolledMobileOpen(null);
+            onMobileOpenChange?.({
+                open: null
+            });
+        }
+        wasDesktop.current = isDesktop;
+    }, [
+        controlledMobileOpen,
+        isDesktop,
+        mobileOpen,
+        onMobileOpenChange
+    ]);
+    const createOpenChangeHandler = (side)=>({ open })=>{
+            if (open) changeMobileOpen(side);
+            else if (mobileOpen === side) changeMobileOpen(null);
+        };
+    const startDrawer = useDrawer({
+        dir: resolvedDir,
+        id: `${rootId}-start-drawer`,
+        onOpenChange: createOpenChangeHandler("start"),
+        open: !isDesktop && "start" === mobileOpen,
+        swipeDirection: "start"
+    });
+    const endDrawer = useDrawer({
+        dir: resolvedDir,
+        id: `${rootId}-end-drawer`,
+        onOpenChange: createOpenChangeHandler("end"),
+        open: !isDesktop && "end" === mobileOpen,
+        swipeDirection: "end"
+    });
+    return {
+        breakpointRef,
+        closeMobile: ()=>changeMobileOpen(null),
+        dir: resolvedDir,
+        drawer: {
+            start: startDrawer,
+            end: endDrawer
+        },
+        expanded: effectiveExpanded,
+        focus,
+        getCollapsible: (side)=>collapsible[side],
+        getPanelId: (side)=>`${rootId}-${side}-panel`,
+        isDesktop,
+        isExpanded: (side)=>effectiveExpanded.includes(side),
+        isFixed: (side)=>"none" === collapsible[side],
+        mobileOpen,
+        openMobile: (side)=>changeMobileOpen(side),
+        rootId,
+        setExpanded,
+        toggle: (side)=>{
+            if (isDesktop) setExpanded(side, !expanded.includes(side));
+            else changeMobileOpen(mobileOpen === side ? null : side);
+        }
+    };
+}
+function SidebarProvider({ children, value }) {
+    return /*#__PURE__*/ jsx(SidebarContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function SidebarPanelProvider({ children, value }) {
+    return /*#__PURE__*/ jsx(SidebarPanelContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function useSidebarContext() {
+    const context = useContext(SidebarContext);
+    if (!context) throw new Error("Sidebar components must be used within Sidebar.Root");
+    return context;
+}
+function useSidebarPanelContext() {
+    const context = useContext(SidebarPanelContext);
+    if (!context) throw new Error("Sidebar panel parts must be used within Sidebar.Panel");
+    return context;
+}
+export { SidebarPanelProvider, SidebarProvider, useSidebarContext, useSidebarPanelContext, useSidebarState };

package/dist/internal/organisms/sidebar.focus.js

@@ -0,0 +1,169 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+function getPanelFocusRegion(document, panelId, isDesktop) {
+    const panel = document.getElementById(panelId);
+    if (isDesktop || !panel) return panel;
+    return panel.closest('[data-scope="drawer"][data-part="content"]') ?? panel;
+}
+function getPanelFocusTarget({ document, panelId, rootId, side, triggerValue }) {
+    const root = document.getElementById(rootId);
+    const triggers = root ? Array.from(root.querySelectorAll("button[data-sidebar-trigger]")).filter((candidate)=>candidate.closest('[data-scope="sidebar"][data-part="root"]') === root && candidate.dataset.side === side && !candidate.disabled && candidate.getClientRects().length > 0) : [];
+    const exactTrigger = triggerValue ? triggers.find((candidate)=>candidate.dataset.sidebarTriggerValue === triggerValue) : void 0;
+    const target = exactTrigger ?? triggers[0];
+    if (target) return target;
+    const panel = document.getElementById(panelId);
+    return panel && !panel.inert && panel.getClientRects().length > 0 ? panel : null;
+}
+function hasMeaningfulFocus(document) {
+    const activeElement = document.activeElement;
+    return Boolean(activeElement && activeElement !== document.body && activeElement !== document.documentElement && activeElement.isConnected);
+}
+function queueDocumentMicrotask(document, callback) {
+    const view = document.defaultView;
+    if (view) return void view.queueMicrotask(callback);
+    globalThis.queueMicrotask(callback);
+}
+function captureActiveFocus({ activeElement, focus, focusRegion, mode, origin, side, triggerValue }) {
+    if (activeElement && focusRegion?.contains(activeElement)) {
+        focus.capture({
+            mode,
+            node: focusRegion,
+            side,
+            triggerValue
+        });
+        return true;
+    }
+    if (activeElement && origin.node.contains(activeElement)) {
+        focus.capture({
+            mode,
+            node: origin.node,
+            side,
+            triggerValue: origin.triggerValue
+        });
+        return true;
+    }
+    return false;
+}
+function captureTransferredTarget({ document, focus, mode, origin, side, target, triggerValue }) {
+    if (!target || document.activeElement !== target) return;
+    const capturedOrigin = focus.peek(side);
+    if (capturedOrigin?.mode === mode && capturedOrigin.node === target) return;
+    focus.capture({
+        mode,
+        node: target,
+        side,
+        triggerValue: target.dataset.sidebarTriggerValue ?? origin.triggerValue ?? triggerValue
+    });
+}
+function runQueuedFocusTransfer({ document, focus, isCurrent, isDesktop, mode, origin, panelId, rootId, side, triggerValue }) {
+    const stale = !isCurrent() || focus.getRevision(side) !== origin.revision || !document.hasFocus();
+    if (stale) return;
+    const focusRegion = getPanelFocusRegion(document, panelId, isDesktop);
+    const activeElement = document.activeElement;
+    if (activeElement && focusRegion?.contains(activeElement)) return;
+    if (hasMeaningfulFocus(document)) return;
+    const target = getPanelFocusTarget({
+        document,
+        panelId,
+        rootId,
+        side,
+        triggerValue
+    });
+    target?.focus({
+        preventScroll: true
+    });
+    captureTransferredTarget({
+        document,
+        focus,
+        mode,
+        origin,
+        side,
+        target,
+        triggerValue
+    });
+}
+function cancelFocusTransfer(transition, transitionId) {
+    if (transition.current === transitionId) transition.current += 1;
+}
+function getPendingFocusOrigin(focus, side, fromMode) {
+    const origin = focus.peek(side);
+    return origin?.mode === fromMode ? origin : null;
+}
+function useSidebarPanelFocusTransfer({ focus, isDesktop, panelId, rootId, side, triggerValue }) {
+    const wasDesktop = useRef(isDesktop);
+    const transition = useRef(0);
+    const latestTriggerValue = useRef(triggerValue);
+    useLayoutEffect(()=>{
+        latestTriggerValue.current = triggerValue;
+    }, [
+        triggerValue
+    ]);
+    useLayoutEffect(()=>{
+        if (wasDesktop.current === isDesktop) return;
+        wasDesktop.current = isDesktop;
+        const transitionId = transition.current + 1;
+        transition.current = transitionId;
+        const mode = isDesktop ? "desktop" : "mobile";
+        const fromMode = isDesktop ? "mobile" : "desktop";
+        const pendingOrigin = getPendingFocusOrigin(focus, side, fromMode);
+        if (!pendingOrigin) return;
+        const { document } = pendingOrigin;
+        const focusRegion = getPanelFocusRegion(document, panelId, isDesktop);
+        const activeElement = document.activeElement;
+        const nextTriggerValue = pendingOrigin.triggerValue ?? latestTriggerValue.current;
+        if (captureActiveFocus({
+            activeElement,
+            focus,
+            focusRegion,
+            mode,
+            origin: pendingOrigin,
+            side,
+            triggerValue: nextTriggerValue
+        })) return;
+        if (hasMeaningfulFocus(document)) return void focus.clear(side, pendingOrigin.revision);
+        const origin = focus.claim(side, fromMode);
+        if (!origin) return;
+        queueDocumentMicrotask(document, ()=>{
+            runQueuedFocusTransfer({
+                document,
+                focus,
+                isCurrent: ()=>transition.current === transitionId,
+                isDesktop,
+                mode,
+                origin,
+                panelId,
+                rootId,
+                side,
+                triggerValue: origin.triggerValue ?? latestTriggerValue.current
+            });
+        });
+        return ()=>cancelFocusTransfer(transition, transitionId);
+    }, [
+        focus,
+        isDesktop,
+        panelId,
+        rootId,
+        side
+    ]);
+    const onFocusCapture = (event)=>{
+        focus.capture({
+            mode: isDesktop ? "desktop" : "mobile",
+            node: event.currentTarget,
+            side,
+            triggerValue: null
+        });
+    };
+    const onBlurCapture = (event)=>{
+        focus.blur({
+            mode: isDesktop ? "desktop" : "mobile",
+            node: event.currentTarget,
+            relatedTarget: event.relatedTarget,
+            side
+        });
+    };
+    return {
+        onBlurCapture,
+        onFocusCapture
+    };
+}
+export { useSidebarPanelFocusTransfer };