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

package/dist/components/Skeleton.js

@@ -1,71 +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 Skeleton = React.forwardRef(({ className, variant = "text", width, height, animation = "pulse", ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "circular":
-                return "rounded-full";
-            case "rounded":
-                return "rounded-lg";
-            case "rectangular":
-                return "rounded-none";
-            case "text":
-            default:
-                return "rounded";
-        }
-    };
-    const getAnimationClasses = () => {
-        switch (animation) {
-            case "wave":
-                return "animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] animate-shimmer";
-            case "shimmer":
-                return "bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] animate-shimmer";
-            case "pulse":
-            default:
-                return "animate-pulse bg-gray-200 dark:bg-gray-700";
-        }
-    };
-    const getDefaultDimensions = () => {
-        switch (variant) {
-            case "circular":
-                return { width: "40px", height: "40px" };
-            case "text":
-                return { width: "100%", height: "1em" };
-            case "rounded":
-                return { width: "100%", height: "200px" };
-            case "rectangular":
-                return { width: "100%", height: "200px" };
-            default:
-                return { width: "100%", height: "1em" };
-        }
-    };
-    const defaultDims = getDefaultDimensions();
-    const finalWidth = width || defaultDims.width;
-    const finalHeight = height || defaultDims.height;
-    return (_jsx("div", { ref: ref, className: cn("block", getVariantClasses(), getAnimationClasses(), className), style: {
-            width: typeof finalWidth === "number" ? `${finalWidth}px` : finalWidth,
-            height: typeof finalHeight === "number" ? `${finalHeight}px` : finalHeight,
-        }, ...props }));
-});
-Skeleton.displayName = "Skeleton";
-// 편의 컴포넌트들
-export const SkeletonText = React.forwardRef(({ className, ...props }, ref) => (_jsx(Skeleton, { ref: ref, variant: "text", className: className, ...props })));
-SkeletonText.displayName = "SkeletonText";
-export const SkeletonCircle = React.forwardRef(({ className, ...props }, ref) => (_jsx(Skeleton, { ref: ref, variant: "circular", className: className, ...props })));
-SkeletonCircle.displayName = "SkeletonCircle";
-export const SkeletonRectangle = React.forwardRef(({ className, ...props }, ref) => (_jsx(Skeleton, { ref: ref, variant: "rectangular", className: className, ...props })));
-SkeletonRectangle.displayName = "SkeletonRectangle";
-export const SkeletonRounded = React.forwardRef(({ className, ...props }, ref) => (_jsx(Skeleton, { ref: ref, variant: "rounded", className: className, ...props })));
-SkeletonRounded.displayName = "SkeletonRounded";
-// 복합 스켈레톤 컴포넌트들
-export const SkeletonCard = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("space-y-4 p-6", className), ...props, children: [_jsxs("div", { className: "flex items-center space-x-4", children: [" ", _jsx(SkeletonCircle, { className: "w-12 h-12" }), " ", _jsxs("div", { className: "space-y-2 flex-1", children: [" ", _jsx(SkeletonText, { className: "h-4 w-3/4" }), " ", _jsx(SkeletonText, { className: "h-3 w-1/2" }), " "] })] }), _jsx(SkeletonRounded, { className: "w-full h-32" }), " ", _jsxs("div", { className: "space-y-2", children: [" ", _jsx(SkeletonText, { className: "h-4 w-full" }), _jsx(SkeletonText, { className: "h-4 w-5/6" }), _jsx(SkeletonText, { className: "h-4 w-4/6" })] })] })));
-SkeletonCard.displayName = "SkeletonCard";
-export const SkeletonAvatar = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("flex items-center space-x-4", className), ...props, children: [_jsx(SkeletonCircle, { className: "w-12 h-12" }), " ", _jsxs("div", { className: "space-y-2 flex-1", children: [" ", _jsx(SkeletonText, { className: "h-4 w-3/4" }), _jsx(SkeletonText, { className: "h-3 w-1/2" })] })] })));
-SkeletonAvatar.displayName = "SkeletonAvatar";
-export const SkeletonList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("space-y-4", className), ...props, children: Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "flex items-center space-x-4", children: [" ", _jsx(SkeletonCircle, { className: "w-10 h-10" }), " ", _jsxs("div", { className: "space-y-2 flex-1", children: [" ", _jsx(SkeletonText, { className: "h-4 w-3/4" }), _jsx(SkeletonText, { className: "h-3 w-1/2" })] })] }, index))) })));
-SkeletonList.displayName = "SkeletonList";
-export const SkeletonTable = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsxs("div", { className: "flex space-x-4", children: [" ", _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" })] }), Array.from({ length: 5 }).map((_, index) => (_jsxs("div", { className: "flex space-x-4", children: [" ", _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" }), _jsx(SkeletonText, { className: "h-4 w-1/4" })] }, index)))] })));
-SkeletonTable.displayName = "SkeletonTable";
-export { Skeleton };

