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

package/package.json

@@ -1,50 +1,110 @@
 {
   "name": "@hua-labs/ui",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.0.2",
   "description": "HUA Labs - Modern React UI Component Library - Beautiful, accessible, and customizable components for React applications",
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./advanced": {
+      "types": "./dist/advanced.d.ts",
+      "import": "./dist/advanced.mjs",
+      "require": "./dist/advanced.js"
+    },
+    "./advanced/dashboard": {
+      "types": "./src/advanced/dashboard.ts",
+      "import": "./src/advanced/dashboard.ts",
+      "require": "./src/advanced/dashboard.ts",
+      "default": "./dist/advanced-dashboard.mjs"
+    },
+    "./advanced/motion": {
+      "types": "./src/advanced/motion.ts",
+      "import": "./src/advanced/motion.ts",
+      "require": "./src/advanced/motion.ts",
+      "default": "./dist/advanced-motion.mjs"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.mjs",
+      "require": "./dist/form.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "import": "./dist/navigation.mjs",
+      "require": "./dist/navigation.js"
+    },
+    "./feedback": {
+      "types": "./dist/feedback.d.ts",
+      "import": "./dist/feedback.mjs",
+      "require": "./dist/feedback.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
+    },
+    "./components/advanced/*": {
+      "types": "./dist/components/advanced/*.d.ts",
+      "import": "./dist/components/advanced/*.mjs",
+      "require": "./dist/components/advanced/*.js"
+    },
+    "./styles/toast.css": "./src/styles/toast.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "dependencies": {
-    "react": "^19.0.0",
     "clsx": "^2.0.0",
-    "tailwind-merge": "^2.0.0",
-    "lucide-react": "^0.263.1"
+    "lucide-react": "^0.263.1",
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.0.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.8.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
     "jest": "^29.0.0",
-    "@types/jest": "^29.0.0",
-    "eslint": "^8.0.0"
+    "jsdom": "^27.2.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.14"
   },
   "peerDependencies": {
+    "@hua-labs/motion-core": "*",
+    "@phosphor-icons/react": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "keywords": [
-    "ui",
-    "components",
+    "hua-labs",
+    "ui-library",
+    "react-components",
     "react",
     "typescript",
     "design-system",
-    "accessible",
-    "modern",
+    "accessibility",
+    "aria",
+    "dark-mode",
     "tailwind",
     "nextjs",
-    "korean",
-    "english"
+    "ssr"
   ],
   "author": "HUA Labs",
   "license": "MIT",
@@ -57,11 +117,18 @@
   },
   "homepage": "https://github.com/HUA-Labs/HUA-Labs-public#readme",
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
+    "build": "pnpm exec tsup && pnpm exec tsc --emitDeclarationOnly",
+    "build:watch": "pnpm exec tsup --watch",
+    "dev": "pnpm exec tsup --watch",
     "clean": "rm -rf dist",
-    "test": "jest",
-    "lint": "eslint src --ext .ts,.tsx",
-    "type-check": "tsc --noEmit"
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "analyze": "node scripts/analyze-bundle.js",
+    "build:analyze": "pnpm build && pnpm analyze",
+    "lint": "echo 'Skipping lint for hua-ui (ESLint 8, needs separate config)'",
+    "type-check": "tsc --noEmit",
+    "generate:icon-types": "tsx scripts/generate-icon-types.ts",
+    "generate:icon-snippets": "tsx scripts/generate-icon-snippets.ts"
   }
 }

package/src/styles/toast.css

@@ -0,0 +1,23 @@
+/**
+ * Toast Component Animations
+ * 
+ * This CSS file contains animations for the Toast component.
+ * Import this file in your application's global CSS or layout.
+ * 
+ * Usage:
+ *   import '@hua-labs/ui/styles/toast.css';
+ *   // or in your global CSS:
+ *   @import '@hua-labs/ui/styles/toast.css';
+ */
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%) scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0) scale(1);
+    opacity: 1;
+  }
+}
+

package/dist/components/Accordion.js

