@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

package/dist/temp/src/components/selectbox/SelectBox.js

@@ -0,0 +1,163 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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';
+var ICON_SIZE_XS = 14;
+var ICON_SIZE_SM = 16;
+var DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+    if (multiple) {
+        var currentValues = Array.isArray(value) ? value : [];
+        if (currentValues.includes(option.id)) {
+            return currentValues.filter(function (v) { return v !== option.id; });
+        }
+        return __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
+    }
+    return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+    if (!(register === null || register === void 0 ? void 0 : register.onChange))
+        return;
+    register.onChange({
+        target: {
+            value: multiple ? JSON.stringify(newValue) : newValue,
+            name: register.name,
+        },
+    });
+}
+function DisplayValue(_a) {
+    var displayValue = _a.displayValue;
+    if (typeof displayValue === 'string') {
+        return _jsx("span", __assign({ className: "ncua-selectbox__value-text" }, { children: displayValue }));
+    }
+    return (_jsxs("div", __assign({ className: "ncua-selectbox__value-container" }, { children: [displayValue.icon && (_jsx("span", __assign({ className: "ncua-selectbox__value-icon" }, { children: _jsx(displayValue.icon, { width: 16, height: 16 }) }))), _jsx("span", __assign({ className: "ncua-selectbox__value-text" }, { children: displayValue.label }))] })));
+}
+var SelectBox = forwardRef(function (_a, ref) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? '선택하세요' : _b, _c = _a.disabledPlaceholder, disabledPlaceholder = _c === void 0 ? false : _c, hintText = _a.hintText, _d = _a.size, size = _d === void 0 ? 'xs' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, _f = _a.autoWidth, autoWidth = _f === void 0 ? true : _f, _g = _a.destructive, destructive = _g === void 0 ? false : _g, value = _a.value, _h = _a.optionItems, optionItems = _h === void 0 ? [] : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? DEFAULT_MAX_HEIGHT : _k, _l = _a.multiple, multiple = _l === void 0 ? false : _l, _m = _a.align, align = _m === void 0 ? 'left' : _m, id = _a.id, className = _a.className, children = _a.children, register = _a.register, onChange = _a.onChange, onEdit = _a.onEdit, props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "autoWidth", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "align", "id", "className", "children", "register", "onChange", "onEdit"]);
+    var internalRef = useRef(null);
+    var dropdownRef = useRef(null);
+    var _o = useState([]), selectedTags = _o[0], setSelectedTags = _o[1];
+    var selectedOption = useMemo(function () {
+        if (multiple)
+            return null;
+        return optionItems.find(function (option) { return option.id === value; });
+    }, [optionItems, value, multiple]);
+    var displayValue = useMemo(function () {
+        if (multiple) {
+            return placeholder;
+        }
+        return selectedOption ? selectedOption : placeholder;
+    }, [multiple, selectedOption, placeholder]);
+    var handleOptionSelect = function (option) {
+        if (disabled)
+            return;
+        var newValue = computeNewValue(option, value, multiple);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        notifyRegister(register, newValue, multiple);
+    };
+    var _p = useDropdown({
+        triggerRef: internalRef,
+        dropdownRef: dropdownRef,
+        maxHeight: maxHeight,
+        itemCount: optionItems.length,
+        optionItems: optionItems,
+        disabled: disabled,
+        multiple: multiple,
+        onSelect: handleOptionSelect,
+    }), isOpen = _p.isOpen, dropdownDirection = _p.direction, focusedIndex = _p.focusedIndex, toggleDropdown = _p.toggleDropdown, closeDropdown = _p.closeDropdown, handleKeyDown = _p.handleKeyDown, handleDropdownSelect = _p.handleOptionSelect, handleMouseMove = _p.handleMouseMove, isKeyboardNavigation = _p.isKeyboardNavigation, setFocusedIndex = _p.setFocusedIndex;
+    var activeDescendantId = useMemo(function () {
+        if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+            return undefined;
+        }
+        var focusedOption = optionItems[focusedIndex];
+        return "selectbox-options-".concat(id || 'default', "-").concat(focusedOption.id);
+    }, [isOpen, focusedIndex, optionItems, id]);
+    var handleOptionHover = useCallback(function (index) {
+        handleMouseMove();
+        setFocusedIndex(index);
+    }, [handleMouseMove, setFocusedIndex]);
+    // Multiple select 관련 로직
+    var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+    var _q = useMultiSelect(currentSelectedValues, optionItems), selectAllButtonText = _q.buttonText, toggleSelectAll = _q.toggleSelectAll, getSelectedTagsData = _q.getSelectedTagsData, removeTag = _q.removeTag;
+    var handleSelectAll = function () {
+        if (!multiple || !onChange)
+            return;
+        var newSelectedValues = toggleSelectAll();
+        onChange(newSelectedValues);
+    };
+    var handleEdit = function () {
+        onEdit === null || onEdit === void 0 ? void 0 : onEdit();
+    };
+    var handleComplete = function () {
+        if (multiple) {
+            var tags = getSelectedTagsData();
+            setSelectedTags(tags);
+        }
+        closeDropdown();
+    };
+    var handleRemoveTag = function (tagId) {
+        if (!onChange)
+            return;
+        if (multiple) {
+            var newSelectedValues = removeTag(tagId);
+            onChange(newSelectedValues);
+            setSelectedTags(function (prev) { return prev.filter(function (tag) { return tag.id !== tagId; }); });
+        }
+    };
+    useScrollLock(isOpen, dropdownRef);
+    useLayoutEffect(function () {
+        if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+            var dropdownWidth = dropdownRef.current.offsetWidth;
+            internalRef.current.style.width = "".concat(dropdownWidth, "px");
+        }
+    }, [autoWidth, isOpen, optionItems]);
+    useImperativeHandle(ref, function () { return internalRef.current; }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ ref: internalRef, className: classNames('ncua-selectbox', "ncua-selectbox--".concat(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", __assign({ 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-".concat(id || 'default'), "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId }, { children: [_jsxs("div", __assign({ className: "ncua-selectbox__content-inner" }, { children: [_jsx("div", __assign({ 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, __assign({ ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: "selectbox-options-".concat(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, __assign({ destructive: destructive, className: "ncua-hint-text" }, { children: hintText }))), register && (_jsx("input", __assign({ type: "hidden" }, register, { value: multiple ? JSON.stringify(value || []) : String(value || '') })))] })), selectedTags.length > 0 && (_jsx("div", __assign({ className: "ncua-selectbox__tags" }, { children: selectedTags.map(function (tag) { return (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: function () { return handleRemoveTag(tag.id); } }, tag.id)); }) })))] }));
+});
+SelectBox.displayName = 'SelectBox';
+export { DEFAULT_MAX_HEIGHT, SelectBox };

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

@@ -0,0 +1 @@
+export { SelectBox, type SelectBoxProps } from './SelectBox';

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

@@ -0,0 +1 @@
+export { SelectBox } from './SelectBox';

package/dist/temp/src/components/shared/hintText/HintText.d.ts

@@ -0,0 +1,7 @@
+interface HintTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    destructive?: boolean;
+    children: React.ReactNode;
+}
+export declare const HintText: ({ as: Component, children, className, destructive, ...props }: HintTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+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 })));
+};