package/dist/components/Stack.js

@@ -1,34 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Stack = React.forwardRef(({ className, direction = "vertical", spacing = "md", align = "start", justify = "start", wrap = false, ...props }, ref) => {
-    const directionClasses = {
-        vertical: "flex flex-col",
-        horizontal: "flex flex-row"
-    };
-    const spacingClasses = {
-        none: "",
-        sm: direction === "vertical" ? "space-y-4" : "space-x-4", // 16px
-        md: direction === "vertical" ? "space-y-6" : "space-x-6", // 24px
-        lg: direction === "vertical" ? "space-y-8" : "space-x-8", // 32px
-        xl: direction === "vertical" ? "space-y-12" : "space-x-12" // 48px
-    };
-    const alignClasses = {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch"
-    };
-    const justifyClasses = {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between",
-        around: "justify-around",
-        evenly: "justify-evenly"
-    };
-    return (_jsx("div", { ref: ref, className: cn(directionClasses[direction], spacingClasses[spacing], alignClasses[align], justifyClasses[justify], wrap && "flex-wrap", className), ...props }));
-});
-Stack.displayName = "Stack";
-export { Stack };

package/dist/components/Switch.js

@@ -1,29 +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 Switch = React.forwardRef(({ className, variant = "default", size = "md", error = false, success = false, label, description, ...props }, ref) => {
-    const sizeClasses = {
-        sm: "w-8 h-4",
-        md: "w-11 h-6",
-        lg: "w-14 h-7"
-    };
-    const thumbSizes = {
-        sm: "w-3 h-3",
-        md: "w-5 h-5",
-        lg: "w-6 h-6"
-    };
-    const variantClasses = {
-        default: "bg-gray-200 peer-checked:bg-blue-600 dark:bg-gray-700 dark:peer-checked:bg-blue-500",
-        outline: "bg-transparent border-2 border-gray-300 peer-checked:border-blue-600 peer-checked:bg-blue-600 dark:border-gray-600 dark:peer-checked:border-blue-500 dark:peer-checked:bg-blue-500",
-        filled: "bg-gray-100 peer-checked:bg-blue-600 dark:bg-gray-800 dark:peer-checked:bg-blue-500"
-    };
-    const stateClasses = error
-        ? "bg-red-200 peer-checked:bg-red-600 dark:bg-red-800 dark:peer-checked:bg-red-500"
-        : success
-            ? "bg-green-200 peer-checked:bg-green-600 dark:bg-green-800 dark:peer-checked:bg-green-500"
-            : "";
-    return (_jsxs("div", { className: "flex items-start space-x-3", children: [_jsxs("div", { className: "relative", children: [_jsx("input", { type: "checkbox", className: cn("peer sr-only", className), ref: ref, ...props }), _jsx("div", { className: cn("relative inline-flex cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out", "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", sizeClasses[size], variantClasses[variant], stateClasses), children: _jsx("div", { className: cn("pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ease-in-out", "peer-checked:translate-x-full", thumbSizes[size], size === "sm" ? "translate-x-0.5 peer-checked:translate-x-4.5" : "", size === "md" ? "translate-x-0.5 peer-checked:translate-x-5.5" : "", size === "lg" ? "translate-x-0.5 peer-checked:translate-x-7" : "") }) })] }), (label || description) && (_jsxs("div", { className: "flex flex-col", children: [label && (_jsx("label", { className: "text-sm font-medium text-gray-900 dark:text-white cursor-pointer", children: label })), description && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: description }))] }))] }));
-});
-Switch.displayName = "Switch";
-export { Switch };

package/dist/components/Tabs.js

