@designbasekorea/ui 0.3.5 → 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 +2 -0
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +3 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3 -3
- 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 +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3857,7 +3857,7 @@ const Breadcrumbs = ({ items, size = 'm', breadcrumbStyle = 'default', separator
|
|
|
3857
3857
|
};
|
|
3858
3858
|
Breadcrumbs.displayName = 'Breadcrumbs';
|
|
3859
3859
|
|
|
3860
|
-
const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3860
|
+
const SegmentControl = ({ options, defaultValue, value, size = 'm', variant = 'default', fullWidth = false, disabled = false, className, onChange, ...props }) => {
|
|
3861
3861
|
const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? options[0]?.value ?? '');
|
|
3862
3862
|
const [focusedIndex, setFocusedIndex] = React.useState(-1);
|
|
3863
3863
|
const containerRef = React.useRef(null);
|
|
@@ -3932,7 +3932,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
|
|
|
3932
3932
|
setFocusedIndex(-1);
|
|
3933
3933
|
}, []);
|
|
3934
3934
|
const selectedIndex = options.findIndex(option => option.value === selectedValue);
|
|
3935
|
-
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, {
|
|
3935
|
+
const classes = clsx('designbase-segment-control', `designbase-segment-control--${size}`, `designbase-segment-control--${variant}`, {
|
|
3936
3936
|
'designbase-segment-control--full-width': fullWidth,
|
|
3937
3937
|
'designbase-segment-control--disabled': disabled,
|
|
3938
3938
|
}, className);
|
|
@@ -3952,7 +3952,7 @@ const SegmentControl = ({ options, defaultValue, value, size = 'm', fullWidth =
|
|
|
3952
3952
|
else {
|
|
3953
3953
|
segmentRefs.current.delete(option.value);
|
|
3954
3954
|
}
|
|
3955
|
-
}, 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));
|
|
3955
|
+
}, 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));
|
|
3956
3956
|
}), jsxRuntime.jsx("div", { className: "designbase-segment-control__indicator", style: {
|
|
3957
3957
|
transform: `translateX(${selectedIndex * 100}%)`,
|
|
3958
3958
|
width: `${100 / options.length}%`,
|