package/dist/temp/src/components/shared/hintText/index.d.ts

@@ -0,0 +1 @@
+export * from './HintText';

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

@@ -0,0 +1 @@
+export * from './HintText';

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

@@ -0,0 +1,2 @@
+export * from './hintText';
+export * from './label';

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

@@ -0,0 +1,2 @@
+export * from './hintText';
+export * from './label';

package/dist/temp/src/components/shared/label/Label.d.ts

@@ -0,0 +1,7 @@
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    as?: React.ElementType;
+    isRequired?: boolean;
+    children: React.ReactNode;
+}
+export declare const Label: ({ as: Component, children, className, isRequired, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+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 })));
+};

package/dist/temp/src/components/shared/label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

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

@@ -0,0 +1 @@
+export * from './Label';

package/dist/temp/src/components/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { type SliderOptions } from '../../../assets/scripts/slider';
+export type SliderLabelPosition = SliderOptions['labelPosition'];
+export interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    labelPosition?: SliderLabelPosition;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Slider: ({ min, max, step, value, onChange, labelPosition, disabled, className, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

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

@@ -0,0 +1,44 @@
+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 () {
+        if (!containerRef.current)
+            return;
+        sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
+            min: min,
+            max: max,
+            step: step,
+            value: value,
+            onChange: onChange,
+            labelPosition: labelPosition,
+            disabled: disabled,
+        });
+        return function () {
+            if (sliderInstanceRef.current) {
+                sliderInstanceRef.current.destroy();
+                sliderInstanceRef.current = null;
+            }
+        };
+    }, [typeof value, onChange, min, max, step, labelPosition]);
+    useEffect(function () {
+        if (sliderInstanceRef.current) {
+            sliderInstanceRef.current.setValue(value);
+        }
+    }, [sliderInstanceRef, value]);
+    useEffect(function () {
+        if (sliderInstanceRef.current) {
+            if (disabled) {
+                sliderInstanceRef.current.disable();
+            }
+            else {
+                sliderInstanceRef.current.enable();
+            }
+        }
+    }, [disabled]);
+    return _jsx("div", { ref: containerRef, className: "ncua-slider ".concat(className || '') });
+};
+export default Slider;

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

