@hua-labs/ui 1.0.0

package/dist/components/Popover.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Popover = React.forwardRef(({ className, children, trigger, open: controlledOpen, onOpenChange, position = "bottom", align = "center", offset = 8, disabled = false, ...props }, ref) => {
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    const [coords, setCoords] = React.useState({ x: 0, y: 0 });
+    const triggerRef = React.useRef(null);
+    const popoverRef = React.useRef(null);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const handleOpenChange = (newOpen) => {
+        if (disabled)
+            return;
+        if (!isControlled) {
+            setInternalOpen(newOpen);
+        }
+        onOpenChange?.(newOpen);
+    };
+    const handleTriggerClick = () => {
+        handleOpenChange(!isOpen);
+    };
+    const updatePosition = React.useCallback(() => {
+        if (!triggerRef.current || !popoverRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const popoverRect = popoverRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let x = 0;
+        let y = 0;
+        // 기본 위치 계산
+        switch (position) {
+            case "top":
+                x = triggerRect.left + triggerRect.width / 2;
+                y = triggerRect.top - offset;
+                break;
+            case "bottom":
+                x = triggerRect.left + triggerRect.width / 2;
+                y = triggerRect.bottom + offset;
+                break;
+            case "left":
+                x = triggerRect.left - offset;
+                y = triggerRect.top + triggerRect.height / 2;
+                break;
+            case "right":
+                x = triggerRect.right + offset;
+                y = triggerRect.top + triggerRect.height / 2;
+                break;
+        }
+        // 정렬 조정
+        switch (align) {
+            case "start":
+                if (position === "top" || position === "bottom") {
+                    x = triggerRect.left;
+                }
+                else {
+                    y = triggerRect.top;
+                }
+                break;
+            case "end":
+                if (position === "top" || position === "bottom") {
+                    x = triggerRect.right - popoverRect.width;
+                }
+                else {
+                    y = triggerRect.bottom - popoverRect.height;
+                }
+                break;
+            case "center":
+            default:
+                if (position === "top" || position === "bottom") {
+                    x = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+                }
+                else {
+                    y = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+                }
+                break;
+        }
+        // 뷰포트 경계 확인 및 조정
+        if (x < 0)
+            x = 8; // 8px 여백
+        if (x + popoverRect.width > viewportWidth) {
+            x = viewportWidth - popoverRect.width - 8; // 8px 여백
+        }
+        if (y < 0)
+            y = 8; // 8px 여백
+        if (y + popoverRect.height > viewportHeight) {
+            y = viewportHeight - popoverRect.height - 8; // 8px 여백
+        }
+        setCoords({ x, y });
+    }, [position, align, offset]);
+    React.useEffect(() => {
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener('resize', updatePosition);
+            window.addEventListener('scroll', updatePosition);
+            return () => {
+                window.removeEventListener('resize', updatePosition);
+                window.removeEventListener('scroll', updatePosition);
+            };
+        }
+    }, [isOpen, updatePosition]);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (triggerRef.current &&
+                popoverRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !popoverRef.current.contains(event.target)) {
+                handleOpenChange(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+    }, [isOpen]);
+    const getPositionClasses = () => {
+        switch (position) {
+            case "top":
+                return "bottom-full left-0 mb-2"; // 8px 간격
+            case "bottom":
+                return "top-full left-0 mt-2"; // 8px 간격
+            case "left":
+                return "right-full top-0 mr-2"; // 8px 간격
+            case "right":
+                return "left-full top-0 ml-2"; // 8px 간격
+            default:
+                return "top-full left-0 mt-2";
+        }
+    };
+    const getArrowClasses = () => {
+        switch (position) {
+            case "top":
+                return "top-full left-1/2 -translate-x-1/2 border-t-gray-200 dark:border-t-gray-700";
+            case "bottom":
+                return "bottom-full left-1/2 -translate-x-1/2 border-b-gray-200 dark:border-b-gray-700";
+            case "left":
+                return "left-full top-1/2 -translate-y-1/2 border-l-gray-200 dark:border-l-gray-700";
+            case "right":
+                return "right-full top-1/2 -translate-y-1/2 border-r-gray-200 dark:border-r-gray-700";
+            default:
+                return "bottom-full left-1/2 -translate-x-1/2 border-b-gray-200 dark:border-b-gray-700";
+        }
+    };
+    return (_jsxs("div", { ref: ref, className: cn("relative", className), ...props, children: [_jsx("div", { ref: triggerRef, onClick: handleTriggerClick, className: "inline-block cursor-pointer", children: trigger }), isOpen && (_jsxs("div", { ref: popoverRef, className: cn("absolute z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4", // 16px 패딩
+                getPositionClasses()), style: {
+                    transform: `translate(${coords.x}px, ${coords.y}px)`,
+                    minWidth: '200px'
+                }, children: [_jsx("div", { className: cn("absolute w-0 h-0 border-4 border-transparent", getArrowClasses()) }), _jsx("div", { className: "relative z-10", children: children })] }))] }));
+});
+Popover.displayName = "Popover";
+// 편의 컴포넌트들
+export const PopoverTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("inline-block cursor-pointer", className), ...props, children: children })));
+PopoverTrigger.displayName = "PopoverTrigger";
+export const PopoverContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4", className), ...props, children: children })));
+PopoverContent.displayName = "PopoverContent";
+export { Popover };

