@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/temp/src/components/table/Table.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Children, forwardRef } from 'react';
+// ──────────────────────────────────────────────
+// Sort Icons (@ncds/ui-admin-icon)
+// ──────────────────────────────────────────────
+const SORT_ICONS = {
+    none: ChevronSelectorVertical,
+    asc: ChevronUp,
+    desc: ChevronDown,
+};
+const ARIA_SORT_MAP = {
+    asc: 'ascending',
+    desc: 'descending',
+    none: 'none',
+};
+// ──────────────────────────────────────────────
+// Sub-components
+// ──────────────────────────────────────────────
+const Header = ({ children, className }) => (_jsx("thead", { className: classNames('ncua-table__header', className), children: children }));
+Header.displayName = 'Table.Header';
+const Body = ({ children, className }) => (_jsx("tbody", { className: classNames('ncua-table__body', className), children: children }));
+Body.displayName = 'Table.Body';
+const Row = forwardRef(({ children, className, selected, status, ...rest }, ref) => (_jsx("tr", { ref: ref, className: classNames('ncua-table__row', className, {
+        'ncua-table__row--selected': selected,
+        'ncua-table__row--warning': status === 'warning',
+        'ncua-table__row--error': status === 'error',
+    }), ...rest, children: children })));
+Row.displayName = 'Table.Row';
+const HeaderCell = forwardRef(({ children, className, sortDirection, onSort, width, style, ...rest }, ref) => {
+    const isSortable = sortDirection !== undefined && onSort !== undefined;
+    const SortIcon = isSortable ? SORT_ICONS[sortDirection] : undefined;
+    return (_jsx("th", { ref: ref, className: classNames('ncua-table__header-cell', className, {
+            'ncua-table__header-cell--sortable': isSortable,
+        }), style: { ...style, width }, "aria-sort": isSortable ? ARIA_SORT_MAP[sortDirection] : undefined, onClick: isSortable ? onSort : undefined, ...rest, children: isSortable && SortIcon ? (_jsxs("span", { className: "ncua-table__header-cell-inner", children: [_jsx("span", { className: "ncua-table__header-cell-text", children: children }), _jsx("span", { className: "ncua-table__sort-icon", children: _jsx(SortIcon, { width: 16, height: 16 }) })] })) : (children) }));
+});
+HeaderCell.displayName = 'Table.HeaderCell';
+const Cell = forwardRef(({ children, className, ...rest }, ref) => (_jsx("td", { ref: ref, className: classNames('ncua-table__cell', className), ...rest, children: children })));
+Cell.displayName = 'Table.Cell';
+const Footer = ({ children, className }) => (_jsx("div", { className: classNames('ncua-table__footer', className), children: children }));
+Footer.displayName = 'Table.Footer';
+const Pagination = ({ children, className }) => (_jsx("div", { className: classNames('ncua-table__pagination', className), children: children }));
+Pagination.displayName = 'Table.Pagination';
+const ColGroup = ({ widths }) => {
+    const resolveColWidth = (width) => {
+        if (width === 'auto')
+            return undefined;
+        if (typeof width === 'number')
+            return `${width}px`;
+        return width;
+    };
+    return (_jsx("colgroup", { children: widths.map((width, index) => {
+            const duplicateCount = widths.slice(0, index).filter((v) => v === width).length;
+            return _jsx("col", { style: { width: resolveColWidth(width) } }, `col-${width}-${duplicateCount}`);
+        }) }));
+};
+ColGroup.displayName = 'Table.ColGroup';
+const Empty = ({ colSpan, children }) => (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: "ncua-table__empty", role: "status", "aria-live": "polite", children: children || '등록된 게시물이 없습니다.' }) }));
+Empty.displayName = 'Table.Empty';
+const categorizeChild = (child, result) => {
+    if (!child || typeof child !== 'object' || !('type' in child)) {
+        result.tableContent.push(child);
+        return;
+    }
+    if (child.type === Footer) {
+        result.footerContent.push(child);
+    }
+    else if (child.type === Pagination) {
+        result.paginationContent.push(child);
+    }
+    else {
+        result.tableContent.push(child);
+    }
+};
+const sortChildren = (children) => {
+    const result = { tableContent: [], footerContent: [], paginationContent: [] };
+    Children.forEach(children, (child) => {
+        categorizeChild(child, result);
+    });
+    return result;
+};
+// ──────────────────────────────────────────────
+// Main Table component
+// ──────────────────────────────────────────────
+const TableComponent = forwardRef(({ type = 'horizontal', fixedHeader = false, maxHeight, hoverable = true, selectable = false, children, className, ...rest }, ref) => {
+    const tableClasses = classNames('ncua-table', className, {
+        'ncua-table--horizontal': type === 'horizontal',
+        'ncua-table--vertical': type === 'vertical',
+        'ncua-table--fixed-header': fixedHeader,
+        'ncua-table--hoverable': hoverable && type === 'horizontal',
+        'ncua-table--selectable': selectable,
+    });
+    const { tableContent, footerContent, paginationContent } = sortChildren(children);
+    const scrollStyle = fixedHeader && maxHeight
+        ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
+        : undefined;
+    const tableElement = (_jsx("table", { className: "ncua-table__table", role: "table", children: tableContent }));
+    return (_jsxs("div", { ref: ref, className: "ncua-table-wrapper", children: [_jsxs("div", { className: tableClasses, ...rest, children: [fixedHeader && maxHeight ? (_jsx("div", { className: "ncua-table__scroll-container", style: scrollStyle, children: tableElement })) : (tableElement), footerContent] }), paginationContent] }));
+});
+TableComponent.displayName = 'Table';
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+export const Table = Object.assign(TableComponent, {
+    Header,
+    Body,
+    Row,
+    HeaderCell,
+    Cell,
+    Footer,
+    Pagination,
+    ColGroup,
+    Empty,
+});

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

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

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

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

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