@@ -0,0 +1 @@
+export * from './Slider';

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

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/temp/src/components/spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, ReactNode } from 'react';
+interface SpinnerProps {
+    as?: ElementType;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    children?: ReactNode;
+    backdrop?: boolean;
+}
+export declare const Spinner: ({ as, size, children, backdrop }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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 } 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 }));
+};
+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 })) })) })));
+};

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

@@ -0,0 +1 @@
+export * from './Spinner';

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

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/temp/src/components/switch/Switch.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode, type Ref } from 'react';
+import type { Size } from '../../../constant/size';
+type SwitchOption = {
+    label: ReactNode;
+    value: string | boolean;
+};
+type SwitchSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
+type SwitchProps = {
+    size?: SwitchSize;
+    left: SwitchOption;
+    right: SwitchOption;
+    onChange?: (value: string | boolean) => void;
+    name: string;
+    disabled?: boolean;
+    value?: string | boolean;
+    defaultValue?: string | boolean;
+    className?: string;
+    refs?: [Ref<HTMLInputElement>, Ref<HTMLInputElement>];
+};
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export type { SwitchSize, SwitchProps };
+export { Switch };

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

@@ -0,0 +1,68 @@
+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; });
+    // 값을 문자열로 정규화하는 함수
+    var normalizeValue = function (val) {
+        return typeof val === 'boolean' ? String(val) : val;
+    };
+    // 유효한 사이즈인지 확인하는 함수
+    var getValidSize = function (size) {
+        var validSizes = ['xxs', 'xs', 'sm', 'md'];
+        return size && validSizes.includes(size) ? size : 'xs';
+    };
+    var isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
+    // 현재 값 처리
+    var getCurrentValue = function () {
+        if (value === undefined)
+            return undefined;
+        if (isBooleanType && typeof value === 'boolean') {
+            return normalizeValue(value ? left.value : right.value);
+        }
+        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) {
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        if (!onChange)
+            return;
+        // 선택된 옵션 찾기
+        var selectedOption = newValue === normalizeValue(left.value) ? left : right;
+        if (isBooleanType && typeof value === 'boolean') {
+            onChange(newValue === normalizeValue(left.value));
+        }
+        else {
+            onChange(selectedOption.value);
+        }
+    };
+    return (_jsxs("div", __assign({ className: classNames('ncua-switch', "ncua-switch--".concat(getValidSize(size)), {
+            'ncua-switch--disabled': disabled,
+        }, className) }, { children: [_jsxs("label", __assign({ 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', {
+                    '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 }))] }))] })));
+});
+Switch.displayName = 'Switch';
+export { Switch };

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

@@ -0,0 +1,2 @@
+export type { SwitchProps } from './Switch';
+export { Switch } from './Switch';

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

@@ -0,0 +1 @@
+export { Switch } from './Switch';

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

@@ -0,0 +1,12 @@
+import { type TabButtonProps, type TabSize, type TabType } from './TabButton';
+type HorizontalTabProps = {
+    type?: Exclude<TabType, 'line-vertical'>;
+    size?: TabSize;
+    activeTab?: string;
+    fullWidth?: boolean;
+    menus?: TabButtonProps[];
+    className?: string;
+};
+declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, className, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { HorizontalTabProps };
+export { HorizontalTab };

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

@@ -0,0 +1,37 @@
+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';
+import { uniqueId } from 'lodash-es';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { TabButton } from './TabButton';
+var UNDERLINE_GAP = 16;
+var DEFAULT_GAP = 8;
+var HorizontalTab = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'button-primary' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, activeTab = _a.activeTab, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.menus, menus = _e === void 0 ? [] : _e, className = _a.className;
+    var getTabGap = function (type) {
+        var _a;
+        var gap = {
+            underline: UNDERLINE_GAP,
+        };
+        return (_a = gap[type]) !== null && _a !== void 0 ? _a : DEFAULT_GAP;
+    };
+    if (!menus.length)
+        return null;
+    return (_jsx("div", __assign({ className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
+            'ncua-horizontal-tab--fullWidth': fullWidth,
+        }, className) }, { children: _jsx(Swiper, __assign({ slidesPerView: "auto", spaceBetween: getTabGap(type) }, { children: menus.map(function (menu) {
+                var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+                return (_jsx(SwiperSlide, __assign({ className: "ncua-horizontal-tab__item" }, { children: _jsx(TabButton, __assign({}, menu, { isActive: isActive, tabButtonType: type, size: size })) }), uniqueId('horizontal-tab')));
+            }) })) })));
+};
+export { HorizontalTab };

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

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { type BadgeProps } from '../badge/Badge';
+type TabSize = 'sm' | 'md' | 'lg';
+type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
+type BaseTabButtonProps = {
+    id?: string;
+    label?: string;
+    size?: TabSize;
+    tabButtonType?: TabType;
+    isActive?: boolean;
+    badgeInfo?: BadgeProps;
+    className?: string;
+    children?: ReactNode;
+};
+type TabButtonAsButtonProps = BaseTabButtonProps & {
+    onClose?: (id: string) => void;
+    onClick?: (id: string) => void;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+type TabButtonAsLinkProps = BaseTabButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type TabButtonProps = TabButtonAsButtonProps | TabButtonAsLinkProps;
+declare const TabButton: ({ id, label, size, tabButtonType, type, isActive, badgeInfo, className, children, ...props }: TabButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type { TabSize, TabType, TabButtonAsButtonProps, TabButtonAsLinkProps, TabButtonProps };
+export { TabButton };

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

@@ -0,0 +1,37 @@
+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);
+    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] })));
+    }
+    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 }) })))] }));
+};
+export { TabButton };

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

