@designbasekorea/ui 0.1.15 → 0.1.16

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, forwardRef, useId } from 'react';
-import { ChevronDownIcon, CloseIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ArrowRightIcon, ShrinkIcon, ExpandIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, PlusIcon, SearchIcon, MinusIcon, VideoIcon, CodeIcon, WriteIcon, ShowIcon, HideIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarFilledIcon, StarHalfIcon, StarIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, MailIcon, LinkIcon, CopyIcon, ChevronsUpIcon } from '@designbasekorea/icons';
+import { ChevronDownIcon, CloseIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ArrowRightIcon, ShrinkIcon, ExpandIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, PlusIcon, SearchIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, ShowIcon, HideIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarFilledIcon, StarHalfIcon, StarIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, MailIcon, LinkIcon, CopyIcon, ChevronsUpIcon } from '@designbasekorea/icons';
 import { flushSync, createPortal } from 'react-dom';
 
 function getDefaultExportFromCjs (x) {
@@ -4900,6 +4900,17 @@ const Input = forwardRef(({ type = 'text', label, placeholder, defaultValue, val
 });
 Input.displayName = 'Input';
 
+// DoneIcon이 있으면 사용하고, 없으면 기본 SVG 사용
+let DoneIcon = null;
+let MinusIcon = null;
+try {
+    const icons = require('@designbasekorea/icons');
+    DoneIcon = icons.DoneIcon || null;
+    MinusIcon = icons.MinusIcon || null;
+}
+catch (e) {
+    // 아이콘 패키지가 없으면 기본 SVG 사용
+}
 const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = false, isDisabled = false, isReadOnly = false, isRequired = false, hasLabel = true, size = 'm', children, className, name, value, onChange, ...props }, forwardedRef) => {
     const [selected, setSelected] = React.useState(isSelected ?? defaultSelected ?? false);
     React.useEffect(() => {
@@ -4921,16 +4932,7 @@ const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = fa
         'designbase-checkbox--readonly': isReadOnly,
         'designbase-checkbox--no-label': !hasLabel,
     }, className);
-    const getIconColor = () => {
-        if (isDisabled) {
-            return 'var(--color-action-interactive-icon-disabled)';
-        }
-        if (selected || isIndeterminate) {
-            return 'var(--color-action-interactive-icon-selected)';
-        }
-        return 'var(--color-action-interactive-icon)';
-    };
-    return (jsxRuntimeExports.jsxs("label", { className: classes, children: [jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, name: name, value: value, type: "checkbox", checked: selected, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, className: "designbase-checkbox__input" }), jsxRuntimeExports.jsxs("div", { className: "designbase-checkbox__visual", children: [selected && !isIndeterminate && (jsxRuntimeExports.jsx("svg", { className: "designbase-checkbox__check-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M20 6L9 17L4 12", stroke: getIconColor(), strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), isIndeterminate && (jsxRuntimeExports.jsx("svg", { className: "designbase-checkbox__indeterminate-icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M5 12H19", stroke: getIconColor(), strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }), children && jsxRuntimeExports.jsx("span", { className: "designbase-checkbox__label", children: children })] }));
+    return (jsxRuntimeExports.jsxs("label", { className: classes, children: [jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, name: name, value: value, type: "checkbox", checked: selected, onChange: handleChange, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, className: "designbase-checkbox__input" }), jsxRuntimeExports.jsxs("div", { className: "designbase-checkbox__visual", children: [selected && !isIndeterminate && (jsxRuntimeExports.jsx("div", { className: "designbase-checkbox__check-icon", children: DoneIcon ? (jsxRuntimeExports.jsx(DoneIcon, { size: 16 })) : (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", children: jsxRuntimeExports.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })), isIndeterminate && (jsxRuntimeExports.jsx("div", { className: "designbase-checkbox__indeterminate-icon", children: MinusIcon ? (jsxRuntimeExports.jsx(MinusIcon, { size: 16 })) : (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", children: jsxRuntimeExports.jsx("path", { d: "M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }))] }), children && jsxRuntimeExports.jsx("span", { className: "designbase-checkbox__label", children: children })] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -7991,7 +7993,7 @@ const Lightbox = ({ images, currentIndex = 0, size = 'l', variant = 'default', t
             'designbase-lightbox--fullscreen': isFullscreen,
             'designbase-lightbox--disabled': disabled,
             'designbase-lightbox--readonly': readonly,
-        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, disabled: disabled || readonly, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(MinusIcon, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, disabled: disabled || readonly, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, disabled: disabled || readonly, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, disabled: disabled || readonly, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, disabled: disabled || readonly, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, disabled: disabled, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, disabled: disabled || readonly, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, disabled: disabled || readonly, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
+        }, className), children: jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__overlay", children: jsxRuntimeExports.jsxs("div", { ref: modalRef, className: "designbase-lightbox__modal", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header", children: [jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__title", children: [currentImage.title && (jsxRuntimeExports.jsx("h3", { className: "designbase-lightbox__title-text", children: currentImage.title })), showCounter && (jsxRuntimeExports.jsxs("span", { className: "designbase-lightbox__counter", children: [internalCurrentIndex + 1, " / ", images.length] }))] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__header-actions", children: [showToolbar && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [enableZoom && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomOut, disabled: disabled || readonly, title: "\uC90C \uC544\uC6C3", type: "button", children: jsxRuntimeExports.jsx(MinusIcon$1, { size: 16 }) }), jsxRuntimeExports.jsxs("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomReset, disabled: disabled || readonly, title: "\uC90C \uB9AC\uC14B", type: "button", children: [Math.round(zoomLevel * 100), "%"] }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleZoomIn, disabled: disabled || readonly, title: "\uC90C \uC778", type: "button", children: jsxRuntimeExports.jsx(PlusIcon, { size: 16 }) })] })), enableRotate && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleRotate, disabled: disabled || readonly, title: "\uD68C\uC804", type: "button", children: jsxRuntimeExports.jsx(RefreshIcon, { size: 16 }) })), enableDownload && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleDownload, disabled: disabled || readonly, title: "\uB2E4\uC6B4\uB85C\uB4DC", type: "button", children: jsxRuntimeExports.jsx(DownloadIcon, { size: 16 }) })), enableFullscreen && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__toolbar-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsxRuntimeExports.jsx(ShrinkIcon, { size: 16 }) : jsxRuntimeExports.jsx(ExpandIcon, { size: 16 }) }))] })), showCloseButton && (jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__close-button", onClick: handleClose, disabled: disabled, title: "\uB2EB\uAE30", type: "button", children: jsxRuntimeExports.jsx(CloseIcon, { size: 20 }) }))] })] }), jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__content", children: [showNavigationButtons && images.length > 1 && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--prev", onClick: goToPrevious, disabled: disabled || readonly, title: "\uC774\uC804 \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(ChevronLeftIcon, { size: 24 }) }), jsxRuntimeExports.jsx("button", { className: "designbase-lightbox__nav-button designbase-lightbox__nav-button--next", onClick: goToNext, disabled: disabled || readonly, title: "\uB2E4\uC74C \uC774\uBBF8\uC9C0", type: "button", children: jsxRuntimeExports.jsx(ChevronRightIcon, { size: 24 }) })] })), jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "designbase-lightbox__image-container", onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [isImageError ? (jsxRuntimeExports.jsxs("div", { className: "designbase-lightbox__error", children: [jsxRuntimeExports.jsx("div", { className: "designbase-lightbox__error-icon", children: "\u26A0\uFE0F" }), jsxRuntimeExports.jsx("p", { className: "designbase-lightbox__error-text", children: "\uC774\uBBF8\uC9C0\uB97C \uBD88\uB7EC\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." })] })) : (jsxRuntimeExports.jsx("img", { ref: imageRef, src: currentImage.src, alt: currentImage.alt || currentImage.title || `이미지 ${internalCurrentIndex + 1}`, className: clsx('designbase-lightbox__image', {
                                             'designbase-lightbox__image--loaded': isImageLoaded,
                                             'designbase-lightbox__image--dragging': isDragging,
                                         }), style: {