@hua-labs/ui 1.0.0

package/dist/components/LanguageToggle.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const LanguageToggle = React.forwardRef(({ className, size = "md", variant = "button", showLabel = false, languages = [
+    { code: "ko", name: "한국어", flag: "🇰🇷" },
+    { code: "en", name: "English", flag: "🇺🇸" },
+    { code: "ja", name: "日本語", flag: "🇯🇵" },
+    { code: "zh", name: "中文", flag: "🇨🇳" }
+], currentLanguage = "ko", onLanguageChange, ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    const currentLang = languages.find(lang => lang.code === currentLanguage) || languages[0];
+    const sizeClasses = {
+        sm: "h-10 w-10", // 40px - 더 넉넉한 크기
+        md: "h-12 w-12", // 48px - 더 넉넉한 크기
+        lg: "h-14 w-14" // 56px - 더 넉넉한 크기
+    };
+    const iconSizes = {
+        sm: 16,
+        md: 20,
+        lg: 24
+    };
+    // 외부 클릭 시 드롭다운 닫기
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleLanguageChange = (languageCode) => {
+        onLanguageChange?.(languageCode);
+        setIsOpen(false);
+    };
+    const renderIcon = () => (_jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "text-lg", children: currentLang.flag }) }));
+    if (variant === "icon") {
+        return (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn("inline-flex items-center justify-center rounded-lg transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2", sizeClasses[size], className), ...props, children: renderIcon() }), isOpen && (_jsx("div", { className: "absolute top-full right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50", children: languages.map((language) => (_jsxs("button", { onClick: () => handleLanguageChange(language.code), className: cn("w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-center gap-3", // 16px, 12px 패딩, 12px 간격
+                        currentLanguage === language.code && "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"), children: [_jsx("span", { className: "text-lg", children: language.flag }), _jsx("span", { className: "text-sm font-medium", children: language.name })] }, language.code))) }))] }));
+    }
+    if (variant === "dropdown") {
+        return (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsxs("button", { onClick: () => setIsOpen(!isOpen), className: cn("inline-flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2", // 12px 간격, 16px, 12px 패딩
+                    className), ...props, children: [_jsx("span", { className: "text-lg", children: currentLang.flag }), showLabel && _jsx("span", { children: currentLang.name }), _jsx("svg", { className: cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-180"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && (_jsx("div", { className: "absolute top-full right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50", children: languages.map((language) => (_jsxs("button", { onClick: () => handleLanguageChange(language.code), className: cn("w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-center gap-3", // 16px, 12px 패딩, 12px 간격
+                        currentLanguage === language.code && "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"), children: [_jsx("span", { className: "text-lg", children: language.flag }), _jsx("span", { className: "text-sm font-medium", children: language.name })] }, language.code))) }))] }));
+    }
+    // 기본 버튼 형태
+    return (_jsxs("button", { onClick: () => {
+            const currentIndex = languages.findIndex(lang => lang.code === currentLanguage);
+            const nextIndex = (currentIndex + 1) % languages.length;
+            onLanguageChange?.(languages[nextIndex].code);
+        }, className: cn("inline-flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2", // 12px 간격, 16px, 12px 패딩
+        className), ...props, children: [_jsx("span", { className: "text-lg", children: currentLang.flag }), showLabel && _jsx("span", { children: currentLang.name })] }));
+});
+LanguageToggle.displayName = "LanguageToggle";
+export { LanguageToggle };