@@ -1,117 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Tabs = React.forwardRef(({ className, value, defaultValue, onValueChange, orientation = "horizontal", variant = "default", size = "md", children, ...props }, ref) => {
-    const [activeTab, setActiveTab] = React.useState(value || defaultValue || "");
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : activeTab;
-    const handleTabChange = (newValue) => {
-        if (!isControlled) {
-            setActiveTab(newValue);
-        }
-        onValueChange?.(newValue);
-    };
-    React.useEffect(() => {
-        if (value !== undefined) {
-            setActiveTab(value);
-        }
-    }, [value]);
-    return (_jsx("div", { ref: ref, className: cn("w-full", orientation === "vertical" && "flex", className), ...props, children: React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    value: currentValue,
-                    onValueChange: handleTabChange,
-                    orientation,
-                    variant,
-                    size
-                });
-            }
-            return child;
-        }) }));
-});
-Tabs.displayName = "Tabs";
-const TabsList = React.forwardRef(({ className, orientation = "horizontal", variant = "default", size = "md", children, ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "pills":
-                return "bg-gray-100 dark:bg-gray-800 p-1 rounded-lg"; // 4px 패딩
-            case "underline":
-                return "border-b border-gray-200 dark:border-gray-700";
-            case "cards":
-                return "bg-gray-50 dark:bg-gray-900 p-1 rounded-lg"; // 4px 패딩
-            default:
-                return "bg-gray-100 dark:bg-gray-800 p-1 rounded-lg"; // 4px 패딩
-        }
-    };
-    const getSizeClasses = () => {
-        switch (size) {
-            case "sm":
-                return "h-8"; // 32px 높이
-            case "lg":
-                return "h-12"; // 48px 높이
-            default:
-                return "h-10"; // 40px 높이
-        }
-    };
-    return (_jsx("div", { ref: ref, className: cn("inline-flex items-center justify-center", orientation === "vertical" && "flex-col", getVariantClasses(), getSizeClasses(), className), ...props, children: React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    orientation,
-                    variant,
-                    size
-                });
-            }
-            return child;
-        }) }));
-});
-TabsList.displayName = "TabsList";
-const TabsTrigger = React.forwardRef(({ className, value, orientation = "horizontal", variant = "default", size = "md", active = false, children, ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            case "pills":
-                return cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", active
-                    ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm"
-                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100");
-            case "underline":
-                return cn("inline-flex items-center justify-center whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", active
-                    ? "border-blue-500 text-blue-600 dark:text-blue-400"
-                    : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600");
-            case "cards":
-                return cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", active
-                    ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm border border-gray-200 dark:border-gray-700"
-                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100");
-            default:
-                return cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", active
-                    ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm"
-                    : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100");
-        }
-    };
-    const getSizeClasses = () => {
-        switch (size) {
-            case "sm":
-                return "h-6 px-2 py-1 text-xs"; // 24px 높이, 8px 패딩
-            case "lg":
-                return "h-10 px-4 py-2 text-base"; // 40px 높이, 16px 패딩
-            default:
-                return "h-8 px-3 py-1.5 text-sm"; // 32px 높이, 12px 패딩
-        }
-    };
-    return (_jsx("button", { ref: ref, className: cn(getVariantClasses(), getSizeClasses(), className), ...props, children: children }));
-});
-TabsTrigger.displayName = "TabsTrigger";
-const TabsContent = React.forwardRef(({ className, value, active = false, children, ...props }, ref) => {
-    if (!active)
-        return null;
-    return (_jsx("div", { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", // 8px 여백
-        className), ...props, children: children }));
-});
-TabsContent.displayName = "TabsContent";
-// 편의 컴포넌트들
-export const TabsPills = React.forwardRef(({ className, ...props }, ref) => (_jsx(Tabs, { ref: ref, variant: "pills", className: className, ...props })));
-TabsPills.displayName = "TabsPills";
-export const TabsUnderline = React.forwardRef(({ className, ...props }, ref) => (_jsx(Tabs, { ref: ref, variant: "underline", className: className, ...props })));
-TabsUnderline.displayName = "TabsUnderline";
-export const TabsCards = React.forwardRef(({ className, ...props }, ref) => (_jsx(Tabs, { ref: ref, variant: "cards", className: className, ...props })));
-TabsCards.displayName = "TabsCards";
-export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components/Textarea.js