@@ -0,0 +1,9 @@
+import { type TabButtonProps } from './TabButton';
+export type VerticalTabProps = {
+    type?: 'button-primary' | 'button-white' | 'line-vertical';
+    breakPoint?: 'mobile' | 'pc';
+    activeTab?: string;
+    menus?: TabButtonProps[];
+    onSelect?: (value: string) => void;
+};
+export declare const VerticalTab: ({ type, breakPoint, activeTab, menus, onSelect, }: VerticalTabProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+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';
+import { Select } from '../select/Select';
+import { TabButton } from './TabButton';
+export var VerticalTab = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'button-primary' : _b, _c = _a.breakPoint, breakPoint = _c === void 0 ? 'pc' : _c, activeTab = _a.activeTab, menus = _a.menus, onSelect = _a.onSelect;
+    var handleSelectChange = function (e) {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(e.target.value);
+    };
+    var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) { return ({
+        id: menu.id || '',
+        label: menu.label || '',
+    }); })) || [];
+    if (breakPoint === 'mobile') {
+        return _jsx(Select, { value: activeTab, onChange: handleSelectChange, optionItems: optionItems, size: "md" });
+    }
+    return (_jsx("div", __assign({ className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type)) }, { children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
+            var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+            return _jsx(TabButton, __assign({}, menu, { isActive: isActive, tabButtonType: type, size: "md" }), menu.id);
+        }) })));
+};