@hua-labs/ui 1.0.0

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface ConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    warning?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmButtonText?: string;
+    type?: "danger" | "warning" | "info" | "success" | "error";
+    loading?: boolean;
+    disabled?: boolean;
+    showInput?: boolean;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    inputPlaceholder?: string;
+    inputLabel?: string;
+    requiredInputValue?: string;
+    showCancel?: boolean;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+}
+declare const ConfirmModal: React.ForwardRefExoticComponent<ConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
+export { ConfirmModal };
+//# sourceMappingURL=ConfirmModal.d.ts.map

package/dist/components/ConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;CACzC;AAED,QAAA,MAAM,YAAY,0FAkLjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ConfirmModal.js

@@ -0,0 +1,53 @@
+"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.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    centered?: boolean;
+    fluid?: boolean;
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+export { Container };
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/components/Container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,SAAS,uFAuCd,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Container.js

@@ -0,0 +1,23 @@
+"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.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+}
+declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive" | "disabled";
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup };
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/components/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/components/ContextMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,yFAmIhB,CAAA;AAGD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACzF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAA;CACjD;AAED,QAAA,MAAM,eAAe,gGAwCpB,CAAA;AAGD,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE1F,QAAA,MAAM,oBAAoB,kGAQzB,CAAA;AAGD,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEtF,QAAA,MAAM,gBAAgB,8FAUrB,CAAA;AAID,QAAA,MAAM,gBAAgB,6GAUrB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ContextMenu.js

@@ -0,0 +1,110 @@
+"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.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    variant?: "solid" | "dashed" | "dotted" | "gradient";
+    size?: "sm" | "md" | "lg";
+    spacing?: "none" | "sm" | "md" | "lg" | "xl";
+    color?: "default" | "muted" | "primary" | "secondary";
+}
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export { Divider };
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAA;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAA;CACtD;AAED,QAAA,MAAM,OAAO,qFA6DZ,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Divider.js

@@ -0,0 +1,39 @@
+"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.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    side?: "left" | "right" | "top" | "bottom";
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    showBackdrop?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+}
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { Drawer, DrawerHeader, DrawerContent, DrawerFooter };
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,WAAW;IACnB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IACzC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,MAAM,oFA2GX,CAAA;AAGD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,QAAA,MAAM,YAAY,0FAoBjB,CAAA;AAGD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,aAAa,2FAYlB,CAAA;AAGD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,YAAY,0FAYjB,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Drawer.js

@@ -0,0 +1,79 @@
+"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.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+    showArrow?: boolean;
+}
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "destructive" | "disabled";
+}
+declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DropdownSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DropdownSeparator: React.ForwardRefExoticComponent<DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface DropdownLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DropdownLabel: React.ForwardRefExoticComponent<DropdownLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Dropdown, DropdownItem, DropdownSeparator, DropdownLabel, DropdownMenu, DropdownGroup };
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC/C,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,QAAQ,sFA+Mb,CAAA;AAID,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAA;CACjD;AAED,QAAA,MAAM,YAAY,6FAwCjB,CAAA;AAGD,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEvF,QAAA,MAAM,iBAAiB,+FAQtB,CAAA;AAGD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEnF,QAAA,MAAM,aAAa,2FAUlB,CAAA;AAID,QAAA,MAAM,YAAY,6GAUjB,CAAA;AAGD,QAAA,MAAM,aAAa,6GAUlB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA"}