@wallarm-org/design-system 0.1.0

package/dist/components/Dialog/DialogHeader.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerHeaderProps } from '../Drawer';
+type DialogHeaderProps = DrawerHeaderProps;
+export declare const DialogHeader: FC<DialogHeaderProps>;
+export {};

package/dist/components/Dialog/DialogHeader.js

@@ -0,0 +1,4 @@
+import { DrawerHeader } from "../Drawer/index.js";
+const DialogHeader = DrawerHeader;
+DialogHeader.displayName = 'DialogHeader';
+export { DialogHeader };

package/dist/components/Dialog/DialogPositioner.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerPositionerProps } from '../Drawer';
+type DialogPositionerProps = Omit<DrawerPositionerProps, 'isResizing'>;
+export declare const DialogPositioner: FC<DialogPositionerProps>;
+export {};

package/dist/components/Dialog/DialogPositioner.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+import { drawerPositionerVariants } from "../Drawer/index.js";
+const DialogPositioner = ({ children })=>/*#__PURE__*/ jsx(Dialog.Positioner, {
+        className: cn(drawerPositionerVariants({
+            isResizing: false
+        }), 'fixed inset-0', 'flex flex-col justify-center items-center p-32', 'h-full min-h-0'),
+        children: children
+    });
+DialogPositioner.displayName = 'DialogPositioner';
+export { DialogPositioner };

package/dist/components/Dialog/DialogTitle.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerTitleProps } from '../Drawer';
+type DialogTitleProps = DrawerTitleProps;
+export declare const DialogTitle: FC<DialogTitleProps>;
+export {};

package/dist/components/Dialog/DialogTitle.js

@@ -0,0 +1,4 @@
+import { DrawerTitle } from "../Drawer/index.js";
+const DialogTitle = DrawerTitle;
+DialogTitle.displayName = 'DialogTitle';
+export { DialogTitle };

package/dist/components/Dialog/DialogTrigger.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerTriggerProps } from '../Drawer';
+type DialogTriggerProps = DrawerTriggerProps;
+export declare const DialogTrigger: FC<DialogTriggerProps>;
+export {};

package/dist/components/Dialog/DialogTrigger.js

@@ -0,0 +1,4 @@
+import { DrawerTrigger } from "../Drawer/index.js";
+const DialogTrigger = DrawerTrigger;
+DialogTrigger.displayName = 'DialogTrigger';
+export { DialogTrigger };

package/dist/components/Dialog/constants.d.ts

@@ -0,0 +1,11 @@
+/** Preset drawer widths in pixels */
+export declare const DIALOG_SIZES: {
+    readonly small: 400;
+    readonly medium: 560;
+    readonly large: 960;
+};
+/** Default min/max width constraints */
+export declare const DIALOG_WIDTH_CONSTRAINTS: {
+    readonly min: 400;
+    readonly max: 1130;
+};

package/dist/components/Dialog/constants.js

@@ -0,0 +1,10 @@
+const DIALOG_SIZES = {
+    small: 400,
+    medium: 560,
+    large: 960
+};
+const DIALOG_WIDTH_CONSTRAINTS = {
+    min: 400,
+    max: 1130
+};
+export { DIALOG_SIZES, DIALOG_WIDTH_CONSTRAINTS };

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,10 @@
+export { Dialog } from './Dialog';
+export { DialogBody } from './DialogBody';
+export { DialogClose } from './DialogClose';
+export { DialogContent } from './DialogContent';
+export { DialogFooter } from './DialogFooter';
+export { DialogFooterControls } from './DialogFooterControls';
+export { DialogHeader } from './DialogHeader';
+export { DialogPositioner } from './DialogPositioner';
+export { DialogTitle } from './DialogTitle';
+export { DialogTrigger } from './DialogTrigger';

package/dist/components/Dialog/index.js

