@techsio/ui-kit 0.41.1 → 0.42.0

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 };

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

@@ -0,0 +1,146 @@
+import { tv } from "../../utils.js";
+const sidebarVariants = tv({
+    slots: {
+        root: [
+            "relative flex min-h-sidebar-viewport w-full min-w-0",
+            "bg-sidebar-root-bg text-sidebar-root-fg"
+        ],
+        breakpoint: "pointer-events-none invisible absolute sidebar-desktop:block hidden size-0",
+        desktopPanel: [
+            "group/sidebar-panel sticky top-sidebar-offset hidden h-sidebar-viewport shrink-0 flex-col overflow-hidden",
+            "sidebar-desktop:flex bg-sidebar-panel-bg text-sidebar-panel-fg",
+            "border-sidebar-panel-border transition-all duration-(--duration-sidebar) motion-reduce:transition-none",
+            "focus-visible:sidebar-focus-ring",
+            "data-[side=start]:border-e-(length:--border-width-sidebar)",
+            "data-[side=end]:border-s-(length:--border-width-sidebar)"
+        ],
+        mobilePanel: [
+            "w-full max-w-sidebar-mobile bg-sidebar-panel-bg p-0 text-sidebar-panel-fg",
+            "data-[swipe-direction=left]:rounded-none data-[swipe-direction=right]:rounded-none"
+        ],
+        mobileAside: "focus-visible:sidebar-focus-ring flex size-full min-h-0 flex-col overflow-hidden",
+        trigger: [
+            "bg-sidebar-trigger-bg text-sidebar-trigger-fg",
+            "hover:bg-sidebar-trigger-bg-hover active:bg-sidebar-trigger-bg-active"
+        ],
+        inset: [
+            "relative min-h-sidebar-viewport min-w-0 flex-1",
+            "bg-sidebar-inset-bg text-sidebar-inset-fg"
+        ],
+        header: [
+            "flex shrink-0 flex-col gap-sidebar-section p-sidebar-section",
+            "border-b-(length:--border-width-sidebar) border-sidebar-panel-border",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-section-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-section-compact"
+        ],
+        content: [
+            "flex min-h-0 flex-1 flex-col gap-sidebar-content overflow-y-auto overflow-x-hidden",
+            "p-sidebar-content",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-content-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-content-compact"
+        ],
+        footer: [
+            "flex shrink-0 flex-col gap-sidebar-section p-sidebar-section",
+            "border-t-(length:--border-width-sidebar) border-sidebar-panel-border",
+            "group-data-[state=collapsed]/sidebar-panel:p-sidebar-section-compact",
+            "group-data-[size=rail]/sidebar-pane:p-sidebar-section-compact"
+        ],
+        group: "flex min-w-0 flex-col gap-sidebar-group",
+        groupLabel: [
+            "sidebar-group-label-typography truncate px-sidebar-group-label",
+            "font-sidebar-group-label text-sidebar-group-label-fg"
+        ],
+        groupContent: "flex min-w-0 flex-col gap-sidebar-group-content",
+        menu: "flex min-w-0 list-none flex-col gap-sidebar-menu",
+        item: "relative min-w-0",
+        separator: [
+            "h-sidebar-separator w-full shrink-0 border-0",
+            "bg-sidebar-separator-bg"
+        ],
+        expanded: "min-w-0",
+        label: "min-w-0 truncate whitespace-nowrap",
+        paneGroup: "flex min-h-0 min-w-0 flex-1 overflow-hidden",
+        pane: "group/sidebar-pane flex min-h-0 min-w-0 flex-col",
+        rail: [
+            "sidebar-rail-layer absolute inset-y-sidebar-rail hidden w-sidebar-rail cursor-col-resize items-center justify-center",
+            "sidebar-desktop:flex text-sidebar-rail-fg hover:bg-sidebar-rail-bg-hover",
+            "focus-visible:sidebar-focus-ring",
+            "data-[side=end]:start-0 data-[side=start]:end-0",
+            "after:h-sidebar-rail-indicator after:w-sidebar-rail-indicator after:rounded-sidebar-rail after:bg-sidebar-rail-indicator-bg"
+        ]
+    },
+    variants: {
+        collapsible: {
+            icon: {},
+            offcanvas: {},
+            none: {}
+        },
+        expanded: {
+            true: {},
+            false: {}
+        },
+        paneSize: {
+            rail: {
+                pane: "w-sidebar-icon shrink-0"
+            },
+            content: {
+                pane: [
+                    "border-s-(length:--border-width-sidebar) flex-1",
+                    "border-sidebar-pane-border"
+                ]
+            },
+            auto: {
+                pane: "flex-1"
+            }
+        },
+        collapsed: {
+            true: {
+                label: "sr-only"
+            },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            collapsible: "icon",
+            expanded: true,
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        },
+        {
+            collapsible: "icon",
+            expanded: false,
+            class: {
+                desktopPanel: "w-sidebar-icon"
+            }
+        },
+        {
+            collapsible: "offcanvas",
+            expanded: true,
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        },
+        {
+            collapsible: "offcanvas",
+            expanded: false,
+            class: {
+                desktopPanel: "w-0 border-transparent"
+            }
+        },
+        {
+            collapsible: "none",
+            class: {
+                desktopPanel: "w-sidebar-expanded"
+            }
+        }
+    ],
+    defaultVariants: {
+        collapsible: "icon",
+        expanded: true,
+        paneSize: "auto",
+        collapsed: false
+    }
+});
+export { sidebarVariants };

