flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -0,0 +1,207 @@
+import React__default, { createContext, useRef, useCallback, useState, useEffect, useContext } from 'react';
+import { motion } from 'motion/react';
+export { AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { dragDropTheme } from './DragDrop.theme.js';
+
+const DragDropContext = createContext(null);
+const DragDropProvider = ({ children }) => {
+    const [activeDrag, setActiveDrag] = useState(null);
+    const pointerRef = useRef(null);
+    const dropZones = useRef(new Map());
+    const groupIdRef = useRef(`dd-${Math.random().toString(36).slice(2)}`);
+    const registerDropZone = useCallback((id, element) => {
+        dropZones.current.set(id, element);
+    }, []);
+    const unregisterDropZone = useCallback((id) => {
+        dropZones.current.delete(id);
+    }, []);
+    const setPointer = useCallback((point) => {
+        pointerRef.current = point;
+    }, []);
+    return (React__default.createElement(DragDropContext.Provider, { value: {
+            activeDrag,
+            setActiveDrag,
+            pointerRef,
+            setPointer,
+            groupId: groupIdRef.current,
+            registerDropZone,
+            unregisterDropZone,
+            dropZones: dropZones.current
+        } }, children));
+};
+const useDragDropContext = () => {
+    const context = useContext(DragDropContext);
+    if (!context) {
+        throw new Error('Draggable and Droppable must be used within DragDropProvider');
+    }
+    return context;
+};
+const Draggable = React__default.forwardRef(({ children, dragData, className, theme: customTheme = {}, onDragStart, onDrag, onDragEnd, disabled = false, }, ref) => {
+    var _a;
+    const context = useDragDropContext();
+    const dragRef = useRef(null);
+    const theme = {
+        ...dragDropTheme,
+        ...customTheme,
+    };
+    const handleDragStart = useCallback((_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]);
+    const handleDrag = useCallback((_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]);
+    const handleDragEnd = useCallback((_event, info) => {
+        var _a;
+        // Use last known pointer position for precise hit-testing
+        const point = (_a = context.pointerRef.current) !== null && _a !== void 0 ? _a : { x: info.point.x, y: info.point.y };
+        context.dropZones.forEach((dropZone) => {
+            const dropRect = dropZone.getBoundingClientRect();
+            if (point.x >= dropRect.left &&
+                point.x <= dropRect.right &&
+                point.y >= dropRect.top &&
+                point.y <= dropRect.bottom) {
+                const 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]);
+    const isDragging = ((_a = context.activeDrag) === null || _a === void 0 ? void 0 : _a.id) === dragData.id;
+    return (React__default.createElement(motion.div, { ref: (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';
+const Droppable = React__default.forwardRef(({ children, acceptedTypes, className, theme: customTheme = {}, onDrop, onDragEnter, onDragLeave, id = `droppable-${Math.random().toString(36).substr(2, 9)}`, }, ref) => {
+    const context = useDragDropContext();
+    const [isDragOver, setIsDragOver] = useState(false);
+    const dropRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const theme = {
+        ...dragDropTheme,
+        ...customTheme,
+    };
+    // Register drop zone
+    useEffect(() => {
+        if (dropRef.current) {
+            context.registerDropZone(id, dropRef.current);
+        }
+        return () => {
+            context.unregisterDropZone(id);
+        };
+    }, [id, context]);
+    // Compute drag-over state precisely based on pointer location using rAF
+    useEffect(() => {
+        const loop = () => {
+            const currentDrag = context.activeDrag;
+            const point = context.pointerRef.current;
+            const el = dropRef.current;
+            if (!el || !currentDrag || !point) {
+                if (isDragOver) {
+                    setIsDragOver(false);
+                    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave();
+                }
+            }
+            else {
+                const dropRect = el.getBoundingClientRect();
+                const matchesType = !acceptedTypes || acceptedTypes.length === 0 || acceptedTypes.includes(currentDrag.type || '');
+                const 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 () => {
+            if (rafIdRef.current)
+                cancelAnimationFrame(rafIdRef.current);
+        };
+    }, [acceptedTypes, isDragOver, onDragEnter, onDragLeave, context.activeDrag]);
+    // Handle drop
+    useEffect(() => {
+        const handleDrop = (event) => {
+            const customEvent = event;
+            const 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);
+        };
+        const element = dropRef.current;
+        if (element) {
+            element.addEventListener('motion-drop', handleDrop);
+        }
+        return () => {
+            if (element) {
+                element.removeEventListener('motion-drop', handleDrop);
+            }
+        };
+    }, [acceptedTypes, onDrop]);
+    return (React__default.createElement(motion.div, { ref: (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 { DragDropProvider, Draggable, Droppable };

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

@@ -0,0 +1,8 @@
+const 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.js

@@ -1,7 +1,7 @@
 /**
  * Drawer overlay animation variants
  */
-var drawerOverlayAnimations = {
+const drawerOverlayAnimations = {
     initial: {
         opacity: 0
     },
@@ -23,8 +23,8 @@ var drawerOverlayAnimations = {
 /**
  * Get drawer content animation variants based on position
  */
-var getDrawerContentAnimations = function (position) {
-    var animations = {
+const getDrawerContentAnimations = (position) => {
+    const animations = {
         left: {
             initial: { x: '-100%' },
             animate: {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { DrawerProps, DrawerContextValue } from "./Drawer.types";
 export declare const useDrawerContext: () => DrawerContextValue;
-declare const _default: {
+export declare const Drawer: {
     ({ isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: DrawerProps): React.ReactPortal;
     displayName: string;
 } & {
@@ -9,8 +9,8 @@ declare const _default: {
         ({ children, showCloseButton, className, ...props }: import("./Drawer.types").DrawerHeaderProps): React.JSX.Element;
         displayName: string;
     };
-    Body: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): React.JSX.Element;
+    Content: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): React.JSX.Element;
         displayName: string;
     };
     Footer: {
@@ -18,4 +18,3 @@ declare const _default: {
         displayName: string;
     };
 };
-export default _default;

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

@@ -1,80 +1,89 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { drawerTheme, drawerPositionVariantsWithMargin, drawerSizeVariants } from './Drawer.theme.js';
+import { drawerTheme, drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin } from './Drawer.theme.js';
 import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
 import { DrawerHeader } from './DrawerHeader.js';
-import { DrawerBody } from './DrawerBody.js';
+import { DrawerContent } from './DrawerContent.js';
 import { DrawerFooter } from './DrawerFooter.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 // Create context for Drawer components
-var DrawerContext = createContext(undefined);
-var useDrawerContext = function () {
-    var ctx = useContext(DrawerContext);
+const DrawerContext = createContext(undefined);
+const useDrawerContext = () => {
+    const ctx = useContext(DrawerContext);
     if (!ctx)
         throw new Error("Drawer compound components must be used within <Drawer>");
     return ctx;
 };
-var Drawer = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.position, position = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.closeOnOverlayClick, closeOnOverlayClick = _d === void 0 ? true : _d, _e = _a.closeOnEsc, closeOnEsc = _e === void 0 ? true : _e, _f = _a.showCloseButton, showCloseButton = _f === void 0 ? true : _f, children = _a.children, className = _a.className, themeOverrides = _a.theme, props = __rest(_a, ["isOpen", "onClose", "position", "size", "closeOnOverlayClick", "closeOnEsc", "showCloseButton", "children", "className", "theme"]);
+const DrawerRoot = ({ isOpen, onClose, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, ...props }) => {
     // Handle ESC key
-    var handleEscKey = useCallback(function (event) {
+    const handleEscKey = useCallback((event) => {
         if (event.key === "Escape" && closeOnEsc) {
             onClose();
         }
     }, [closeOnEsc, onClose]);
     // Handle overlay click
-    var handleOverlayClick = useCallback(function (event) {
+    const handleOverlayClick = useCallback((event) => {
         if (event.target === event.currentTarget && closeOnOverlayClick) {
             onClose();
         }
     }, [closeOnOverlayClick, onClose]);
     // Setup event listeners
-    useEffect(function () {
+    useEffect(() => {
         if (isOpen) {
             document.addEventListener("keydown", handleEscKey);
             // Prevent body scroll
             document.body.style.overflow = "hidden";
-            return function () {
+            return () => {
                 document.removeEventListener("keydown", handleEscKey);
                 document.body.style.overflow = "unset";
             };
         }
     }, [isOpen, handleEscKey]);
     // Merge theme with overrides
-    var theme = __assign(__assign({}, drawerTheme), (themeOverrides || {}));
+    const theme = {
+        ...drawerTheme,
+        ...(themeOverrides || {}),
+    };
     // Context value
-    var contextValue = {
-        isOpen: isOpen,
-        onClose: onClose,
-        position: position,
-        size: size,
-        closeOnOverlayClick: closeOnOverlayClick,
-        closeOnEsc: closeOnEsc,
-        showCloseButton: showCloseButton,
-        theme: theme,
+    const contextValue = {
+        isOpen,
+        onClose,
+        position,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
     };
     // Get size variant based on position
-    var isHorizontal = position === "left" || position === "right";
-    var sizeVariant = isHorizontal
+    const isHorizontal = position === "left" || position === "right";
+    const sizeVariant = isHorizontal
         ? drawerSizeVariants.horizontal[size]
         : drawerSizeVariants.vertical[size];
-    var drawerContent = (React__default.createElement(DrawerContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(theme.overlay), onClick: handleOverlayClick, variants: drawerOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
-            React__default.createElement(motion.div, __assign({ className: cn(theme.container, drawerPositionVariantsWithMargin[position], sizeVariant, className), variants: getDrawerContentAnimations(position), initial: "initial", animate: "animate", exit: "exit", onClick: function (e) { return e.stopPropagation(); } }, props),
+    // Use different positioning for full-width/height drawers
+    const positionVariant = size === "full"
+        ? drawerPositionVariantsFullWidth[position]
+        : drawerPositionVariantsWithMargin[position];
+    // Detect dark mode from document
+    const isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
+    const drawerContent = (React__default.createElement(DrawerContext.Provider, { value: contextValue },
+        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: drawerOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
+            React__default.createElement(motion.div, { className: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), variants: getDrawerContentAnimations(position), initial: "initial", animate: "animate", exit: "exit", onClick: (e) => e.stopPropagation(), ...props },
                 React__default.createElement("div", { className: cn(theme.content) }, children)))))));
     // Render in portal
     return createPortal(drawerContent, document.body);
 };
-Drawer.displayName = "Drawer";
+DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents
-var Drawer$1 = Object.assign(Drawer, {
+const Drawer = Object.assign(DrawerRoot, {
     Header: DrawerHeader,
-    Body: DrawerBody,
+    Content: DrawerContent,
     Footer: DrawerFooter,
 });
 
-export { Drawer$1 as default, useDrawerContext };
+export { Drawer, useDrawerContext };

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

@@ -12,19 +12,21 @@ export declare const drawerPositionVariantsWithMargin: {
     top: string;
     bottom: string;
 };
+export declare const drawerPositionVariantsFullWidth: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
 export declare const drawerSizeVariants: {
     horizontal: {
-        sm: string;
         md: string;
         lg: string;
-        xl: string;
         full: string;
     };
     vertical: {
-        sm: string;
         md: string;
         lg: string;
-        xl: string;
         full: string;
     };
 };

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

@@ -1,37 +1,48 @@
-var drawerTheme = {
-    overlay: "fixed inset-0 bg-black/70 backdrop-blur-sm z-50",
-    container: "fixed bg-white shadow-2xl shadow-black/30 border border-[var(--color-border)] ring-6 ring-white/20 flex flex-col overflow-hidden rounded-2xl",
+const drawerTheme = {
+    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50",
+    container: "fixed bg-[var(--color-background)] shadow-2xl shadow-black/30 " +
+        "border border-[var(--color-border)] ring-6 ring-white/20 " +
+        "flex flex-col overflow-hidden rounded-2xl " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)] dark:ring-black/30",
     content: "h-full flex flex-col",
-    header: "flex items-center justify-between p-4 border-b border-[var(--color-border)] shrink-0",
+    header: "flex items-center justify-between p-4 border-b border-[var(--color-border)] shrink-0 " +
+        "dark:border-[var(--color-neutral-700)]",
     body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0",
-    closeButton: "p-1 rounded-md hover:bg-neutral-100 transition-colors text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
+        "dark:border-[var(--color-neutral-700)]",
+    closeButton: "p-2 rounded-md hover:bg-[var(--color-background-tertiary)] transition-colors " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] cursor-pointer " +
+        "dark:hover:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] " +
+        "dark:hover:text-[var(--color-neutral-200)]",
 };
 // Position variants with margin support
-var drawerPositionVariantsWithMargin = {
+const drawerPositionVariantsWithMargin = {
     left: "left-6 top-6 h-[calc(100vh-3rem)]", // 100vh - 1.5rem top - 1.5rem bottom
     right: "right-6 top-6 h-[calc(100vh-3rem)]",
     top: "top-6 left-6 w-[calc(100vw-3rem)]",
     bottom: "bottom-6 left-6 w-[calc(100vw-3rem)]",
 };
+// Position variants for full-width/height drawers with consistent margins
+const drawerPositionVariantsFullWidth = {
+    left: "left-6 top-6 right-6 bottom-6", // Consistent margins on all sides
+    right: "right-6 top-6 left-6 bottom-6",
+    top: "top-6 left-6 right-6 bottom-6",
+    bottom: "bottom-6 left-6 right-6 top-6",
+};
 // Size variants based on position
-var drawerSizeVariants = {
+const drawerSizeVariants = {
     // Horizontal drawers (left/right)
     horizontal: {
-        sm: "w-80",
-        md: "w-96",
-        lg: "w-[28rem]",
-        xl: "w-[32rem]",
-        full: "w-full",
+        md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
+        lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
+        full: "w-full", // Full width - positioning handles margins
     },
     // Vertical drawers (top/bottom)
     vertical: {
-        sm: "h-64",
-        md: "h-80",
-        lg: "h-96",
-        xl: "h-[28rem]",
-        full: "h-full",
+        md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
+        lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
+        full: "h-full", // Full height - positioning handles margins
     },
 };
 
-export { drawerPositionVariantsWithMargin, drawerSizeVariants, drawerTheme };
+export { drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin, drawerSizeVariants, drawerTheme };

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

@@ -1,6 +1,6 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
+export type DrawerSize = "md" | "lg" | "full";
 export interface DrawerTheme {
     overlay: string;
     container: string;
@@ -46,7 +46,7 @@ export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
     showCloseButton?: boolean;
     className?: string;
 }
-export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DrawerContentProps } from "./Drawer.types";
+export declare const DrawerContent: {
+    ({ children, className, ...props }: DrawerContentProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerContent = ({ children, className, ...props }) => {
+    const { theme } = useDrawerContext();
+    return (React__default.createElement("div", { className: cn(theme.body, className), ...props }, children));
+};
+DrawerContent.displayName = "Drawer.Content";
+
+export { DrawerContent };

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

@@ -1,12 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 
-var DrawerFooter = function (_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    var theme = useDrawerContext().theme;
-    return (React__default.createElement("div", __assign({ className: cn(theme.footer, className) }, props), children));
+const DrawerFooter = ({ children, className, ...props }) => {
+    const { theme } = useDrawerContext();
+    return (React__default.createElement("div", { className: cn(theme.footer, className), ...props }, children));
 };
 DrawerFooter.displayName = "Drawer.Footer";
 

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

@@ -1,17 +1,15 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 
-var DrawerHeader = function (_a) {
-    var children = _a.children, showCloseButton = _a.showCloseButton, className = _a.className, props = __rest(_a, ["children", "showCloseButton", "className"]);
-    var _b = useDrawerContext(), onClose = _b.onClose, contextShowCloseButton = _b.showCloseButton, theme = _b.theme;
-    var shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (React__default.createElement("div", __assign({ className: cn(theme.header, className) }, props),
+const DrawerHeader = ({ children, showCloseButton, className, ...props }) => {
+    const { onClose, showCloseButton: contextShowCloseButton, theme } = useDrawerContext();
+    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
+    return (React__default.createElement("div", { className: cn(theme.header, className), ...props },
         React__default.createElement("div", { className: "flex-1" }, children),
         shouldShowCloseButton && (React__default.createElement("button", { type: "button", onClick: onClose, className: cn(theme.closeButton), "aria-label": "Close drawer" },
-            React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                React__default.createElement("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+            React__default.createElement(XMarkIcon, { className: "w-4 h-4" })))));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

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

@@ -1,2 +1,2 @@
-export { default as Drawer } from "./Drawer";
-export * from "./Drawer.types";
+export { Drawer } from "./Drawer";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides } from "./Drawer.types";

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { DropdownProps } from "./Dropdown.types";
+export declare const Dropdown: {
+    ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, closeOnSelect, disabledKeys, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, selectionMode, onAction, onSelectionChange, theme: themeOverrides, ...props }: DropdownProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Menu: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownSectionProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};