@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/temp/src/components/select-box/SelectBox.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { COLOR } from '../../../constant/color';
+import { useDropdown, useScrollLock } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+const ICON_SIZE_XS = 14;
+const ICON_SIZE_SM = 16;
+const DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+    if (multiple) {
+        const currentValues = Array.isArray(value) ? value : [];
+        if (currentValues.includes(option.id)) {
+            return currentValues.filter((v) => v !== option.id);
+        }
+        return [...currentValues, option.id];
+    }
+    return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+    if (!register?.onChange)
+        return;
+    register.onChange({
+        target: {
+            value: multiple ? JSON.stringify(newValue) : newValue,
+            name: register.name,
+        },
+    });
+}
+function DisplayValue({ displayValue }) {
+    if (typeof displayValue === 'string') {
+        return _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue });
+    }
+    return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
+}
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, align = 'left', id, className, children, register, onChange, onEdit, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [selectedTags, setSelectedTags] = useState([]);
+    const selectedOption = useMemo(() => {
+        if (multiple)
+            return null;
+        return optionItems.find((option) => option.id === value);
+    }, [optionItems, value, multiple]);
+    const displayValue = useMemo(() => {
+        if (multiple) {
+            return placeholder;
+        }
+        return selectedOption ? selectedOption : placeholder;
+    }, [multiple, selectedOption, placeholder]);
+    const handleOptionSelect = (option) => {
+        if (disabled)
+            return;
+        const newValue = computeNewValue(option, value, multiple);
+        onChange?.(newValue);
+        notifyRegister(register, newValue, multiple);
+    };
+    const { isOpen, direction: dropdownDirection, focusedIndex, toggleDropdown, closeDropdown, handleKeyDown, handleOptionSelect: handleDropdownSelect, handleMouseMove, isKeyboardNavigation, setFocusedIndex, } = useDropdown({
+        triggerRef: internalRef,
+        dropdownRef,
+        maxHeight,
+        itemCount: optionItems.length,
+        optionItems,
+        disabled,
+        multiple,
+        onSelect: handleOptionSelect,
+    });
+    const activeDescendantId = useMemo(() => {
+        if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+            return undefined;
+        }
+        const focusedOption = optionItems[focusedIndex];
+        return `selectbox-options-${id || 'default'}-${focusedOption.id}`;
+    }, [isOpen, focusedIndex, optionItems, id]);
+    const handleOptionHover = useCallback((index) => {
+        handleMouseMove();
+        setFocusedIndex(index);
+    }, [handleMouseMove, setFocusedIndex]);
+    // Multiple select 관련 로직
+    const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, } = useMultiSelect(currentSelectedValues, optionItems);
+    const handleSelectAll = () => {
+        if (!multiple || !onChange)
+            return;
+        const newSelectedValues = toggleSelectAll();
+        onChange(newSelectedValues);
+    };
+    const handleEdit = () => {
+        onEdit?.();
+    };
+    const handleComplete = () => {
+        if (multiple) {
+            const tags = getSelectedTagsData();
+            setSelectedTags(tags);
+        }
+        closeDropdown();
+    };
+    const handleRemoveTag = (tagId) => {
+        if (!onChange)
+            return;
+        if (multiple) {
+            const newSelectedValues = removeTag(tagId);
+            onChange(newSelectedValues);
+            setSelectedTags((prev) => prev.filter((tag) => tag.id !== tagId));
+        }
+    };
+    useScrollLock(isOpen, dropdownRef);
+    useLayoutEffect(() => {
+        if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+            const dropdownWidth = dropdownRef.current.offsetWidth;
+            internalRef.current.style.width = `${dropdownWidth}px`;
+        }
+    }, [autoWidth, isOpen, optionItems]);
+    useImperativeHandle(ref, () => internalRef.current, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, className: classNames('ncua-selectbox', `ncua-selectbox--${size}`, {
+                    'ncua-selectbox--open': isOpen,
+                    'ncua-selectbox--disabled': disabled,
+                    'ncua-selectbox--simple': type === 'simple',
+                    'ncua-selectbox--multiple': multiple,
+                    destructive: destructive,
+                }, className), ...props, children: [_jsxs("div", { className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": `selectbox-options-${id || 'default'}`, "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { className: "ncua-selectbox__value", children: _jsx(DisplayValue, { displayValue: displayValue }) }), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
+                                            'ncua-selectbox__arrow--up': isOpen,
+                                        }) })] }), _jsx(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: `selectbox-options-${id || 'default'}`, multiple: multiple, showFooterButtons: multiple, selectAllButtonText: selectAllButtonText, componentType: "selectbox", isKeyboardNavigation: isKeyboardNavigation, activeDescendantId: activeDescendantId, align: align, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, onOptionHover: handleOptionHover, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, children: children })] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+});
+SelectBox.displayName = 'SelectBox';
+export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/temp/src/components/select-dropdown/SelectDropdown.js