@@ -1,31 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Textarea = React.forwardRef(({ className, variant = "default", size = "md", error = false, success = false, resize = "vertical", ...props }, ref) => {
-    const variantClasses = {
-        default: "border-gray-300 bg-white text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400",
-        outline: "border-2 border-gray-200 bg-transparent text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400",
-        filled: "border-transparent bg-gray-50 text-gray-900 placeholder-gray-500 focus:bg-white focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:bg-gray-800 dark:focus:border-blue-400 dark:focus:ring-blue-400",
-        ghost: "border-transparent bg-transparent text-gray-900 placeholder-gray-500 focus:bg-gray-50 focus:border-gray-300 focus:ring-gray-500 dark:text-white dark:placeholder-gray-400 dark:focus:bg-gray-800 dark:focus:border-gray-600 dark:focus:ring-gray-400"
-    };
-    const sizeClasses = {
-        sm: "px-3 py-2 text-sm min-h-[80px]",
-        md: "px-4 py-3 text-base min-h-[100px]",
-        lg: "px-4 py-3 text-lg min-h-[120px]"
-    };
-    const resizeClasses = {
-        none: "resize-none",
-        vertical: "resize-y",
-        horizontal: "resize-x",
-        both: "resize"
-    };
-    const stateClasses = error
-        ? "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:focus:border-red-400 dark:focus:ring-red-400"
-        : success
-            ? "border-green-500 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:focus:border-green-400 dark:focus:ring-green-400"
-            : "";
-    return (_jsx("textarea", { className: cn("flex w-full rounded-md border transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", variantClasses[variant], sizeClasses[size], resizeClasses[resize], stateClasses, className), ref: ref, ...props }));
-});
-Textarea.displayName = "Textarea";
-export { Textarea };

package/dist/components/ThemeProvider.js

@@ -1,76 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
-const initialState = {
-    theme: "system",
-    setTheme: () => null,
-    resolvedTheme: "light",
-    toggleTheme: () => null,
-};
-const ThemeProviderContext = createContext(initialState);
-export function ThemeProvider({ children, defaultTheme = "system", storageKey = "hua-ui-theme", enableSystem = true, enableTransition = true, ...props }) {
-    const [theme, setTheme] = useState(defaultTheme);
-    const [resolvedTheme, setResolvedTheme] = useState("light");
-    useEffect(() => {
-        // localStorage에서 테마 가져오기 (클라이언트에서만)
-        if (typeof window !== 'undefined') {
-            const savedTheme = localStorage.getItem(storageKey);
-            if (savedTheme) {
-                setTheme(savedTheme);
-            }
-        }
-    }, [storageKey]);
-    useEffect(() => {
-        const root = window.document.documentElement;
-        root.classList.remove("light", "dark");
-        if (theme === "system" && enableSystem) {
-            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-                .matches
-                ? "dark"
-                : "light";
-            root.classList.add(systemTheme);
-            setResolvedTheme(systemTheme);
-        }
-        else {
-            root.classList.add(theme);
-            setResolvedTheme(theme);
-        }
-        if (enableTransition) {
-            root.classList.add("transition-colors", "duration-300");
-        }
-    }, [theme, enableSystem, enableTransition]);
-    useEffect(() => {
-        if (theme === "system" && enableSystem) {
-            const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-            const handleChange = () => {
-                const systemTheme = mediaQuery.matches ? "dark" : "light";
-                setResolvedTheme(systemTheme);
-                document.documentElement.classList.remove("light", "dark");
-                document.documentElement.classList.add(systemTheme);
-            };
-            mediaQuery.addEventListener("change", handleChange);
-            return () => mediaQuery.removeEventListener("change", handleChange);
-        }
-    }, [theme, enableSystem]);
-    const value = {
-        theme,
-        setTheme: (theme) => {
-            if (typeof window !== 'undefined') {
-                localStorage.setItem(storageKey, theme);
-            }
-            setTheme(theme);
-        },
-        resolvedTheme,
-        toggleTheme: () => {
-            const newTheme = theme === "light" ? "dark" : "light";
-            setTheme(newTheme);
-        },
-    };
-    return (_jsx(ThemeProviderContext.Provider, { ...props, value: value, children: children }));
-}
-export const useTheme = () => {
-    const context = useContext(ThemeProviderContext);
-    if (context === undefined)
-        throw new Error("useTheme must be used within a ThemeProvider");
-    return context;
-};

