@flikk/ui 1.0.0-beta.1

package/dist/components/core/DescriptionList/DescriptionList.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { createContext, useMemo, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { descriptionListTheme } from './DescriptionList.theme.js';
+
+// ──────────────────────────────────────────────
+// Context
+// ──────────────────────────────────────────────
+const DescriptionListContext = createContext(undefined);
+function useDescriptionListContext() {
+    const ctx = useContext(DescriptionListContext);
+    if (!ctx) {
+        throw new Error("DescriptionList.Item must be used within a <DescriptionList>");
+    }
+    return ctx;
+}
+// ──────────────────────────────────────────────
+// DescriptionList (container)
+// ──────────────────────────────────────────────
+const DescriptionListRoot = React__default.forwardRef(({ className, variant = "horizontal", theme: customTheme, children, ...props }, ref) => {
+    const theme = useMemo(() => ({ ...descriptionListTheme, ...customTheme }), [customTheme]);
+    const contextValue = useMemo(() => ({ variant, theme }), [variant, theme]);
+    return (jsx(DescriptionListContext.Provider, { value: contextValue, children: jsx("dl", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: children }) }));
+});
+DescriptionListRoot.displayName = "DescriptionList";
+// ──────────────────────────────────────────────
+// DescriptionList.Item
+// ──────────────────────────────────────────────
+const DescriptionListItem = React__default.forwardRef(({ term, detail, className, ...props }, ref) => {
+    const { variant, theme } = useDescriptionListContext();
+    const isHorizontal = variant === "horizontal";
+    return (jsxs("div", { ref: ref, className: cn(theme.itemStyle, isHorizontal && "sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", className), ...props, children: [jsx("dt", { className: theme.termStyle, children: term }), jsx("dd", { className: cn(theme.detailStyle, isHorizontal && "sm:col-span-2 sm:mt-0"), children: detail })] }));
+});
+DescriptionListItem.displayName = "DescriptionList.Item";
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+const DescriptionList = Object.assign(DescriptionListRoot, {
+    Item: DescriptionListItem,
+});
+
+export { DescriptionList };

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

@@ -0,0 +1,2 @@
+import type { DescriptionListTheme } from "./DescriptionList.types";
+export declare const descriptionListTheme: DescriptionListTheme;

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

@@ -0,0 +1,8 @@
+const descriptionListTheme = {
+    baseStyle: "divide-y divide-[var(--color-border)] min-w-sm",
+    itemStyle: "px-4 py-3",
+    termStyle: "text-sm/6 font-medium text-[var(--color-text-primary)]",
+    detailStyle: "mt-1 text-sm/6 text-[var(--color-text-secondary)]",
+};
+
+export { descriptionListTheme };

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

