@designbasekorea/ui 0.3.4 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +14 -11
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +14 -11
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +14 -11
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -3856,7 +3856,7 @@
|
|
|
3856
3856
|
};
|
|
3857
3857
|
Breadcrumbs.displayName = 'Breadcrumbs';
|
|
3858
3858
|
|
|
3859
|
-
const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3859
|
+
const SegmentControl = ({ options, defaultValue, value, size = 'm', variant = 'default', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3860
3860
|
const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? options[0]?.value ?? '');
|
|
3861
3861
|
const [focusedIndex, setFocusedIndex] = React.useState(-1);
|
|
3862
3862
|
const containerRef = React.useRef(null);
|
|
@@ -3931,7 +3931,7 @@
|
|
|
3931
3931
|
setFocusedIndex(-1);
|
|
3932
3932
|
}, []);
|
|
3933
3933
|
const selectedIndex = options.findIndex(option => option.value === selectedValue);
|
|
3934
|
-
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, {
|
|
3934
|
+
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, `designbase-segment-control--${variant}`, {
|
|
3935
3935
|
'designbase-segment-control--full-width': fullWidth,
|
|
3936
3936
|
'designbase-segment-control--disabled': disabled,
|
|
3937
3937
|
}, className);
|
|
@@ -3951,7 +3951,7 @@
|
|
|
3951
3951
|
else {
|
|
3952
3952
|
segmentRefs.current.delete(option.value);
|
|
3953
3953
|
}
|
|
3954
|
-
}, 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 && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntime.jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })] }, option.value));
|
|
3954
|
+
}, 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 && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-icon", children: jsxRuntime.jsx(option.icon, { size: size === 's' ? 14 : size === 'l' ? 18 : 16 }) })), variant === 'default' && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", children: option.label })), variant === 'icon-only' && !option.icon && (jsxRuntime.jsx("span", { className: "designbase-segment-control__segment-label", "aria-label": option.label, children: option.label }))] }, option.value));
|
|
3955
3955
|
}), jsxRuntime.jsx("div", { className: "designbase-segment-control__indicator", style: {
|
|
3956
3956
|
transform: `translateX(${selectedIndex * 100}%)`,
|
|
3957
3957
|
width: `${100 / options.length}%`,
|
|
@@ -11399,20 +11399,23 @@
|
|
|
11399
11399
|
'designbase-timeline__item--disabled': item.disabled,
|
|
11400
11400
|
});
|
|
11401
11401
|
const contentClasses = clsx('designbase-timeline__content', `designbase-timeline__content--${itemPosition}`);
|
|
11402
|
-
const
|
|
11402
|
+
const itemStatus = item.status || 'pending';
|
|
11403
|
+
const dotClasses = clsx('designbase-timeline__dot', `designbase-timeline__dot--${itemColor}`, `designbase-timeline__dot--${variant}`, `designbase-timeline__dot--${itemStatus}`, {
|
|
11403
11404
|
'designbase-timeline__dot--clickable': isClickable,
|
|
11405
|
+
'designbase-timeline__dot--with-icon': item.icon,
|
|
11406
|
+
'designbase-timeline__dot--with-number': item.number && !item.icon,
|
|
11404
11407
|
});
|
|
11405
|
-
return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-timeline__indicator-container", children: [jsxRuntime.jsx("div", { className: dotClasses, onClick: () => handleItemClick(item, index), tabIndex: isClickable ? 0 : -1, role: isClickable ? 'button' : undefined, "aria-label": `${item.title} 타임라인
|
|
11408
|
+
return (jsxRuntime.jsxs("div", { className: itemClasses, children: [jsxRuntime.jsxs("div", { className: "designbase-timeline__indicator-container", children: [itemStatus === 'active' && !item.icon && item.number === undefined && (jsxRuntime.jsx("div", { className: "designbase-timeline__pulse" })), jsxRuntime.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) => {
|
|
11406
11409
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
11407
11410
|
e.preventDefault();
|
|
11408
11411
|
handleItemClick(item, index);
|
|
11409
11412
|
}
|
|
11410
|
-
}, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-timeline__number", children:
|
|
11411
|
-
|
|
11412
|
-
|
|
11413
|
-
|
|
11414
|
-
|
|
11415
|
-
|
|
11413
|
+
}, children: item.icon ? (jsxRuntime.jsx("div", { className: "designbase-timeline__icon", children: item.icon })) : item.number !== undefined ? (jsxRuntime.jsx("span", { className: "designbase-timeline__number", children: item.number })) : null }), !isLast && (jsxRuntime.jsx("div", { className: "designbase-timeline__connector" }))] }), jsxRuntime.jsxs("div", { className: contentClasses, children: [item.timestamp && (jsxRuntime.jsx("div", { className: "designbase-timeline__timestamp", children: item.timestamp })), jsxRuntime.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) => {
|
|
11414
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
11415
|
+
e.preventDefault();
|
|
11416
|
+
handleItemClick(item, index);
|
|
11417
|
+
}
|
|
11418
|
+
}, children: item.content ? (item.content) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.title && (jsxRuntime.jsx("h3", { className: "designbase-timeline__title", children: item.title })), item.description && (jsxRuntime.jsx("p", { className: "designbase-timeline__description", children: item.description }))] })) })] })] }, item.id));
|
|
11416
11419
|
}) }) }));
|
|
11417
11420
|
};
|
|
11418
11421
|
|