package/dist/components/LoadingSpinner.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "xl";
+    variant?: "default" | "dots" | "bars" | "ring" | "ripple";
+    text?: string;
+    color?: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+}
+declare const LoadingSpinner: React.ForwardRefExoticComponent<LoadingSpinnerProps & React.RefAttributes<HTMLDivElement>>;
+export { LoadingSpinner };
+//# sourceMappingURL=LoadingSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;CAC9E;AAED,QAAA,MAAM,cAAc,4FAsFnB,CAAA;AAGD,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/LoadingSpinner.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const LoadingSpinner = React.forwardRef(({ className, size = "md", variant = "default", text, color = "default", ...props }, ref) => {
+    const sizeClasses = {
+        sm: "w-6 h-6", // 24px - 더 넉넉한 크기
+        md: "w-8 h-8", // 32px - 더 넉넉한 크기
+        lg: "w-12 h-12", // 48px - 더 넉넉한 크기
+        xl: "w-16 h-16" // 64px - 더 넉넉한 크기
+    };
+    const colorClasses = {
+        default: "border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300",
+        primary: "border-blue-300 border-t-blue-600 dark:border-blue-600 dark:border-t-blue-300",
+        secondary: "border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300",
+        success: "border-green-300 border-t-green-600 dark:border-green-600 dark:border-t-green-300",
+        warning: "border-yellow-300 border-t-yellow-600 dark:border-yellow-600 dark:border-t-yellow-300",
+        error: "border-red-300 border-t-red-600 dark:border-red-600 dark:border-t-red-300"
+    };
+    const renderSpinner = () => {
+        switch (variant) {
+            case "dots":
+                return (_jsxs("div", { className: "flex space-x-1", children: [" ", _jsx("div", { className: "w-2 h-2 bg-current rounded-full animate-bounce" }), _jsx("div", { className: "w-2 h-2 bg-current rounded-full animate-bounce delay-100" }), _jsx("div", { className: "w-2 h-2 bg-current rounded-full animate-bounce delay-200" })] }));
+            case "bars":
+                return (_jsxs("div", { className: "flex space-x-1", children: [" ", _jsx("div", { className: "w-1 h-full bg-current animate-pulse" }), _jsx("div", { className: "w-1 h-full bg-current animate-pulse delay-100" }), _jsx("div", { className: "w-1 h-full bg-current animate-pulse delay-200" })] }));
+            case "ring":
+                return (_jsx("div", { className: cn("animate-spin rounded-full border-2", colorClasses[color]) }));
+            case "ripple":
+                return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("absolute inset-0 rounded-full border-2 animate-ping", colorClasses[color]) }), _jsx("div", { className: cn("rounded-full border-2", colorClasses[color]) })] }));
+            default:
+                return (_jsx("div", { className: cn("animate-spin rounded-full border-2", colorClasses[color]) }));
+        }
+    };
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-center justify-center", className), ...props, children: [_jsx("div", { className: cn(sizeClasses[size], "text-gray-600 dark:text-gray-400"), children: renderSpinner() }), text && (_jsxs("p", { className: "mt-3 text-sm text-gray-600 dark:text-gray-400 text-center", children: [" ", text] }))] }));
+});
+LoadingSpinner.displayName = "LoadingSpinner";
+export { LoadingSpinner };