package/dist/molecules/accordion.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { connect, machine } from "@zag-js/accordion";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import { createContext, useContext, useId } from "react";
 import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
 import { tv } from "../utils.js";
+import * as __rspack_external__zag_js_accordion_dea8b50f from "@zag-js/accordion";
 const accordionVariants = tv({
     slots: {
         root: [
@@ -109,7 +109,7 @@ function useAccordionItemContext() {
 function Accordion({ id, defaultValue, value, collapsible = true, multiple = false, dir = "ltr", onChange, size, shadow, disabled = false, children, ref, className, variant, ...props }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
-    const service = useMachine(machine, {
+    const service = useMachine(__rspack_external__zag_js_accordion_dea8b50f.machine, {
         id: uniqueId,
         value,
         defaultValue,
@@ -122,7 +122,7 @@ function Accordion({ id, defaultValue, value, collapsible = true, multiple = fal
             onChange?.(newValue);
         }
     });
-    const api = connect(service, normalizeProps);
+    const api = __rspack_external__zag_js_accordion_dea8b50f.connect(service, normalizeProps);
     const styles = accordionVariants({
         size,
         shadow,

package/dist/molecules/carousel.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { connect, machine } from "@zag-js/carousel";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import { createContext, useContext, useId } from "react";
 import { tv } from "tailwind-variants";
 import { Button } from "../atoms/button.js";
 import { Image } from "../atoms/image.js";
+import * as __rspack_external__zag_js_carousel_a12b93a3 from "@zag-js/carousel";
 const carouselVariants = tv({
     slots: {
         wrapper: [
@@ -186,7 +186,7 @@ const useCarouselContext = ()=>{
 };
 function Carousel({ id, size, objectFit, aspectRatio, orientation = "horizontal", slideCount = 1, loop = true, autoplay = false, allowMouseDrag = true, slidesPerPage = 1, slidesPerMove = 1, spacing = "0px", padding = "0px", dir = "ltr", snapType = "mandatory", className, children, width, height, onPageChange, ...props }) {
     const fallbackId = useId();
-    const service = useMachine(machine, {
+    const service = useMachine(__rspack_external__zag_js_carousel_a12b93a3.machine, {
         id: id ?? fallbackId,
         slideCount,
         autoplay,
@@ -202,7 +202,7 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = "horizontal"
         onPageChange,
         ...props
     });
-    const api = connect(service, normalizeProps);
+    const api = __rspack_external__zag_js_carousel_a12b93a3.connect(service, normalizeProps);
     const { wrapper, root } = carouselVariants({
         size,
         objectFit,

package/dist/molecules/chart.js

@@ -158,7 +158,7 @@ function resolveBuild(config) {
     };
 }
 function warnOnSeriesOverflow(data, getColorIdentity) {
-    const isProduction = "undefined" != typeof process && process.env?.NODE_ENV === "production";
+    const isProduction = "u" > typeof process && process.env?.NODE_ENV === "production";
     if (null == getColorIdentity || isProduction) return;
     const distinct = new Set(data.map((datum)=>String(getColorIdentity(datum))));
     if (distinct.size > MAX_SERIES) console.warn(`Chart: ${distinct.size} distinct colors exceeds the ${MAX_SERIES}-color palette; everything beyond the sixth reuses an earlier color and cannot be told apart. Group the long tail into an “Other” bucket, or split into small multiples.`);

package/dist/molecules/dialog.js

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { connect, machine } from "@zag-js/dialog";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
 import { useId } from "react";
 import { tv } from "tailwind-variants";
 import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
+import * as __rspack_external__zag_js_dialog_5c81bb31 from "@zag-js/dialog";
 const dialogVariants = tv({
     slots: {
         backdrop: [
@@ -227,7 +227,7 @@ const dialogVariants = tv({
 function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "dialog", placement = "center", position = "fixed", size = "md", behavior = "modal", closeOnEscape = true, closeOnInteractOutside = true, preventScroll = true, trapFocus = true, customTrigger = false, triggerText = "Open", title, description, children, hideCloseButton = false, actions, className, modal = true, portal = true }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
-    const service = useMachine(machine, {
+    const service = useMachine(__rspack_external__zag_js_dialog_5c81bb31.machine, {
         id: uniqueId,
         onOpenChange,
         role,
@@ -242,7 +242,7 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "
             open
         }
     });
-    const api = connect(service, normalizeProps);
+    const api = __rspack_external__zag_js_dialog_5c81bb31.connect(service, normalizeProps);
     const contentProps = api.getContentProps();
     const handleContentKeyDown = (event)=>{
         contentProps.onKeyDown?.(event);

package/dist/molecules/drawer.js

@@ -0,0 +1,262 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Portal, mergeProps } from "@zag-js/react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { DrawerProvider, DrawerStackProvider, getDrawerPresenceProps, useComposedRefs, useDrawer, useDrawerContext, useDrawerPresence, useDrawerStackContext } from "../internal/molecules/drawer.context.js";
+import { drawerVariants } from "../internal/molecules/drawer.styles.js";
+const drawer_useDrawer = useDrawer;
+const swipeDirectionByPlacement = {
+    bottom: "down",
+    end: "end",
+    start: "start",
+    top: "up"
+};
+function Drawer({ children, immediate, lazyMount = true, onEnterComplete, onExitComplete, placement = "end", size, skipAnimationOnMount = false, unmountOnExit = true, ...machineProps }) {
+    const api = drawer_useDrawer({
+        ...machineProps,
+        swipeDirection: swipeDirectionByPlacement[placement]
+    });
+    return /*#__PURE__*/ jsx(DrawerProvider, {
+        api: api,
+        immediate: immediate,
+        lazyMount: lazyMount,
+        onEnterComplete: onEnterComplete,
+        onExitComplete: onExitComplete,
+        size: size,
+        skipAnimationOnMount: skipAnimationOnMount,
+        unmountOnExit: unmountOnExit,
+        children: children
+    });
+}
+Drawer.Root = Drawer;
+Drawer.RootProvider = function({ children, immediate, lazyMount = true, onEnterComplete, onExitComplete, size, skipAnimationOnMount = false, unmountOnExit = true, value }) {
+    return /*#__PURE__*/ jsx(DrawerProvider, {
+        api: value,
+        immediate: immediate,
+        lazyMount: lazyMount,
+        onEnterComplete: onEnterComplete,
+        onExitComplete: onExitComplete,
+        size: size,
+        skipAnimationOnMount: skipAnimationOnMount,
+        unmountOnExit: unmountOnExit,
+        children: children
+    });
+};
+Drawer.Trigger = function({ className, ref, value, ...props }) {
+    const { api, styles } = useDrawerContext();
+    const mergedProps = mergeProps(api.getTriggerProps({
+        value
+    }), props);
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergedProps,
+        className: styles.trigger({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Portal = function(props) {
+    return /*#__PURE__*/ jsx(Portal, {
+        ...props
+    });
+};
+Drawer.Backdrop = function({ className, ref, ...props }) {
+    const { api, presenceOptions, styles } = useDrawerContext();
+    const presence = useDrawerPresence({
+        ...presenceOptions,
+        present: api.open
+    });
+    const composedRef = useComposedRefs(presence.ref, ref);
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getBackdropProps(), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.backdrop({
+            className
+        }),
+        ref: composedRef
+    });
+};
+Drawer.Positioner = function({ className, ref, ...props }) {
+    const { api, presence, styles } = useDrawerContext();
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getPositionerProps(), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.positioner({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Content = function({ className, draggable = true, ref, ...props }) {
+    const { api, presence, styles } = useDrawerContext();
+    const composedRef = useComposedRefs(presence.ref, ref);
+    if (presence.unmounted) return null;
+    const mergedProps = mergeProps(api.getContentProps({
+        draggable
+    }), getDrawerPresenceProps(api.open, presence), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.content({
+            className
+        }),
+        ref: composedRef
+    });
+};
+Drawer.Header = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.header({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Body = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.body({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Footer = function({ className, ref, ...props }) {
+    const { styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.footer({
+            className
+        }),
+        ref: ref,
+        ...props
+    });
+};
+Drawer.Title = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("h2", {
+        ...mergeProps(api.getTitleProps(), props),
+        className: styles.title({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Description = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("p", {
+        ...mergeProps(api.getDescriptionProps(), props),
+        className: styles.description({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.CloseTrigger = function(props) {
+    const { api, styles } = useDrawerContext();
+    const { onClick: onMachineClick, ...machineProps } = api.getCloseTriggerProps();
+    if (null == props.children) {
+        const { children: _children, className: iconClassName, icon: iconName = "token-icon-drawer-close", onClick: onIconClick, ref: iconRef, size: iconSize = "md", tone = "neutral", type: iconType = "button", ...iconProps } = props;
+        const mergedProps = mergeProps(iconProps, machineProps);
+        return /*#__PURE__*/ jsx(ActionIcon, {
+            ...mergedProps,
+            "aria-label": mergedProps["aria-label"] ?? "Close drawer",
+            className: styles.closeTrigger({
+                className: iconClassName
+            }),
+            icon: iconName,
+            onClick: (event)=>{
+                onIconClick?.(event);
+                if (!event.defaultPrevented) onMachineClick?.(event);
+            },
+            ref: iconRef,
+            size: iconSize,
+            tone: tone,
+            type: iconType
+        });
+    }
+    const { children, className, icon, onClick, ref, size = "current", theme = "unstyled", type = "button", ...buttonProps } = props;
+    const mergedProps = mergeProps(buttonProps, machineProps);
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergedProps,
+        className: styles.closeTrigger({
+            className
+        }),
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+Drawer.Grabber = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    const mergedProps = mergeProps(api.getGrabberProps(), props);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergedProps,
+        className: styles.grabber({
+            className
+        }),
+        "data-swipe-direction": api.swipeDirection,
+        ref: ref
+    });
+};
+Drawer.GrabberIndicator = function({ className, ref, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getGrabberIndicatorProps(), props),
+        className: styles.grabberIndicator({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.SwipeArea = function({ className, disabled, ref, swipeDirection, ...props }) {
+    const { api, styles } = useDrawerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getSwipeAreaProps({
+            disabled,
+            swipeDirection
+        }), props),
+        className: styles.swipeArea({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.Context = function({ children }) {
+    return children(useDrawerContext().api);
+};
+Drawer.Stack = DrawerStackProvider;
+Drawer.Indent = function({ className, ref, ...props }) {
+    const api = useDrawerStackContext();
+    const { indent } = drawerVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getIndentProps(), props),
+        className: indent({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.IndentBackground = function({ className, ref, ...props }) {
+    const api = useDrawerStackContext();
+    const { indentBackground } = drawerVariants();
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(api.getIndentBackgroundProps(), props),
+        className: indentBackground({
+            className
+        }),
+        ref: ref
+    });
+};
+Drawer.displayName = "Drawer";
+export { Drawer, drawer_useDrawer as useDrawer };