@@ -1,84 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-const Accordion = React.forwardRef(({ children, className, type = "single", defaultValue, value, onValueChange, collapsible = false, ...props }, ref) => {
-    const [openItems, setOpenItems] = React.useState(value ? (Array.isArray(value) ? value : [value]) :
-        defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]) : []);
-    React.useEffect(() => {
-        if (value !== undefined) {
-            setOpenItems(Array.isArray(value) ? value : [value]);
-        }
-    }, [value]);
-    const handleItemToggle = (itemValue) => {
-        let newOpenItems;
-        if (type === "single") {
-            if (openItems.includes(itemValue)) {
-                newOpenItems = collapsible ? [] : openItems;
-            }
-            else {
-                newOpenItems = [itemValue];
-            }
-        }
-        else {
-            if (openItems.includes(itemValue)) {
-                newOpenItems = openItems.filter(item => item !== itemValue);
-            }
-            else {
-                newOpenItems = [...openItems, itemValue];
-            }
-        }
-        setOpenItems(newOpenItems);
-        onValueChange?.(type === "single" ? newOpenItems[0] || "" : newOpenItems);
-    };
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    openItems,
-                    onToggle: handleItemToggle,
-                    ...child.props
-                });
-            }
-            return child;
-        }) }));
-});
-Accordion.displayName = "Accordion";
-const AccordionItem = React.forwardRef(({ value, children, className, disabled = false, openItems = [], onToggle, ...props }, ref) => {
-    const isOpen = openItems.includes(value);
-    return (_jsx("div", { ref: ref, className: cn("border border-gray-200/50 dark:border-gray-700/50 rounded-lg overflow-hidden", disabled && "opacity-50 pointer-events-none", className), ...props, children: React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
-                    value,
-                    isOpen,
-                    disabled,
-                    onToggle: () => onToggle?.(value),
-                    ...child.props
-                });
-            }
-            return child;
-        }) }));
-});
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ children, className, icon, iconPosition = "right", isOpen = false, disabled = false, onToggle, ...props }, ref) => {
-    const defaultIcon = (_jsx(Icon, { name: "chevronDown", size: 20, className: cn("transition-transform duration-300 ease-out", isOpen && "rotate-180") }));
-    return (_jsxs("button", { ref: ref, onClick: onToggle, disabled: disabled, className: cn("flex w-full items-center justify-between px-6 py-4 text-left font-medium transition-all hover:bg-gray-50/80 dark:hover:bg-gray-800/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", className), ...props, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [iconPosition === "left" && (icon || defaultIcon), _jsx("span", { className: "flex-1", children: children })] }), iconPosition === "right" && (icon || defaultIcon)] }));
-});
-AccordionTrigger.displayName = "AccordionTrigger";
-const AccordionContent = React.forwardRef(({ children, className, isOpen = false, ...props }, ref) => {
-    const [height, setHeight] = React.useState(0);
-    const contentRef = React.useRef(null);
-    React.useEffect(() => {
-        if (contentRef.current) {
-            if (isOpen) {
-                setHeight(contentRef.current.scrollHeight);
-            }
-            else {
-                setHeight(0);
-            }
-        }
-    }, [isOpen, children]);
-    return (_jsx("div", { ref: ref, className: "overflow-hidden transition-all duration-300 ease-out", style: { height: `${height}px` }, ...props, children: _jsx("div", { ref: contentRef, className: cn("px-6 pb-4", className), children: children }) }));
-});
-AccordionContent.displayName = "AccordionContent";
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/Alert.js

