@designbasekorea/ui 0.5.1 → 0.5.4

package/dist/index.esm.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId, createContext } from 'react';
 import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, EyedropperIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, FileBlankIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, CaretUpdownFilledIcon, WarningIcon, InfoIcon } from '@designbasekorea/icons';
 import { flushSync, createPortal } from 'react-dom';
+export { getTheme, setTheme, toggleTheme } from '@designbasekorea/theme';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2993,44 +2994,71 @@ const drawStars = (ctx, width, height, starsRef, options) => {
 };
 const drawWaves = (ctx, width, height, options) => {
     const { colors, offset, speedFactor } = options;
-    offset.current += 0.02 * speedFactor;
+    offset.current += 0.005 * speedFactor; // Slower, smoother movement
     colors.forEach((color, i) => {
+        const rgb = hexToRgb$1(color);
+        const gradient = ctx.createLinearGradient(0, 0, 0, height);
+        // Gradient from color to transparent for depth
+        gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        gradient.addColorStop(0.5, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.5)`);
+        gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`);
+        ctx.fillStyle = gradient;
         ctx.beginPath();
         ctx.moveTo(0, height);
-        const freq = 0.003 + i * 0.001;
-        const amp = 30 + i * 20;
-        const phase = offset.current + i * 2;
-        for (let x = 0; x <= width; x += 10) {
-            const y = height / 2 +
-                Math.sin(x * freq + phase) * amp +
-                Math.sin(x * 0.001 + phase * 0.5) * 50;
+        // Organic wave generation
+        for (let x = 0; x <= width; x += 5) {
+            const freq1 = 0.002 + i * 0.0005;
+            const freq2 = 0.005 + i * 0.001;
+            const phase = offset.current + i * 1.5;
+            // Combine two sine waves for more natural look
+            const y1 = Math.sin(x * freq1 + phase) * (40 + i * 15);
+            const y2 = Math.sin(x * freq2 + phase * 1.2) * (20 + i * 5);
+            const y = height / 1.5 + y1 + y2 + (i * 30); // Base height + waves + layering offset
             ctx.lineTo(x, y);
         }
         ctx.lineTo(width, height);
         ctx.lineTo(0, height);
         ctx.closePath();
-        ctx.fillStyle = color;
+        // Add subtle blur for "dreamy" effect
+        // Note: filter can be expensive, use sparingly. 
+        // If performance is an issue, remove this toggle or reduce canvas size.
+        // ctx.filter = 'blur(4px)'; 
+        ctx.globalAlpha = 0.6; // Base transparency
         ctx.fill();
+        ctx.globalAlpha = 1.0;
+        // ctx.filter = 'none';
     });
 };
 const drawPulse = (ctx, width, height, options) => {
     const { colors, time, intensity } = options;
     const centerX = width / 2;
     const centerY = height / 2;
-    const maxRadius = Math.max(width, height) * 0.8;
-    const intensityMap = { subtle: 0.5, medium: 1, vivid: 1.5 };
+    const maxRadius = Math.max(width, height) * 0.6; // Slightly reduced max radius to keep it contained
+    const intensityMap = { subtle: 0.8, medium: 1.2, vivid: 1.8 }; // Increased base intensity
     const factor = intensityMap[intensity];
     colors.forEach((color, i) => {
-        const t = time * 0.02 * factor + (i * (Math.PI * 2)) / colors.length;
-        const radius = (Math.sin(t) * 0.2 + 0.5) * maxRadius;
-        const alpha = (Math.sin(t + Math.PI) * 0.2 + 0.3) * factor;
+        // Offset time for each color layer
+        const t = time * 0.002 * factor + (i * (Math.PI / 1.5));
+        // Breathing effect for radius
+        const radius = (Math.sin(t) * 0.15 + 0.6) * maxRadius;
+        // Breathing effect for opacity
+        const alpha = (Math.sin(t + Math.PI / 2) * 0.3 + 0.5) * factor; // Higher base alpha (0.2->0.8 range)
+        // Clamp alpha max to 1
+        const safeAlpha = Math.min(Math.max(alpha, 0), 1);
+        if (safeAlpha <= 0.01)
+            return;
         const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
         const rgb = hexToRgb$1(color);
+        // Harder center, softer edge
         gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
-        gradient.addColorStop(0.5, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha * 0.5})`);
+        gradient.addColorStop(0.2, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha * 0.2})`);
+        gradient.addColorStop(0.6, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha * 0.6})`);
         gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
         ctx.fillStyle = gradient;
+        // Use globalCompositeOperation to blend nicely
+        ctx.globalCompositeOperation = 'screen';
         ctx.fillRect(0, 0, width, height);
+        ctx.globalCompositeOperation = 'source-over';
     });
 };
 
@@ -3322,63 +3350,132 @@ const AnimationBackground = ({ type = 'gradient', theme = 'dark', intensity = 's
                 }, children: content }), showGrid && (jsx(GridOverlay, { size: gridSize, color: effectiveGridColor, opacity: gridOpacity })), children && (jsx("div", { className: "designbase-animation-background__content", style: { position: 'relative', zIndex: 10, width: '100%', height: '100%' }, children: children }))] }));
 };
 
-const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, delay = 0, direction = 'left', size = 'm', color = 'primary', customColor, weight = 'normal', align = 'left', gradientColors = ['#667eea', '#764ba2'], waveColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'], glowColor = '#667eea', clickable = false, disabled = false, className, onClick, }) => {
+const AnimationText = ({ children, trigger = 'mount', type = 'fade', speed = 1000, repeat = 1, delay = 0, direction = 'left', size = 'm', color = 'primary', customColor, weight = 'normal', align = 'left', gradientColors = ['#667eea', '#764ba2'], waveColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'], glowColor = '#667eea', clickable = false, disabled = false, className, onClick, }) => {
     const [isVisible, setIsVisible] = useState(false);
-    const [currentIndex, setCurrentIndex] = useState(0);
     const [isAnimating, setIsAnimating] = useState(false);
+    // Initialize with full text unless it's a mount trigger for typing/decode
+    const [displayText, setDisplayText] = useState((type === 'decode' || type === 'typing') && trigger === 'mount' ? '' : children);
+    const [currentRepeat, setCurrentRepeat] = useState(0);
     const textRef = useRef(null);
-    useRef(null);
-    // 타이핑 애니메이션을 위한 상태
-    const [displayText, setDisplayText] = useState('');
+    const observerRef = useRef(null);
+    // Initial trigger logic
     useEffect(() => {
-        if (delay > 0) {
+        if (trigger === 'mount') {
             const timer = setTimeout(() => {
                 setIsVisible(true);
+                startAnimation();
             }, delay);
             return () => clearTimeout(timer);
         }
-        else {
-            setIsVisible(true);
+        else if (trigger === 'in-view' && textRef.current) {
+            observerRef.current = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting) {
+                    setTimeout(() => {
+                        setIsVisible(true);
+                        startAnimation();
+                    }, delay);
+                    observerRef.current?.disconnect();
+                }
+            });
+            observerRef.current.observe(textRef.current);
+            return () => observerRef.current?.disconnect();
         }
-    }, [delay]);
-    // 타이핑 애니메이션
+    }, [trigger, delay]);
+    // Update initial text visibility when props change
     useEffect(() => {
-        if (type === 'typing' && isVisible) {
-            setDisplayText('');
-            setCurrentIndex(0);
-            const typeInterval = setInterval(() => {
-                setCurrentIndex(prev => {
-                    if (prev >= children.length) {
-                        clearInterval(typeInterval);
-                        return prev;
-                    }
-                    setDisplayText(children.slice(0, prev + 1));
-                    return prev + 1;
-                });
-            }, speed / children.length);
-            return () => clearInterval(typeInterval);
+        if ((type === 'typing' || type === 'decode') && trigger === 'mount') ;
+        else {
+            // For hover/click, ensure text is visible when not animating
+            if (!isAnimating) {
+                setDisplayText(children);
+            }
         }
-    }, [type, isVisible, children, speed]);
-    // 반복 애니메이션
-    useEffect(() => {
-        if (repeat > 0 && type !== 'typing') {
-            let repeatCount = 0;
-            const repeatAnimation = () => {
-                setIsAnimating(true);
-                setTimeout(() => {
+    }, [children, type, trigger]);
+    const startAnimation = () => {
+        setIsAnimating(true);
+        setCurrentRepeat(0);
+        if (type === 'typing') {
+            startTyping(0);
+        }
+        else if (type === 'decode') {
+            startDecoding(0);
+        }
+    };
+    const startTyping = (iteration) => {
+        setDisplayText('');
+        let currentIndex = 0;
+        const interval = setInterval(() => {
+            if (currentIndex >= children.length) {
+                clearInterval(interval);
+                // Repetition logic
+                if (repeat === 0 || iteration < repeat - 1) {
+                    setTimeout(() => {
+                        startTyping(iteration + 1);
+                    }, 500);
+                }
+                else {
                     setIsAnimating(false);
-                    repeatCount++;
-                    if (repeatCount < repeat) {
-                        setTimeout(repeatAnimation, speed);
-                    }
-                }, speed);
-            };
-            if (isVisible) {
-                setTimeout(repeatAnimation, speed);
+                }
+                return;
+            }
+            setDisplayText(children.slice(0, currentIndex + 1));
+            currentIndex++;
+        }, speed / children.length);
+    };
+    const startDecoding = (iteration) => {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
+        let iterations = 0;
+        const interval = setInterval(() => {
+            setDisplayText(children.split('').map((char, index) => {
+                if (index < iterations) {
+                    return children[index];
+                }
+                return characters[Math.floor(Math.random() * characters.length)];
+            }).join(''));
+            if (iterations >= children.length) {
+                clearInterval(interval);
+                setDisplayText(children);
+                // Repetition logic
+                if (repeat === 0 || iteration < repeat - 1) {
+                    setTimeout(() => {
+                        startDecoding(iteration + 1);
+                    }, 500);
+                }
+                else {
+                    setIsAnimating(false);
+                }
             }
+            iterations += 1 / 3;
+        }, 30);
+    };
+    const handleMouseEnter = () => {
+        if (trigger === 'hover') {
+            setIsVisible(true);
+            startAnimation();
         }
-    }, [repeat, type, speed, isVisible]);
+    };
+    const handleMouseLeave = () => {
+        if (trigger === 'hover') {
+            setIsVisible(false);
+            setIsAnimating(false);
+            if (type === 'typing' || type === 'decode') {
+                setDisplayText(children);
+            }
+        }
+    };
     const handleClick = () => {
+        if (trigger === 'click') {
+            setIsVisible(!isVisible);
+            if (isVisible) {
+                setIsAnimating(false);
+                if (type === 'typing' || type === 'decode') {
+                    setDisplayText(children);
+                }
+            }
+            else {
+                startAnimation();
+            }
+        }
         if (clickable && !disabled && onClick) {
             onClick();
         }
@@ -3395,14 +3492,6 @@ const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, dela
         }
         return {};
     };
-    const getWaveStyle = () => {
-        if (type === 'wave') {
-            return {
-                '--wave-colors': waveColors.join(', '),
-            };
-        }
-        return {};
-    };
     const getGlowStyle = () => {
         if (type === 'glow') {
             return {
@@ -3411,26 +3500,52 @@ const AnimationText = ({ children, type = 'fade', speed = 1000, repeat = 0, dela
         }
         return {};
     };
-    const classes = classNames('designbase-animation-text', `designbase-animation-text--${type}`, `designbase-animation-text--${size}`, `designbase-animation-text--${color}`, `designbase-animation-text--${weight}`, `designbase-animation-text--${align}`, `designbase-animation-text--${direction}`, {
+    // For typing, the class should be applied to the inner element to handle caret correctly with ghost element
+    const containerClasses = classNames('designbase-animation-text', 
+    // Exclude typing logic from outer container to prevent caret on full-width ghost container
+    type !== 'typing' && `designbase-animation-text--${type}`, `designbase-animation-text--${size}`, `designbase-animation-text--${color}`, `designbase-animation-text--${weight}`, `designbase-animation-text--${align}`, `designbase-animation-text--${direction}`, {
         'designbase-animation-text--visible': isVisible,
         'designbase-animation-text--animating': isAnimating,
-        'designbase-animation-text--clickable': clickable,
+        'designbase-animation-text--clickable': clickable || trigger === 'click',
         'designbase-animation-text--disabled': disabled,
     }, className);
     const style = {
         ...getGradientStyle(),
-        ...getWaveStyle(),
         ...getGlowStyle(),
         '--db-animation-speed': `${speed}ms`,
         '--db-text-custom': customColor,
+        '--db-wave-colors': waveColors.join(', '),
+        '--db-animation-iteration-count': repeat === 0 ? 'infinite' : repeat,
     };
-    const renderText = () => {
-        if (type === 'typing') {
-            return displayText;
-        }
-        return children;
-    };
-    return (jsx("div", { ref: textRef, className: classes, style: style, onClick: handleClick, children: renderText() }));
+    const renderContent = () => {
+        if (type === 'wave' || type === 'shake') {
+            if (!isVisible && !isAnimating)
+                return children;
+            return children.split('').map((char, index) => (jsx("span", { style: {
+                    animationDelay: `${index * 0.05}s`,
+                    display: 'inline-block'
+                }, children: char === ' ' ? '\u00A0' : char }, index)));
+        }
+        return displayText;
+    };
+    return (jsxs("div", { ref: textRef, className: containerClasses, style: style, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx("span", { "aria-hidden": "true", style: {
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    userSelect: 'none',
+                    whiteSpace: type === 'typing' ? 'pre-wrap' : undefined
+                }, children: children }), jsx("span", { className: classNames({
+                    'designbase-animation-text--typing': type === 'typing',
+                    'designbase-animation-text--animating': isAnimating && type === 'typing' // Ensure animating class is passed for typing caret
+                }), style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    // For typing, we want width to be auto so caret follows text
+                    // For others, width 100% matches ghost element
+                    width: type === 'typing' ? 'auto' : '100%',
+                    height: '100%',
+                    whiteSpace: type === 'typing' ? 'pre-wrap' : undefined // Ensure pre-wrap behavior matches
+                }, children: renderContent() })] }));
 };
 
 const AudioPlayer = ({ src, title, artist, album, albumArt, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableKeyboard = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, repeatMode = 'none', shuffle = false, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onPlaylistChange, onPlaybackRateChange, onRepeatModeChange, onShuffleChange, onError, className, }) => {
@@ -4192,6 +4307,7 @@ SegmentControl.displayName = 'SegmentControl';
 
 const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true, closeOnEscape = true, children, className, overlayClassName, }) => {
     const modalRef = useRef(null);
+    const titleId = useId();
     // 아이콘 크기 계산 (m이 기본값)
     const iconSize = size === 's' ? 16 : size === 'l' ? 20 : size === 'xl' ? 24 : 18;
     // Prevent scrolling while modal is open
@@ -4223,11 +4339,12 @@ const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true,
         return null;
     const modalClasses = clsx('designbase-modal', `designbase-modal--${size}`, className);
     const overlayClasses = clsx('designbase-modal__overlay', overlayClassName);
-    return (jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? 'modal-title' : undefined, children: [title && (jsx(ModalHeader, { title: title, showCloseButton: true, onClose: onClose, iconSize: iconSize })), jsx("div", { className: "designbase-modal__content", children: children })] }) }));
+    return (jsx("div", { className: overlayClasses, onClick: closeOnOutsideClick ? onClose : undefined, children: jsxs("div", { ref: modalRef, className: modalClasses, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, children: [title && (jsx(ModalHeader, { title: title, titleId: titleId, showCloseButton: true, onClose: onClose, iconSize: iconSize })), jsx("div", { className: "designbase-modal__content", children: children })] }) }));
 };
-const ModalHeader = ({ title, showCloseButton = true, onClose, iconSize = 20, className, children, }) => {
+const ModalHeader = ({ title, titleId, showCloseButton = true, onClose, iconSize = 20, className, children, }) => {
+    const fallbackTitleId = useId();
     const classes = clsx('designbase-modal__header', className);
-    return (jsxs("div", { className: classes, children: [jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsx("h2", { id: "modal-title", className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsx(CloseIcon, { size: iconSize, color: "currentColor" }) }))] }));
+    return (jsxs("div", { className: classes, children: [jsxs("div", { className: "designbase-modal__header-content", children: [title && (jsx("h2", { id: titleId || fallbackTitleId, className: "designbase-modal__title", children: title })), children] }), showCloseButton && onClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "\uBAA8\uB2EC \uB2EB\uAE30", className: "designbase-modal__close-button", children: jsx(CloseIcon, { size: iconSize, color: "currentColor" }) }))] }));
 };
 const ModalBody = ({ className, children, }) => {
     const classes = clsx('designbase-modal__body', className);
@@ -4490,6 +4607,11 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (multiple ? [] : ''));
     const [searchTerm, setSearchTerm] = useState('');
     const [focusedIndex, setFocusedIndex] = useState(-1);
+    const selectId = useId();
+    const labelId = `${selectId}-label`;
+    const listboxId = `${selectId}-listbox`;
+    const helperTextId = `${selectId}-helper-text`;
+    const errorTextId = `${selectId}-error-text`;
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -4649,23 +4771,29 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
     const filteredOptions = getFilteredOptions();
     const selectedLabels = getSelectedLabels();
     const hasValue = multiple ? selectedValue.length > 0 : selectedValue !== '';
-    return (jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxs("label", { className: "designbase-select__label", children: [label, required && jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? 'select-label' : undefined, ...props, children: [jsx("div", { className: "designbase-select__value", children: multiple ? (jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
+    const activeDescendantId = focusedIndex >= 0 ? `${selectId}-option-${focusedIndex}` : undefined;
+    const describedBy = error && errorMessage
+        ? errorTextId
+        : helperText
+            ? helperTextId
+            : undefined;
+    return (jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxs("label", { id: labelId, className: "designbase-select__label", children: [label, required && jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-labelledby": label ? labelId : undefined, "aria-describedby": describedBy, "aria-invalid": error, ...props, children: [jsx("div", { className: "designbase-select__value", children: multiple ? (jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
                                 const option = options.find(opt => opt.value === value);
                                 return (jsxs("span", { className: "designbase-select__tag", children: [jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleRemoveValue(value);
                                             }, children: jsx(CloseIcon, { size: 12 }) })] }, value));
-                            }) })) : (jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsx(CloseIcon, { size: 16 }) })), jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsx(ChevronUpIcon, { size: 16 }) : jsx(ChevronDownIcon, { size: 16 }) })] })] }), jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [searchable && (jsx("div", { className: "designbase-select__search", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: jsx(SearchBar, { value: searchTerm, onChange: (value) => setSearchTerm(value), onSearch: (val) => setSearchTerm(val), placeholder: "\uC635\uC158 \uAC80\uC0C9", size: size, variant: "outlined", fullWidth: true, onFocus: (e) => e.stopPropagation(), onBlur: (e) => e.stopPropagation() }) })), jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, role: "listbox", children: filteredOptions.length === 0 ? (jsx("div", { className: "designbase-select__no-options", children: searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.' })) : (filteredOptions.map((option, index) => {
+                            }) })) : (jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsx(CloseIcon, { size: 16 }) })), jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsx(ChevronUpIcon, { size: 16 }) : jsx(ChevronDownIcon, { size: 16 }) })] })] }), jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [searchable && (jsx("div", { className: "designbase-select__search", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: jsx(SearchBar, { value: searchTerm, onChange: (value) => setSearchTerm(value), onSearch: (val) => setSearchTerm(val), placeholder: "\uC635\uC158 \uAC80\uC0C9", size: size, variant: "outlined", fullWidth: true, onFocus: (e) => e.stopPropagation(), onBlur: (e) => e.stopPropagation() }) })), jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, id: listboxId, role: "listbox", children: filteredOptions.length === 0 ? (jsx("div", { className: "designbase-select__no-options", children: searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.' })) : (filteredOptions.map((option, index) => {
                             const isSelected = multiple
                                 ? selectedValue.includes(option.value)
                                 : selectedValue === option.value;
                             const isFocused = index === focusedIndex;
-                            return (jsxs("div", { className: clsx('designbase-select__option', {
+                            return (jsxs("div", { id: `${selectId}-option-${index}`, className: clsx('designbase-select__option', {
                                     'designbase-select__option--selected': isSelected,
                                     'designbase-select__option--focused': isFocused,
                                     'designbase-select__option--disabled': option.disabled,
                                 }), onClick: () => handleOptionSelect(option), role: "option", "aria-selected": isSelected, children: [multiple && (jsx("div", { className: "designbase-select__checkbox", children: jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
-                        })) })] }), helperText && !error && (jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
+                        })) })] }), helperText && !error && (jsx("p", { id: helperTextId, className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsx("p", { id: errorTextId, className: "designbase-select__error-message", children: errorMessage }))] }));
 };
 Select.displayName = 'Select';
 
@@ -5269,7 +5397,7 @@ const Card = forwardRef(function Card({ title, subtitle, description, children,
             return null;
         return (jsx("div", { className: "designbase-card__actions", children: actions.map((action, index) => {
                 const ActionIcon = action.icon;
-                return (jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: !!action.loading, icon: ActionIcon, children: action.label }, index));
+                return (jsx(Button, { variant: action.variant || 'primary', size: action.size || 's', onClick: () => handleActionClick(action, index), disabled: action.disabled || disabled, loading: !!action.loading, startIcon: ActionIcon, children: action.label }, index));
             }) }));
     };
     const renderContent = () => (jsxs("div", { className: "designbase-card__content", children: [renderIcon(), (title || subtitle) && (jsxs("div", { className: "designbase-card__header", children: [title && jsx("h3", { className: "designbase-card__title", children: title }), subtitle && jsx("p", { className: "designbase-card__subtitle", children: subtitle })] })), description && jsx("p", { className: "designbase-card__description", children: description }), children && jsx("div", { className: "designbase-card__body", children: children }), renderTags(), renderMeta(), renderActions()] }));
@@ -10897,7 +11025,7 @@ const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant
     }
 };
 
-const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
+const Sidebar = ({ size = 'm', variant = 'default', position = 'left', showLogo = false, logo, onLogoClick, items = [], onItemClick, userProfile, userMenuItems = [], onUserMenuItemClick, collapsed = false, onToggle, collapsible = true, fixed = false, fullHeight = false, shadow = false, className, ...props }) => {
     const [expandedItems, setExpandedItems] = useState([]);
     const handleToggle = () => {
         if (onToggle) {
@@ -10938,24 +11066,24 @@ const Sidebar = ({ size = 'm', variant = 'default', position = 'left', logo, onL
         const hasChildren = item.children && item.children.length > 0;
         return (jsx("li", { className: "designbase-sidebar__item", children: jsx(MenuItem, { ...item, type: "block", style: "accordion", depth: level, expanded: isExpanded, expandable: hasChildren, onClick: () => handleItemClick(item), onChildClick: (child) => handleItemClick(child) }) }, item.id));
     };
-    return (jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxs("div", { className: "designbase-sidebar__container", children: [jsxs("div", { className: "designbase-sidebar__header", children: [jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
+    return (jsx("aside", { className: classes, role: "complementary", "aria-label": "\uC0AC\uC774\uB4DC\uBC14 \uB124\uBE44\uAC8C\uC774\uC158", ...props, children: jsxs("div", { className: "designbase-sidebar__container", children: [showLogo && (jsxs("div", { className: "designbase-sidebar__header", children: [jsx("div", { className: "designbase-sidebar__logo", onClick: onLogoClick, role: onLogoClick ? 'button' : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
                                 if (onLogoClick && (e.key === 'Enter' || e.key === ' ')) {
                                     e.preventDefault();
                                     onLogoClick();
                                 }
                             }, children: logo || jsx(Logo, { size: "s" }) }), collapsible && (jsx(Button, { variant: "ghost", size: "s", iconOnly: true, className: "designbase-sidebar__toggle", onPress: handleToggle, "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: jsx(ChevronLeftIcon, { className: clsx('designbase-sidebar__toggle-icon', {
                                     'designbase-sidebar__toggle-icon--collapsed': collapsed,
-                                }) }) }))] }), jsx("nav", { className: "designbase-sidebar__nav", children: jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxs("div", { className: "designbase-sidebar__user", children: [jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                                }) }) }))] })), jsx("nav", { className: "designbase-sidebar__nav", children: jsx("ul", { className: "designbase-sidebar__nav-list", children: items.map((item) => renderSidebarItem(item)) }) }), userProfile && !collapsed && (jsxs("div", { className: "designbase-sidebar__user", children: [jsxs("div", { className: "designbase-sidebar__user-info", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                                 if (e.key === 'Enter' || e.key === ' ') {
                                     e.preventDefault();
                                     onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
                                 }
-                            }, style: { cursor: 'pointer' }, children: [userProfile.avatar ? (jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar" })) : (jsx("div", { className: "designbase-sidebar__user-avatar-placeholder", children: userProfile.name.charAt(0).toUpperCase() })), jsxs("div", { className: "designbase-sidebar__user-details", children: [jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsx("li", { children: jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, disabled: item.disabled, type: "block", style: "accordion", onClick: () => handleUserMenuItemClick(item) }) }, item.id))) }))] })), userProfile && collapsed && (jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                            }, style: { cursor: 'pointer' }, children: [jsx(Avatar, { src: userProfile.avatar, initials: userProfile.name, alt: userProfile.name, size: "s", className: "designbase-sidebar__user-avatar" }), jsxs("div", { className: "designbase-sidebar__user-details", children: [jsx("div", { className: "designbase-sidebar__user-name", children: userProfile.name }), userProfile.email && (jsx("div", { className: "designbase-sidebar__user-email", children: userProfile.email })), userProfile.role && (jsx("div", { className: "designbase-sidebar__user-role", children: userProfile.role }))] })] }), userMenuItems.length > 0 && (jsx("ul", { className: "designbase-sidebar__user-menu", children: userMenuItems.map((item) => (jsx("li", { children: jsx(MenuItem, { id: item.id, label: item.label, href: item.href, icon: item.icon, disabled: item.disabled, type: "block", style: "accordion", onClick: () => handleUserMenuItemClick(item) }) }, item.id))) }))] })), userProfile && collapsed && (jsx("div", { className: "designbase-sidebar__user-collapsed", onClick: () => onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' }), role: "button", tabIndex: 0, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
                             onUserMenuItemClick?.({ id: 'profile', label: '프로필', href: '#' });
                         }
-                    }, style: { cursor: 'pointer' }, children: userProfile.avatar ? (jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "designbase-sidebar__user-avatar-collapsed" })) : (jsx("div", { className: "designbase-sidebar__user-avatar-placeholder-collapsed", children: userProfile.name.charAt(0).toUpperCase() })) }))] }) }));
+                    }, style: { cursor: 'pointer' }, children: jsx(Avatar, { src: userProfile.avatar, initials: userProfile.name, alt: userProfile.name, size: "s", className: "designbase-sidebar__user-avatar-collapsed" }) }))] }) }));
 };
 Sidebar.displayName = 'Sidebar';
 
@@ -12390,24 +12518,5 @@ const YouTubePlayer = ({ videoId, title, description, size = 'm', variant = 'def
 };
 YouTubePlayer.displayName = 'YouTubePlayer';
 
-/**
- * Designbase UI 컴포넌트 라이브러리 메인 엔트리 포인트
- *
- * 목적: 모든 UI 컴포넌트와 타입을 내보냄
- * 기능: Tree-shaking 가능한 개별 컴포넌트 내보내기
- * 사용법: import { Button, Input } from '@designbasekorea/ui'
- */
-// 테마 CSS 자동 로드 (로컬 복사본 사용)
-// 테마 관련 유틸리티 재내보내기
-const setTheme = (theme) => {
-    console.log('setTheme called with:', theme);
-};
-const getTheme = () => {
-    return 'light';
-};
-const toggleTheme = () => {
-    console.log('toggleTheme called');
-};
-
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme, useToast };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, useToast };
 //# sourceMappingURL=index.esm.js.map