@@ -1,49 +1,26 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Button } from '../button';
-var SelectDropdown = forwardRef(function (_a, ref) {
-    var isOpen = _a.isOpen, _b = _a.direction, direction = _b === void 0 ? 'down' : _b, _c = _a.size, size = _c === void 0 ? 'xs' : _c, options = _a.options, value = _a.value, focusedIndex = _a.focusedIndex, maxHeight = _a.maxHeight, _d = _a.listboxId, listboxId = _d === void 0 ? 'selectbox-options-default' : _d, onOptionSelect = _a.onOptionSelect, onMouseMove = _a.onMouseMove, isKeyboardNavigation = _a.isKeyboardNavigation, onOptionHover = _a.onOptionHover, children = _a.children, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.showFooterButtons, showFooterButtons = _f === void 0 ? false : _f, _g = _a.selectAllButtonText, selectAllButtonText = _g === void 0 ? '전체 선택' : _g, onSelectAll = _a.onSelectAll, onEdit = _a.onEdit, onComplete = _a.onComplete, className = _a.className, activeDescendantId = _a.activeDescendantId, componentType = _a.componentType, _h = _a.align, align = _h === void 0 ? 'left' : _h, props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType", "align"]);
+const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
     if (!isOpen)
         return null;
-    return (_jsxs("div", __assign({ ref: ref, className: classNames('ncua-select-dropdown', "ncua-select-dropdown--".concat(direction), "ncua-select-dropdown--".concat(size), {
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-select-dropdown', `ncua-select-dropdown--${direction}`, `ncua-select-dropdown--${size}`, {
             'ncua-select-dropdown--multiple': multiple,
             'ncua-select-dropdown--align-right': align === 'right',
             'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple,
-        }, className), onMouseMove: onMouseMove, onClick: function (e) { return e.stopPropagation(); } }, props, { children: [_jsx("div", __assign({ className: "ncua-select-dropdown__content" }, { children: _jsxs("ul", __assign({ className: "ncua-select-dropdown__options", role: "listbox", id: listboxId, style: { maxHeight: maxHeight } }, { children: [options.map(function (option, index) {
-                            var isFocused = index === focusedIndex;
-                            var optionId = "".concat(listboxId, "-").concat(option.id);
-                            var isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
-                            var handleMouseEnter = function () {
-                                onOptionHover === null || onOptionHover === void 0 ? void 0 : onOptionHover(index);
+        }, className), onMouseMove: onMouseMove, onClick: (e) => e.stopPropagation(), ...props, children: [_jsx("div", { className: "ncua-select-dropdown__content", children: _jsxs("ul", { className: "ncua-select-dropdown__options", role: "listbox", id: listboxId, style: { maxHeight }, children: [options.map((option, index) => {
+                            const isFocused = index === focusedIndex;
+                            const optionId = `${listboxId}-${option.id}`;
+                            const isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
+                            const handleMouseEnter = () => {
+                                onOptionHover?.(index);
                             };
-                            return (_jsxs("li", __assign({ id: optionId, className: classNames('ncua-select-dropdown__option', {
+                            return (_jsxs("li", { id: optionId, className: classNames('ncua-select-dropdown__option', {
                                     'ncua-select-dropdown__option--selected': isSelected,
                                     'ncua-select-dropdown__option--focused': isFocused,
-                                }), onClick: function () { return onOptionSelect(option); }, onMouseEnter: handleMouseEnter, role: "option", "aria-selected": isSelected }, { children: [option.icon && (_jsx("span", __assign({ className: "ncua-select-dropdown__option-icon" }, { children: _jsx(option.icon, { width: 16, height: 16 }) }))), _jsx("span", __assign({ className: "ncua-select-dropdown__option-text" }, { children: option.label }))] }), option.id));
-                        }), children] })) })), showFooterButtons && (_jsx("div", __assign({ className: "ncua-select-dropdown__footer" }, { children: _jsxs("div", __assign({ className: "ncua-select-dropdown__footer-buttons" }, { children: [_jsx("div", __assign({ className: "ncua-select-dropdown__footer-left" }, { children: multiple && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) })), _jsxs("div", __assign({ className: "ncua-select-dropdown__footer-right" }, { children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] }))] })) })))] })));
+                                }), onClick: () => onOptionSelect(option), onMouseEnter: handleMouseEnter, role: "option", "aria-selected": isSelected, children: [option.icon && (_jsx("span", { className: "ncua-select-dropdown__option-icon", children: _jsx(option.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-select-dropdown__option-text", children: option.label })] }, option.id));
+                        }), children] }) }), showFooterButtons && (_jsx("div", { className: "ncua-select-dropdown__footer", children: _jsxs("div", { className: "ncua-select-dropdown__footer-buttons", children: [_jsx("div", { className: "ncua-select-dropdown__footer-left", children: multiple && (_jsx(Button, { label: selectAllButtonText, hierarchy: "text", size: "xs", onClick: onSelectAll, underline: true })) }), _jsxs("div", { className: "ncua-select-dropdown__footer-right", children: [_jsx(Button, { label: "\uD3B8\uC9D1", hierarchy: "secondary-gray", size: "xs", onClick: onEdit }), multiple && _jsx(Button, { label: "\uC120\uD0DD \uC644\uB8CC", hierarchy: "secondary", size: "xs", onClick: onComplete })] })] }) }))] }));
 });
 SelectDropdown.displayName = 'SelectDropdown';
 export { SelectDropdown };

package/dist/temp/src/components/shared/hintText/HintText.js

@@ -1,28 +1,5 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-export var HintText = function (_a) {
-    var _b = _a.as, Component = _b === void 0 ? 'span' : _b, children = _a.children, className = _a.className, destructive = _a.destructive, props = __rest(_a, ["as", "children", "className", "destructive"]);
-    return (_jsx(Component, __assign({ className: classNames('ncua-hint-text', { destructive: destructive }, className) }, props, { children: children })));
+export const HintText = ({ as: Component = 'span', children, className, destructive, ...props }) => {
+    return (_jsx(Component, { className: classNames('ncua-hint-text', { destructive }, className), ...props, children: children }));
 };

package/dist/temp/src/components/shared/label/Label.js

@@ -1,28 +1,5 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-export var Label = function (_a) {
-    var _b = _a.as, Component = _b === void 0 ? 'label' : _b, children = _a.children, className = _a.className, isRequired = _a.isRequired, props = __rest(_a, ["as", "children", "className", "isRequired"]);
-    return (_jsx(Component, __assign({ className: classNames('ncua-label', { 'is-required': isRequired }, className) }, props, { children: children })));
+export const Label = ({ as: Component = 'label', children, className, isRequired, ...props }) => {
+    return (_jsx(Component, { className: classNames('ncua-label', { 'is-required': isRequired }, className), ...props, children: children }));
 };

package/dist/temp/src/components/slider/Slider.js

@@ -1,35 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
-export var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, onChange = _a.onChange, labelPosition = _a.labelPosition, _f = _a.disabled, disabled = _f === void 0 ? false : _f, className = _a.className;
-    var containerRef = useRef(null);
-    var sliderInstanceRef = useRef(null);
-    useEffect(function () {
+export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
+    const containerRef = useRef(null);
+    const sliderInstanceRef = useRef(null);
+    useEffect(() => {
         if (!containerRef.current)
             return;
         sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
-            min: min,
-            max: max,
-            step: step,
-            value: value,
-            onChange: onChange,
-            labelPosition: labelPosition,
-            disabled: disabled,
+            min,
+            max,
+            step,
+            value,
+            onChange,
+            labelPosition,
+            disabled,
         });
-        return function () {
+        return () => {
             if (sliderInstanceRef.current) {
                 sliderInstanceRef.current.destroy();
                 sliderInstanceRef.current = null;
             }
         };
     }, [typeof value, onChange, min, max, step, labelPosition]);
-    useEffect(function () {
+    useEffect(() => {
         if (sliderInstanceRef.current) {
             sliderInstanceRef.current.setValue(value);
         }
     }, [sliderInstanceRef, value]);
-    useEffect(function () {
+    useEffect(() => {
         if (sliderInstanceRef.current) {
             if (disabled) {
                 sliderInstanceRef.current.disable();
@@ -39,6 +38,6 @@ export var Slider = function (_a) {
             }
         }
     }, [disabled]);
-    return _jsx("div", { ref: containerRef, className: "ncua-slider ".concat(className || '') });
+    return _jsx("div", { ref: containerRef, className: `ncua-slider ${className || ''}` });
 };
 export default Slider;

package/dist/temp/src/components/spinner/Spinner.js

@@ -1,21 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-var RenderText = function (_a) {
-    var _b = _a.as, Component = _b === void 0 ? 'p' : _b, children = _a.children;
-    return _jsx(Component, __assign({ className: "ncua-spinner__text" }, { children: children }));
+const RenderText = ({ as: Component = 'p', children }) => {
+    return _jsx(Component, { className: "ncua-spinner__text", children: children });
 };
-export var Spinner = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'p' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, children = _a.children, _d = _a.backdrop, backdrop = _d === void 0 ? false : _d;
-    return (_jsx("div", __assign({ className: classNames('ncua-spinner', "ncua-spinner--".concat(size), { 'ncua-spinner--backdrop': backdrop }) }, { children: _jsx("div", __assign({ className: "ncua-spinner__content" }, { children: children && _jsx(RenderText, __assign({ as: as }, { children: children })) })) })));
+export const Spinner = ({ as = 'p', size = 'sm', children, backdrop = false }) => {
+    return (_jsx("div", { className: classNames('ncua-spinner', `ncua-spinner--${size}`, { 'ncua-spinner--backdrop': backdrop }), children: _jsx("div", { className: "ncua-spinner__content", children: children && _jsx(RenderText, { as: as, children: children }) }) }));
 };

package/dist/temp/src/components/switch/Switch.js

@@ -1,34 +1,21 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-var Switch = forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 'xs' : _c, left = _a.left, right = _a.right, _d = _a.disabled, disabled = _d === void 0 ? false : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? left.value : _e, onChange = _a.onChange, className = _a.className, name = _a.name, refs = _a.refs;
-    var leftInputRef = useRef(null);
-    useImperativeHandle(ref, function () { return leftInputRef.current; });
+const Switch = forwardRef(({ size = 'xs', left, right, disabled = false, value, defaultValue = left.value, onChange, className, name, refs }, ref) => {
+    const leftInputRef = useRef(null);
+    useImperativeHandle(ref, () => leftInputRef.current);
     // 값을 문자열로 정규화하는 함수
-    var normalizeValue = function (val) {
+    const normalizeValue = (val) => {
         return typeof val === 'boolean' ? String(val) : val;
     };
     // 유효한 사이즈인지 확인하는 함수
-    var getValidSize = function (size) {
-        var validSizes = ['xxs', 'xs', 'sm', 'md'];
+    const getValidSize = (size) => {
+        const validSizes = ['xxs', 'xs', 'sm', 'md'];
         return size && validSizes.includes(size) ? size : 'xs';
     };
-    var isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
+    const isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
     // 현재 값 처리
-    var getCurrentValue = function () {
+    const getCurrentValue = () => {
         if (value === undefined)
             return undefined;
         if (isBooleanType && typeof value === 'boolean') {
@@ -36,17 +23,17 @@ var Switch = forwardRef(function (_a, ref) {
         }
         return normalizeValue(value);
     };
-    var isControlled = getCurrentValue() !== undefined;
-    var _f = useState(normalizeValue(defaultValue)), internalValue = _f[0], setInternalValue = _f[1];
-    var currentValue = isControlled ? getCurrentValue() : internalValue;
-    var handleChange = function (newValue) {
+    const isControlled = getCurrentValue() !== undefined;
+    const [internalValue, setInternalValue] = useState(normalizeValue(defaultValue));
+    const currentValue = isControlled ? getCurrentValue() : internalValue;
+    const handleChange = (newValue) => {
         if (!isControlled) {
             setInternalValue(newValue);
         }
         if (!onChange)
             return;
         // 선택된 옵션 찾기
-        var selectedOption = newValue === normalizeValue(left.value) ? left : right;
+        const selectedOption = newValue === normalizeValue(left.value) ? left : right;
         if (isBooleanType && typeof value === 'boolean') {
             onChange(newValue === normalizeValue(left.value));
         }
@@ -54,15 +41,15 @@ var Switch = forwardRef(function (_a, ref) {
             onChange(selectedOption.value);
         }
     };
-    return (_jsxs("div", __assign({ className: classNames('ncua-switch', "ncua-switch--".concat(getValidSize(size)), {
+    return (_jsxs("div", { className: classNames('ncua-switch', `ncua-switch--${getValidSize(size)}`, {
             'ncua-switch--disabled': disabled,
-        }, className) }, { children: [_jsxs("label", __assign({ className: classNames('ncua-switch__option', 'ncua-switch__option--left', {
+        }, className), children: [_jsxs("label", { className: classNames('ncua-switch__option', 'ncua-switch__option--left', {
                     'ncua-switch__option--active': currentValue === normalizeValue(left.value),
                     'ncua-switch__option--inactive': currentValue !== normalizeValue(left.value),
-                }) }, { children: [_jsx("input", { type: "radio", ref: (_b = refs === null || refs === void 0 ? void 0 : refs[0]) !== null && _b !== void 0 ? _b : leftInputRef, name: name, value: normalizeValue(left.value), checked: currentValue === normalizeValue(left.value), disabled: disabled, className: "ncua-switch__radio ncua-switch__radio--left", onChange: function () { return handleChange(normalizeValue(left.value)); } }), _jsx("span", __assign({ className: "ncua-switch__label" }, { children: left.label }))] })), _jsxs("label", __assign({ className: classNames('ncua-switch__option', 'ncua-switch__option--right', {
+                }), children: [_jsx("input", { type: "radio", ref: refs?.[0] ?? leftInputRef, name: name, value: normalizeValue(left.value), checked: currentValue === normalizeValue(left.value), disabled: disabled, className: "ncua-switch__radio ncua-switch__radio--left", onChange: () => handleChange(normalizeValue(left.value)) }), _jsx("span", { className: "ncua-switch__label", children: left.label })] }), _jsxs("label", { className: classNames('ncua-switch__option', 'ncua-switch__option--right', {
                     'ncua-switch__option--active': currentValue === normalizeValue(right.value),
                     'ncua-switch__option--inactive': currentValue !== normalizeValue(right.value),
-                }) }, { children: [_jsx("input", { type: "radio", ref: refs === null || refs === void 0 ? void 0 : refs[1], name: name, value: normalizeValue(right.value), checked: currentValue === normalizeValue(right.value), disabled: disabled, className: "ncua-switch__radio ncua-switch__radio--right", onChange: function () { return handleChange(normalizeValue(right.value)); } }), _jsx("span", __assign({ className: "ncua-switch__label" }, { children: right.label }))] }))] })));
+                }), children: [_jsx("input", { type: "radio", ref: refs?.[1], name: name, value: normalizeValue(right.value), checked: currentValue === normalizeValue(right.value), disabled: disabled, className: "ncua-switch__radio ncua-switch__radio--right", onChange: () => handleChange(normalizeValue(right.value)) }), _jsx("span", { className: "ncua-switch__label", children: right.label })] })] }));
 });
 Switch.displayName = 'Switch';
 export { Switch };

package/dist/temp/src/components/tab/TabButton.js

@@ -1,37 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { Badge } from '../badge/Badge';
-var TabButton = function (_a) {
-    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? 'sm' : _b, tabButtonType = _a.tabButtonType, type = _a.type, _c = _a.isActive, isActive = _c === void 0 ? false : _c, badgeInfo = _a.badgeInfo, className = _a.className, children = _a.children, props = __rest(_a, ["id", "label", "size", "tabButtonType", "type", "isActive", "badgeInfo", "className", "children"]);
-    var componentClassName = classNames('ncua-tab-button', { 'is-active': isActive }, className);
+const TabButton = ({ id, label, size = 'sm', tabButtonType, type, isActive = false, badgeInfo, className, children, ...props }) => {
+    const componentClassName = classNames('ncua-tab-button', { 'is-active': isActive }, className);
     if ('href' in props && props.href) {
-        var _d = props, href = _d.href, _e = _d.target, target = _e === void 0 ? '_self' : _e, _onClick = _d.onClick, anchorProps = __rest(_d, ["href", "target", "onClick"]);
-        return (_jsxs("a", __assign({ className: componentClassName, href: href, target: target }, anchorProps, { children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, { size: "xs" })), children] })));
+        const { href, target = '_self', onClick: _onClick, ...anchorProps } = props;
+        return (_jsxs("a", { className: componentClassName, href: href, target: target, ...anchorProps, children: [label, badgeInfo && _jsx(Badge, { ...badgeInfo, size: "xs" }), children] }));
     }
-    var _f = props, onClick = _f.onClick, onClose = _f.onClose, buttonProps = __rest(_f, ["onClick", "onClose"]);
-    return (_jsxs(_Fragment, { children: [_jsxs("button", __assign({ type: "button", className: componentClassName, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(id !== null && id !== void 0 ? id : ''); } }, buttonProps, { children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, { size: "xs" })), children] })), onClose && (_jsx("button", __assign({ type: "button", className: "ncua-tab-close", onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : ''); } }, { children: _jsx(XClose, { width: 14, height: 14 }) })))] }));
+    const { onClick, onClose, ...buttonProps } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: componentClassName, onClick: () => onClick?.(id ?? ''), ...buttonProps, children: [label, badgeInfo && _jsx(Badge, { ...badgeInfo, size: "xs" }), children] }), onClose && (_jsx("button", { type: "button", className: "ncua-tab-close", onClick: () => onClose?.(id ?? ''), children: _jsx(XClose, { width: 14, height: 14 }) }))] }));
 };
 export { TabButton };

package/dist/temp/src/components/tab/index.d.ts

@@ -1,3 +1 @@
-export * from './HorizontalTab';
 export * from './TabButton';
-export * from './VerticalTab';

package/dist/temp/src/components/tab/index.js

@@ -1,3 +1 @@
-export * from './HorizontalTab';
 export * from './TabButton';
-export * from './VerticalTab';

package/dist/temp/src/components/table/Table.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+import type { SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderProps, TablePaginationProps } from './types';
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    type?: import("./types").TableType | undefined;
+    fixedHeader?: boolean | undefined;
+    maxHeight?: string | number | undefined;
+    hoverable?: boolean | undefined;
+    selectable?: boolean | undefined;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: {
+        ({ children, className }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Row: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+        selected?: boolean | undefined;
+        status?: import("./types").RowStatus | undefined;
+    } & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+        sortDirection?: SortDirection | undefined;
+        onSort?: (() => void) | undefined;
+        width?: string | number | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Footer: {
+        ({ children, className }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Pagination: {
+        ({ children, className }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ColGroup: {
+        ({ widths }: TableColGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Empty: {
+        ({ colSpan, children }: TableEmptyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { RowStatus, SortDirection, TableBodyProps, TableCellProps, TableColGroupProps, TableEmptyProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, TableType, } from './types';