@hua-labs/ui 1.0.0

package/dist/components/BottomSheet.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+interface BottomSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    height?: "sm" | "md" | "lg" | "xl" | "full";
+    showBackdrop?: boolean;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    showDragHandle?: boolean;
+    snapPoints?: number[];
+    defaultSnap?: number;
+}
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+interface BottomSheetHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+declare const BottomSheetHeader: React.ForwardRefExoticComponent<BottomSheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface BottomSheetContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const BottomSheetContent: React.ForwardRefExoticComponent<BottomSheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export { BottomSheet, BottomSheetHeader, BottomSheetContent };
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/components/BottomSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,gBAAgB;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,WAAW,yFA4IhB,CAAA;AAGD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,QAAA,MAAM,iBAAiB,+FAoBtB,CAAA;AAGD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,kBAAkB,gGAYvB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/BottomSheet.js

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    className?: string;
+    maxItems?: number;
+    showHomeIcon?: boolean;
+    homeLabel?: string;
+    homeHref?: string;
+}
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>;
+interface BreadcrumbItemProps {
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+}
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { Breadcrumb, BreadcrumbItem };
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,UAAU,wFA0Gf,CAAA;AAGD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,mHAsBnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Breadcrumb.js

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    size?: "sm" | "md" | "lg" | "icon";
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAA;IACnF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFA+BX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Button.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../lib/utils";
+const 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.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE1E,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAEnF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;CAAG;AAE3F,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,QAAA,MAAM,IAAI,kFAWT,CAAA;AAGD,QAAA,MAAM,UAAU,wFAQf,CAAA;AAGD,QAAA,MAAM,SAAS,2FAWd,CAAA;AAGD,QAAA,MAAM,eAAe,mGAQpB,CAAA;AAGD,QAAA,MAAM,WAAW,yFAIhB,CAAA;AAGD,QAAA,MAAM,UAAU,wFAQf,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Card.js

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    message: {
+        id: string;
+        content: string;
+        role: "user" | "assistant" | "system";
+        timestamp: Date;
+        emotion?: string;
+        intensity?: number;
+        isTyping?: boolean;
+    };
+    user?: {
+        name?: string;
+        avatar?: string;
+        color?: string;
+    };
+    assistant?: {
+        name?: string;
+        avatar?: string;
+        color?: string;
+    };
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    showEmotion?: boolean;
+    variant?: "default" | "compact" | "bubble";
+    theme?: {
+        userBubbleBg?: string;
+        userBubbleText?: string;
+        aiBubbleBg?: string;
+        aiBubbleText?: string;
+    };
+}
+declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatMessage };
+//# sourceMappingURL=ChatMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAA;QACV,OAAO,EAAE,MAAM,CAAA;QACf,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;QACrC,SAAS,EAAE,IAAI,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;IACD,SAAS,CAAC,EAAE;QACV,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;IACD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1C,KAAK,CAAC,EAAE;QACN,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,QAAA,MAAM,WAAW,yFA2PhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ChatMessage.js

@@ -0,0 +1,59 @@
+'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 };

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: "default" | "outline" | "filled";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    success?: boolean;
+    label?: string;
+    description?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC9F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,QAAQ,wFAkFb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Checkbox.js

@@ -0,0 +1,30 @@
+"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 Checkbox = React.forwardRef(({ className, variant = "default", size = "md", error = false, success = false, label, description, ...props }, ref) => {
+    const sizeClasses = {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6"
+    };
+    const iconSizes = {
+        sm: 12,
+        md: 14,
+        lg: 16
+    };
+    const variantClasses = {
+        default: "border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-blue-400",
+        outline: "border-2 border-gray-200 bg-transparent text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:focus:ring-blue-400",
+        filled: "border-transparent bg-gray-50 text-blue-600 focus:bg-white focus:ring-blue-500 dark:bg-gray-700 dark:focus:bg-gray-800 dark:focus:ring-blue-400"
+    };
+    const stateClasses = error
+        ? "border-red-500 focus:ring-red-500 dark:border-red-400 dark:focus:ring-red-400"
+        : success
+            ? "border-green-500 focus:ring-green-500 dark:border-green-400 dark:focus:ring-green-400"
+            : "";
+    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("flex items-center justify-center rounded border transition-all duration-200 cursor-pointer", "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", sizeClasses[size], variantClasses[variant], stateClasses, "peer-checked:bg-blue-600 peer-checked:border-blue-600 dark:peer-checked:bg-blue-500 dark:peer-checked:border-blue-500"), children: _jsx(Icon, { name: "check", size: iconSizes[size], className: "text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200" }) })] }), (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 }))] }))] }));
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/dist/components/Command.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    disabled?: boolean;
+}
+declare const Command: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    selected?: boolean;
+    onSelect?: () => void;
+}
+declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading?: React.ReactNode;
+}
+declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CommandDialog: React.ForwardRefExoticComponent<CommandProps & React.RefAttributes<HTMLDivElement>>;
+export { Command, CommandInput, CommandList, CommandItem, CommandGroup, CommandSeparator, CommandEmpty };
+//# sourceMappingURL=Command.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/components/Command.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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,OAAO,qFAyJZ,CAAA;AAGD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;CAAG;AAEzF,QAAA,MAAM,YAAY,4FAajB,CAAA;AAGD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAQhB,CAAA;AAGD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,QAAA,MAAM,WAAW,4FAmChB,CAAA;AAGD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,YAAY,0FAajB,CAAA;AAGD,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEtF,QAAA,MAAM,gBAAgB,8FAQrB,CAAA;AAGD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF,QAAA,MAAM,YAAY,0FAajB,CAAA;AAID,eAAO,MAAM,aAAa,qFAIzB,CAAA;AAGD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Command.js

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