@@ -0,0 +1,11 @@
+import { Dialog } from "./Dialog.js";
+import { DialogBody } from "./DialogBody.js";
+import { DialogClose } from "./DialogClose.js";
+import { DialogContent } from "./DialogContent.js";
+import { DialogFooter } from "./DialogFooter.js";
+import { DialogFooterControls } from "./DialogFooterControls.js";
+import { DialogHeader } from "./DialogHeader.js";
+import { DialogPositioner } from "./DialogPositioner.js";
+import { DialogTitle } from "./DialogTitle.js";
+import { DialogTrigger } from "./DialogTrigger.js";
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogFooterControls, DialogHeader, DialogPositioner, DialogTitle, DialogTrigger };

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from 'react';
+export interface DrawerProps {
+    children: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Controlled open change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether ESC key closes the drawer (default: true) */
+    closeOnEscape?: boolean;
+    /** Whether clicking outside closes the drawer (default: true) */
+    closeOnOutsideClick?: boolean;
+    /** Overlay visibility (default: true) */
+    overlay?: boolean;
+    /** Width - number for pixels, string for percentage (e.g., "50%") */
+    width?: number | string;
+    /** Minimum width in pixels */
+    minWidth?: number;
+    /** Maximum width in pixels */
+    maxWidth?: number;
+}
+export declare const Drawer: FC<DrawerProps>;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { DrawerProvider } from "./DrawerContext/index.js";
+import { DrawerRoot } from "./DrawerRoot.js";
+const Drawer = ({ children, open, onOpenChange, closeOnEscape = true, closeOnOutsideClick = true, overlay = true, width, minWidth, maxWidth })=>/*#__PURE__*/ jsx(DrawerProvider, {
+        open: open,
+        onOpenChange: onOpenChange,
+        closeOnEscape: closeOnEscape,
+        overlay: overlay,
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        children: /*#__PURE__*/ jsx(DrawerRoot, {
+            closeOnEscape: closeOnEscape,
+            closeOnOutsideClick: closeOnOutsideClick,
+            children: children
+        })
+    });
+Drawer.displayName = 'Drawer';
+export { Drawer };

