@designbasekorea/ui 0.5.5 → 0.6.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 +63 -4
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +122 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +122 -25
- 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 +122 -25
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -4451,7 +4451,7 @@ const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = fa
|
|
|
4451
4451
|
});
|
|
4452
4452
|
Checkbox.displayName = 'Checkbox';
|
|
4453
4453
|
|
|
4454
|
-
const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...rest }) => {
|
|
4454
|
+
const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
|
|
4455
4455
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
4456
4456
|
const [recentSearches, setRecentSearches] = useState([]);
|
|
4457
4457
|
const [showRecentSearches, setShowRecentSearches] = useState(false);
|
|
@@ -4596,13 +4596,14 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
|
|
|
4596
4596
|
const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
|
|
4597
4597
|
? suggestedSearches[currentSuggestion]
|
|
4598
4598
|
: placeholder;
|
|
4599
|
-
|
|
4599
|
+
const shortcutBadgeSize = size === 'l' ? 'm' : 's';
|
|
4600
|
+
return (jsxs("div", { className: classes, role: "search", children: [jsxs("div", { className: "designbase-search-bar__container", children: [jsx("div", { className: "designbase-search-bar__search-icon", children: jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsx(CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
|
|
4600
4601
|
'designbase-search-bar__suggestion-item--active': index === currentSuggestion
|
|
4601
4602
|
}), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
|
|
4602
4603
|
};
|
|
4603
4604
|
SearchBar.displayName = 'SearchBar';
|
|
4604
4605
|
|
|
4605
|
-
const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton =
|
|
4606
|
+
const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton = false, useMobileBottomSheet = false, className, onChange, onFocus, onBlur, ...props }) => {
|
|
4606
4607
|
const [isOpen, setIsOpen] = useState(false);
|
|
4607
4608
|
const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (multiple ? [] : ''));
|
|
4608
4609
|
const [searchTerm, setSearchTerm] = useState('');
|
|
@@ -5924,7 +5925,7 @@ const rgbToHsl = (r, g, b) => {
|
|
|
5924
5925
|
return { h, s: s * 100, l: l * 100 };
|
|
5925
5926
|
};
|
|
5926
5927
|
/* ----------------------- 컴포넌트 ----------------------- */
|
|
5927
|
-
const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-
|
|
5928
|
+
const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-start', value, defaultValue = '#006FFF', showInput = true, showAlpha = true, showFormatSelector = true, showCopyButton = true, showEyedropper = true, disabled = false, readonly = false, onChangeFormat = 'hex', fireOnInit = false, changeDebounceMs = 0, emitDuringDrag = true, onChange, onApply, onCancel, className, }) => {
|
|
5928
5929
|
/** 초기 HSV — StrictMode에서도 안전하도록 lazy init */
|
|
5929
5930
|
const initialHex = (isHex(value) ? normalizeHex(value) : normalizeHex(defaultValue)) || '#006FFF';
|
|
5930
5931
|
const initialRgb = hexToRgb(initialHex) || { r: 0, g: 111, b: 255 };
|
|
@@ -6298,14 +6299,14 @@ const ColorPicker = ({ size = 'm', type = 'dropdown', position = 'bottom-left',
|
|
|
6298
6299
|
const Trigger = (jsxs("div", { className: "designbase-color-picker__trigger", onClick: () => !disabled && !readonly && (type === 'modal' ? handleModalOpen() : setIsOpen(v => !v)), children: [jsx("div", { className: "designbase-color-picker__color-display", children: jsx("div", { className: "designbase-color-picker__color-box", style: {
|
|
6299
6300
|
backgroundColor: showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a / 100})` : hex
|
|
6300
6301
|
} }) }), showInput && (jsx("input", { type: "text", value: colorInput, onChange: (e) => setColorInput(e.target.value), onKeyDown: onColorKeyDown, onBlur: onColorBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-color-picker__input", placeholder: "#000000" })), showInput && showCopyButton && (jsx("button", { type: "button", className: "designbase-color-picker__copy-button-inline", onClick: (e) => { e.stopPropagation(); onCopy(); }, disabled: disabled, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, { size: 14 }) : jsx(CopyIcon, { size: 14 }) })), jsx("button", { type: "button", className: "designbase-color-picker__toggle", disabled: disabled, "aria-label": "Toggle color picker", children: jsx(ChevronDownIcon, { size: 16 }) })] }));
|
|
6301
|
-
const Selector = (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [showEyedropper && isEyedropperAvailable && (jsx(Button, { variant: "tertiary", size:
|
|
6302
|
+
const Selector = (jsxs("div", { className: "designbase-color-picker__selector", children: [jsx("div", { className: "designbase-color-picker__color-area", children: jsx("div", { ref: areaRef, className: "designbase-color-picker__color-field", style: areaBackground, onMouseDown: onAreaMouseDown, onMouseMove: onAreaMouseMove, onMouseUp: onAreaMouseUp, onMouseLeave: onAreaLeave, onTouchStart: onAreaTouchStart, onTouchMove: onAreaTouchMove, onTouchEnd: onAreaTouchEnd, children: jsx("div", { className: "designbase-color-picker__color-pointer", style: { left: `${s}%`, top: `${100 - v}%`, backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` } }) }) }), jsxs("div", { className: "designbase-color-picker__controls", children: [showEyedropper && isEyedropperAvailable && (jsx(Button, { variant: "tertiary", size: size === 's' ? 's' : 'm', iconOnly: true, onClick: onEyedrop, "aria-label": "Eyedropper tool", children: jsx(EyedropperIcon, {}) })), jsxs("div", { className: "designbase-color-picker__slider-container", children: [jsx("div", { className: "designbase-color-picker__hue-slider", children: jsx("input", { type: "range", min: 0, max: 360, value: h, onChange: onHueChange, className: "designbase-color-picker__slider designbase-color-picker__slider--hue", style: hueTrackStyle }) }), showAlpha && (jsx("div", { className: "designbase-color-picker__alpha-slider", children: jsx("input", { type: "range", min: 0, max: 100, value: a, onChange: onAlphaChange, className: "designbase-color-picker__slider designbase-color-picker__slider--alpha", style: alphaTrackStyle }) }))] })] }), jsxs("div", { className: "designbase-color-picker__value-display", children: [showFormatSelector && (jsx(Select, { value: format, onChange: (v) => setFormat(v), showClearButton: false, options: [
|
|
6302
6303
|
{ label: 'HEX', value: 'hex' },
|
|
6303
6304
|
{ label: 'RGB', value: 'rgb' },
|
|
6304
6305
|
{ label: 'RGBA', value: 'rgba' },
|
|
6305
6306
|
{ label: 'HSL', value: 'hsl' },
|
|
6306
6307
|
{ label: 'HSLA', value: 'hsla' },
|
|
6307
|
-
], size: "s", position: "top" })), jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsx(Input, { type: "text", inputMode: "numeric", value: alphaInput, onChange: (value) => setAlphaInput(value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, placeholder: "100", size: "s", className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsx(Button, { variant: "tertiary", size:
|
|
6308
|
-
return (jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-color-picker__dropdown", onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsx(ModalBody, { children: Selector }), jsx(ModalFooter, { children: jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [jsx(Button, { variant: "tertiary", size: "m", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "m", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
|
|
6308
|
+
], size: "s", position: "top" })), jsx(Input, { type: "text", value: colorInput, onChange: setColorInput, onKeyDown: onColorKeyDown, onBlur: onColorBlur, placeholder: "#000000", size: "s", className: "designbase-color-picker__value-input" }), showAlpha && (jsxs("div", { className: "designbase-color-picker__alpha-input-wrap", children: [jsx(Input, { type: "text", inputMode: "numeric", value: alphaInput, onChange: (value) => setAlphaInput(value.replace(/[^\d]/g, '').slice(0, 3)), onKeyDown: onAlphaInputKeyDown, onBlur: onAlphaInputBlur, placeholder: "100", size: "s", className: "designbase-color-picker__alpha-input", "aria-label": "Alpha percent" }), jsx("span", { className: "designbase-color-picker__alpha-suffix", children: "%" })] })), showCopyButton && (jsx(Button, { variant: "tertiary", size: size === 's' ? 's' : 'm', iconOnly: true, onClick: onCopy, "aria-label": "Copy color value", children: isCopied ? jsx(DoneIcon$1, {}) : jsx(CopyIcon, {}) }))] })] }));
|
|
6309
|
+
return (jsxs("div", { ref: pickerRef, className: classes, children: [Trigger, type === 'dropdown' && isOpen && (jsx("div", { className: clsx("designbase-color-picker__dropdown", `designbase-color-picker__dropdown--${position}`), onClick: (e) => e.stopPropagation(), children: Selector })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC0C9\uC0C1 \uC120\uD0DD", size: "s", children: [jsx(ModalBody, { children: Selector }), jsx(ModalFooter, { children: jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [jsx(Button, { variant: "tertiary", size: "m", onClick: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "m", onClick: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
|
|
6309
6310
|
};
|
|
6310
6311
|
ColorPicker.displayName = 'ColorPicker';
|
|
6311
6312
|
|
|
@@ -6670,7 +6671,7 @@ const ContextMenu = ({ items, open, x, y, onClose, className, }) => {
|
|
|
6670
6671
|
};
|
|
6671
6672
|
ContextMenu.displayName = 'ContextMenu';
|
|
6672
6673
|
|
|
6673
|
-
const DatePicker = ({ mode = 'single', type = 'dropdown', value, defaultValue, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'm', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false,
|
|
6674
|
+
const DatePicker = ({ mode = 'single', type = 'dropdown', value, defaultValue, onChange, minDate, maxDate, events = [], showOutsideDays = true, startOfWeek = 'sunday', size = 'm', variant = 'default', highlightWeekends = true, highlightHolidays = false, today = new Date(), locale = 'ko-KR', format = 'yyyy-MM-dd', className, disabled = false, readonly = false, dropdownPosition = 'bottom-start',
|
|
6674
6675
|
// 인라인 모드
|
|
6675
6676
|
inline = false, }) => {
|
|
6676
6677
|
// 아이콘 크기 계산 (m이 기본값)
|
|
@@ -7010,7 +7011,7 @@ inline = false, }) => {
|
|
|
7010
7011
|
'designbase-date-picker--readonly': readonly,
|
|
7011
7012
|
'designbase-date-picker--open': isOpen,
|
|
7012
7013
|
}, className);
|
|
7013
|
-
return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-date-picker__trigger", children: [jsx("button", { type: "button", className: "designbase-date-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsx(CalendarIcon, { size: 16 }) }), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-date-picker__input", placeholder: "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694", "aria-label": "\uB0A0\uC9DC \uC785\uB825" }), jsx("button", { type: "button", className: "designbase-date-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsx(ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-date-picker__dropdown", role: "dialog", "aria-modal": "false", children: renderCalendar(false) })), type === 'modal' && (jsx(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uB0A0\uC9DC \uC120\uD0DD", size: "s", children: renderCalendar(true) }))] }));
|
|
7014
|
+
return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-date-picker__trigger", children: [jsx("button", { type: "button", className: "designbase-date-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsx(CalendarIcon, { size: 16 }) }), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-date-picker__input", placeholder: "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD558\uC138\uC694", "aria-label": "\uB0A0\uC9DC \uC785\uB825" }), jsx("button", { type: "button", className: "designbase-date-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uC5F4\uAE30", children: jsx(ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsx("div", { className: clsx("designbase-date-picker__dropdown", `designbase-date-picker__dropdown--${dropdownPosition}`), role: "dialog", "aria-modal": "false", children: renderCalendar(false) })), type === 'modal' && (jsx(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uB0A0\uC9DC \uC120\uD0DD", size: "s", children: renderCalendar(true) }))] }));
|
|
7014
7015
|
};
|
|
7015
7016
|
|
|
7016
7017
|
const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = 'm', showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, animationDuration = 300, showOverlay = true, overlayClosable = true, className, style, zIndex = 1000, trapFocus = true, id, ...props }) => {
|
|
@@ -7620,7 +7621,7 @@ const Textarea = forwardRef(({ label, placeholder, defaultValue, value, size = '
|
|
|
7620
7621
|
Textarea.displayName = 'Textarea';
|
|
7621
7622
|
|
|
7622
7623
|
const ITEM_HEIGHT = 40;
|
|
7623
|
-
const TimePicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '12:00', format = '24h', minuteStep = 1, disabled = false, readonly = false, onChange, className, }) => {
|
|
7624
|
+
const TimePicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '12:00', format = '24h', minuteStep = 1, disabled = false, readonly = false, dropdownPosition = 'bottom-start', onChange, className, }) => {
|
|
7624
7625
|
const [selectedTime, setSelectedTime] = useState(value || defaultValue);
|
|
7625
7626
|
const [isOpen, setIsOpen] = useState(false);
|
|
7626
7627
|
const [inputValue, setInputValue] = useState(value || defaultValue);
|
|
@@ -7859,7 +7860,7 @@ const TimePicker = ({ size = 'm', type = 'dropdown', value, defaultValue = '12:0
|
|
|
7859
7860
|
}, children: "\uC120\uD0DD" }) }))] }));
|
|
7860
7861
|
};
|
|
7861
7862
|
const classes = clsx('designbase-time-picker', `designbase-time-picker--${size}`, { 'designbase-time-picker--disabled': disabled, 'designbase-time-picker--readonly': readonly, 'designbase-time-picker--open': isOpen }, className);
|
|
7862
|
-
return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-time-picker__trigger", children: [jsx("button", { type: "button", className: "designbase-time-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsx(ClockIcon, { size: 16 }) }), jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-time-picker__input", placeholder: is12h ? (showSeconds ? '12:00:00 PM' : '12:00 PM') : (showSeconds ? '12:00:00' : '12:00'), "aria-label": "\uC2DC\uAC04 \uC785\uB825" }), jsx("button", { type: "button", className: "designbase-time-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsx(ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsx("div", { className: "designbase-time-picker__dropdown", role: "dialog", "aria-modal": "false", children: renderTimeSelector(false) })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC2DC\uAC04 \uC120\uD0DD", size: "s", children: [renderTimeSelector(true), jsx(ModalFooter, { children: jsxs("div", { className: "designbase-time-picker__modal-footer", children: [jsx(Button, { variant: "secondary", size: "m", onPress: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "m", onPress: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
|
|
7863
|
+
return (jsxs("div", { ref: pickerRef, className: classes, children: [jsxs("div", { className: "designbase-time-picker__trigger", children: [jsx("button", { type: "button", className: "designbase-time-picker__icon-display", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsx(ClockIcon, { size: 16 }) }), jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onBlur: handleInputBlur, onClick: (e) => e.stopPropagation(), disabled: disabled, readOnly: readonly, className: "designbase-time-picker__input", placeholder: is12h ? (showSeconds ? '12:00:00 PM' : '12:00 PM') : (showSeconds ? '12:00:00' : '12:00'), "aria-label": "\uC2DC\uAC04 \uC785\uB825" }), jsx("button", { type: "button", className: "designbase-time-picker__toggle", onClick: togglePicker, disabled: disabled, "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uC5F4\uAE30", children: jsx(ChevronDownIcon, { size: 16 }) })] }), type === 'dropdown' && isOpen && (jsx("div", { className: clsx("designbase-time-picker__dropdown", `designbase-time-picker__dropdown--${dropdownPosition}`), role: "dialog", "aria-modal": "false", children: renderTimeSelector(false) })), type === 'modal' && (jsxs(Modal, { isOpen: isOpen, onClose: handleModalCancel, title: "\uC2DC\uAC04 \uC120\uD0DD", size: "s", children: [renderTimeSelector(true), jsx(ModalFooter, { children: jsxs("div", { className: "designbase-time-picker__modal-footer", children: [jsx(Button, { variant: "secondary", size: "m", onPress: handleModalCancel, children: "\uCDE8\uC18C" }), jsx(Button, { variant: "primary", size: "m", onPress: handleModalApply, children: "\uC801\uC6A9" })] }) })] }))] }));
|
|
7863
7864
|
};
|
|
7864
7865
|
TimePicker.displayName = 'TimePicker';
|
|
7865
7866
|
|
|
@@ -8596,12 +8597,11 @@ const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'm', ratio
|
|
|
8596
8597
|
})), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
|
|
8597
8598
|
};
|
|
8598
8599
|
|
|
8599
|
-
const List = ({ items, size = 'm', variant = '
|
|
8600
|
+
const List = ({ items, size = 'm', variant = 'navigation', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 's', alignment = 'start', showLeadingIcon = true, showDescription = false, showMeta = false, showBadge = true, showArrow = true, clickableArea = 'item', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
|
|
8600
8601
|
const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems);
|
|
8601
8602
|
const [draggedItem, setDraggedItem] = React.useState(null);
|
|
8602
|
-
// 아이콘 크기 계산 (m이 기본값)
|
|
8603
8603
|
const iconSize = size === 's' ? 16 : size === 'l' ? 24 : 20;
|
|
8604
|
-
|
|
8604
|
+
const shouldShowArrow = showArrow;
|
|
8605
8605
|
React.useEffect(() => {
|
|
8606
8606
|
setInternalSelectedItems(selectedItems);
|
|
8607
8607
|
}, [selectedItems]);
|
|
@@ -8612,7 +8612,7 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8612
8612
|
let newSelectedItems;
|
|
8613
8613
|
if (multiple) {
|
|
8614
8614
|
if (internalSelectedItems.includes(item.id)) {
|
|
8615
|
-
newSelectedItems = internalSelectedItems.filter(id => id !== item.id);
|
|
8615
|
+
newSelectedItems = internalSelectedItems.filter((id) => id !== item.id);
|
|
8616
8616
|
}
|
|
8617
8617
|
else {
|
|
8618
8618
|
newSelectedItems = [...internalSelectedItems, item.id];
|
|
@@ -8626,6 +8626,12 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8626
8626
|
}
|
|
8627
8627
|
onItemClick?.(item, index);
|
|
8628
8628
|
};
|
|
8629
|
+
const handleItemKeyDown = (e, item, index) => {
|
|
8630
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
8631
|
+
e.preventDefault();
|
|
8632
|
+
handleItemClick(item, index);
|
|
8633
|
+
}
|
|
8634
|
+
};
|
|
8629
8635
|
const handleItemDragStart = (e, itemId) => {
|
|
8630
8636
|
if (!draggable)
|
|
8631
8637
|
return;
|
|
@@ -8648,9 +8654,7 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8648
8654
|
const handleItemDragEnd = () => {
|
|
8649
8655
|
setDraggedItem(null);
|
|
8650
8656
|
};
|
|
8651
|
-
const isItemSelected = (itemId) =>
|
|
8652
|
-
return internalSelectedItems.includes(itemId);
|
|
8653
|
-
};
|
|
8657
|
+
const isItemSelected = (itemId) => internalSelectedItems.includes(itemId);
|
|
8654
8658
|
const renderBadge = (badge) => {
|
|
8655
8659
|
if (!badge)
|
|
8656
8660
|
return null;
|
|
@@ -8669,17 +8673,38 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8669
8673
|
const renderItem = (item, index) => {
|
|
8670
8674
|
const isSelected = isItemSelected(item.id);
|
|
8671
8675
|
const isDragging = draggedItem === item.id;
|
|
8676
|
+
const isClickable = Boolean(onItemClick || selectable);
|
|
8677
|
+
const hasDescription = showDescription && Boolean(item.description);
|
|
8678
|
+
const hasMeta = showMeta && Boolean(item.meta?.length);
|
|
8679
|
+
const hasSecondaryInfo = hasDescription || hasMeta;
|
|
8680
|
+
const hasLeadingVisual = Boolean(item.image || (showLeadingIcon && item.icon));
|
|
8681
|
+
const hasTrailing = Boolean((showBadge && item.badge) ||
|
|
8682
|
+
item.actions?.length ||
|
|
8683
|
+
shouldShowArrow ||
|
|
8684
|
+
draggable);
|
|
8672
8685
|
const itemClasses = clsx('designbase-list__item', `designbase-list__item--size-${size}`, `designbase-list__item--variant-${variant}`, `designbase-list__item--type-${itemType}`, `designbase-list__item--layout-${layout}`, `designbase-list__item--spacing-${spacing}`, `designbase-list__item--alignment-${alignment}`, {
|
|
8673
8686
|
'designbase-list__item--selected': isSelected,
|
|
8674
8687
|
'designbase-list__item--disabled': item.disabled,
|
|
8675
8688
|
'designbase-list__item--dragging': isDragging,
|
|
8676
|
-
'designbase-list__item--clickable':
|
|
8689
|
+
'designbase-list__item--clickable': isClickable,
|
|
8677
8690
|
'designbase-list__item--draggable': draggable,
|
|
8691
|
+
'designbase-list__item--with-leading': hasLeadingVisual,
|
|
8692
|
+
'designbase-list__item--with-secondary': hasSecondaryInfo,
|
|
8693
|
+
'designbase-list__item--with-trailing': hasTrailing,
|
|
8678
8694
|
});
|
|
8679
|
-
|
|
8680
|
-
|
|
8681
|
-
|
|
8682
|
-
|
|
8695
|
+
const itemIsInteractive = clickableArea === 'item' && isClickable && !item.disabled;
|
|
8696
|
+
const contentIsInteractive = clickableArea === 'content' && isClickable && !item.disabled;
|
|
8697
|
+
return (jsxs("div", { className: itemClasses, onClick: itemIsInteractive ? () => handleItemClick(item, index) : undefined, onKeyDown: itemIsInteractive ? (e) => handleItemKeyDown(e, item, index) : undefined, draggable: draggable, onDragStart: (e) => handleItemDragStart(e, item.id), onDragOver: handleItemDragOver, onDrop: (e) => handleItemDrop(e, item.id), onDragEnd: handleItemDragEnd, role: itemIsInteractive ? 'button' : undefined, tabIndex: itemIsInteractive ? 0 : undefined, "aria-selected": selectable ? isSelected : undefined, children: [selectable && (jsx("div", { className: "designbase-list__item-checkbox", onClick: (e) => e.stopPropagation(), children: jsx("input", { type: multiple ? 'checkbox' : 'radio', checked: isSelected, onChange: (e) => {
|
|
8698
|
+
e.stopPropagation();
|
|
8699
|
+
handleItemClick(item, index);
|
|
8700
|
+
}, disabled: item.disabled }) })), showLeadingIcon && item.icon && !item.image && (jsx("div", { className: "designbase-list__item-icon", children: React.isValidElement(item.icon)
|
|
8701
|
+
? React.cloneElement(item.icon, {
|
|
8702
|
+
size: iconSize,
|
|
8703
|
+
color: 'currentColor',
|
|
8704
|
+
})
|
|
8705
|
+
: item.icon })), item.image && (jsx("div", { className: "designbase-list__item-image", children: jsx("img", { src: item.image, alt: item.title }) })), jsxs("div", { className: clsx('designbase-list__item-content', {
|
|
8706
|
+
'designbase-list__item-content--clickable': contentIsInteractive,
|
|
8707
|
+
}), onClick: contentIsInteractive ? () => handleItemClick(item, index) : undefined, onKeyDown: contentIsInteractive ? (e) => handleItemKeyDown(e, item, index) : undefined, role: contentIsInteractive ? 'button' : undefined, tabIndex: contentIsInteractive ? 0 : undefined, children: [jsx("div", { className: "designbase-list__item-header", children: jsx("h4", { className: "designbase-list__item-title", children: item.title }) }), hasDescription && jsx("p", { className: "designbase-list__item-description", children: item.description }), hasMeta && renderMeta(item.meta)] }), (showBadge && item.badge) || item.actions || shouldShowArrow || draggable ? (jsxs("div", { className: "designbase-list__item-trailing", children: [showBadge && item.badge && renderBadge(item.badge), item.actions && renderActions(item.actions), shouldShowArrow && (jsx("div", { className: "designbase-list__item-arrow", "aria-hidden": "true", children: jsx(ChevronRightIcon, { size: 16 }) })), draggable && jsx("div", { className: "designbase-list__item-drag-handle", children: "\u22EE\u22EE" })] })) : null] }, item.id));
|
|
8683
8708
|
};
|
|
8684
8709
|
const renderLoadingSkeleton = () => {
|
|
8685
8710
|
return Array.from({ length: loadingCount }, (_, index) => (jsx("div", { className: "designbase-list__item designbase-list__item--loading", children: jsxs("div", { className: "designbase-list__item-skeleton", children: [jsx("div", { className: "designbase-list__item-skeleton-icon" }), jsxs("div", { className: "designbase-list__item-skeleton-content", children: [jsx("div", { className: "designbase-list__item-skeleton-title" }), jsx("div", { className: "designbase-list__item-skeleton-description" })] })] }) }, index)));
|
|
@@ -8691,12 +8716,12 @@ const List = ({ items, size = 'm', variant = 'default', itemType = 'default', la
|
|
|
8691
8716
|
'designbase-list--loading': loading,
|
|
8692
8717
|
}, className);
|
|
8693
8718
|
if (loading) {
|
|
8694
|
-
return
|
|
8719
|
+
return jsx("div", { className: classes, children: renderLoadingSkeleton() });
|
|
8695
8720
|
}
|
|
8696
8721
|
if (items.length === 0 && emptyState) {
|
|
8697
8722
|
return (jsx("div", { className: classes, children: jsx("div", { className: "designbase-list__empty", children: emptyState }) }));
|
|
8698
8723
|
}
|
|
8699
|
-
return
|
|
8724
|
+
return jsx("div", { className: classes, children: items.map((item, index) => renderItem(item, index)) });
|
|
8700
8725
|
};
|
|
8701
8726
|
|
|
8702
8727
|
const DesignBaseLogo = ({ width = 193, height = 40, color, className, }) => {
|
|
@@ -8784,6 +8809,77 @@ const Logo = ({ type = 'designbase', text = 'Logo', src, alt, size = 'm', varian
|
|
|
8784
8809
|
};
|
|
8785
8810
|
Logo.displayName = 'Logo';
|
|
8786
8811
|
|
|
8812
|
+
const Marquee = ({ children, items, direction = 'left', duration = 20, speed = 1, size = 'm', variant = 'default', bordered, pauseOnHover = true, fadeEdges = false, fadeWidth = 48, edgePadding, gap = 24, alignY = 'center', className, ariaLabel = 'Scrolling content', }) => {
|
|
8813
|
+
const containerRef = useRef(null);
|
|
8814
|
+
const baseGroupRef = useRef(null);
|
|
8815
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
8816
|
+
const [baseGroupWidth, setBaseGroupWidth] = useState(0);
|
|
8817
|
+
const resolvedItems = useMemo(() => ((items && items.length > 0) ? items : (children ? [children] : [])), [items, children]);
|
|
8818
|
+
if (resolvedItems.length === 0) {
|
|
8819
|
+
return null;
|
|
8820
|
+
}
|
|
8821
|
+
const resolvedSpeed = Number.isFinite(speed) && speed > 0 ? speed : 1;
|
|
8822
|
+
const resolvedDuration = Math.max(duration, 1) / resolvedSpeed;
|
|
8823
|
+
const resolvedFadeWidth = Math.max(fadeWidth, 0);
|
|
8824
|
+
const resolvedEdgePadding = edgePadding !== undefined
|
|
8825
|
+
? Math.max(edgePadding, 0)
|
|
8826
|
+
: (fadeEdges ? resolvedFadeWidth : 0);
|
|
8827
|
+
const resolvedGap = Math.max(gap, 0);
|
|
8828
|
+
useEffect(() => {
|
|
8829
|
+
const updateSize = () => {
|
|
8830
|
+
const nextContainerWidth = Math.ceil(containerRef.current?.clientWidth ?? 0);
|
|
8831
|
+
const nextBaseGroupWidth = Math.ceil(baseGroupRef.current?.scrollWidth ?? 0);
|
|
8832
|
+
setContainerWidth((prev) => (prev !== nextContainerWidth ? nextContainerWidth : prev));
|
|
8833
|
+
setBaseGroupWidth((prev) => (prev !== nextBaseGroupWidth ? nextBaseGroupWidth : prev));
|
|
8834
|
+
};
|
|
8835
|
+
updateSize();
|
|
8836
|
+
const observer = new ResizeObserver(updateSize);
|
|
8837
|
+
if (containerRef.current)
|
|
8838
|
+
observer.observe(containerRef.current);
|
|
8839
|
+
if (baseGroupRef.current)
|
|
8840
|
+
observer.observe(baseGroupRef.current);
|
|
8841
|
+
const images = baseGroupRef.current?.querySelectorAll('img') ?? [];
|
|
8842
|
+
images.forEach((img) => {
|
|
8843
|
+
img.addEventListener('load', updateSize);
|
|
8844
|
+
img.addEventListener('error', updateSize);
|
|
8845
|
+
});
|
|
8846
|
+
return () => {
|
|
8847
|
+
observer.disconnect();
|
|
8848
|
+
images.forEach((img) => {
|
|
8849
|
+
img.removeEventListener('load', updateSize);
|
|
8850
|
+
img.removeEventListener('error', updateSize);
|
|
8851
|
+
});
|
|
8852
|
+
};
|
|
8853
|
+
}, [resolvedItems, resolvedGap, size, fadeEdges, resolvedEdgePadding]);
|
|
8854
|
+
const duplicateCount = useMemo(() => {
|
|
8855
|
+
if (baseGroupWidth <= 0)
|
|
8856
|
+
return 1;
|
|
8857
|
+
return Math.max(1, Math.ceil(containerWidth / baseGroupWidth));
|
|
8858
|
+
}, [containerWidth, baseGroupWidth]);
|
|
8859
|
+
const isReady = baseGroupWidth > 0;
|
|
8860
|
+
const classes = clsx('designbase-marquee', `designbase-marquee--size-${size}`, `designbase-marquee--variant-${variant}`, `designbase-marquee--align-${alignY}`, {
|
|
8861
|
+
'designbase-marquee--pause-on-hover': pauseOnHover,
|
|
8862
|
+
'designbase-marquee--fade-edges': fadeEdges,
|
|
8863
|
+
'designbase-marquee--right': direction === 'right',
|
|
8864
|
+
'designbase-marquee--bordered': bordered ?? variant === 'outlined',
|
|
8865
|
+
'designbase-marquee--ready': isReady,
|
|
8866
|
+
}, className);
|
|
8867
|
+
const style = {
|
|
8868
|
+
'--db-marquee-duration': `${resolvedDuration}s`,
|
|
8869
|
+
// 그룹간 간격까지 포함해 이동 거리를 맞춰야 루프 경계 점프가 사라짐
|
|
8870
|
+
'--db-marquee-shift': `${baseGroupWidth + resolvedGap}px`,
|
|
8871
|
+
'--db-marquee-gap': `${resolvedGap}px`,
|
|
8872
|
+
'--db-marquee-fade-width': `${resolvedFadeWidth}px`,
|
|
8873
|
+
'--db-marquee-edge-padding': `${resolvedEdgePadding}px`,
|
|
8874
|
+
};
|
|
8875
|
+
const screenReaderText = (items && items.length > 0)
|
|
8876
|
+
? items.filter((item) => typeof item === 'string').join(' • ') || ariaLabel
|
|
8877
|
+
: (typeof children === 'string' ? children : ariaLabel);
|
|
8878
|
+
const renderGroup = (key, ref) => (jsx("div", { className: "designbase-marquee__group", "aria-hidden": "true", ref: ref, children: resolvedItems.map((item, index) => (jsx("div", { className: "designbase-marquee__item", children: item }, `${key}-${index}`))) }, key));
|
|
8879
|
+
return (jsxs("div", { className: classes, style: style, role: "region", "aria-label": ariaLabel, ref: containerRef, children: [jsx("span", { className: "designbase-marquee__sr-only", children: screenReaderText }), jsxs("div", { className: "designbase-marquee__track", children: [renderGroup('base', baseGroupRef), Array.from({ length: duplicateCount }).map((_, index) => renderGroup(`dup-${index}`))] })] }));
|
|
8880
|
+
};
|
|
8881
|
+
Marquee.displayName = 'Marquee';
|
|
8882
|
+
|
|
8787
8883
|
const MarkdownEditor = ({ size = 'm', variant = 'default', mode = 'preview', // 기본값을 preview로 변경
|
|
8788
8884
|
theme = 'light', value = '', placeholder = '마크다운을 입력하세요...', minHeight = 200, maxHeight = 600, autoHeight = false, readonly = false, disabled = false, showToolbar = true, toolbarItems = [], showStatus = true, showWordCount = true, showLineCount = true, autoSave = false, autoSaveInterval = 30000, // 30초
|
|
8789
8885
|
onFileUpload, onChange, onSave, onFocus, onBlur, className, }) => {
|
|
@@ -12538,5 +12634,5 @@ const YouTubePlayer = ({ videoId, title, description, size = 'm', variant = 'def
|
|
|
12538
12634
|
};
|
|
12539
12635
|
YouTubePlayer.displayName = 'YouTubePlayer';
|
|
12540
12636
|
|
|
12541
|
-
export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, useToast };
|
|
12637
|
+
export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, useToast };
|
|
12542
12638
|
//# sourceMappingURL=index.esm.js.map
|