@@ -0,0 +1,45 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type TableType = 'horizontal' | 'vertical';
+export type SortDirection = 'asc' | 'desc' | 'none';
+export type RowStatus = 'warning' | 'error';
+export type TableProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    type?: TableType;
+    fixedHeader?: boolean;
+    maxHeight?: string | number;
+    hoverable?: boolean;
+    selectable?: boolean;
+    children: ReactNode;
+};
+export type TableHeaderProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableBodyProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableRowProps = Omit<ComponentProps<'tr'>, 'ref'> & {
+    selected?: boolean;
+    status?: RowStatus;
+};
+export type TableHeaderCellProps = Omit<ComponentProps<'th'>, 'ref'> & {
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+    width?: string | number;
+};
+export type TableCellProps = Omit<ComponentProps<'td'>, 'ref'>;
+export type TableFooterProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TablePaginationProps = {
+    children: ReactNode;
+    className?: string;
+};
+export type TableColGroupProps = {
+    widths: (string | number)[];
+};
+export type TableEmptyProps = {
+    colSpan: number;
+    children?: ReactNode;
+};

package/dist/temp/src/components/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/tag/Tag.js

@@ -1,48 +1,36 @@
-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 { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
-var MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
 // 위치 계산 로직
-var calculateOptimalPosition = function (triggerElement, tooltipElement) {
-    var triggerRect = triggerElement.getBoundingClientRect();
-    var tooltipRect = tooltipElement.getBoundingClientRect();
-    var viewportWidth = window.innerWidth, viewportHeight = window.innerHeight;
-    var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-    var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-    var spaces = {
+const calculateOptimalPosition = (triggerElement, tooltipElement) => {
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    const spaces = {
         top: triggerRect.top,
         bottom: viewportHeight - triggerRect.bottom,
         left: triggerRect.left,
         right: viewportWidth - triggerRect.right,
     };
     // 위/아래 공간을 먼저 확인하고 우선순위 결정
-    var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+    const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
     // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-    var positions = hasTopSpace
+    const positions = hasTopSpace
         ? ['top-right', 'top-left', 'bottom-right', 'bottom-left']
         : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
-        var position = positions_1[_i];
-        var isTop = position.includes('top');
-        var isRight = position.includes('right');
-        var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-        var hasHorizontalSpace = isRight
+    for (const position of positions) {
+        const isTop = position.includes('top');
+        const isRight = position.includes('right');
+        const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+        const hasHorizontalSpace = isRight
             ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
             : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
         if (hasVerticalSpace && hasHorizontalSpace) {
@@ -50,61 +38,59 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement) {
         }
     }
     // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-    var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+    const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
     return fallbackPosition;
 };
-var Tag = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, icon = _a.icon, text = _a.text, count = _a.count, close = _a.close, onButtonClick = _a.onButtonClick, _c = _a.maxLength, maxLength = _c === void 0 ? 20 : _c;
-    var _d = useState(false), isTooltipVisible = _d[0], setIsTooltipVisible = _d[1];
-    var _e = useState('top-right'), calculatedPosition = _e[0], setCalculatedPosition = _e[1];
-    var tagRef = useRef(null);
-    var tooltipRef = useRef(null);
-    var iconSize = {
+const Tag = ({ size = 'sm', icon, text, count, close, onButtonClick, maxLength = 20 }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const [calculatedPosition, setCalculatedPosition] = useState('top-right');
+    const tagRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const iconSize = {
         sm: 14,
         md: 16,
     };
     // 텍스트 길이 체크 및 말줄임 처리
-    var shouldTruncate = text.length > maxLength;
-    var displayText = shouldTruncate ? "".concat(text.slice(0, maxLength - 2), "...") : text;
-    var handleMouseEnter = useCallback(function () {
+    const shouldTruncate = text.length > maxLength;
+    const displayText = shouldTruncate ? `${text.slice(0, maxLength - 2)}...` : text;
+    const handleMouseEnter = useCallback(() => {
         if (shouldTruncate) {
             setIsTooltipVisible(true);
             // 간단한 위치 계산 - 기본값 사용
             if (tagRef.current && tooltipRef.current) {
-                var optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+                const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
                 setCalculatedPosition(optimalPosition);
             }
             else {
                 // ref가 없으면 다음 렌더링 사이클에서 시도
-                setTimeout(function () {
+                setTimeout(() => {
                     if (tagRef.current) {
                         // tooltipRef가 없어도 tagRef만으로 계산
-                        var dummyTooltipElement = document.createElement('div');
-                        dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
-                        dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
-                        var optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+                        const dummyTooltipElement = document.createElement('div');
+                        dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
+                        dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
+                        const optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
                         setCalculatedPosition(optimalPosition);
                     }
                 }, 0);
             }
         }
     }, [shouldTruncate]);
-    var handleMouseLeave = useCallback(function () {
+    const handleMouseLeave = useCallback(() => {
         setIsTooltipVisible(false);
     }, []);
-    var sideSlotRender = function (slot) {
-        var _a;
+    const sideSlotRender = (slot) => {
         if (slot.type === 'icon') {
-            var SlotIcon = slot.icon;
+            const SlotIcon = slot.icon;
             return _jsx(SlotIcon, { width: iconSize[size], height: iconSize[size], color: slot.color });
         }
         if (slot.type === 'dot') {
-            return _jsx(Dot, { color: slot.color, size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm' });
+            return _jsx(Dot, { color: slot.color, size: slot.size ?? 'sm' });
         }
         return slot.children;
     };
-    return (_jsxs("span", __assign({ ref: tagRef, className: classNames('ncua-tag', "ncua-tag--".concat(size), {
+    return (_jsxs("span", { ref: tagRef, className: classNames('ncua-tag', `ncua-tag--${size}`, {
             'ncua-tag--truncated': shouldTruncate,
-        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [icon && sideSlotRender(icon), _jsx("span", __assign({ className: "ncua-tag__text" }, { children: displayText })), count && _jsx("span", __assign({ className: "ncua-tag__count" }, { children: count })), close && (_jsx("button", __assign({ type: "button", className: "ncua-tag__close", onClick: onButtonClick }, { children: _jsx(XClose, { color: COLOR.gray300, width: iconSize[size], height: iconSize[size] }) }))), shouldTruncate && isTooltipVisible && (_jsx("span", __assign({ ref: tooltipRef, className: classNames('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition)) }, { children: _jsx("span", __assign({ className: "ncua-tag__tooltip-content" }, { children: text })) })))] })));
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [icon && sideSlotRender(icon), _jsx("span", { className: "ncua-tag__text", children: displayText }), count && _jsx("span", { className: "ncua-tag__count", children: count }), close && (_jsx("button", { type: "button", className: "ncua-tag__close", onClick: onButtonClick, children: _jsx(XClose, { color: COLOR.gray300, width: iconSize[size], height: iconSize[size] }) })), shouldTruncate && isTooltipVisible && (_jsx("span", { ref: tooltipRef, className: classNames('ncua-tag__tooltip', `ncua-tag__tooltip--${calculatedPosition}`), children: _jsx("span", { className: "ncua-tag__tooltip-content", children: text }) }))] }));
 };
 export { Tag };

package/dist/temp/src/components/textarea/Textarea.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
+export const Textarea = forwardRef(({ className, size = 'xs', label, required, disabled, hintText, characterCount, destructive, ...props }, ref) => {
+    const textareaRef = useRef(null);
+    const [textCount, setTextCount] = useState(0);
+    const shouldShowHintArea = hintText || characterCount;
+    useEffect(() => {
+        if (textareaRef.current && characterCount) {
+            setTextCount(textareaRef.current.value.length);
+            const handleInput = () => {
+                setTextCount(textareaRef.current?.value.length ?? 0);
+            };
+            textareaRef.current.addEventListener('input', handleInput);
+            return () => {
+                textareaRef.current?.removeEventListener('input', handleInput);
+            };
+        }
+    }, [characterCount]);
+    return (_jsxs("div", { className: classNames('ncua-input', 'ncua-input--textarea', `ncua-input--textarea--${size}`, {
+            destructive: destructive,
+            'is-disabled': disabled,
+        }, className), children: [label && (_jsx(Label, { htmlFor: props.id, isRequired: required, children: label })), _jsx("textarea", { ref: (node) => {
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current = node;
+                    }
+                    textareaRef.current = node;
+                }, className: "ncua-input__textarea", disabled: disabled, ...props }), shouldShowHintArea && (_jsxs("div", { className: "ncua-input__text-count-wrap", children: [hintText && (_jsx(HintText, { as: "div", destructive: destructive, children: hintText })), characterCount && (_jsx("div", { className: "ncua-input__text-count", children: _jsxs("span", { className: "ncua-input__text-count-text", children: [_jsx("span", { className: "ncua-input__text-count-text-count", children: textCount }), "/", props.maxLength ?? 0] }) }))] }))] }));
+});

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

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

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

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

package/dist/temp/src/components/toggle/Toggle.js

@@ -1,30 +1,7 @@
-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';
-export var Toggle = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.text, text = _c === void 0 ? '' : _c, _d = _a.supportText, supportText = _d === void 0 ? '' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
-    return (_jsxs("label", __assign({ className: classNames('ncua-toggle', "ncua-toggle--".concat(size), {
+export const Toggle = ({ size = 'sm', text = '', supportText = '', disabled = false, onChange, className, ...props }) => {
+    return (_jsxs("label", { className: classNames('ncua-toggle', `ncua-toggle--${size}`, {
             'ncua-toggle--disabled': disabled,
-        }, className) }, { children: [_jsx("input", __assign({ type: "checkbox", className: "ncua-toggle__input", checked: props === null || props === void 0 ? void 0 : props.checked, disabled: disabled, onChange: onChange }, props)), _jsx("span", __assign({ className: "ncua-toggle__switch" }, { children: _jsx("span", { className: "ncua-toggle__slider" }) })), text && (_jsxs("span", __assign({ className: "ncua-toggle__text-wrapper" }, { children: [_jsx("span", __assign({ className: "ncua-toggle__text" }, { children: text })), supportText && _jsx("span", __assign({ className: "ncua-toggle__support-text" }, { children: supportText }))] })))] })));
+        }, className), children: [_jsx("input", { type: "checkbox", className: "ncua-toggle__input", checked: props?.checked, disabled: disabled, onChange: onChange, ...props }), _jsx("span", { className: "ncua-toggle__switch", children: _jsx("span", { className: "ncua-toggle__slider" }) }), text && (_jsxs("span", { className: "ncua-toggle__text-wrapper", children: [_jsx("span", { className: "ncua-toggle__text", children: text }), supportText && _jsx("span", { className: "ncua-toggle__support-text", children: supportText })] }))] }));
 };

package/dist/temp/src/components/tooltip/Tooltip.js

@@ -1,63 +1,50 @@
-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 { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { ButtonCloseX } from '../button/ButtonCloseX';
-var ICON_SIZE_SM = 14;
-var ICON_SIZE_DEFAULT = 16;
-var MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
-var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
 // 수직 위치(top/bottom)일 때 수평 정렬 보정
-var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
-    var centerX = triggerRect.left + triggerRect.width / 2;
-    var tooltipHalfWidth = tooltipWidth / 2;
+const resolveVerticalAlignment = (position, triggerRect, tooltipWidth, viewportWidth) => {
+    const centerX = triggerRect.left + triggerRect.width / 2;
+    const tooltipHalfWidth = tooltipWidth / 2;
     if (centerX - tooltipHalfWidth < MARGIN) {
-        return "".concat(position, "-left");
+        return `${position}-left`;
     }
     if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-        return "".concat(position, "-right");
+        return `${position}-right`;
     }
     return position;
 };
 // 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
-var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
-    var isVertical = position === 'bottom' || position === 'top';
-    var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+const hasEnoughSpace = (position, spaces, tooltipWidth, tooltipHeight) => {
+    const isVertical = position === 'bottom' || position === 'top';
+    const requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
     return spaces[position] >= requiredSpace + MARGIN;
 };
 // 위치 계산 position='auto' 일 때 사용
-var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
-    if (preferredPosition === void 0) { preferredPosition = 'bottom'; }
-    var triggerRect = triggerElement.getBoundingClientRect();
-    var tooltipRect = tooltipElement.getBoundingClientRect();
-    var viewportWidth = window.innerWidth, viewportHeight = window.innerHeight;
-    var spaces = {
+const calculateOptimalPosition = (triggerElement, tooltipElement, preferredPosition = 'bottom') => {
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+    const spaces = {
         top: triggerRect.top,
         bottom: viewportHeight - triggerRect.bottom,
         left: triggerRect.left,
         right: viewportWidth - triggerRect.right,
     };
-    var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-    var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-    for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
-        var position = POSITION_PRIORITY_1[_i];
+    const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    for (const position of POSITION_PRIORITY) {
         if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
             continue;
         }
-        var isVertical = position === 'bottom' || position === 'top';
+        const isVertical = position === 'bottom' || position === 'top';
         if (isVertical) {
             return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
         }
@@ -65,16 +52,15 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement, preferr
     }
     return preferredPosition;
 };
-export var Tooltip = function (_a) {
-    var _b = _a.tooltipType, tooltipType = _b === void 0 ? 'black' : _b, _c = _a.iconType, iconType = _c === void 0 ? 'stroke' : _c, _d = _a.position, position = _d === void 0 ? 'auto' : _d, _e = _a.size, size = _e === void 0 ? 'sm' : _e, title = _a.title, content = _a.content, _f = _a.hideArrow, hideArrow = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? 'short' : _g, _h = _a.iconColor, iconColor = _h === void 0 ? 'var(--gray-300)' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? 'help-circle' : _j, className = _a.className;
-    var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
-    var tooltipRef = useRef(null);
-    var tooltipBgRef = useRef(null);
-    var _k = useState(position === 'auto' ? 'bottom' : position), calculatedPosition = _k[0], setCalculatedPosition = _k[1];
-    var _l = useState(false), isVisible = _l[0], setIsVisible = _l[1];
-    var _m = useState(false), isManuallyClose = _m[0], setIsManuallyClose = _m[1];
-    var _o = useState(false), isMeasuring = _o[0], setIsMeasuring = _o[1];
-    var handleMouseEnter = useCallback(function () {
+export const Tooltip = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, }) => {
+    const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+    const tooltipRef = useRef(null);
+    const tooltipBgRef = useRef(null);
+    const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isManuallyClose, setIsManuallyClose] = useState(false);
+    const [isMeasuring, setIsMeasuring] = useState(false);
+    const handleMouseEnter = useCallback(() => {
         if (isManuallyClose)
             return;
         setIsVisible(true);
@@ -82,41 +68,37 @@ export var Tooltip = function (_a) {
             // 크기 측정을 위해 임시로 measuring 클래스 추가
             setIsMeasuring(true);
             // 다음 렌더링 사이클에서 크기 측정
-            setTimeout(function () {
+            setTimeout(() => {
                 if (tooltipRef.current && tooltipBgRef.current) {
-                    var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+                    const optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
                     setCalculatedPosition(optimalPosition);
                     setIsMeasuring(false);
                 }
             }, 0);
         }
     }, [position, isManuallyClose]);
-    var handleMouseLeave = useCallback(function () {
+    const handleMouseLeave = useCallback(() => {
         if (type === 'short') {
             setIsVisible(false);
         }
         setIsManuallyClose(false);
     }, [type]);
-    var handleCloseClick = useCallback(function () {
+    const handleCloseClick = useCallback(() => {
         setIsVisible(false);
         setIsManuallyClose(true);
     }, []);
-    var finalPosition = position === 'auto' ? calculatedPosition : position;
-    var tooltipClassName = useMemo(function () {
-        return classNames('ncua-tooltip', "ncua-tooltip--".concat(size), "ncua-tooltip--".concat(type), {
-            'ncua-tooltip--hidden-arrow': hideArrow,
-            'ncua-tooltip--stroke': iconType === 'stroke',
-            'ncua-tooltip--auto': position === 'auto',
-        }, className);
-    }, [size, type, hideArrow, iconType, position, className]);
-    var tooltipBgClassName = useMemo(function () {
-        return classNames('ncua-tooltip__bg', "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(finalPosition), {
-            'ncua-tooltip__bg--visible': isVisible,
-            'ncua-tooltip__bg--measuring': isMeasuring,
-            'ncua-tooltip__bg--force-hidden': isManuallyClose,
-        });
-    }, [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
-    return (_jsxs("span", __assign({ ref: tooltipRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [iconStyle === 'help-circle' &&
+    const finalPosition = position === 'auto' ? calculatedPosition : position;
+    const tooltipClassName = useMemo(() => classNames('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+        'ncua-tooltip--hidden-arrow': hideArrow,
+        'ncua-tooltip--stroke': iconType === 'stroke',
+        'ncua-tooltip--auto': position === 'auto',
+    }, className), [size, type, hideArrow, iconType, position, className]);
+    const tooltipBgClassName = useMemo(() => classNames('ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+        'ncua-tooltip__bg--visible': isVisible,
+        'ncua-tooltip__bg--measuring': isMeasuring,
+        'ncua-tooltip__bg--force-hidden': isManuallyClose,
+    }), [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+    return (_jsxs("span", { ref: tooltipRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [iconStyle === 'help-circle' &&
                 (iconType === 'stroke' ? (_jsx(HelpCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(HelpCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), iconStyle === 'alert-circle' &&
-                (iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), _jsxs("span", __assign({ ref: tooltipBgRef, className: tooltipBgClassName }, { children: [title && _jsx("span", __assign({ className: "ncua-tooltip__title" }, { children: title })), content && _jsx("span", __assign({ className: "ncua-tooltip__content" }, { children: content })), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] }))] })));
+                (iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), _jsxs("span", { ref: tooltipBgRef, className: tooltipBgClassName, children: [title && _jsx("span", { className: "ncua-tooltip__title", children: title }), content && _jsx("span", { className: "ncua-tooltip__content", children: content }), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] })] }));
 };

package/dist/temp/src/components/{tab → vertical-tab}/VerticalTab.d.ts

@@ -1,4 +1,4 @@
-import { type TabButtonProps } from './TabButton';
+import { type TabButtonProps } from '../tab/TabButton';
 export type VerticalTabProps = {
     type?: 'button-primary' | 'button-white' | 'line-vertical';
     breakPoint?: 'mobile' | 'pc';

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Select } from '../select/Select';
+import { TabButton } from '../tab/TabButton';
+export const VerticalTab = ({ type = 'button-primary', breakPoint = 'pc', activeTab, menus, onSelect, }) => {
+    const handleSelectChange = (e) => {
+        onSelect?.(e.target.value);
+    };
+    const optionItems = menus?.map((menu) => ({
+        id: menu.id || '',
+        label: menu.label || '',
+    })) || [];
+    if (breakPoint === 'mobile') {
+        return _jsx(Select, { value: activeTab, onChange: handleSelectChange, optionItems: optionItems, size: "md" });
+    }
+    return (_jsx("div", { className: classNames('ncua-vertical-tab', `ncua-vertical-tab--${type}`), children: menus?.map((menu) => {
+            const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+            return _jsx(TabButton, { ...menu, isActive: isActive, tabButtonType: type, size: "md" }, menu.id);
+        }) }));
+};

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

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

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

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

package/dist/temp/src/constant/breakpoint.js

@@ -1,6 +1,6 @@
-export var BREAKPOINT = {
+export const BREAKPOINT = {
     mobile: '768px',
 };
-export var MEDIA_QUERY = {
-    mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")"),
+export const MEDIA_QUERY = {
+    mobile: `(max-width: ${BREAKPOINT.mobile})`,
 };