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

package/dist/components/PageTransition.js

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

package/dist/components/Pagination.js

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

package/dist/components/Popover.js

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

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

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

@@ -1,42 +0,0 @@
-"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.js

@@ -1,60 +0,0 @@
-'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.js

@@ -1,39 +0,0 @@
-'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.js

@@ -1,46 +0,0 @@
-'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.js

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