package/dist/components/ThemeToggle.js

@@ -1,49 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-import { useTheme } from "./ThemeProvider";
-export function ThemeToggle({ className, size = "md", variant = "button", showLabel = false, label = {
-    light: "라이트",
-    dark: "다크",
-    system: "시스템"
-}, ...props }) {
-    const { theme, setTheme, resolvedTheme } = useTheme();
-    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
-    };
-    const renderIcon = () => {
-        if (theme === "system") {
-            return _jsx(Icon, { name: "monitor", size: iconSizes[size] });
-        }
-        return resolvedTheme === "dark" ? (_jsx(Icon, { name: "moon", size: iconSizes[size] })) : (_jsx(Icon, { name: "sun", size: iconSizes[size] }));
-    };
-    const handleClick = () => {
-        if (theme === "system") {
-            setTheme("light");
-        }
-        else if (theme === "light") {
-            setTheme("dark");
-        }
-        else {
-            setTheme("system");
-        }
-    };
-    if (variant === "icon") {
-        return (_jsx("button", { onClick: handleClick, 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: _jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("absolute inset-0 transition-all duration-300", resolvedTheme === "dark" ? "rotate-0 opacity-100" : "rotate-90 opacity-0"), children: _jsx(Icon, { name: "moon", size: iconSizes[size], className: "text-blue-500" }) }), _jsx("div", { className: cn("transition-all duration-300", resolvedTheme === "dark" ? "rotate-90 opacity-0" : "rotate-0 opacity-100"), children: _jsx(Icon, { name: "sun", size: iconSizes[size], className: "text-yellow-500" }) })] }) }));
-    }
-    if (variant === "switch") {
-        return (_jsxs("button", { onClick: handleClick, className: cn("relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2", resolvedTheme === "dark"
-                ? "bg-blue-600"
-                : "bg-gray-200 dark:bg-gray-700", className), ...props, children: [_jsx("span", { className: cn("inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300 shadow-lg", resolvedTheme === "dark" ? "translate-x-6" : "translate-x-1") }), _jsxs("div", { className: "absolute inset-0 flex items-center justify-between px-1.5", children: [_jsx(Icon, { name: "sun", size: 12, className: "text-yellow-500 opacity-0" }), _jsx(Icon, { name: "moon", size: 12, className: "text-blue-500 opacity-0" })] })] }));
-    }
-    return (_jsxs("button", { onClick: handleClick, 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: [renderIcon(), showLabel && (_jsx("span", { children: theme === "system" ? label.system : theme === "dark" ? label.dark : label.light }))] }));
-}

package/dist/components/Toast.js

