flikkui 0.1.0-beta.11

package/dist/components/core/ContextMenu/ContextMenu.types.d.ts

@@ -0,0 +1,83 @@
+import React, { ReactNode } from "react";
+import { ContextMenuTheme } from "./ContextMenu.theme";
+export interface ContextMenuContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    cursorPosition: {
+        x: number;
+        y: number;
+    } | null;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    theme: ContextMenuTheme;
+}
+export interface SubMenuContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    onOpenChange?: (isOpen: boolean) => void;
+    theme?: Partial<ContextMenuTheme>;
+}
+export interface ContextMenuTriggerProps {
+    children: React.ReactElement;
+    className?: string;
+    disabled?: boolean;
+}
+export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    animation?: boolean;
+    "aria-label"?: string;
+}
+export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    children: ReactNode;
+    className?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    isDanger?: boolean;
+    shortcut?: ReactNode;
+    onSelect?: () => void;
+}
+export interface ContextMenuSubProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export interface ContextMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    animation?: boolean;
+}
+export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Theme overrides for the ContextMenu component
+ */
+export interface ContextMenuThemeOverrides {
+    /** Content container style */
+    contentStyle?: string;
+    /** Item base style */
+    itemStyle?: string;
+    /** Checked item style (for tick icon positioning) */
+    itemCheckedStyle?: string;
+    /** Sub trigger style */
+    subTriggerStyle?: string;
+    /** Sub content style */
+    subContentStyle?: string;
+    /** Separator style */
+    separatorStyle?: string;
+    /** Label style */
+    labelStyle?: string;
+}

package/dist/components/core/ContextMenu/ContextMenuContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuContentProps } from "./ContextMenu.types";
+/**
+ * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
+ */
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuContext.d.ts

@@ -0,0 +1,5 @@
+import { ContextMenuContextValue, SubMenuContextValue } from "./ContextMenu.types";
+export declare const ContextMenuContext: import("react").Context<ContextMenuContextValue | null>;
+export declare const useContextMenuContext: () => ContextMenuContextValue;
+export declare const SubMenuContext: import("react").Context<SubMenuContextValue | null>;
+export declare const useSubMenuContext: () => SubMenuContextValue;

package/dist/components/core/ContextMenu/ContextMenuItem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuItemProps } from "./ContextMenu.types";
+/**
+ * ContextMenuItem - Individual menu item with optional check indicator
+ */
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuLabel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuLabelProps } from "./ContextMenu.types";
+/**
+ * ContextMenuLabel - Non-interactive section header
+ */
+export declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuSeparator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSeparatorProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSeparator - Visual divider between menu items
+ */
+export declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuSub.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSub - Wrapper for nested submenu with hover logic
+ */
+export declare const ContextMenuSub: React.FC<ContextMenuSubProps>;

package/dist/components/core/ContextMenu/ContextMenuSubContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubContentProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubContent - Submenu content positioned to the right of trigger
+ */
+export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuSubTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubTriggerProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubTrigger - Trigger for nested submenu with chevron indicator
+ */
+export declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/ContextMenuTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuTriggerProps } from "./ContextMenu.types";
+/**
+ * ContextMenuTrigger - Area that triggers the context menu on right-click
+ */
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;

package/dist/components/core/ContextMenu/index.d.ts

@@ -0,0 +1,4 @@
+export { ContextMenu } from "./ContextMenu";
+export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
+export type { ContextMenuTheme } from "./ContextMenu.theme";
+export { contextMenuTheme } from "./ContextMenu.theme";

package/dist/components/core/Divider/Divider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DividerProps } from './Divider.types';
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Divider/Divider.js

@@ -0,0 +1,21 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { dividerTheme } from './Divider.theme.js';
+
+var Divider = React__default.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.vertical, vertical = _d === void 0 ? false : _d, _e = _a.margin, margin = _e === void 0 ? 'md' : _e, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, props = __rest(_a, ["vertical", "margin", "className", "theme"]);
+    var theme = __assign(__assign(__assign({}, dividerTheme), customTheme), { margins: {
+            horizontal: __assign(__assign({}, dividerTheme.margins.horizontal), (_b = customTheme.margins) === null || _b === void 0 ? void 0 : _b.horizontal),
+            vertical: __assign(__assign({}, dividerTheme.margins.vertical), (_c = customTheme.margins) === null || _c === void 0 ? void 0 : _c.vertical),
+        } });
+    var marginStyle = vertical
+        ? theme.margins.vertical[margin] || ''
+        : theme.margins.horizontal[margin] || '';
+    var orientationStyle = vertical ? theme.vertical : theme.horizontal;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, orientationStyle, marginStyle, className), role: "separator", "aria-orientation": vertical ? 'vertical' : 'horizontal' }, props)));
+});
+Divider.displayName = 'Divider';
+
+export { Divider };