package/dist/components/Menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+    active?: boolean;
+    disabled?: boolean;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface MenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+}
+declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "horizontal" | "vertical" | "compact";
+    size?: "sm" | "md" | "lg";
+}
+declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuHorizontal: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuVertical: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuCompact: React.ForwardRefExoticComponent<Omit<MenuProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export { Menu, MenuItem, MenuSeparator, MenuLabel };
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,IAAI,kFAsDT,CAAA;AAGD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ,yFA4Eb,CAAA;AAGD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAA;CAC5D;AAED,QAAA,MAAM,aAAa,2FAqBlB,CAAA;AAGD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAsCd,CAAA;AAID,eAAO,MAAM,cAAc,mGAI1B,CAAA;AAGD,eAAO,MAAM,YAAY,mGAIxB,CAAA;AAGD,eAAO,MAAM,WAAW,mGAIvB,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/Menu.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Menu = React.forwardRef(({ className, children, variant = "default", size = "md", ...props }, ref) => {
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "horizontal":
+                return "flex items-center space-x-1"; // 4px 간격
+            case "vertical":
+                return "flex flex-col space-y-1"; // 4px 간격
+            case "compact":
+                return "flex flex-col space-y-0.5"; // 2px 간격
+            default:
+                return "flex flex-col space-y-1"; // 4px 간격
+        }
+    };
+    const getSizeClasses = () => {
+        switch (size) {
+            case "sm":
+                return "text-sm";
+            case "lg":
+                return "text-base";
+            default:
+                return "text-sm";
+        }
+    };
+    return (_jsx("div", { ref: ref, className: cn(getVariantClasses(), getSizeClasses(), className), ...props, children: React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    variant,
+                    size
+                });
+            }
+            return child;
+        }) }));
+});
+Menu.displayName = "Menu";
+const MenuItem = React.forwardRef(({ className, icon, variant = "default", size = "md", active = false, disabled = false, children, ...props }, ref) => {
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "horizontal":
+                return cn("flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors", // 12px, 8px 패딩
+                active
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                    : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700");
+            case "vertical":
+                return cn("flex items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors", // 16px, 12px 패딩
+                active
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                    : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700");
+            case "compact":
+                return cn("flex items-center gap-2 px-2 py-1.5 rounded text-sm font-medium transition-colors", // 8px, 6px 패딩
+                active
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                    : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700");
+            default:
+                return cn("flex items-center gap-3 px-4 py-3 rounded-md text-sm font-medium transition-colors", // 16px, 12px 패딩
+                active
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                    : "text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700");
+        }
+    };
+    const getSizeClasses = () => {
+        switch (size) {
+            case "sm":
+                return "text-xs";
+            case "lg":
+                return "text-base";
+            default:
+                return "text-sm";
+        }
+    };
+    return (_jsxs("button", { ref: ref, className: cn(getVariantClasses(), getSizeClasses(), disabled && "opacity-50 cursor-not-allowed", className), disabled: 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 })] }));
+});
+MenuItem.displayName = "MenuItem";
+const MenuSeparator = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "horizontal":
+                return "w-px h-4 bg-gray-200 dark:bg-gray-700 mx-1"; // 4px 여백
+            case "vertical":
+            case "compact":
+            default:
+                return "h-px bg-gray-200 dark:bg-gray-700 my-2"; // 8px 여백
+        }
+    };
+    return (_jsx("div", { ref: ref, className: cn(getVariantClasses(), className), ...props }));
+});
+MenuSeparator.displayName = "MenuSeparator";
+const MenuLabel = React.forwardRef(({ className, variant = "default", size = "md", children, ...props }, ref) => {
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "horizontal":
+                return "px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"; // 12px, 4px 패딩
+            case "vertical":
+            case "compact":
+            default:
+                return "px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"; // 16px, 8px 패딩
+        }
+    };
+    const getSizeClasses = () => {
+        switch (size) {
+            case "sm":
+                return "text-xs";
+            case "lg":
+                return "text-sm";
+            default:
+                return "text-xs";
+        }
+    };
+    return (_jsx("div", { ref: ref, className: cn(getVariantClasses(), getSizeClasses(), className), ...props, children: children }));
+});
+MenuLabel.displayName = "MenuLabel";
+// 편의 컴포넌트들
+export const MenuHorizontal = React.forwardRef(({ className, ...props }, ref) => (_jsx(Menu, { ref: ref, variant: "horizontal", className: className, ...props })));
+MenuHorizontal.displayName = "MenuHorizontal";
+export const MenuVertical = React.forwardRef(({ className, ...props }, ref) => (_jsx(Menu, { ref: ref, variant: "vertical", className: className, ...props })));
+MenuVertical.displayName = "MenuVertical";
+export const MenuCompact = React.forwardRef(({ className, ...props }, ref) => (_jsx(Menu, { ref: ref, variant: "compact", className: className, ...props })));
+MenuCompact.displayName = "MenuCompact";
+export { Menu, MenuItem, MenuSeparator, MenuLabel };