@@ -1,138 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createContext, useContext, useState, useCallback } from "react";
-import { cn } from "../lib/utils";
-// Toast Context 생성
-const ToastContext = createContext(undefined);
-// Toast Hook
-export function useToast() {
-    const context = useContext(ToastContext);
-    if (!context) {
-        throw new Error("useToast must be used within a ToastProvider");
-    }
-    return context;
-}
-// Toast Provider
-export function ToastProvider({ children, maxToasts = 5, position = "top-right" }) {
-    const [toasts, setToasts] = useState([]);
-    const removeToast = useCallback((id) => {
-        setToasts(prev => prev.filter(toast => toast.id !== id));
-    }, []);
-    const addToast = useCallback((toast) => {
-        const id = Math.random().toString(36).substr(2, 9);
-        const newToast = { ...toast, id };
-        setToasts(prev => {
-            const updatedToasts = [...prev, newToast];
-            return updatedToasts.slice(-maxToasts); // 최대 개수 제한
-        });
-        // 자동 제거
-        if (toast.duration !== 0) {
-            setTimeout(() => {
-                removeToast(id);
-            }, toast.duration || 5000);
-        }
-    }, [maxToasts, removeToast]);
-    const clearToasts = useCallback(() => {
-        setToasts([]);
-    }, []);
-    return (_jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearToasts }, children: [children, _jsx(ToastContainer, { toasts: toasts, removeToast: removeToast, position: position })] }));
-}
-// Toast Container
-function ToastContainer({ toasts, removeToast, position }) {
-    const positionClasses = {
-        "top-right": "top-4 right-4",
-        "top-left": "top-4 left-4",
-        "bottom-right": "bottom-4 right-4",
-        "bottom-left": "bottom-4 left-4",
-        "top-center": "top-4 left-1/2 transform -translate-x-1/2",
-        "bottom-center": "bottom-4 left-1/2 transform -translate-x-1/2"
-    };
-    if (toasts.length === 0)
-        return null;
-    return (_jsx("div", { className: cn("fixed z-50 space-y-3 max-w-sm", // 12px 간격
-        positionClasses[position]), children: toasts.map((toast) => (_jsx(ToastItem, { toast: toast, onRemove: removeToast }, toast.id))) }));
-}
-// Toast Item
-function ToastItem({ toast, onRemove }) {
-    const [isVisible, setIsVisible] = useState(false);
-    React.useEffect(() => {
-        setIsVisible(true);
-    }, []);
-    const handleRemove = () => {
-        setIsVisible(false);
-        setTimeout(() => onRemove(toast.id), 300);
-    };
-    const getToastStyles = (type) => {
-        switch (type) {
-            case "success":
-                return "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200";
-            case "error":
-                return "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200";
-            case "warning":
-                return "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200";
-            case "info":
-                return "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200";
-        }
-    };
-    const getIconStyles = (type) => {
-        switch (type) {
-            case "success":
-                return "text-green-500 dark:text-green-400";
-            case "error":
-                return "text-red-500 dark:text-red-400";
-            case "warning":
-                return "text-yellow-500 dark:text-yellow-400";
-            case "info":
-                return "text-blue-500 dark:text-blue-400";
-        }
-    };
-    const getToastIcon = (type) => {
-        switch (type) {
-            case "success":
-                return (_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: "M5 13l4 4L19 7" }) }));
-            case "error":
-                return (_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" }) }));
-            case "warning":
-                return (_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: "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" }) }));
-            case "info":
-                return (_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: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
-        }
-    };
-    return (_jsxs("div", { className: cn("flex items-start p-4 rounded-xl border shadow-lg backdrop-blur-sm transition-all duration-300 transform", getToastStyles(toast.type), isVisible
-            ? "translate-x-0 opacity-100 scale-100"
-            : "translate-x-full opacity-0 scale-95"), style: {
-            animation: "slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
-        }, children: [_jsxs("div", { className: cn("flex-shrink-0 mr-3", getIconStyles(toast.type)), children: [" ", getToastIcon(toast.type)] }), _jsxs("div", { className: "flex-1 min-w-0", children: [toast.title && (_jsxs("h4", { className: "text-sm font-semibold mb-1", children: [" ", toast.title] })), _jsx("p", { className: "text-sm leading-relaxed", children: toast.message }), toast.action && (_jsx("button", { onClick: toast.action.onClick, className: "mt-3 text-sm font-medium underline hover:no-underline transition-all duration-200" // 12px 여백
-                        , children: toast.action.label }))] }), _jsxs("div", { className: "flex-shrink-0 ml-4", children: [" ", _jsx("button", { onClick: handleRemove, className: cn("inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5", getIconStyles(toast.type)), "aria-label": "\uB2EB\uAE30", 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: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("style", { dangerouslySetInnerHTML: {
-                    __html: `
-          @keyframes slideInRight {
-            from {
-              transform: translateX(100%) scale(0.95);
-              opacity: 0;
-            }
-            to {
-              transform: translateX(0) scale(1);
-              opacity: 1;
-            }
-          }
-        `
-                } })] }));
-}
-// 편의 함수들
-export const showToast = (toast) => {
-    // 이 함수는 ToastProvider 내부에서만 사용 가능
-    console.warn("showToast is deprecated. Use useToast hook instead.");
-};
-export const showSuccessToast = (message, title, duration) => {
-    console.warn("showSuccessToast is deprecated. Use useToast hook instead.");
-};
-export const showErrorToast = (message, title, duration) => {
-    console.warn("showErrorToast is deprecated. Use useToast hook instead.");
-};
-export const showWarningToast = (message, title, duration) => {
-    console.warn("showWarningToast is deprecated. Use useToast hook instead.");
-};
-export const showInfoToast = (message, title, duration) => {
-    console.warn("showInfoToast is deprecated. Use useToast hook instead.");
-};