@hua-labs/ui 1.0.0 → 1.1.0-alpha.0.1

package/dist/components/Command.js

@@ -1,119 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Command = React.forwardRef(({ className, children, open: controlledOpen, onOpenChange, placeholder = "명령어를 검색하세요...", searchValue: controlledSearchValue, onSearchChange, disabled = false, ...props }, ref) => {
-    const [internalOpen, setInternalOpen] = React.useState(false);
-    const [internalSearchValue, setInternalSearchValue] = React.useState("");
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const commandRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    const listRef = React.useRef(null);
-    const isControlled = controlledOpen !== undefined;
-    const isOpen = isControlled ? controlledOpen : internalOpen;
-    const searchValue = controlledSearchValue !== undefined ? controlledSearchValue : internalSearchValue;
-    const handleOpenChange = (newOpen) => {
-        if (disabled)
-            return;
-        if (!isControlled) {
-            setInternalOpen(newOpen);
-        }
-        onOpenChange?.(newOpen);
-    };
-    const handleSearchChange = (value) => {
-        if (!isControlled) {
-            setInternalSearchValue(value);
-        }
-        onSearchChange?.(value);
-        setSelectedIndex(0);
-    };
-    const handleKeyDown = (event) => {
-        if (disabled)
-            return;
-        const items = listRef.current?.querySelectorAll('[data-command-item]');
-        const itemCount = items?.length || 0;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                setSelectedIndex((prev) => (prev + 1) % itemCount);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                setSelectedIndex((prev) => (prev - 1 + itemCount) % itemCount);
-                break;
-            case 'Enter':
-                event.preventDefault();
-                const selectedItem = items?.[selectedIndex];
-                selectedItem?.click();
-                break;
-            case 'Escape':
-                event.preventDefault();
-                handleOpenChange(false);
-                break;
-        }
-    };
-    React.useEffect(() => {
-        if (isOpen) {
-            inputRef.current?.focus();
-            setSelectedIndex(0);
-        }
-    }, [isOpen]);
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                handleOpenChange(!isOpen);
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isOpen]);
-    React.useEffect(() => {
-        const selectedItem = listRef.current?.querySelector(`[data-command-item]:nth-child(${selectedIndex + 1})`);
-        selectedItem?.scrollIntoView({ block: 'nearest' });
-    }, [selectedIndex]);
-    return (_jsx("div", { ref: ref, className: cn("relative", className), ...props, children: isOpen && (_jsx("div", { ref: commandRef, className: cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", // 50% 투명도
-            "flex items-start justify-center pt-16" // 64px 상단 여백
-            ), onClick: () => handleOpenChange(false), children: _jsxs("div", { className: cn("w-full max-w-2xl mx-4 bg-white dark:bg-gray-800 rounded-lg shadow-2xl", // 보더 대신 섀도우
-                "border-0 overflow-hidden" // 보더 제거
-                ), onClick: (e) => e.stopPropagation(), style: {
-                    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
-                }, children: [_jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700", children: [" ", _jsx("input", { ref: inputRef, type: "text", placeholder: placeholder, value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: handleKeyDown, className: cn("w-full bg-transparent text-lg font-medium outline-none", // 18px 텍스트
-                                "placeholder:text-gray-500 dark:placeholder:text-gray-400", "text-gray-900 dark:text-gray-100") })] }), _jsx("div", { ref: listRef, className: "max-h-96 overflow-y-auto py-2" // 384px 최대 높이, 8px 패딩
-                        , children: React.Children.map(children, (child, index) => {
-                            if (React.isValidElement(child)) {
-                                return React.cloneElement(child, {
-                                    selected: index === selectedIndex,
-                                    onSelect: () => {
-                                        child.props?.onSelect?.();
-                                        handleOpenChange(false);
-                                    }
-                                });
-                            }
-                            return child;
-                        }) })] }) })) }));
-});
-Command.displayName = "Command";
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsx("input", { ref: ref, className: cn("flex h-10 w-full rounded-md bg-transparent px-3 py-2 text-sm outline-none", // 40px 높이, 12px, 8px 패딩
-    "placeholder:text-gray-500 dark:placeholder:text-gray-400", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
-CommandInput.displayName = "CommandInput";
-const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("max-h-96 overflow-y-auto py-2", className), ...props })));
-CommandList.displayName = "CommandList";
-const CommandItem = React.forwardRef(({ className, icon, selected = false, onSelect, children, ...props }, ref) => {
-    return (_jsxs("button", { ref: ref, "data-command-item": true, className: cn("relative flex w-full items-center gap-3 rounded-sm px-4 py-3 text-sm", // 16px, 12px 패딩
-        "text-gray-700 dark:text-gray-300", "hover:bg-gray-100 dark:hover:bg-gray-700", "focus:bg-gray-100 dark:focus:bg-gray-700", "focus:outline-none", selected && "bg-gray-100 dark:bg-gray-700", "transition-colors", className), onClick: onSelect, ...props, children: [icon && (_jsx("div", { className: "flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400", children: icon })), _jsx("span", { className: "flex-1 text-left", children: children })] }));
-});
-CommandItem.displayName = "CommandItem";
-const CommandGroup = React.forwardRef(({ className, heading, children, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("py-2", className), ...props, children: [" ", heading && (_jsxs("div", { className: "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide", children: [" ", heading] })), _jsxs("div", { className: "space-y-1", children: [" ", children] })] })));
-CommandGroup.displayName = "CommandGroup";
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("h-px bg-gray-200 dark:bg-gray-700 my-2", className), ...props })));
-CommandSeparator.displayName = "CommandSeparator";
-const CommandEmpty = React.forwardRef(({ className, children = "결과가 없습니다.", ...props }, ref) => (_jsx("div", { ref: ref, className: cn("py-8 text-center text-sm text-gray-500 dark:text-gray-400", // 32px 패딩
-    className), ...props, children: children })));
-CommandEmpty.displayName = "CommandEmpty";
-// 편의 컴포넌트들
-export const CommandDialog = React.forwardRef(({ className, ...props }, ref) => (_jsx(Command, { ref: ref, className: className, ...props })));
-CommandDialog.displayName = "CommandDialog";
-export { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandSeparator, CommandEmpty };