package/dist/components/Modal.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    title?: string;
+    showBackdrop?: boolean;
+    centered?: boolean;
+}
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export { Modal };
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;IACxC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,mFAoIV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Modal.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/utils";
+const Modal = React.forwardRef(({ className, isOpen, onClose, children, size = "md", showCloseButton = true, closeOnOverlayClick = true, title, showBackdrop = true, centered = true, ...props }, ref) => {
+    const modalRef = React.useRef(null);
+    // ESC 키로 모달 닫기
+    React.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "unset";
+        };
+    }, [isOpen, onClose]);
+    // 모달 외부 클릭으로 닫기
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    // 모달 크기 클래스 (4의 배수, 8의 배수 스페이싱)
+    const sizeClasses = {
+        sm: "w-80 max-w-sm", // 320px
+        md: "w-96 max-w-md", // 384px
+        lg: "w-[500px] max-w-lg", // 500px
+        xl: "w-[600px] max-w-xl", // 600px
+        "2xl": "w-[800px] max-w-2xl" // 800px
+    };
+    if (!isOpen)
+        return null;
+    return createPortal(_jsxs("div", { ref: ref, className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", // 16px 패딩
+        centered ? "items-center" : "items-start pt-16", // 64px 상단 여백
+        className), onClick: handleOverlayClick, ...props, children: [showBackdrop && (_jsx("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-md transition-opacity duration-300" })), _jsxs("div", { ref: modalRef, className: cn("relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 mx-4 transform transition-all duration-300 ease-out overflow-hidden", sizeClasses[size]), style: {
+                    animation: "modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
+                }, children: [_jsx("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" }), _jsx("div", { className: "absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-blue-400/10 to-transparent rounded-full -translate-y-16 translate-x-16" }), _jsx("div", { className: "absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-tr from-purple-400/10 to-transparent rounded-full translate-y-12 -translate-x-12" }), title && (_jsxs("div", { className: "relative z-10 px-8 pt-8 pb-6 border-b border-gray-200/50 dark:border-gray-700/50", children: [" ", _jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title })] })), showCloseButton && (_jsx("button", { onClick: onClose, className: "absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-all duration-200 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-110 z-20" // 24px 여백
+                        , "aria-label": "\uB2EB\uAE30", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("div", { className: cn("relative z-10", title ? "px-8 py-8" : "p-8" // 32px 여백
+                        ), children: children })] }), _jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `
+            @keyframes modalSlideIn {
+              from {
+                opacity: 0;
+                transform: scale(0.95) translateY(20px);
+              }
+              to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+              }
+            }
+          `
+                } })] }), document.body);
+});
+Modal.displayName = "Modal";
+export { Modal };

package/dist/components/PageTransition.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface PageTransitionProps {
+    children: React.ReactNode;
+    className?: string;
+    duration?: number;
+    variant?: 'fade' | 'slide' | 'scale' | 'flip';
+    loadingVariant?: 'default' | 'rhythm' | 'flower' | 'heart' | 'star' | 'butterfly' | 'dots' | 'bars' | 'ring' | 'ripple';
+    loadingText?: string;
+    showLoading?: boolean;
+    onTransitionStart?: () => void;
+    onTransitionEnd?: () => void;
+}
+export declare const PageTransition: React.ForwardRefExoticComponent<PageTransitionProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FadeTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SlideTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScaleTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FlipTransition: React.ForwardRefExoticComponent<Omit<PageTransitionProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageTransition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTransition.d.ts","sourceRoot":"","sources":["../../src/components/PageTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7C,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IACvH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,eAAO,MAAM,cAAc,4FAoEzB,CAAA;AAKF,eAAO,MAAM,cAAc,6GAEzB,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,eAAe,6GAE1B,CAAA;AAEF,eAAO,MAAM,cAAc,6GAEzB,CAAA"}