@@ -1,61 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "../lib/utils";
-const Alert = React.forwardRef(({ className, variant = "default", title, description, icon, action, closable = false, onClose, children, ...props }, ref) => {
-    const getVariantClasses = () => {
-        switch (variant) {
-            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 "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 "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 "info":
-                return "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200";
-            default:
-                return "bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-800 text-gray-800 dark:text-gray-200";
-        }
-    };
-    const getIconClasses = () => {
-        switch (variant) {
-            case "success":
-                return "text-green-500 dark:text-green-400";
-            case "warning":
-                return "text-yellow-500 dark:text-yellow-400";
-            case "error":
-                return "text-red-500 dark:text-red-400";
-            case "info":
-                return "text-blue-500 dark:text-blue-400";
-            default:
-                return "text-gray-500 dark:text-gray-400";
-        }
-    };
-    const getDefaultIcon = () => {
-        switch (variant) {
-            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 "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 "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 "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" }) }));
-            default:
-                return null;
-        }
-    };
-    return (_jsx("div", { ref: ref, className: cn("relative rounded-lg border p-4", // 16px 패딩
-        getVariantClasses(), className), ...props, children: _jsxs("div", { className: "flex items-start gap-3", children: [" ", (icon || getDefaultIcon()) && (_jsx("div", { className: cn("flex-shrink-0 mt-0.5", getIconClasses()), children: icon || getDefaultIcon() })), _jsxs("div", { className: "flex-1 min-w-0", children: [title && (_jsxs("h4", { className: "text-sm font-semibold mb-1", children: [" ", title] })), description && (_jsx("p", { className: "text-sm leading-relaxed", children: description })), children && (_jsxs("div", { className: "mt-2", children: [" ", children] }))] }), (action || closable) && (_jsxs("div", { className: "flex-shrink-0 flex items-center gap-2", children: [" ", action, closable && (_jsx("button", { onClick: onClose, 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", getIconClasses()), "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" }) }) }))] }))] }) }));
-});
-Alert.displayName = "Alert";
-// 편의 컴포넌트들
-export const AlertSuccess = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "success", className: className, ...props })));
-AlertSuccess.displayName = "AlertSuccess";
-export const AlertWarning = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "warning", className: className, ...props })));
-AlertWarning.displayName = "AlertWarning";
-export const AlertError = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "error", className: className, ...props })));
-AlertError.displayName = "AlertError";
-export const AlertInfo = React.forwardRef(({ className, ...props }, ref) => (_jsx(Alert, { ref: ref, variant: "info", className: className, ...props })));
-AlertInfo.displayName = "AlertInfo";
-export { Alert };

package/dist/components/Avatar.js