@@ -0,0 +1,34 @@
+import React from "react";
+export type DescriptionListVariant = "horizontal" | "vertical";
+export interface DescriptionListTheme {
+    /** Base styles for the <dl> container */
+    baseStyle: string;
+    /** Styles for each item wrapper */
+    itemStyle: string;
+    /** Styles for the term (<dt>) */
+    termStyle: string;
+    /** Styles for the detail (<dd>) */
+    detailStyle: string;
+}
+export interface DescriptionListThemeOverrides {
+    baseStyle?: string;
+    itemStyle?: string;
+    termStyle?: string;
+    detailStyle?: string;
+}
+export interface DescriptionListContextValue {
+    variant: DescriptionListVariant;
+    theme: DescriptionListTheme;
+}
+export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
+    /** Layout variant: "horizontal" (default) or "vertical" */
+    variant?: DescriptionListVariant;
+    /** Custom theme overrides */
+    theme?: DescriptionListThemeOverrides;
+}
+export interface DescriptionListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The term / label */
+    term: React.ReactNode;
+    /** The detail / value */
+    detail: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { DescriptionList } from "./DescriptionList";
+export type { DescriptionListVariant, DescriptionListProps, DescriptionListItemProps, DescriptionListThemeOverrides, } from "./DescriptionList.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.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+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,218 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useState, useRef, useCallback, useMemo, 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 = React__default.forwardRef(({ children }, ref) => {
+    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;
+    }, []);
+    const contextValue = useMemo(() => ({
+        activeDrag,
+        setActiveDrag,
+        pointerRef,
+        setPointer,
+        groupId: groupIdRef.current,
+        registerDropZone,
+        unregisterDropZone,
+        dropZones: dropZones.current,
+    }), [activeDrag, setActiveDrag, setPointer, registerDropZone, unregisterDropZone]);
+    return (jsx(DragDropContext.Provider, { value: contextValue, children: children }));
+});
+DragDropProvider.displayName = 'DragDropProvider';
+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 (jsx(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: children }));
+});
+Draggable.displayName = 'Draggable';
+const Droppable = React__default.forwardRef(({ children, acceptedTypes, className, theme: customTheme = {}, onDrop, onDragEnter, onDragLeave, id, }, ref) => {
+    const context = useDragDropContext();
+    const [isDragOver, setIsDragOver] = useState(false);
+    const dropRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const stableId = useRef(id || `droppable-${Math.random().toString(36).substr(2, 9)}`).current;
+    const theme = {
+        ...dragDropTheme,
+        ...customTheme,
+    };
+    // Register drop zone
+    useEffect(() => {
+        if (dropRef.current) {
+            context.registerDropZone(stableId, dropRef.current);
+        }
+        return () => {
+            context.unregisterDropZone(stableId);
+        };
+    }, [stableId, context]);
+    // Compute drag-over state precisely based on pointer location using rAF
+    useEffect(() => {
+        if (!context.activeDrag) {
+            if (isDragOver) {
+                setIsDragOver(false);
+                onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave();
+            }
+            return;
+        }
+        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 (jsx(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 }, children: typeof children === 'function' ? children(isDragOver) : children }));
+});
+Droppable.displayName = 'Droppable';
+
+export { DragDropProvider, 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 @@
+const dragDropTheme = {
+    draggableStyle: 'select-none rounded-[var(--radius-base)] transition-all duration-200',
+    droppableStyle: 'min-h-[120px] border-2 border-dashed border-[var(--color-border)] rounded-[var(--radius-base)] 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?: Record<string, unknown>;
+}
+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,108 @@
+/**
+ * Drawer overlay animation variants
+ */
+const 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
+ */
+const getDrawerContentAnimations = (position) => {
+    const animations = {
+        left: {
+            initial: { x: "-100%" },
+            animate: {
+                x: 0,
+                transition: {
+                    type: "spring",
+                    damping: 40,
+                    stiffness: 300,
+                    mass: 0.8,
+                },
+            },
+            exit: {
+                x: "-100%",
+                transition: {
+                    duration: 0.3,
+                    ease: "easeIn",
+                },
+            },
+        },
+        right: {
+            initial: { x: "100%" },
+            animate: {
+                x: 0,
+                transition: {
+                    type: "spring",
+                    damping: 40,
+                    stiffness: 300,
+                    mass: 0.8,
+                },
+            },
+            exit: {
+                x: "100%",
+                transition: {
+                    duration: 0.3,
+                    ease: "easeIn",
+                },
+            },
+        },
+        top: {
+            initial: { y: "-100%" },
+            animate: {
+                y: 0,
+                transition: {
+                    type: "spring",
+                    damping: 40,
+                    stiffness: 300,
+                    mass: 0.8,
+                },
+            },
+            exit: {
+                y: "-100%",
+                transition: {
+                    duration: 0.3,
+                    ease: "easeIn",
+                },
+            },
+        },
+        bottom: {
+            initial: { y: "100%" },
+            animate: {
+                y: 0,
+                transition: {
+                    type: "spring",
+                    damping: 40,
+                    stiffness: 300,
+                    mass: 0.8,
+                },
+            },
+            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,15 @@
+import { DrawerProps, DrawerContextValue } from "./Drawer.types";
+export declare const useDrawerContext: () => DrawerContextValue;
+export declare const Drawer: {
+    ({ isOpen, onClose, title, description, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Content: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useId, useMemo, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useScaleBackground } from '../../../hooks/useScaleBackground.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { drawerTheme, drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin } from './Drawer.theme.js';
+import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
+import { DrawerContent } from './DrawerContent.js';
+import { DrawerFooter } from './DrawerFooter.js';
+import { Button } from '../Button/Button.js';
+
+// Create context for Drawer components
+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;
+};
+const DrawerRoot = ({ isOpen, onClose, title, description, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, ...props }) => {
+    // iOS-style scale background effect
+    useScaleBackground({ isOpen, scale, position });
+    // Generate unique IDs for ARIA linkage
+    const id = useId();
+    const titleId = `${id}-title`;
+    const descriptionId = `${id}-description`;
+    // Merge theme with overrides
+    const theme = useMemo(() => ({
+        ...drawerTheme,
+        ...(themeOverrides || {}),
+    }), [themeOverrides]);
+    // Context value
+    const contextValue = useMemo(() => ({
+        isOpen,
+        onClose,
+        position,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        theme,
+    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, theme]);
+    // Get size variant based on position
+    const isHorizontal = position === "left" || position === "right";
+    const sizeVariant = isHorizontal
+        ? drawerSizeVariants.horizontal[size]
+        : drawerSizeVariants.vertical[size];
+    // Use different positioning for full-width/height drawers
+    const positionVariant = size === "full"
+        ? drawerPositionVariantsFullWidth[position]
+        : drawerPositionVariantsWithMargin[position];
+    // Header renders when title exists or close button is shown
+    const shouldRenderHeader = title || showCloseButton;
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: title ? titleId : undefined, ariaDescribedBy: description ? descriptionId : undefined, contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
+            overlay: drawerOverlayAnimations,
+            content: getDrawerContentAnimations(position),
+        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.content, children: [shouldRenderHeader && (jsxs("div", { className: cn(theme.header), children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && title && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), title && (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { id: titleId, className: cn(theme.title), children: title }), description && (jsx("p", { id: descriptionId, className: cn(theme.description), children: description }))] }))] }), showCloseButton && (jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] })), children] }) }) }));
+};
+DrawerRoot.displayName = "Drawer";
+// Attach compound subcomponents
+const Drawer = Object.assign(DrawerRoot, {
+    Content: DrawerContent,
+    Footer: DrawerFooter,
+});
+
+export { Drawer, useDrawerContext };

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

@@ -0,0 +1,32 @@
+import { DrawerTheme } from "./Drawer.types";
+export declare const drawerTheme: DrawerTheme;
+export declare const drawerPositionVariants: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerPositionVariantsWithMargin: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerPositionVariantsFullWidth: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerSizeVariants: {
+    horizontal: {
+        md: string;
+        lg: string;
+        full: string;
+    };
+    vertical: {
+        md: string;
+        lg: string;
+        full: string;
+    };
+};