@designbasekorea/ui 0.5.2 → 0.5.5

package/dist/index.esm.js

@@ -4342,8 +4342,9 @@ const Modal = ({ isOpen, onClose, title, size = 'm', closeOnOutsideClick = true,
     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, 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: titleId || '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);
@@ -4606,7 +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 labelId = useId();
+    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);
@@ -4766,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", { 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-labelledby": label ? labelId : 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';
 
@@ -8194,7 +8205,7 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     const renderButtons = () => {
         if (buttons.length === 0)
             return null;
-        return (jsx("div", { className: "designbase-hero-feature__buttons", children: buttons.map((button, index) => (jsx(Button, { href: button.href, variant: button.variant || 'primary', size: button.size || 'md', onClick: button.onClick, target: button.external ? '_blank' : undefined, rel: button.external ? 'noopener noreferrer' : undefined, icon: button.icon, children: button.text }, index))) }));
+        return (jsx("div", { className: "designbase-hero-feature__buttons", children: buttons.map((button, index) => (jsx(Button, { href: button.href, variant: button.variant || 'primary', size: button.size || 'm', onClick: button.onClick, target: button.external ? '_blank' : undefined, rel: button.external ? 'noopener noreferrer' : undefined, icon: button.icon, children: button.text }, index))) }));
     };
     const renderStats = () => {
         if (stats.length === 0)
@@ -10822,14 +10833,34 @@ const ScrollArea = ({ direction = 'vertical', scrollbarStyle = 'auto', maxHeight
     return (jsx("div", { className: classes, style: style, children: jsx("div", { ref: scrollRef, className: "designbase-scroll-area__content", children: children }) }));
 };
 
-const Section = ({ title, subtitle, description, size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
+const Section = ({ title, subtitle, description = '', size = 'm', variant = 'default', header, footer, actions, noPadding = false, fullWidth = false, fullHeight = false, className, children, }) => {
+    const normalizeActionButtonSize = (node) => {
+        if (!React.isValidElement(node))
+            return node;
+        const element = node;
+        const elementType = element.type;
+        const isButtonComponent = elementType?.displayName === 'Button' || elementType?.name === 'Button';
+        // Button이고 size가 지정되지 않았으면 기본값 m 적용
+        if (isButtonComponent && element.props?.size === undefined) {
+            return React.cloneElement(element, { size: 'm' });
+        }
+        if (element.props?.children) {
+            return React.cloneElement(element, {
+                children: React.Children.map(element.props.children, normalizeActionButtonSize),
+            });
+        }
+        return element;
+    };
+    const normalizedActions = actions
+        ? React.Children.map(actions, normalizeActionButtonSize)
+        : actions;
     const classes = clsx('designbase-section', `designbase-section--size-${size}`, `designbase-section--variant-${variant}`, {
         'designbase-section--no-padding': noPadding,
         'designbase-section--full-width': fullWidth,
         'designbase-section--full-height': fullHeight,
     }, className);
-    const hasHeader = title || subtitle || description || header || actions;
-    return (jsxs("section", { className: classes, children: [hasHeader && (jsx("div", { className: "designbase-section__header", children: header || (jsxs(Fragment, { children: [(title || subtitle) && (jsxs("div", { className: "designbase-section__title-area", children: [title && (jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsx("p", { className: "designbase-section__description", children: description }))] })), actions && (jsx("div", { className: "designbase-section__actions", children: actions }))] })) })), jsx("div", { className: "designbase-section__content", children: children }), footer && (jsx("div", { className: "designbase-section__footer", children: footer }))] }));
+    const hasHeader = title || subtitle || description || header || normalizedActions;
+    return (jsxs("section", { className: classes, children: [hasHeader && (jsx("div", { className: "designbase-section__header", children: header || (jsxs(Fragment, { children: [(title || subtitle) && (jsxs("div", { className: "designbase-section__title-area", children: [title && (jsx("h2", { className: "designbase-section__title", children: title })), subtitle && (jsx("h3", { className: "designbase-section__subtitle", children: subtitle })), description && (jsx("p", { className: "designbase-section__description", children: description }))] })), normalizedActions && (jsx("div", { className: "designbase-section__actions", children: normalizedActions }))] })) })), jsx("div", { className: "designbase-section__content", children: children }), footer && (jsx("div", { className: "designbase-section__footer", children: footer }))] }));
 };
 
 const Share = ({ url, title, description = '', imageUrl, hashtags = [], variant = 'button', size = 'm', position = 'bottom', platforms = ['facebook', 'x', 'linkedin', 'whatsapp', 'email', 'link'], customPlatforms = {}, buttonText = '공유', buttonIcon = ShareAltIcon, modalTitle = '공유하기', copySuccessMessage = '링크가 클립보드에 복사되었습니다!', showQrCode = true, qrCodeSize = 200, className, style, onShare, onShareError, onCopySuccess, onCopyError, }) => {
@@ -11082,11 +11113,11 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
         switch (size) {
             case 'xs':
                 return variant === 'circular' ? '16px' : '12px';
-            case 'sm':
+            case 's':
                 return variant === 'circular' ? '24px' : '16px';
-            case 'md':
+            case 'm':
                 return variant === 'circular' ? '32px' : '20px';
-            case 'lg':
+            case 'l':
                 return variant === 'circular' ? '48px' : '24px';
             case 'xl':
                 return variant === 'circular' ? '64px' : '32px';
@@ -11098,9 +11129,9 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
     const getTextLineHeight = () => {
         switch (size) {
             case 'xs': return '12px';
-            case 'sm': return '16px';
-            case 'md': return '20px';
-            case 'lg': return '24px';
+            case 's': return '16px';
+            case 'm': return '20px';
+            case 'l': return '24px';
             case 'xl': return '32px';
             default: return '20px';
         }