package/dist/components/PageTransition.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { cn } from '../lib/utils';
+import { LoadingSpinner } from './LoadingSpinner';
+export const PageTransition = React.forwardRef(({ children, className, duration = 300, variant = 'fade', loadingVariant = 'butterfly', loadingText = '페이지 로딩 중...', showLoading = true, onTransitionStart, onTransitionEnd }, ref) => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+            setIsVisible(true);
+            onTransitionEnd?.();
+        }, duration);
+        onTransitionStart?.();
+        return () => clearTimeout(timer);
+    }, [duration, onTransitionStart, onTransitionEnd]);
+    const transitionClasses = {
+        fade: cn('transition-opacity duration-300 ease-in-out', isVisible ? 'opacity-100' : 'opacity-0'),
+        slide: cn('transition-transform duration-300 ease-in-out', isVisible ? 'translate-x-0' : 'translate-x-full'),
+        scale: cn('transition-all duration-300 ease-in-out', isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'),
+        flip: cn('transition-all duration-500 ease-in-out', isVisible ? 'rotate-y-0 opacity-100' : 'rotate-y-90 opacity-0')
+    };
+    if (isLoading && showLoading) {
+        return (_jsx("div", { className: cn('flex items-center justify-center min-h-screen', className), children: _jsx(LoadingSpinner, { size: "lg" }) }));
+    }
+    return (_jsx("div", { ref: ref, className: cn('w-full', transitionClasses[variant], className), style: { transitionDuration: `${duration}ms` }, children: children }));
+});
+PageTransition.displayName = 'PageTransition';
+// Convenience components for different transition types
+export const FadeTransition = React.forwardRef((props, ref) => (_jsx(PageTransition, { ref: ref, variant: "fade", ...props })));
+export const SlideTransition = React.forwardRef((props, ref) => (_jsx(PageTransition, { ref: ref, variant: "slide", ...props })));
+export const ScaleTransition = React.forwardRef((props, ref) => (_jsx(PageTransition, { ref: ref, variant: "scale", ...props })));
+export const FlipTransition = React.forwardRef((props, ref) => (_jsx(PageTransition, { ref: ref, variant: "flip", ...props })));
+// Add displayName for convenience components
+FadeTransition.displayName = 'FadeTransition';
+SlideTransition.displayName = 'SlideTransition';
+ScaleTransition.displayName = 'ScaleTransition';
+FlipTransition.displayName = 'FlipTransition';