package/dist/components/ConfirmModal.js

@@ -1,53 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Modal } from "./Modal";
-import { Button } from "./Button";
-const ConfirmModal = React.forwardRef(({ isOpen, onClose, onConfirm, title, message, warning, confirmText = "확인", cancelText = "취소", confirmButtonText, type = "danger", loading = false, disabled = false, showInput = false, inputValue = "", onInputChange, inputPlaceholder, inputLabel, requiredInputValue, showCancel = true, size = "md" }, ref) => {
-    // 타입별 아이콘과 색상
-    const typeConfig = {
-        danger: {
-            icon: (_jsx("svg", { className: "h-6 w-6 text-red-600 dark:text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) })),
-            bgColor: "bg-red-100 dark:bg-red-900/20",
-            buttonColor: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
-            textColor: "text-red-600 dark:text-red-400"
-        },
-        warning: {
-            icon: (_jsx("svg", { className: "h-6 w-6 text-yellow-600 dark:text-yellow-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) })),
-            bgColor: "bg-yellow-100 dark:bg-yellow-900/20",
-            buttonColor: "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500",
-            textColor: "text-yellow-600 dark:text-yellow-400"
-        },
-        info: {
-            icon: (_jsx("svg", { className: "h-6 w-6 text-blue-600 dark:text-blue-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })),
-            bgColor: "bg-blue-100 dark:bg-blue-900/20",
-            buttonColor: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
-            textColor: "text-blue-600 dark:text-blue-400"
-        },
-        success: {
-            icon: (_jsx("svg", { className: "h-6 w-6 text-green-600 dark:text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })),
-            bgColor: "bg-green-100 dark:bg-green-900/20",
-            buttonColor: "bg-green-600 hover:bg-green-700 focus:ring-green-500",
-            textColor: "text-green-600 dark:text-green-400"
-        },
-        error: {
-            icon: (_jsx("svg", { className: "h-6 w-6 text-red-600 dark:text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })),
-            bgColor: "bg-red-100 dark:bg-red-900/20",
-            buttonColor: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
-            textColor: "text-red-600 dark:text-red-400"
-        }
-    };
-    const config = typeConfig[type];
-    const isInputValid = !showInput || !requiredInputValue || inputValue === requiredInputValue;
-    const isDisabled = disabled || loading || !isInputValid;
-    return (_jsx(Modal, { ref: ref, isOpen: isOpen, onClose: onClose, showCloseButton: false, size: size, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: cn("mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-6", // 64px 아이콘, 24px 여백
-                    config.bgColor), children: config.icon }), _jsxs("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: [" ", title] }), _jsxs("div", { className: "mb-6", children: [" ", _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: message }), warning && (_jsx("p", { className: cn("text-sm mt-3 font-medium", // 12px 여백
-                            config.textColor), children: warning }))] }), showInput && (_jsxs("div", { className: "mb-6", children: [" ", _jsxs("label", { htmlFor: "confirmInput", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 text-left", children: [" ", inputLabel] }), _jsx("input", { type: "text", id: "confirmInput", value: inputValue, onChange: (e) => onInputChange?.(e.target.value), placeholder: inputPlaceholder, className: "w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-colors" // 16px, 12px 패딩
-                         })] })), _jsxs("div", { className: cn("flex gap-3", // 12px 간격
-                    showCancel ? "justify-center" : "justify-center"), children: [showCancel && (_jsx(Button, { variant: "outline", onClick: onClose, disabled: loading, className: "px-6 py-3" // 24px, 12px 패딩
-                            , children: cancelText })), _jsx(Button, { variant: "default", onClick: onConfirm, disabled: isDisabled, className: cn("px-6 py-3", // 24px, 12px 패딩
-                            config.buttonColor), children: loading ? (_jsxs("div", { className: "flex items-center", children: [_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "\uCC98\uB9AC \uC911..."] })) : (confirmButtonText || confirmText) })] })] }) }));
-});
-ConfirmModal.displayName = "ConfirmModal";
-export { ConfirmModal };

package/dist/components/Container.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "../lib/utils";
-const Container = React.forwardRef(({ className, size = "lg", padding = "md", centered = true, fluid = false, ...props }, ref) => {
-    const sizeClasses = {
-        sm: "max-w-2xl", // 672px
-        md: "max-w-4xl", // 896px
-        lg: "max-w-6xl", // 1152px
-        xl: "max-w-7xl", // 1280px
-        full: "max-w-full"
-    };
-    const paddingClasses = {
-        none: "",
-        sm: "px-4 py-8", // 16px 좌우, 32px 상하
-        md: "px-6 py-12", // 24px 좌우, 48px 상하
-        lg: "px-8 py-16", // 32px 좌우, 64px 상하
-        xl: "px-12 py-20" // 48px 좌우, 80px 상하
-    };
-    return (_jsx("div", { ref: ref, className: cn("w-full", !fluid && sizeClasses[size], paddingClasses[padding], centered && "mx-auto", className), ...props }));
-});
-Container.displayName = "Container";
-export { Container };

package/dist/components/ContextMenu.js

@@ -1,110 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const ContextMenu = React.forwardRef(({ className, children, open: controlledOpen, onOpenChange, trigger, placement = "bottom", align = "start", offset = 8, disabled = false, ...props }, ref) => {
-    const [internalOpen, setInternalOpen] = React.useState(false);
-    const [coords, setCoords] = React.useState({ x: 0, y: 0 });
-    const triggerRef = React.useRef(null);
-    const menuRef = React.useRef(null);
-    const isControlled = controlledOpen !== undefined;
-    const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = (newOpen) => {
-        if (disabled)
-            return;
-        if (!isControlled) {
-            setInternalOpen(newOpen);
-        }
-        onOpenChange?.(newOpen);
-    };
-    const handleContextMenu = (event) => {
-        event.preventDefault();
-        if (disabled)
-            return;
-        const rect = event.currentTarget.getBoundingClientRect();
-        const x = event.clientX;
-        const y = event.clientY;
-        setCoords({ x, y });
-        handleOpenChange(true);
-    };
-    const updatePosition = React.useCallback(() => {
-        if (!menuRef.current)
-            return;
-        const menuRect = menuRef.current.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        let x = coords.x;
-        let y = coords.y;
-        // 뷰포트 경계 확인 및 조정
-        if (x + menuRect.width > viewportWidth - 8) {
-            x = viewportWidth - menuRect.width - 8; // 8px 여백
-        }
-        if (y + menuRect.height > viewportHeight - 8) {
-            y = viewportHeight - menuRect.height - 8; // 8px 여백
-        }
-        if (x < 8)
-            x = 8; // 8px 여백
-        if (y < 8)
-            y = 8; // 8px 여백
-        setCoords({ x, y });
-    }, [coords.x, coords.y]);
-    React.useEffect(() => {
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener('resize', updatePosition);
-            window.addEventListener('scroll', updatePosition);
-            return () => {
-                window.removeEventListener('resize', updatePosition);
-                window.removeEventListener('scroll', updatePosition);
-            };
-        }
-    }, [isOpen, updatePosition]);
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (triggerRef.current &&
-                menuRef.current &&
-                !triggerRef.current.contains(event.target) &&
-                !menuRef.current.contains(event.target)) {
-                handleOpenChange(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }
-    }, [isOpen]);
-    return (_jsxs("div", { ref: ref, className: cn("relative", className), ...props, children: [trigger && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, className: "inline-block", children: trigger })), isOpen && (_jsx("div", { ref: menuRef, className: cn("fixed z-50 bg-white dark:bg-gray-800 rounded-lg shadow-xl backdrop-blur-sm", // 보더 대신 섀도우 사용
-                "min-w-[200px] py-2", // 16px 패딩
-                "border-0" // 보더 제거
-                ), style: {
-                    left: coords.x,
-                    top: coords.y,
-                    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-                }, children: children }))] }));
-});
-ContextMenu.displayName = "ContextMenu";
-const ContextMenuItem = React.forwardRef(({ className, icon, variant = "default", children, disabled, ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "destructive":
-                return "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20";
-            case "disabled":
-                return "text-gray-400 dark:text-gray-500 cursor-not-allowed";
-            default:
-                return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700";
-        }
-    };
-    return (_jsxs("button", { ref: ref, className: cn("w-full flex items-center gap-3 px-4 py-3 text-sm font-medium transition-colors focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700", // 16px, 12px 패딩
-        getVariantClasses(), className), disabled: disabled || variant === "disabled", ...props, children: [icon && (_jsx("div", { className: "flex-shrink-0 w-4 h-4", children: icon })), _jsx("span", { className: "flex-1 text-left", children: children })] }));
-});
-ContextMenuItem.displayName = "ContextMenuItem";
-const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("h-px bg-gray-200 dark:bg-gray-700 my-2", className), ...props })));
-ContextMenuSeparator.displayName = "ContextMenuSeparator";
-const ContextMenuLabel = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide", className), ...props, children: children })));
-ContextMenuLabel.displayName = "ContextMenuLabel";
-// 편의 컴포넌트들
-const ContextMenuGroup = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("py-1", className), ...props, children: children })));
-ContextMenuGroup.displayName = "ContextMenuGroup";
-export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup };

package/dist/components/Divider.js

@@ -1,39 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Divider = React.forwardRef(({ className, orientation = "horizontal", variant = "solid", size = "md", spacing = "md", color = "default", ...props }, ref) => {
-    const orientationClasses = {
-        horizontal: "w-full",
-        vertical: "h-full w-px"
-    };
-    const sizeClasses = {
-        sm: orientation === "horizontal" ? "h-px" : "w-px",
-        md: orientation === "horizontal" ? "h-0.5" : "w-0.5", // 2px
-        lg: orientation === "horizontal" ? "h-1" : "w-1" // 4px
-    };
-    const variantClasses = {
-        solid: "",
-        dashed: "border-dashed",
-        dotted: "border-dotted",
-        gradient: orientation === "horizontal"
-            ? "bg-gradient-to-r from-transparent via-gray-300 to-transparent dark:via-gray-600"
-            : "bg-gradient-to-b from-transparent via-gray-300 to-transparent dark:via-gray-600"
-    };
-    const colorClasses = {
-        default: "bg-gray-200 dark:bg-gray-700",
-        muted: "bg-gray-100 dark:bg-gray-800",
-        primary: "bg-blue-200 dark:bg-blue-700",
-        secondary: "bg-gray-300 dark:bg-gray-600"
-    };
-    const spacingClasses = {
-        none: "",
-        sm: orientation === "horizontal" ? "my-4" : "mx-4", // 16px
-        md: orientation === "horizontal" ? "my-6" : "mx-6", // 24px
-        lg: orientation === "horizontal" ? "my-8" : "mx-8", // 32px
-        xl: orientation === "horizontal" ? "my-12" : "mx-12" // 48px
-    };
-    return (_jsx("div", { ref: ref, className: cn("flex-shrink-0", orientationClasses[orientation], sizeClasses[size], variant === "gradient" ? variantClasses[variant] : colorClasses[color], variant !== "gradient" && variantClasses[variant], spacingClasses[spacing], className), ...props }));
-});
-Divider.displayName = "Divider";
-export { Divider };