@@ -1,18 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-const Avatar = React.forwardRef(({ className, size = "md", ...props }, ref) => {
-    const sizeClasses = {
-        sm: "w-8 h-8",
-        md: "w-10 h-10",
-        lg: "w-12 h-12"
-    };
-    return (_jsx("div", { ref: ref, className: cn("relative flex shrink-0 overflow-hidden rounded-full", sizeClasses[size], className), ...props }));
-});
-Avatar.displayName = "Avatar";
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx("img", { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
-AvatarImage.displayName = "AvatarImage";
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800", className), ...props })));
-AvatarFallback.displayName = "AvatarFallback";
-export { Avatar, AvatarImage, AvatarFallback };

package/dist/components/Badge.js

@@ -1,15 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "../lib/utils";
-const Badge = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
-    const variantClasses = {
-        default: "bg-gray-900 text-gray-50 hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80",
-        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
-        destructive: "bg-red-500 text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80",
-        outline: "text-gray-950 border border-gray-200 hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:text-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-50"
-    };
-    return (_jsx("div", { ref: ref, className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2", variantClasses[variant], className), ...props }));
-});
-Badge.displayName = "Badge";
-export { Badge };

package/dist/components/BottomSheet.js

@@ -1,96 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-const BottomSheet = React.forwardRef(({ open, onOpenChange, children, className, height = "md", showBackdrop = true, closeOnBackdropClick = true, closeOnEscape = true, showDragHandle = true, snapPoints = [25, 50, 75, 100], defaultSnap = 50, ...props }, ref) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [isAnimating, setIsAnimating] = React.useState(false);
-    const [currentHeight, setCurrentHeight] = React.useState(defaultSnap);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [startY, setStartY] = React.useState(0);
-    const [currentY, setCurrentY] = React.useState(0);
-    const heightClasses = {
-        sm: "h-64",
-        md: "h-96",
-        lg: "h-[32rem]",
-        xl: "h-[40rem]",
-        full: "h-full"
-    };
-    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]);
-    const handleTouchStart = (e) => {
-        setIsDragging(true);
-        setStartY(e.touches[0].clientY);
-        setCurrentY(e.touches[0].clientY);
-    };
-    const handleTouchMove = (e) => {
-        if (!isDragging)
-            return;
-        setCurrentY(e.touches[0].clientY);
-    };
-    const handleTouchEnd = () => {
-        if (!isDragging)
-            return;
-        setIsDragging(false);
-        const deltaY = currentY - startY;
-        const threshold = 100;
-        if (deltaY > threshold) {
-            // 아래로 드래그 - 닫기
-            onOpenChange(false);
-        }
-        else if (deltaY < -threshold) {
-            // 위로 드래그 - 다음 스냅 포인트
-            const currentIndex = snapPoints.indexOf(currentHeight);
-            const nextIndex = Math.min(currentIndex + 1, snapPoints.length - 1);
-            setCurrentHeight(snapPoints[nextIndex]);
-        }
-    };
-    if (!isVisible)
-        return null;
-    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 })), _jsxs("div", { ref: ref, className: cn("absolute bottom-0 left-0 right-0 bg-white/95 dark:!bg-gray-800/95 backdrop-blur-xl border-t border-gray-200/50 dark:!border-gray-600/50 shadow-2xl rounded-t-2xl transition-transform duration-300 ease-out", heightClasses[height], isAnimating ? (open ? "translate-y-0" : "translate-y-full") : "", className), style: {
-                    height: `${currentHeight}%`,
-                    transform: isDragging ? `translateY(${currentY - startY}px)` : undefined
-                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, ...props, children: [showDragHandle && (_jsx("div", { className: "flex justify-center pt-3 pb-2", children: _jsx("div", { className: "w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full" }) })), children] })] }));
-});
-BottomSheet.displayName = "BottomSheet";
-const BottomSheetHeader = React.forwardRef(({ children, className, showCloseButton = true, onClose, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-6 py-4", 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 }) }))] }));
-});
-BottomSheetHeader.displayName = "BottomSheetHeader";
-const BottomSheetContent = React.forwardRef(({ children, className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex-1 px-6 pb-6 overflow-y-auto", className), ...props, children: children }));
-});
-BottomSheetContent.displayName = "BottomSheetContent";
-export { BottomSheet, BottomSheetHeader, BottomSheetContent };

package/dist/components/Breadcrumb.js

@@ -1,47 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Icon } from "./Icon";
-const Breadcrumb = React.forwardRef(({ items, separator = _jsx(Icon, { name: "chevron-right", size: 16, className: "text-gray-400 dark:text-gray-500" }), className, maxItems, showHomeIcon = true, homeLabel = "홈", homeHref = "/", ...props }, ref) => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-    // 홈 아이템 추가
-    const allItems = [
-        {
-            label: homeLabel,
-            href: homeHref,
-            icon: showHomeIcon ? "home" : undefined
-        },
-        ...items
-    ];
-    // 최대 아이템 수 제한
-    const displayItems = maxItems && allItems.length > maxItems && !isExpanded
-        ? [
-            ...allItems.slice(0, 1),
-            { label: "...", href: undefined },
-            ...allItems.slice(-maxItems + 2)
-        ]
-        : allItems;
-    const renderItem = (item, index) => {
-        const isLast = index === displayItems.length - 1;
-        const isClickable = item.href || item.onClick;
-        const itemContent = (_jsxs("div", { className: "flex items-center gap-2", children: [item.icon && _jsx(Icon, { name: item.icon, size: 16 }), _jsx("span", { className: "truncate", children: item.label })] }));
-        if (isLast) {
-            return (_jsx("span", { className: "text-gray-900 dark:text-gray-400 font-medium truncate", children: itemContent }, index));
-        }
-        if (isClickable) {
-            return (_jsx("a", { href: item.href, onClick: item.onClick, className: "text-gray-600 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-300 transition-colors truncate hover:underline", children: itemContent }, index));
-        }
-        return (_jsx("span", { className: "text-gray-500 dark:text-gray-500 truncate cursor-default", children: itemContent }, index));
-    };
-    return (_jsxs("nav", { ref: ref, className: cn("flex items-center gap-2 text-sm", className), "aria-label": "Breadcrumb", ...props, children: [displayItems.map((item, index) => (_jsxs(React.Fragment, { children: [renderItem(item, index), index < displayItems.length - 1 && (_jsx("span", { className: "flex-shrink-0", "aria-hidden": "true", children: separator }))] }, index))), maxItems && allItems.length > maxItems && (_jsx("button", { onClick: () => setIsExpanded(!isExpanded), className: "ml-2 text-blue-600 dark:text-blue-400 hover:underline text-xs", children: isExpanded ? "접기" : "펼치기" }))] }));
-});
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbItem = React.forwardRef(({ children, className, href, onClick, isActive = false, ...props }, ref) => {
-    const Component = href ? "a" : "button";
-    return (_jsx(Component, { ref: ref, href: href, onClick: onClick, className: cn("flex items-center gap-2 text-sm transition-colors", isActive
-            ? "text-gray-900 dark:text-gray-400 font-medium"
-            : "text-gray-600 dark:text-gray-500 hover:text-gray-900 dark:hover:text-gray-300", className), ...props, children: children }));
-});
-BreadcrumbItem.displayName = "BreadcrumbItem";
-export { Breadcrumb, BreadcrumbItem };