package/dist/components/Pagination.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+    maxVisiblePages?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "outlined" | "minimal";
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PaginationOutlined: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PaginationMinimal: React.ForwardRefExoticComponent<Omit<PaginationProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const PaginationWithInfo: React.ForwardRefExoticComponent<PaginationProps & {
+    totalItems?: number;
+    itemsPerPage?: number;
+    showInfo?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Pagination };
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;CAC7C;AAED,QAAA,MAAM,UAAU,wFAyMf,CAAA;AAID,eAAO,MAAM,kBAAkB,yGAI9B,CAAA;AAGD,eAAO,MAAM,iBAAiB,yGAI7B,CAAA;AAID,eAAO,MAAM,kBAAkB;iBAChB,MAAM;mBACJ,MAAM;eACV,OAAO;wCAuBnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/Pagination.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Pagination = React.forwardRef(({ className, currentPage, totalPages, onPageChange, showFirstLast = true, showPrevNext = true, maxVisiblePages = 5, size = "md", variant = "default", ...props }, ref) => {
+    const getVisiblePages = () => {
+        const pages = [];
+        const halfVisible = Math.floor(maxVisiblePages / 2);
+        let start = Math.max(1, currentPage - halfVisible);
+        let end = Math.min(totalPages, currentPage + halfVisible);
+        // 조정
+        if (end - start + 1 < maxVisiblePages) {
+            if (start === 1) {
+                end = Math.min(totalPages, start + maxVisiblePages - 1);
+            }
+            else {
+                start = Math.max(1, end - maxVisiblePages + 1);
+            }
+        }
+        // 첫 페이지
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2) {
+                pages.push("...");
+            }
+        }
+        // 중간 페이지들
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        // 마지막 페이지
+        if (end < totalPages) {
+            if (end < totalPages - 1) {
+                pages.push("...");
+            }
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+    const getSizeClasses = () => {
+        switch (size) {
+            case "sm":
+                return "h-8 px-2 text-sm"; // 32px 높이, 8px 패딩
+            case "lg":
+                return "h-12 px-4 text-base"; // 48px 높이, 16px 패딩
+            default:
+                return "h-10 px-3 text-sm"; // 40px 높이, 12px 패딩
+        }
+    };
+    const getVariantClasses = (isActive = false) => {
+        switch (variant) {
+            case "outlined":
+                return cn("border border-gray-300 dark:border-gray-600", isActive
+                    ? "bg-blue-500 border-blue-500 text-white"
+                    : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700");
+            case "minimal":
+                return cn("border-0", isActive
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+                    : "bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700");
+            default:
+                return cn("border-0", isActive
+                    ? "bg-blue-500 text-white"
+                    : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700");
+        }
+    };
+    const handlePageClick = (page) => {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    const visiblePages = getVisiblePages();
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center justify-center space-x-1", className), ...props, children: [showFirstLast && currentPage > 1 && (_jsx("button", { onClick: () => handlePageClick(1), className: cn("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", getSizeClasses(), getVariantClasses()), "aria-label": "\uCCAB \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }) }) })), showPrevNext && currentPage > 1 && (_jsx("button", { onClick: () => handlePageClick(currentPage - 1), className: cn("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", getSizeClasses(), getVariantClasses()), "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) })), visiblePages.map((page, index) => (_jsx(React.Fragment, { children: page === "..." ? (_jsx("span", { className: cn("inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400", getSizeClasses()), children: "..." })) : (_jsx("button", { onClick: () => handlePageClick(page), className: cn("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", getSizeClasses(), getVariantClasses(page === currentPage)), "aria-label": `${page}페이지로 이동`, "aria-current": page === currentPage ? "page" : undefined, children: page })) }, index))), showPrevNext && currentPage < totalPages && (_jsx("button", { onClick: () => handlePageClick(currentPage + 1), className: cn("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", getSizeClasses(), getVariantClasses()), "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })), showFirstLast && currentPage < totalPages && (_jsx("button", { onClick: () => handlePageClick(totalPages), className: cn("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", getSizeClasses(), getVariantClasses()), "aria-label": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB85C \uC774\uB3D9", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) }) }))] }));
+});
+Pagination.displayName = "Pagination";
+// 편의 컴포넌트들
+export const PaginationOutlined = React.forwardRef(({ className, ...props }, ref) => (_jsx(Pagination, { ref: ref, variant: "outlined", className: className, ...props })));
+PaginationOutlined.displayName = "PaginationOutlined";
+export const PaginationMinimal = React.forwardRef(({ className, ...props }, ref) => (_jsx(Pagination, { ref: ref, variant: "minimal", className: className, ...props })));
+PaginationMinimal.displayName = "PaginationMinimal";
+// 복합 컴포넌트들
+export const PaginationWithInfo = React.forwardRef(({ totalItems = 0, itemsPerPage = 10, showInfo = true, className, ...props }, ref) => {
+    const startItem = (props.currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(props.currentPage * itemsPerPage, totalItems);
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col sm:flex-row items-center justify-between gap-4", className), children: [showInfo && totalItems > 0 && (_jsxs("div", { className: "text-sm text-gray-700 dark:text-gray-300", children: [startItem, "-", endItem, " / ", totalItems, "\uAC1C \uD56D\uBAA9"] })), _jsx(Pagination, { ...props })] }));
+});
+PaginationWithInfo.displayName = "PaginationWithInfo";
+export { Pagination };

package/dist/components/Popover.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    trigger: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    position?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    offset?: number;
+    disabled?: boolean;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Popover };
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,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,OAAO,qFA+MZ,CAAA;AAID,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,eAAO,MAAM,cAAc,6GAU1B,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}