package/dist/components/Progress.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "success" | "warning" | "error" | "info";
+    showValue?: boolean;
+    animated?: boolean;
+    striped?: boolean;
+    label?: string;
+    description?: string;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressSuccess: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressWarning: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressError: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressInfo: React.ForwardRefExoticComponent<Omit<ProgressProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressCard: React.ForwardRefExoticComponent<ProgressProps & {
+    title?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Progress };
+//# sourceMappingURL=Progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,QAAQ,sFA2Fb,CAAA;AAID,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,eAAe,uGAI3B,CAAA;AAGD,eAAO,MAAM,aAAa,uGAIzB,CAAA;AAGD,eAAO,MAAM,YAAY,uGAIxB,CAAA;AAID,eAAO,MAAM,YAAY;YAA8D,MAAM;wCAW5F,CAAA;AAGD,eAAO,MAAM,aAAa,6GAUzB,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Progress.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Progress = React.forwardRef(({ className, value = 0, max = 100, size = "md", variant = "default", showValue = false, animated = true, striped = false, label, description, ...props }, ref) => {
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    const sizeClasses = {
+        sm: "h-2", // 8px 높이
+        md: "h-3", // 12px 높이
+        lg: "h-4" // 16px 높이
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case "success":
+                return "bg-green-500 dark:bg-green-400";
+            case "warning":
+                return "bg-yellow-500 dark:bg-yellow-400";
+            case "error":
+                return "bg-red-500 dark:bg-red-400";
+            case "info":
+                return "bg-blue-500 dark:bg-blue-400";
+            default:
+                return "bg-gray-900 dark:bg-gray-100";
+        }
+    };
+    const getStripedClasses = () => {
+        if (!striped)
+            return "";
+        return "bg-gradient-to-r from-transparent via-white/20 to-transparent bg-[length:20px_100%] animate-pulse";
+    };
+    return (_jsxs("div", { className: cn("w-full", className), ...props, children: [(label || showValue) && (_jsxs("div", { className: "flex items-center justify-between mb-2", children: [" ", label && (_jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })), showValue && (_jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { ref: ref, className: cn("relative w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", sizeClasses[size]), children: _jsx("div", { className: cn("h-full rounded-full transition-all duration-300 ease-out", getVariantClasses(), getStripedClasses(), animated && "animate-pulse"), style: {
+                        width: `${percentage}%`,
+                        transition: animated ? "width 0.3s ease-out" : "none"
+                    } }) }), description && (_jsxs("p", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [" ", description] }))] }));
+});
+Progress.displayName = "Progress";
+// 편의 컴포넌트들
+export const ProgressSuccess = React.forwardRef(({ className, ...props }, ref) => (_jsx(Progress, { ref: ref, variant: "success", className: className, ...props })));
+ProgressSuccess.displayName = "ProgressSuccess";
+export const ProgressWarning = React.forwardRef(({ className, ...props }, ref) => (_jsx(Progress, { ref: ref, variant: "warning", className: className, ...props })));
+ProgressWarning.displayName = "ProgressWarning";
+export const ProgressError = React.forwardRef(({ className, ...props }, ref) => (_jsx(Progress, { ref: ref, variant: "error", className: className, ...props })));
+ProgressError.displayName = "ProgressError";
+export const ProgressInfo = React.forwardRef(({ className, ...props }, ref) => (_jsx(Progress, { ref: ref, variant: "info", className: className, ...props })));
+ProgressInfo.displayName = "ProgressInfo";
+// 복합 Progress 컴포넌트들
+export const ProgressCard = React.forwardRef(({ title, className, ...props }, ref) => (_jsxs("div", { className: cn("p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", className), children: [title && (_jsxs("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-3", children: [" ", title] })), _jsx(Progress, { ref: ref, ...props })] })));
+ProgressCard.displayName = "ProgressCard";
+export const ProgressGroup = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("space-y-4", className), ...props, children: children })));
+ProgressGroup.displayName = "ProgressGroup";
+export { Progress };

