@designbasekorea/ui 0.3.4 → 0.4.0

package/dist/index.esm.js

@@ -3855,7 +3855,7 @@ const Breadcrumbs = ({ items, size = 'm', breadcrumbStyle = 'default', separator
 };
 Breadcrumbs.displayName = 'Breadcrumbs';
 
-const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
+const SegmentControl = ({ options, defaultValue, value, size = 'm', variant = 'default', fullWidth = false, disabled = false, className, onChange, ...props }) => {
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? options[0]?.value ?? '');
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const containerRef = useRef(null);
@@ -3930,7 +3930,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
         setFocusedIndex(-1);
     }, []);
     const selectedIndex = options.findIndex(option => option.value === selectedValue);
-    const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, {
+    const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, `designbase-segment-control--${variant}`, {
         'designbase-segment-control--full-width': fullWidth,
         'designbase-segment-control--disabled': disabled,
     }, className);
@@ -3950,7 +3950,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
                         else {
                             segmentRefs.current.delete(option.value);
                         }
-                    }, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsx("span", { className: "designbase-segment-control__segment-icon", children: jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })] }, option.value));
+                    }, className: segmentClasses, role: "tab", "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: () => handleSegmentSelect(option.value), onFocus: () => handleSegmentFocus(index), onBlur: handleSegmentBlur, children: [option.icon && (jsx("span", { className: "designbase-segment-control__segment-icon", children: jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), variant === 'default' && (jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })), variant === 'icon-only' && !option.icon && (jsx("span", { className: "designbase-segment-control__segment-label", "aria-label": option.label, children: option.label }))] }, option.value));
             }), jsx("div", { className: "designbase-segment-control__indicator", style: {
                     transform: `translateX(${selectedIndex * 100}%)`,
                     width: `${100 / options.length}%`,
@@ -11398,20 +11398,23 @@ const Timeline = ({ items, type = 'alternate', variant = 'default', size = 'm',
                     'designbase-timeline__item--disabled': item.disabled,
                 });
                 const contentClasses = clsx('designbase-timeline__content', `designbase-timeline__content--${itemPosition}`);
-                const dotClasses = clsx('designbase-timeline__dot', `designbase-timeline__dot--${itemColor}`, `designbase-timeline__dot--${variant}`, {
+                const itemStatus = item.status || 'pending';
+                const dotClasses = clsx('designbase-timeline__dot', `designbase-timeline__dot--${itemColor}`, `designbase-timeline__dot--${variant}`, `designbase-timeline__dot--${itemStatus}`, {
                     'designbase-timeline__dot--clickable': isClickable,
+                    'designbase-timeline__dot--with-icon': item.icon,
+                    'designbase-timeline__dot--with-number': item.number && !item.icon,
                 });
-                return (jsxs("div", { className: itemClasses, children: [jsxs("div", { className: "designbase-timeline__indicator-container", children: [jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인 점`, onKeyDown: (e) => {
+                return (jsxs("div", { className: itemClasses, children: [jsxs("div", { className: "designbase-timeline__indicator-container", children: [itemStatus === 'active' && !item.icon && item.number === undefined && (jsx("div", { className: "designbase-timeline__pulse" })), jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": item.title ? `${item.title} 타임라인 점` : `타임라인 점 ${index + 1}`, onKeyDown: (e) => {
                                         if (e.key === 'Enter' || e.key === ' ') {
                                             e.preventDefault();
                                             handleItemClick(item, index);
                                         }
-                                    }, children: item.icon ? (jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsx("span", { className: "designbase-timeline__number", children: index + 1 })) }), !isLast && (jsx("div", { className: "designbase-timeline__connector" }))] }), jsx("div", { className: contentClasses, children: jsx("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": item.title ? `${item.title} 타임라인 아이템` : `타임라인 아이템 ${index + 1}`, onKeyDown: (e) => {
-                                    if (e.key === 'Enter' || e.key === ' ') {
-                                        e.preventDefault();
-                                        handleItemClick(item, index);
-                                    }
-                                }, children: item.content ? (item.content) : (jsxs(Fragment, { children: [item.timestamp && (jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), item.title && (jsx("h3", { className: "designbase-timeline__title", children: item.title })), item.description && (jsx("p", { className: "designbase-timeline__description", children: item.description }))] })) }) })] }, item.id));
+                                    }, children: item.icon ? (jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : item.number !== undefined ? (jsx("span", { className: "designbase-timeline__number", children: item.number })) : null }), !isLast && (jsx("div", { className: "designbase-timeline__connector" }))] }), jsxs("div", { className: contentClasses, children: [item.timestamp && (jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsx("div", { className: "designbase-timeline__content-inner", onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": item.title ? `${item.title} 타임라인 아이템` : `타임라인 아이템 ${index + 1}`, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            handleItemClick(item, index);
+                                        }
+                                    }, children: item.content ? (item.content) : (jsxs(Fragment, { children: [item.title && (jsx("h3", { className: "designbase-timeline__title", children: item.title })), item.description && (jsx("p", { className: "designbase-timeline__description", children: item.description }))] })) })] })] }, item.id));
             }) }) }));
 };