package/dist/components/Drawer/DrawerBody.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerBodyProps {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerBody: FC<DrawerBodyProps>;

package/dist/components/Drawer/DrawerBody.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
+const DrawerBody = ({ children, ref })=>/*#__PURE__*/ jsxs(ScrollArea, {
+        className: cn('flex-1 min-h-0'),
+        "data-slot": "drawer-body",
+        children: [
+            /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                ref: ref,
+                children: /*#__PURE__*/ jsx(ScrollAreaContent, {
+                    className: cn('flex flex-col px-24'),
+                    "data-slot": "drawer-scroll-area-content",
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(ScrollAreaScrollbar, {})
+        ]
+    });
+DrawerBody.displayName = 'DrawerBody';
+export { DrawerBody };

package/dist/components/Drawer/DrawerClose.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerCloseProps {
+    children?: ReactNode;
+    /** Render as child component */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const DrawerClose: FC<DrawerCloseProps>;

package/dist/components/Drawer/DrawerClose.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { X } from "../../icons/index.js";
+import { Button } from "../Button/index.js";
+import { Kbd } from "../Kbd/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useDrawerContext } from "./DrawerContext/index.js";
+const DrawerClose = ({ children, asChild = false, ref })=>{
+    const { closeOnEscape } = useDrawerContext();
+    const handleFocusCapture = (event)=>{
+        event.stopPropagation();
+    };
+    if (asChild) return /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+        ref: ref,
+        asChild: true,
+        children: children
+    });
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        delayDuration: 300,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Dialog.CloseTrigger, {
+                    asChild: true,
+                    onFocusCapture: handleFocusCapture,
+                    children: /*#__PURE__*/ jsx(Button, {
+                        ref: ref,
+                        variant: "ghost",
+                        color: "neutral",
+                        size: "small",
+                        "aria-label": "Close drawer",
+                        children: children || /*#__PURE__*/ jsx(X, {})
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(TooltipContent, {
+                side: "bottom",
+                sideOffset: 4,
+                children: [
+                    "Close ",
+                    closeOnEscape && /*#__PURE__*/ jsx(Kbd, {
+                        children: "ESC"
+                    })
+                ]
+            })
+        ]
+    });
+};
+DrawerClose.displayName = 'DrawerClose';
+export { DrawerClose };

package/dist/components/Drawer/DrawerContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerContentProps {
+    children: ReactNode;
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerContent: FC<DrawerContentProps>;

package/dist/components/Drawer/DrawerContent.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+import { drawerContentVariants } from "./classes.js";
+import { useDrawerContext } from "./DrawerContext/index.js";
+import { DrawerOverlay } from "./DrawerOverlay.js";
+import { DrawerPortal } from "./DrawerPortal.js";
+import { DrawerPositioner } from "./DrawerPositioner.js";
+const DrawerContent = ({ children, asChild, ref })=>{
+    const { width, isResizing, overlay } = useDrawerContext();
+    return /*#__PURE__*/ jsxs(DrawerPortal, {
+        children: [
+            overlay && /*#__PURE__*/ jsx(DrawerOverlay, {}),
+            /*#__PURE__*/ jsx(DrawerPositioner, {
+                isResizing: isResizing,
+                children: /*#__PURE__*/ jsx(Dialog.Content, {
+                    ref: ref,
+                    className: cn(drawerContentVariants({
+                        isResizing
+                    }), 'h-full', 'slide-in-from-right-[25%] slide-out-to-right-[25%]', 'origin-left', 'data-[has-nested=dialog]:scale-[calc(var(--drawer-pushed-back-scale)-(var(--nested-layer-count)*var(--drawer-pushed-back-ratio)))]', 'data-[has-nested=dialog]:-translate-x-[calc((var(--drawer-pushed-back-offset)/(var(--drawer-pushed-back-scale)-(var(--nested-layer-count)*var(--drawer-pushed-back-ratio))))*var(--nested-layer-count))]'),
+                    style: {
+                        width
+                    },
+                    asChild: asChild,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+DrawerContent.displayName = 'DrawerContent';
+export { DrawerContent };

package/dist/components/Drawer/DrawerContext/DrawerContext.d.ts

@@ -0,0 +1,2 @@
+import type { DrawerContextValue } from './types';
+export declare const DrawerContext: import("react").Context<DrawerContextValue | null>;

package/dist/components/Drawer/DrawerContext/DrawerContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const DrawerContext = createContext(null);
+export { DrawerContext };

package/dist/components/Drawer/DrawerContext/DrawerProvider.d.ts

@@ -0,0 +1,18 @@
+import { type FC, type ReactNode } from 'react';
+interface DrawerContextProviderProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Whether ESC key closes the drawer (default: true) */
+    closeOnEscape: boolean;
+    /** Overlay visibility (default: true) */
+    overlay: boolean;
+    /** Width - number for pixels, string for percentage (e.g., "50%") */
+    width?: number | string;
+    /** Minimum width in pixels */
+    minWidth?: number;
+    /** Maximum width in pixels */
+    maxWidth?: number;
+}
+export declare const DrawerProvider: FC<DrawerContextProviderProps>;
+export {};

package/dist/components/Drawer/DrawerContext/DrawerProvider.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useControlled } from "../../../hooks/index.js";
+import { DRAWER_SIZES, DRAWER_WIDTH_CONSTRAINTS } from "../constants.js";
+import { DrawerContext } from "./DrawerContext.js";
+const DrawerProvider = ({ children, open, onOpenChange, closeOnEscape, overlay, width: initialWidth = DRAWER_SIZES.small, minWidth = DRAWER_WIDTH_CONSTRAINTS.min, maxWidth = DRAWER_WIDTH_CONSTRAINTS.max })=>{
+    const [isOpen = false, setIsOpenUncontrolled] = useControlled({
+        controlled: open,
+        default: false
+    });
+    const [width, setWidth] = useState(initialWidth);
+    const [isResizing, setIsResizing] = useState(false);
+    const handleOpenChange = (open)=>{
+        setIsOpenUncontrolled(open);
+        onOpenChange?.(open);
+    };
+    const contextValue = {
+        isOpen,
+        onOpenChange: handleOpenChange,
+        closeOnEscape,
+        overlay,
+        width,
+        setWidth,
+        isResizing,
+        setIsResizing,
+        minWidth,
+        maxWidth
+    };
+    return /*#__PURE__*/ jsx(DrawerContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+export { DrawerProvider };

package/dist/components/Drawer/DrawerContext/index.d.ts

@@ -0,0 +1,4 @@
+export { DrawerContext } from './DrawerContext';
+export { DrawerProvider } from './DrawerProvider';
+export type { DrawerContextValue } from './types';
+export { useDrawerContext } from './useDrawerContext';

package/dist/components/Drawer/DrawerContext/index.js

@@ -0,0 +1,4 @@
+import { DrawerContext } from "./DrawerContext.js";
+import { DrawerProvider } from "./DrawerProvider.js";
+import { useDrawerContext } from "./useDrawerContext.js";
+export { DrawerContext, DrawerProvider, useDrawerContext };

package/dist/components/Drawer/DrawerContext/types.d.ts

@@ -0,0 +1,12 @@
+export interface DrawerContextValue {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    closeOnEscape: boolean;
+    overlay: boolean;
+    width: number | string;
+    setWidth: (value: number | string) => void;
+    isResizing: boolean;
+    setIsResizing: (value: boolean) => void;
+    minWidth: number;
+    maxWidth: number;
+}

package/dist/components/Drawer/DrawerContext/useDrawerContext.d.ts

@@ -0,0 +1 @@
+export declare const useDrawerContext: () => import("./types").DrawerContextValue;

package/dist/components/Drawer/DrawerContext/useDrawerContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DrawerContext } from "./DrawerContext.js";
+const useDrawerContext = ()=>{
+    const context = useContext(DrawerContext);
+    if (!context) throw new Error('useDrawerContext must be used within a DrawerProvider');
+    return context;
+};
+export { useDrawerContext };

package/dist/components/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerFooterProps {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerFooter: FC<DrawerFooterProps>;

package/dist/components/Drawer/DrawerFooter.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const DrawerFooter = ({ children, ref })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "drawer-footer",
+        className: cn('rounded-b-12 bg-bg-surface-2', 'flex items-center justify-end gap-8 shrink-0 w-full px-24 py-16', 'relative'),
+        children: children
+    });
+DrawerFooter.displayName = 'DrawerFooter';
+export { DrawerFooter };

package/dist/components/Drawer/DrawerFooterControls.d.ts

@@ -0,0 +1,12 @@
+import type { FC, ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const drawerFooterControlsVariants: (props?: ({
+    placement?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type DrawerFooterControlsVariantsProps = VariantProps<typeof drawerFooterControlsVariants>;
+interface DrawerFooterControlsBaseProps {
+    children: ReactNode;
+}
+export type DrawerFooterControlsProps = DrawerFooterControlsBaseProps & DrawerFooterControlsVariantsProps;
+export declare const DrawerFooterControls: FC<DrawerFooterControlsProps>;
+export {};

package/dist/components/Drawer/DrawerFooterControls.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const drawerFooterControlsVariants = cva('flex items-center gap-8', {
+    variants: {
+        placement: {
+            left: 'mr-auto',
+            right: 'ml-auto'
+        }
+    }
+});
+const DrawerFooterControls = ({ children, placement = 'right' })=>/*#__PURE__*/ jsx("div", {
+        className: cn(drawerFooterControlsVariants({
+            placement
+        })),
+        children: children
+    });
+DrawerFooterControls.displayName = 'DrawerFooterControls';
+export { DrawerFooterControls };

package/dist/components/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerHeaderProps {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerHeader: FC<DrawerHeaderProps>;

package/dist/components/Drawer/DrawerHeader.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { DrawerClose } from "./DrawerClose.js";
+const DrawerHeader = ({ children, ref })=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "drawer-header",
+        className: cn('relative shrink-0 w-full', 'bg-bg-surface-2', 'flex items-center justify-between gap-12', 'pt-16 pb-12 pl-24 pr-16', 'rounded-t-12', 'outline-none'),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(DrawerClose, {})
+        ]
+    });
+DrawerHeader.displayName = 'DrawerHeader';
+export { DrawerHeader };

package/dist/components/Drawer/DrawerOverlay.d.ts

@@ -0,0 +1,6 @@
+import type { FC, Ref } from 'react';
+interface DrawerOverlayProps {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DrawerOverlay: FC<DrawerOverlayProps>;
+export {};

package/dist/components/Drawer/DrawerOverlay.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { Overlay } from "../Overlay/index.js";
+const DrawerOverlay = ({ ref })=>/*#__PURE__*/ jsx(Dialog.Backdrop, {
+        ref: ref,
+        asChild: true,
+        children: /*#__PURE__*/ jsx(Overlay, {})
+    });
+DrawerOverlay.displayName = 'DrawerOverlay';
+export { DrawerOverlay };

package/dist/components/Drawer/DrawerPortal.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+import { type PortalProps } from '@ark-ui/react/portal';
+export interface DrawerPortalProps extends PortalProps {
+    children: ReactNode;
+}
+export declare const DrawerPortal: FC<DrawerPortalProps>;

package/dist/components/Drawer/DrawerPortal.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+const DrawerPortal = ({ children, ...props })=>/*#__PURE__*/ jsx(Portal, {
+        ...props,
+        children: children
+    });
+DrawerPortal.displayName = 'DrawerPortal';
+export { DrawerPortal };

package/dist/components/Drawer/DrawerPositioner.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+export interface DrawerPositionerProps {
+    children: ReactNode;
+    isResizing: boolean;
+}
+export declare const DrawerPositioner: FC<DrawerPositionerProps>;

package/dist/components/Drawer/DrawerPositioner.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+import { drawerPositionerVariants } from "./classes.js";
+const DrawerPositioner = ({ children, isResizing })=>/*#__PURE__*/ jsx(Dialog.Positioner, {
+        className: cn(drawerPositionerVariants({
+            isResizing
+        }), 'fixed right-0 left-0 top-0 bottom-0', 'justify-end  p-8'),
+        children: children
+    });
+DrawerPositioner.displayName = 'DrawerPositioner';
+export { DrawerPositioner };

package/dist/components/Drawer/DrawerResizeHandle.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type Ref } from 'react';
+interface DrawerResizeHandleProps {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const DrawerResizeHandle: FC<DrawerResizeHandleProps>;
+export {};

package/dist/components/Drawer/DrawerResizeHandle.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { throttle } from "lodash-es";
+import { cn } from "../../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useDrawerContext } from "./DrawerContext/index.js";
+const drawerResizeHandleVariants = cva(cn('absolute left-0 top-0 bottom-0 z-1', '-translate-x-1/2', 'w-12 py-12', 'outline-none cursor-col-resize', 'flex items-center justify-center', 'before:content-[""]', 'before:block', 'before:w-3 before:h-full', 'before:rounded-full', 'before:bg-bg-fill-brand', 'before:transition-opacity before:duration-150'), {
+    variants: {
+        barIsVisible: {
+            true: 'before:opacity-100',
+            false: 'before:opacity-0'
+        }
+    }
+});
+const DrawerResizeHandle = ({ ref })=>{
+    const { setWidth, setIsResizing, minWidth, maxWidth } = useDrawerContext();
+    const [isHovered, setIsHovered] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragStateRef = useRef({
+        startX: 0,
+        startWidth: 0
+    });
+    const handleMouseEnter = ()=>setIsHovered(true);
+    const handleMouseLeave = ()=>setIsHovered(false);
+    const handleMouseDown = (e)=>{
+        e.preventDefault();
+        const drawerContent = e.currentTarget.closest('[role="dialog"]');
+        if (!drawerContent) return;
+        const currentWidth = drawerContent.offsetWidth;
+        dragStateRef.current = {
+            startX: e.clientX,
+            startWidth: currentWidth
+        };
+        setIsDragging(true);
+        setIsResizing(true);
+    };
+    const handleMouseMove = useMemo(()=>throttle((e)=>{
+            const { startX, startWidth } = dragStateRef.current;
+            const delta = startX - e.clientX;
+            const newWidth = Math.min(Math.max(startWidth + delta, minWidth), maxWidth);
+            setWidth(newWidth);
+        }, 16), [
+        minWidth,
+        maxWidth,
+        setWidth
+    ]);
+    useEffect(()=>{
+        if (!isDragging) return;
+        const handleMouseUp = ()=>{
+            setIsDragging(false);
+            setIsResizing(false);
+            handleMouseMove.cancel();
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return ()=>{
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            handleMouseMove.cancel();
+        };
+    }, [
+        isDragging,
+        handleMouseMove,
+        setIsResizing
+    ]);
+    const barIsVisible = isHovered || isDragging;
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        open: isHovered && !isDragging,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                ref: ref,
+                className: cn(drawerResizeHandleVariants({
+                    barIsVisible
+                })),
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                onMouseDown: handleMouseDown
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                side: "left",
+                children: "Drag to resize"
+            })
+        ]
+    });
+};
+DrawerResizeHandle.displayName = 'DrawerResizeHandle';
+export { DrawerResizeHandle };

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+interface DrawerRootProps {
+    children: ReactNode;
+    closeOnEscape: boolean;
+    closeOnOutsideClick: boolean;
+}
+export declare const DrawerRoot: FC<DrawerRootProps>;
+export {};