package/dist/components/core/Divider/Divider.theme.d.ts

@@ -0,0 +1,2 @@
+import { DividerTheme } from './Divider.types';
+export declare const dividerTheme: DividerTheme;

package/dist/components/core/Divider/Divider.theme.js

@@ -0,0 +1,19 @@
+var dividerTheme = {
+    baseStyle: 'bg-[var(--color-border)] border-0',
+    horizontal: 'w-full h-px',
+    vertical: 'h-full w-px',
+    margins: {
+        horizontal: {
+            sm: 'my-2',
+            md: 'my-4',
+            lg: 'my-6',
+        },
+        vertical: {
+            sm: 'mx-2',
+            md: 'mx-4',
+            lg: 'mx-6',
+        },
+    },
+};
+
+export { dividerTheme };

package/dist/components/core/Divider/Divider.types.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+export type DividerMargin = 'sm' | 'md' | 'lg';
+export interface DividerTheme {
+    baseStyle: string;
+    horizontal: string;
+    vertical: string;
+    margins: {
+        horizontal: Record<DividerMargin, string>;
+        vertical: Record<DividerMargin, string>;
+    };
+}
+export interface DividerThemeOverrides {
+    baseStyle?: string;
+    horizontal?: string;
+    vertical?: string;
+    margins?: {
+        horizontal?: Partial<Record<DividerMargin, string>>;
+        vertical?: Partial<Record<DividerMargin, string>>;
+    };
+}
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the divider is vertical (default is horizontal)
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * The margin size for spacing
+     * @default 'md'
+     */
+    margin?: DividerMargin;
+    /**
+     * Custom class name for the divider
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: DividerThemeOverrides;
+}

package/dist/components/core/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerTheme, DividerThemeOverrides } from './Divider.types';

package/dist/components/core/DragDrop/DragDrop.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AnimatePresence } from 'motion/react';
+import { DraggableProps, DroppableProps } from './DragDrop.types';
+export { AnimatePresence };
+export declare const DragDropProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const Draggable: React.ForwardRefExoticComponent<DraggableProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Droppable: React.ForwardRefExoticComponent<DroppableProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/DragDrop/DragDrop.js

@@ -0,0 +1,178 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useRef, useCallback, useState, useEffect, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { dragDropTheme } from './DragDrop.theme.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var DragDropContext = createContext(null);
+var useDragDropContext = function () {
+    var context = useContext(DragDropContext);
+    if (!context) {
+        throw new Error('Draggable and Droppable must be used within DragDropProvider');
+    }
+    return context;
+};
+var Draggable = React__default.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, dragData = _a.dragData, className = _a.className, _c = _a.theme, customTheme = _c === void 0 ? {} : _c, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragEnd = _a.onDragEnd, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var context = useDragDropContext();
+    var dragRef = useRef(null);
+    var theme = __assign(__assign({}, dragDropTheme), customTheme);
+    var handleDragStart = useCallback(function (_event, info) {
+        if (disabled)
+            return;
+        context.setActiveDrag(dragData);
+        context.setPointer({ x: info.point.x, y: info.point.y });
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(dragData, info);
+    }, [dragData, onDragStart, context, disabled]);
+    var handleDrag = useCallback(function (_event, info) {
+        if (disabled)
+            return;
+        context.setPointer({ x: info.point.x, y: info.point.y });
+        onDrag === null || onDrag === void 0 ? void 0 : onDrag(dragData, info);
+    }, [dragData, onDrag, disabled, context]);
+    var handleDragEnd = useCallback(function (_event, info) {
+        var _a;
+        // Use last known pointer position for precise hit-testing
+        var point = (_a = context.pointerRef.current) !== null && _a !== void 0 ? _a : { x: info.point.x, y: info.point.y };
+        context.dropZones.forEach(function (dropZone) {
+            var dropRect = dropZone.getBoundingClientRect();
+            if (point.x >= dropRect.left &&
+                point.x <= dropRect.right &&
+                point.y >= dropRect.top &&
+                point.y <= dropRect.bottom) {
+                var dropEvent = new CustomEvent('motion-drop', {
+                    detail: dragData,
+                    bubbles: true
+                });
+                dropZone.dispatchEvent(dropEvent);
+            }
+        });
+        context.setActiveDrag(null);
+        context.setPointer(null);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragData, info);
+    }, [dragData, onDragEnd, context]);
+    var isDragging = ((_b = context.activeDrag) === null || _b === void 0 ? void 0 : _b.id) === dragData.id;
+    return (React__default.createElement(motion.div, { ref: function (node) {
+            dragRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, layout: true, layoutId: dragData.id, initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9, transition: { duration: 0.15 } }, drag: !disabled, dragMomentum: false, dragElastic: 0, dragSnapToOrigin: true, dragTransition: {
+            power: 0,
+            timeConstant: 0,
+        }, whileDrag: {
+            scale: 1.03,
+            cursor: 'grabbing',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        }, transition: {
+            layout: { type: 'spring', stiffness: 400, damping: 30 },
+            scale: { duration: 0.1 },
+            x: { type: 'spring', stiffness: 1000, damping: 50 },
+            y: { type: 'spring', stiffness: 1000, damping: 50 },
+        }, style: {
+            position: isDragging ? 'relative' : 'relative',
+            zIndex: isDragging ? 99999 : 'auto',
+            isolation: isDragging ? 'isolate' : 'auto',
+        }, className: cn(theme.draggableStyle, disabled && 'opacity-50 cursor-not-allowed', !disabled && 'cursor-grab active:cursor-grabbing', isDragging && '[&]:!z-[99999]', className), onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd }, children));
+});
+Draggable.displayName = 'Draggable';
+var Droppable = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, acceptedTypes = _a.acceptedTypes, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, onDrop = _a.onDrop, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, _c = _a.id, id = _c === void 0 ? "droppable-".concat(Math.random().toString(36).substr(2, 9)) : _c;
+    var context = useDragDropContext();
+    var _d = useState(false), isDragOver = _d[0], setIsDragOver = _d[1];
+    var dropRef = useRef(null);
+    var rafIdRef = useRef(null);
+    var theme = __assign(__assign({}, dragDropTheme), customTheme);
+    // Register drop zone
+    useEffect(function () {
+        if (dropRef.current) {
+            context.registerDropZone(id, dropRef.current);
+        }
+        return function () {
+            context.unregisterDropZone(id);
+        };
+    }, [id, context]);
+    // Compute drag-over state precisely based on pointer location using rAF
+    useEffect(function () {
+        var loop = function () {
+            var currentDrag = context.activeDrag;
+            var point = context.pointerRef.current;
+            var el = dropRef.current;
+            if (!el || !currentDrag || !point) {
+                if (isDragOver) {
+                    setIsDragOver(false);
+                    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave();
+                }
+            }
+            else {
+                var dropRect = el.getBoundingClientRect();
+                var matchesType = !acceptedTypes || acceptedTypes.length === 0 || acceptedTypes.includes(currentDrag.type || '');
+                var over = matchesType &&
+                    point.x >= dropRect.left &&
+                    point.x <= dropRect.right &&
+                    point.y >= dropRect.top &&
+                    point.y <= dropRect.bottom;
+                if (over && !isDragOver) {
+                    setIsDragOver(true);
+                    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(currentDrag);
+                }
+                else if (!over && isDragOver) {
+                    setIsDragOver(false);
+                    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave();
+                }
+            }
+            rafIdRef.current = requestAnimationFrame(loop);
+        };
+        rafIdRef.current = requestAnimationFrame(loop);
+        return function () {
+            if (rafIdRef.current)
+                cancelAnimationFrame(rafIdRef.current);
+        };
+    }, [acceptedTypes, isDragOver, onDragEnter, onDragLeave, context.activeDrag]);
+    // Handle drop
+    useEffect(function () {
+        var handleDrop = function (event) {
+            var customEvent = event;
+            var data = customEvent.detail;
+            // Check if type is accepted
+            if (acceptedTypes && acceptedTypes.length > 0) {
+                if (!acceptedTypes.includes(data.type || '')) {
+                    return;
+                }
+            }
+            setIsDragOver(false);
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(data);
+        };
+        var element = dropRef.current;
+        if (element) {
+            element.addEventListener('motion-drop', handleDrop);
+        }
+        return function () {
+            if (element) {
+                element.removeEventListener('motion-drop', handleDrop);
+            }
+        };
+    }, [acceptedTypes, onDrop]);
+    return (React__default.createElement(motion.div, { ref: function (node) {
+            dropRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, style: {
+            position: 'relative',
+            zIndex: 0,
+        }, className: cn(theme.droppableStyle, isDragOver && theme.dragOverStyle, className), animate: isDragOver ? 'dragOver' : 'idle', variants: {
+            idle: { scale: 1 },
+            dragOver: { scale: 1.01 }
+        }, transition: { duration: 0.15 } }, typeof children === 'function' ? children(isDragOver) : children));
+});
+Droppable.displayName = 'Droppable';
+
+export { Draggable, Droppable };

package/dist/components/core/DragDrop/DragDrop.theme.d.ts

@@ -0,0 +1,2 @@
+import { DragDropTheme } from './DragDrop.types';
+export declare const dragDropTheme: DragDropTheme;

package/dist/components/core/DragDrop/DragDrop.theme.js

@@ -0,0 +1,8 @@
+var dragDropTheme = {
+    draggableStyle: 'select-none rounded-lg transition-all duration-200',
+    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-lg p-4 transition-all duration-200 bg-[var(--color-background)]',
+    dragOverStyle: 'border-[var(--color-primary)] bg-[var(--color-primary-50)]',
+    dragPreviewStyle: 'opacity-60',
+};
+
+export { dragDropTheme };

package/dist/components/core/DragDrop/DragDrop.types.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { PanInfo } from 'motion/react';
+export interface DragData {
+    id: string;
+    type?: string;
+    data?: any;
+}
+export interface DragDropTheme {
+    draggableStyle: string;
+    droppableStyle: string;
+    dragOverStyle: string;
+    dragPreviewStyle: string;
+}
+export interface DragDropThemeOverrides {
+    draggableStyle?: string;
+    droppableStyle?: string;
+    dragOverStyle?: string;
+    dragPreviewStyle?: string;
+}
+export interface DraggableProps {
+    /** Content to make draggable */
+    children: ReactNode;
+    /** Drag data */
+    dragData: DragData;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: DragDropThemeOverrides;
+    /** Called when drag starts */
+    onDragStart?: (data: DragData, info: PanInfo) => void;
+    /** Called when dragging */
+    onDrag?: (data: DragData, info: PanInfo) => void;
+    /** Called when drag ends */
+    onDragEnd?: (data: DragData, info: PanInfo) => void;
+    /** Disable dragging */
+    disabled?: boolean;
+}
+export interface DroppableProps {
+    /** Content of the drop zone */
+    children: ReactNode | ((isDragOver: boolean) => ReactNode);
+    /** Accepted drag types */
+    acceptedTypes?: string[];
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: DragDropThemeOverrides;
+    /** Called when item is dropped */
+    onDrop?: (data: DragData) => void;
+    /** Called when drag enters drop zone */
+    onDragEnter?: (data: DragData) => void;
+    /** Called when drag leaves drop zone */
+    onDragLeave?: () => void;
+    /** ID for the drop zone */
+    id?: string;
+}