package/dist/components/Drawer.js

@@ -1,79 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-const Drawer = React.forwardRef(({ open, onOpenChange, children, className, side = "right", size = "md", showBackdrop = true, closeOnBackdropClick = true, closeOnEscape = true, ...props }, ref) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [isAnimating, setIsAnimating] = React.useState(false);
-    React.useEffect(() => {
-        if (open) {
-            setIsVisible(true);
-            setIsAnimating(true);
-            // 애니메이션 시작을 위한 지연
-            const timer = setTimeout(() => setIsAnimating(false), 50);
-            return () => clearTimeout(timer);
-        }
-        else {
-            setIsAnimating(true);
-            const timer = setTimeout(() => {
-                setIsVisible(false);
-                setIsAnimating(false);
-            }, 300); // 애니메이션 완료 후 숨김
-            return () => clearTimeout(timer);
-        }
-    }, [open]);
-    React.useEffect(() => {
-        if (!closeOnEscape)
-            return;
-        const handleEscape = (e) => {
-            if (e.key === "Escape" && open) {
-                onOpenChange(false);
-            }
-        };
-        if (open) {
-            document.addEventListener("keydown", handleEscape);
-            document.body.style.overflow = "hidden";
-        }
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-            document.body.style.overflow = "";
-        };
-    }, [open, closeOnEscape, onOpenChange]);
-    if (!isVisible)
-        return null;
-    const sizeClasses = {
-        sm: side === "left" || side === "right" ? "w-80" : "h-64",
-        md: side === "left" || side === "right" ? "w-96" : "h-96",
-        lg: side === "left" || side === "right" ? "w-[28rem]" : "h-[32rem]",
-        xl: side === "left" || side === "right" ? "w-[32rem]" : "h-[40rem]",
-        full: side === "left" || side === "right" ? "w-full" : "h-full"
-    };
-    const sideClasses = {
-        left: "left-0 top-0 h-full translate-x-0",
-        right: "right-0 top-0 h-full translate-x-0",
-        top: "top-0 left-0 w-full translate-y-0",
-        bottom: "bottom-0 left-0 w-full translate-y-0"
-    };
-    const transformClasses = {
-        left: isAnimating ? (open ? "translate-x-0" : "-translate-x-full") : "",
-        right: isAnimating ? (open ? "translate-x-0" : "translate-x-full") : "",
-        top: isAnimating ? (open ? "translate-y-0" : "-translate-y-full") : "",
-        bottom: isAnimating ? (open ? "translate-y-0" : "translate-y-full") : ""
-    };
-    return (_jsxs("div", { className: "fixed inset-0 z-50", children: [showBackdrop && (_jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isAnimating ? (open ? "opacity-100" : "opacity-0") : ""), onClick: closeOnBackdropClick ? () => onOpenChange(false) : undefined })), _jsx("div", { ref: ref, className: cn("absolute bg-white/95 dark:!bg-gray-800/95 backdrop-blur-xl border border-gray-200/50 dark:!border-gray-600/50 shadow-2xl transition-transform duration-300 ease-out", sizeClasses[size], sideClasses[side], transformClasses[side], className), ...props, children: children })] }));
-});
-Drawer.displayName = "Drawer";
-const DrawerHeader = React.forwardRef(({ children, className, showCloseButton = true, onClose, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("flex items-center justify-between p-6 border-b border-gray-200/50 dark:border-gray-700/50", className), ...props, children: [_jsx("div", { className: "flex-1", children: children }), showCloseButton && (_jsx("button", { onClick: onClose, className: "p-2 rounded-lg hover:bg-gray-100/80 dark:hover:bg-gray-800/80 transition-colors", children: _jsx(Icon, { name: "x", size: 20 }) }))] }));
-});
-DrawerHeader.displayName = "DrawerHeader";
-const DrawerContent = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex-1 p-6 overflow-y-auto", className), ...props, children: children }));
-});
-DrawerContent.displayName = "DrawerContent";
-const DrawerFooter = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-end gap-3 p-6 border-t border-gray-200/50 dark:border-gray-700/50", className), ...props, children: children }));
-});
-DrawerFooter.displayName = "DrawerFooter";
-export { Drawer, DrawerHeader, DrawerContent, DrawerFooter };