package/dist/components/Radio.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3F,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,KAAK,qFAmFV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Radio.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Radio = 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 dotSizes = {
+        sm: "w-1.5 h-1.5",
+        md: "w-2 h-2",
+        lg: "w-2.5 h-2.5"
+    };
+    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: "radio", className: cn("peer sr-only", className), ref: ref, ...props }), _jsx("div", { className: cn("flex items-center justify-center rounded-full 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:border-blue-600 dark:peer-checked:border-blue-500"), children: _jsx("div", { className: cn("rounded-full bg-blue-600 dark:bg-blue-500 opacity-0 peer-checked:opacity-100 transition-opacity duration-200", dotSizes[size]) }) })] }), (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 }))] }))] }));
+});
+Radio.displayName = "Radio";
+export { Radio };

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    orientation?: "vertical" | "horizontal" | "both";
+    scrollHideDelay?: number;
+    type?: "auto" | "always" | "scroll" | "hover";
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+interface ScrollBarProps {
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+}
+declare const ScrollBar: React.ForwardRefExoticComponent<ScrollBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CAC9C;AAED,QAAA,MAAM,UAAU,wFA8Df,CAAA;AAID,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAed,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ScrollArea.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const ScrollArea = React.forwardRef(({ children, className, orientation = "vertical", scrollHideDelay = 600, type = "hover", ...props }, ref) => {
+    const [showScrollbar, setShowScrollbar] = React.useState(false);
+    const timeoutRef = React.useRef(undefined);
+    const handleMouseEnter = () => {
+        if (type === "hover" || type === "always") {
+            setShowScrollbar(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (type === "hover") {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => {
+                setShowScrollbar(false);
+            }, scrollHideDelay);
+        }
+    };
+    React.useEffect(() => {
+        if (type === "always") {
+            setShowScrollbar(true);
+        }
+    }, [type]);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return (_jsx("div", { ref: ref, className: cn("relative overflow-auto scrollbar-thin", orientation === "vertical" && "overflow-y-auto overflow-x-hidden", orientation === "horizontal" && "overflow-x-auto overflow-y-hidden", orientation === "both" && "overflow-auto", showScrollbar ? "scrollbar-visible" : "scrollbar-hidden", className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: children }));
+});
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React.forwardRef(({ orientation = "vertical", className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex touch-none select-none transition-colors duration-150 ease-out", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props }));
+});
+ScrollBar.displayName = "ScrollBar";
+export { ScrollArea, ScrollBar };

package/dist/components/ScrollIndicator.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ScrollIndicatorProps {
+    className?: string;
+    targetId?: string;
+    text?: string;
+    iconName?: string;
+    iconSize?: number;
+    position?: 'bottom-center' | 'bottom-left' | 'bottom-right';
+    variant?: 'default' | 'primary' | 'secondary' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    animated?: boolean;
+    autoHide?: boolean;
+    hideThreshold?: number;
+}
+declare const ScrollIndicator: React.ForwardRefExoticComponent<ScrollIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollIndicator };
+//# sourceMappingURL=ScrollIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ScrollIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,eAAe,GAAG,aAAa,GAAG,cAAc,CAAA;IAC3D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,eAAe,6FAuGnB,CAAA;AAIF,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ScrollIndicator.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { cn } from '../lib/utils';
+const ScrollIndicator = React.forwardRef(({ className, targetId, text = 'Scroll down', iconName = 'arrowDown', iconSize = 20, position = 'bottom-center', variant = 'default', size = 'md', animated = true, autoHide = true, hideThreshold = 100, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(true);
+    useEffect(() => {
+        if (!autoHide)
+            return;
+        const handleScroll = () => {
+            const scrollTop = window.scrollY;
+            setIsVisible(scrollTop < hideThreshold);
+        };
+        // 초기 실행
+        handleScroll();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [autoHide, hideThreshold]);
+    const scrollToTarget = () => {
+        if (targetId) {
+            const targetElement = document.getElementById(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+        else {
+            // 기본적으로 다음 섹션으로 스크롤
+            const currentSection = ref;
+            if (currentSection.current) {
+                const nextSection = currentSection.current.nextElementSibling;
+                if (nextSection) {
+                    nextSection.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+        }
+    };
+    const positionClasses = {
+        'bottom-center': 'bottom-8 left-1/2 transform -translate-x-1/2',
+        'bottom-left': 'bottom-8 left-8',
+        'bottom-right': 'bottom-8 right-8'
+    };
+    const sizeClasses = {
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg'
+    };
+    const variantClasses = {
+        default: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
+        primary: 'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200',
+        secondary: 'text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200',
+        outline: 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
+    };
+    if (!isVisible)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn('absolute z-10', positionClasses[position], className), ...props, children: _jsxs(Button, { onClick: scrollToTarget, variant: "ghost", size: "sm", className: cn('flex flex-col items-center space-y-2 transition-all duration-300', sizeClasses[size], variantClasses[variant], animated && 'animate-in fade-in-0 slide-in-from-bottom-2 duration-500'), "aria-label": text, children: [_jsx("span", { className: "text-xs opacity-80", children: text }), _jsx(Icon, { name: iconName, size: iconSize, className: cn(animated && 'animate-bounce') })] }) }));
+});
+ScrollIndicator.displayName = 'ScrollIndicator';
+export { ScrollIndicator };

package/dist/components/ScrollProgress.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ScrollProgressProps {
+    className?: string;
+    height?: number;
+    color?: 'default' | 'primary' | 'secondary' | 'gradient';
+    position?: 'top' | 'bottom';
+    animated?: boolean;
+    showPercentage?: boolean;
+}
+declare const ScrollProgress: React.ForwardRefExoticComponent<ScrollProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollProgress };
+//# sourceMappingURL=ScrollProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IACxD,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,QAAA,MAAM,cAAc,4FA6ElB,CAAA;AAIF,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ScrollProgress.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { cn } from '../lib/utils';
+const ScrollProgress = React.forwardRef(({ className, height = 2, color = 'gradient', position = 'top', animated = true, showPercentage = false, ...props }, ref) => {
+    const [progress, setProgress] = useState(0);
+    useEffect(() => {
+        const updateProgress = () => {
+            const scrollTop = window.scrollY;
+            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+            const currentProgress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+            setProgress(currentProgress);
+        };
+        // 초기 실행
+        updateProgress();
+        window.addEventListener('scroll', updateProgress, { passive: true });
+        window.addEventListener('resize', updateProgress, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', updateProgress);
+            window.removeEventListener('resize', updateProgress);
+        };
+    }, []);
+    const colorClasses = {
+        default: 'bg-blue-600',
+        primary: 'bg-purple-600',
+        secondary: 'bg-gray-600',
+        gradient: 'bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600'
+    };
+    const positionClasses = {
+        top: 'top-0 left-0 right-0',
+        bottom: 'bottom-0 left-0 right-0'
+    };
+    return (_jsxs("div", { ref: ref, className: cn('fixed z-50', positionClasses[position], className), style: { height: `${height}px` }, ...props, children: [_jsx("div", { className: "w-full h-full bg-gray-200 dark:bg-gray-700" }), _jsx("div", { className: cn('h-full origin-left transition-all duration-100 ease-out', colorClasses[color]), style: {
+                    width: `${progress}%`,
+                    transformOrigin: 'left'
+                } }), showPercentage && (_jsxs("div", { className: "absolute top-2 right-2 text-xs text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 px-2 py-1 rounded", children: [Math.round(progress), "%"] }))] }));
+});
+ScrollProgress.displayName = 'ScrollProgress';
+export { ScrollProgress };

package/dist/components/ScrollToTop.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ScrollToTopProps {
+    className?: string;
+    threshold?: number;
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'outline';
+    showIcon?: boolean;
+    iconName?: string;
+    iconSize?: number;
+    animated?: boolean;
+}
+declare const ScrollToTop: React.ForwardRefExoticComponent<ScrollToTopProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollToTop };
+//# sourceMappingURL=ScrollToTop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.d.ts","sourceRoot":"","sources":["../../src/components/ScrollToTop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,CAAA;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,yFAsGf,CAAA;AAIF,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ScrollToTop.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { Button } from './Button';
+import { cn } from '../lib/utils';
+const ScrollToTop = React.forwardRef(({ className, threshold = 300, position = 'bottom-right', size = 'md', variant = 'default', showIcon = true, iconName = 'arrowUp', iconSize = 20, animated = true, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const toggleVisibility = () => {
+            const scrollTop = window.scrollY;
+            const shouldShow = scrollTop > threshold;
+            setIsVisible(shouldShow);
+        };
+        // 초기 실행
+        toggleVisibility();
+        window.addEventListener('scroll', toggleVisibility, { passive: true });
+        return () => window.removeEventListener('scroll', toggleVisibility);
+    }, [threshold]);
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    };
+    const positionClasses = {
+        'bottom-right': 'bottom-8 right-8', // 32px 여백
+        'bottom-left': 'bottom-8 left-8', // 32px 여백
+        'bottom-center': 'bottom-8 left-1/2 transform -translate-x-1/2' // 32px 여백
+    };
+    const sizeClasses = {
+        sm: 'w-12 h-12', // 48px - 더 넉넉한 크기
+        md: 'w-14 h-14', // 56px - 더 넉넉한 크기
+        lg: 'w-16 h-16' // 64px - 더 넉넉한 크기
+    };
+    const variantClasses = {
+        default: 'bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 hover:bg-gray-700 dark:hover:bg-gray-300',
+        primary: 'bg-blue-600 text-white hover:bg-blue-700',
+        secondary: 'bg-gray-600 text-white hover:bg-gray-700',
+        outline: 'bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+    };
+    if (!isVisible)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn('fixed z-50', positionClasses[position], className), ...props, children: _jsx(Button, { onClick: scrollToTop, size: "icon", variant: "default", className: cn('rounded-full shadow-lg hover:shadow-xl transition-all duration-300', sizeClasses[size], variantClasses[variant], animated && 'animate-in fade-in-0 slide-in-from-bottom-2 duration-300'), "aria-label": "Scroll to top", children: showIcon && (_jsx("svg", { className: cn('text-white', animated && 'animate-bounce'), width: iconSize, height: iconSize, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 10l7-7m0 0l7 7m-7-7v18" }) })) }) }));
+});
+ScrollToTop.displayName = 'ScrollToTop';
+export { ScrollToTop };

package/dist/components/Select.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    variant?: "default" | "outline" | "filled" | "ghost";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    success?: boolean;
+    leftIcon?: React.ReactNode;
+    placeholder?: string;
+}
+export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
+    value: string;
+    children: React.ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLOptionElement>>;
+export { Select, SelectOption };
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC9F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,MAAM,uFAgEX,CAAA;AAGD,QAAA,MAAM,YAAY,6FAQjB,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Select.js

@@ -0,0 +1,29 @@
+"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 Select = React.forwardRef(({ className, variant = "default", size = "md", error = false, success = false, leftIcon, placeholder, children, ...props }, ref) => {
+    const variantClasses = {
+        default: "border-gray-300 bg-white text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-400",
+        outline: "border-2 border-gray-200 bg-transparent text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-400",
+        filled: "border-transparent bg-gray-50 text-gray-900 focus:bg-white focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:text-white dark:focus:bg-gray-800 dark:focus:border-blue-400 dark:focus:ring-blue-400",
+        ghost: "border-transparent bg-transparent text-gray-900 focus:bg-gray-50 focus:border-gray-300 focus:ring-gray-500 dark:text-white dark:focus:bg-gray-800 dark:focus:border-gray-600 dark:focus:ring-gray-400"
+    };
+    const sizeClasses = {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-4 text-lg"
+    };
+    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 (_jsxs("div", { className: "relative", children: [leftIcon && (_jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none", children: leftIcon })), _jsxs("select", { className: cn("flex w-full appearance-none 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], stateClasses, leftIcon ? "pl-10" : "", "pr-10", // 화살표 아이콘을 위한 공간
+                className), ref: ref, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), children] }), _jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none", children: _jsx(Icon, { name: "chevronDown", size: 16 }) })] }));
+});
+Select.displayName = "Select";
+const SelectOption = React.forwardRef(({ className, ...props }, ref) => (_jsx("option", { className: cn("", className), ref: ref, ...props })));
+SelectOption.displayName = "SelectOption";
+export { Select, SelectOption };