package/dist/components/core/DragDrop/index.d.ts

@@ -0,0 +1,2 @@
+export { Draggable, Droppable, DragDropProvider, AnimatePresence } from './DragDrop';
+export type { DraggableProps, DroppableProps, DragData, DragDropTheme, DragDropThemeOverrides } from './DragDrop.types';

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

@@ -0,0 +1,10 @@
+import { Variants } from 'motion/react';
+import { DrawerPosition } from './Drawer.types';
+/**
+ * Drawer overlay animation variants
+ */
+export declare const drawerOverlayAnimations: Variants;
+/**
+ * Get drawer content animation variants based on position
+ */
+export declare const getDrawerContentAnimations: (position: DrawerPosition) => Variants;

package/dist/components/core/Drawer/Drawer.animations.js

@@ -0,0 +1,104 @@
+/**
+ * Drawer overlay animation variants
+ */
+var drawerOverlayAnimations = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            ease: 'easeOut'
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.3,
+            ease: 'easeIn'
+        }
+    }
+};
+/**
+ * Get drawer content animation variants based on position
+ */
+var getDrawerContentAnimations = function (position) {
+    var animations = {
+        left: {
+            initial: { x: '-100%' },
+            animate: {
+                x: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                x: '-100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        right: {
+            initial: { x: '100%' },
+            animate: {
+                x: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                x: '100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        top: {
+            initial: { y: '-100%' },
+            animate: {
+                y: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                y: '-100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        bottom: {
+            initial: { y: '100%' },
+            animate: {
+                y: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                y: '100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        }
+    };
+    return animations[position];
+};
+
+export { drawerOverlayAnimations, getDrawerContentAnimations };

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { DrawerProps, DrawerContextValue } from "./Drawer.types";
+export declare const useDrawerContext: () => DrawerContextValue;
+export declare const Drawer: {
+    ({ isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: DrawerProps): React.ReactPortal;
+    displayName: string;
+} & {
+    Header: {
+        ({ children, showCloseButton, className, ...props }: import("./Drawer.types").DrawerHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerFooterProps): React.JSX.Element;
+        displayName: string;
+    };
+};