package/dist/components/Dropdown.js

@@ -1,174 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Dropdown = React.forwardRef(({ className, trigger, children, open: controlledOpen, onOpenChange, placement = "bottom", align = "start", offset = 8, disabled = false, showArrow = true, ...props }, ref) => {
-    const [internalOpen, setInternalOpen] = React.useState(false);
-    const [coords, setCoords] = React.useState({ x: 0, y: 0 });
-    const triggerRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
-    const isControlled = controlledOpen !== undefined;
-    const isOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = (newOpen) => {
-        if (disabled)
-            return;
-        if (!isControlled) {
-            setInternalOpen(newOpen);
-        }
-        onOpenChange?.(newOpen);
-    };
-    const handleTriggerClick = () => {
-        handleOpenChange(!isOpen);
-    };
-    const updatePosition = React.useCallback(() => {
-        if (!triggerRef.current || !dropdownRef.current)
-            return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const dropdownRect = dropdownRef.current.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        let x = 0;
-        let y = 0;
-        // 기본 위치 계산
-        switch (placement) {
-            case "top":
-                x = triggerRect.left;
-                y = triggerRect.top - offset;
-                break;
-            case "bottom":
-                x = triggerRect.left;
-                y = triggerRect.bottom + offset;
-                break;
-            case "left":
-                x = triggerRect.left - offset;
-                y = triggerRect.top;
-                break;
-            case "right":
-                x = triggerRect.right + offset;
-                y = triggerRect.top;
-                break;
-        }
-        // 정렬 조정
-        switch (align) {
-            case "center":
-                if (placement === "top" || placement === "bottom") {
-                    x = triggerRect.left + triggerRect.width / 2 - dropdownRect.width / 2;
-                }
-                else {
-                    y = triggerRect.top + triggerRect.height / 2 - dropdownRect.height / 2;
-                }
-                break;
-            case "end":
-                if (placement === "top" || placement === "bottom") {
-                    x = triggerRect.right - dropdownRect.width;
-                }
-                else {
-                    y = triggerRect.bottom - dropdownRect.height;
-                }
-                break;
-            case "start":
-            default:
-                // 기본값은 이미 start 정렬
-                break;
-        }
-        // 뷰포트 경계 확인 및 조정
-        if (x < 8)
-            x = 8; // 8px 여백
-        if (x + dropdownRect.width > viewportWidth - 8) {
-            x = viewportWidth - dropdownRect.width - 8; // 8px 여백
-        }
-        if (y < 8)
-            y = 8; // 8px 여백
-        if (y + dropdownRect.height > viewportHeight - 8) {
-            y = viewportHeight - dropdownRect.height - 8; // 8px 여백
-        }
-        setCoords({ x, y });
-    }, [placement, align, offset]);
-    React.useEffect(() => {
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener('resize', updatePosition);
-            window.addEventListener('scroll', updatePosition);
-            return () => {
-                window.removeEventListener('resize', updatePosition);
-                window.removeEventListener('scroll', updatePosition);
-            };
-        }
-    }, [isOpen, updatePosition]);
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (triggerRef.current &&
-                dropdownRef.current &&
-                !triggerRef.current.contains(event.target) &&
-                !dropdownRef.current.contains(event.target)) {
-                handleOpenChange(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }
-    }, [isOpen]);
-    const getPlacementClasses = () => {
-        switch (placement) {
-            case "top":
-                return "bottom-full left-0 mb-2"; // 8px 간격
-            case "bottom":
-                return "top-full left-0 mt-2"; // 8px 간격
-            case "left":
-                return "right-full top-0 mr-2"; // 8px 간격
-            case "right":
-                return "left-full top-0 ml-2"; // 8px 간격
-            default:
-                return "top-full left-0 mt-2";
-        }
-    };
-    const getArrowClasses = () => {
-        switch (placement) {
-            case "top":
-                return "top-full left-4 -translate-x-1/2 border-t-gray-100 dark:border-t-gray-800";
-            case "bottom":
-                return "bottom-full left-4 -translate-x-1/2 border-b-gray-100 dark:border-b-gray-800";
-            case "left":
-                return "left-full top-4 -translate-y-1/2 border-l-gray-100 dark:border-l-gray-800";
-            case "right":
-                return "right-full top-4 -translate-y-1/2 border-r-gray-100 dark:border-r-gray-800";
-            default:
-                return "bottom-full left-4 -translate-x-1/2 border-b-gray-100 dark:border-b-gray-800";
-        }
-    };
-    return (_jsxs("div", { ref: ref, className: cn("relative", className), ...props, children: [_jsx("div", { ref: triggerRef, onClick: handleTriggerClick, className: "inline-block cursor-pointer", children: trigger }), isOpen && (_jsxs("div", { ref: dropdownRef, className: cn("absolute z-50 bg-white dark:bg-gray-800 rounded-lg shadow-xl backdrop-blur-sm", // 보더 대신 섀도우 사용
-                "min-w-[200px] py-2", // 16px 패딩
-                getPlacementClasses()), style: {
-                    transform: `translate(${coords.x}px, ${coords.y}px)`,
-                    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-                }, children: [showArrow && (_jsx("div", { className: cn("absolute w-0 h-0 border-4 border-transparent", getArrowClasses()) })), _jsx("div", { className: "relative z-10", children: children })] }))] }));
-});
-Dropdown.displayName = "Dropdown";
-const DropdownItem = React.forwardRef(({ className, icon, variant = "default", children, disabled, ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "destructive":
-                return "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20";
-            case "disabled":
-                return "text-gray-400 dark:text-gray-500 cursor-not-allowed";
-            default:
-                return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700";
-        }
-    };
-    return (_jsxs("button", { ref: ref, className: cn("w-full flex items-center gap-3 px-4 py-3 text-sm font-medium transition-colors focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700", // 16px, 12px 패딩
-        getVariantClasses(), className), disabled: disabled || variant === "disabled", ...props, children: [icon && (_jsx("div", { className: "flex-shrink-0 w-4 h-4", children: icon })), _jsx("span", { className: "flex-1 text-left", children: children })] }));
-});
-DropdownItem.displayName = "DropdownItem";
-const DropdownSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("h-px bg-gray-200 dark:bg-gray-700 my-2", className), ...props })));
-DropdownSeparator.displayName = "DropdownSeparator";
-const DropdownLabel = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide", className), ...props, children: children })));
-DropdownLabel.displayName = "DropdownLabel";
-// 편의 컴포넌트들
-const DropdownMenu = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("py-1", className), ...props, children: children })));
-DropdownMenu.displayName = "DropdownMenu";
-const DropdownGroup = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("space-y-1", className), ...props, children: children })));
-DropdownGroup.displayName = "DropdownGroup";
-export { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel, DropdownMenu, DropdownGroup };