@designbasekorea/ui 0.5.4 → 0.5.5

package/dist/index.esm.js

@@ -8205,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)
@@ -10833,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, }) => {
@@ -11093,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';
@@ -11109,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';
         }