package/dist/components/Button.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "../lib/utils";
-const Button = React.forwardRef(({ className, variant = "default", size = "md", asChild = false, ...props }, ref) => {
-    const variantClasses = {
-        default: "bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-100",
-        primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
-        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
-        outline: "border border-gray-200 bg-white hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800",
-        ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
-        destructive: "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
-    };
-    const sizeClasses = {
-        sm: "h-10 px-4 py-3 text-sm", // 더 넉넉한 여백
-        md: "h-12 px-6 py-4 text-base", // 더 넉넉한 여백
-        lg: "h-14 px-8 py-5 text-lg", // 더 넉넉한 여백
-        icon: "h-12 w-12" // 더 넉넉한 아이콘 버튼
-    };
-    return (_jsx("button", { 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-gray-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", variantClasses[variant], sizeClasses[size], className), ref: ref, ...props }));
-});
-Button.displayName = "Button";
-export { Button };

package/dist/components/Card.js

@@ -1,18 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "../lib/utils";
-const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
-Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-2 p-8", className), ...props })));
-CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
-CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
-CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-8 pt-0", className), ...props }) // 더 넉넉한 여백
-));
-CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-8 pt-0", className), ...props })));
-CardFooter.displayName = "CardFooter";
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ChatMessage.js

@@ -1,59 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../lib/utils";
-import { Avatar, AvatarImage, AvatarFallback } from "./Avatar";
-import { Badge } from "./Badge";
-import { Card, CardContent } from "./Card";
-const ChatMessage = React.forwardRef(({ className, message, user = { name: "사용자", color: "#3b82f6" }, assistant = { name: "AI", color: "#10b981" }, showAvatar = true, showTimestamp = true, showEmotion = true, variant = "default", theme = {
-    userBubbleBg: "#3b82f6",
-    userBubbleText: "#ffffff",
-    aiBubbleBg: "#f3f4f6",
-    aiBubbleText: "#1f2937"
-}, ...props }, ref) => {
-    const isUser = message.role === "user";
-    const isAssistant = message.role === "assistant";
-    const isSystem = message.role === "system";
-    const getEmotionColor = (emotion) => {
-        if (!emotion)
-            return "bg-gray-100";
-        const emotionColors = {
-            joy: "bg-yellow-100 text-yellow-800",
-            sadness: "bg-blue-100 text-blue-800",
-            anger: "bg-red-100 text-red-800",
-            calm: "bg-green-100 text-green-800",
-            excitement: "bg-pink-100 text-pink-800",
-            worry: "bg-gray-100 text-gray-800",
-            gratitude: "bg-purple-100 text-purple-800",
-            loneliness: "bg-indigo-100 text-indigo-800"
-        };
-        return emotionColors[emotion] || "bg-gray-100 text-gray-800";
-    };
-    const formatTime = (date) => {
-        return date.toLocaleTimeString('ko-KR', {
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-    };
-    if (variant === "bubble") {
-        return (_jsx("div", { ref: ref, className: cn("flex w-full", isUser ? "justify-end" : "justify-start", className), ...props, children: _jsxs("div", { className: cn("flex max-w-[80%] space-x-2", isUser ? "flex-row-reverse space-x-reverse" : "flex-row"), children: [showAvatar && (_jsxs(Avatar, { className: "w-8 h-8 flex-shrink-0", children: [_jsx(AvatarImage, { src: isUser ? user.avatar : assistant.avatar, alt: isUser ? user.name : assistant.name }), _jsx(AvatarFallback, { style: {
-                                    backgroundColor: isUser ? user.color : assistant.color
-                                }, children: (isUser ? user.name : assistant.name)?.charAt(0) })] })), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: cn("px-4 py-2 rounded-2xl max-w-full break-words", isUser
-                                    ? "rounded-br-md"
-                                    : "rounded-bl-md"), style: {
-                                    backgroundColor: isUser ? theme.userBubbleBg : theme.aiBubbleBg,
-                                    color: isUser ? theme.userBubbleText : theme.aiBubbleText
-                                }, children: message.isTyping ? (_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" })] })) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) }), _jsxs("div", { className: cn("flex items-center space-x-2 text-xs text-muted-foreground", isUser ? "justify-end" : "justify-start"), children: [showTimestamp && (_jsx("span", { children: formatTime(message.timestamp) })), showEmotion && message.emotion && (_jsx(Badge, { variant: "secondary", className: cn("text-xs", getEmotionColor(message.emotion)), children: message.emotion }))] })] })] }) }));
-    }
-    if (variant === "compact") {
-        return (_jsxs("div", { ref: ref, className: cn("flex items-start space-x-3 py-2", className), ...props, children: [showAvatar && (_jsxs(Avatar, { className: "w-6 h-6 flex-shrink-0", children: [_jsx(AvatarImage, { src: isUser ? user.avatar : assistant.avatar, alt: isUser ? user.name : assistant.name }), _jsx(AvatarFallback, { style: {
-                                backgroundColor: isUser ? user.color : assistant.color
-                            }, children: (isUser ? user.name : assistant.name)?.charAt(0) })] })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center space-x-2 mb-1", children: [_jsx("span", { className: "text-sm font-medium", children: isUser ? user.name : assistant.name }), showTimestamp && (_jsx("span", { className: "text-xs text-muted-foreground", children: formatTime(message.timestamp) })), showEmotion && message.emotion && (_jsx(Badge, { variant: "secondary", className: cn("text-xs", getEmotionColor(message.emotion)), children: message.emotion }))] }), _jsx("div", { className: "text-sm", children: message.isTyping ? (_jsxs("div", { className: "flex space-x-1", children: [_jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground rounded-full animate-bounce" }), _jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground rounded-full animate-bounce delay-100" }), _jsx("div", { className: "w-1.5 h-1.5 bg-muted-foreground rounded-full animate-bounce delay-200" })] })) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) })] })] }));
-    }
-    // default variant
-    return (_jsxs("div", { ref: ref, className: cn("flex items-start space-x-3 py-4", className), ...props, children: [showAvatar && (_jsxs(Avatar, { className: "w-10 h-10 flex-shrink-0", children: [_jsx(AvatarImage, { src: isUser ? user.avatar : assistant.avatar, alt: isUser ? user.name : assistant.name }), _jsx(AvatarFallback, { style: {
-                            backgroundColor: isUser ? user.color : assistant.color
-                        }, children: (isUser ? user.name : assistant.name)?.charAt(0) })] })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center space-x-2 mb-2", children: [_jsx("span", { className: "font-medium", children: isUser ? user.name : assistant.name }), showTimestamp && (_jsx("span", { className: "text-sm text-muted-foreground", children: formatTime(message.timestamp) })), showEmotion && message.emotion && (_jsx(Badge, { variant: "secondary", className: cn("text-xs", getEmotionColor(message.emotion)), children: message.emotion }))] }), _jsx(Card, { className: cn("inline-block", isUser ? "bg-primary text-primary-foreground" : "bg-muted"), children: _jsx(CardContent, { className: "p-3", children: message.isTyping ? (_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" })] })) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) }) })] })] }));
-});
-ChatMessage.displayName = "ChatMessage";
-export { ChatMessage };