@ncds/ui-admin 1.6.4 → 1.8.0

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,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const RenderText = ({ as: Component = 'p', children }) => {
+    return _jsx(Component, { className: "ncua-spinner__text", 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/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,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+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);
+    // 값을 문자열로 정규화하는 함수
+    const normalizeValue = (val) => {
+        return typeof val === 'boolean' ? String(val) : val;
+    };
+    // 유효한 사이즈인지 확인하는 함수
+    const getValidSize = (size) => {
+        const validSizes = ['xxs', 'xs', 'sm', 'md'];
+        return size && validSizes.includes(size) ? size : 'xs';
+    };
+    const isBooleanType = typeof left.value === 'boolean' && typeof right.value === 'boolean';
+    // 현재 값 처리
+    const getCurrentValue = () => {
+        if (value === undefined)
+            return undefined;
+        if (isBooleanType && typeof value === 'boolean') {
+            return normalizeValue(value ? left.value : right.value);
+        }
+        return normalizeValue(value);
+    };
+    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;
+        // 선택된 옵션 찾기
+        const selectedOption = newValue === normalizeValue(left.value) ? left : right;
+        if (isBooleanType && typeof value === 'boolean') {
+            onChange(newValue === normalizeValue(left.value));
+        }
+        else {
+            onChange(selectedOption.value);
+        }
+    };
+    return (_jsxs("div", { className: classNames('ncua-switch', `ncua-switch--${getValidSize(size)}`, {
+            'ncua-switch--disabled': disabled,
+        }, 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: 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?.[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/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/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,14 @@
+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';
+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) {
+        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] }));
+    }
+    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

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

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

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

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';

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.d.ts

@@ -0,0 +1,17 @@
+import { type MouseEventHandler } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+interface TagProps {
+    size?: Extract<Size, 'sm' | 'md'>;
+    icon?: SideSlotType;
+    text: string;
+    count?: string;
+    close?: boolean;
+    children?: React.ReactNode;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    maxLength?: number;
+}
+type CalculatedPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+declare const Tag: ({ size, icon, text, count, close, onButtonClick, maxLength }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export type { CalculatedPosition };
+export { Tag };

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

@@ -0,0 +1,96 @@
+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';
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+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,
+    };
+    // 위/아래 공간을 먼저 확인하고 우선순위 결정
+    const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+    // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+    const positions = hasTopSpace
+        ? ['top-right', 'top-left', 'bottom-right', 'bottom-left']
+        : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+    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) {
+            return position;
+        }
+    }
+    // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+    const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+    return fallbackPosition;
+};
+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,
+    };
+    // 텍스트 길이 체크 및 말줄임 처리
+    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) {
+                const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+                setCalculatedPosition(optimalPosition);
+            }
+            else {
+                // ref가 없으면 다음 렌더링 사이클에서 시도
+                setTimeout(() => {
+                    if (tagRef.current) {
+                        // tooltipRef가 없어도 tagRef만으로 계산
+                        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]);
+    const handleMouseLeave = useCallback(() => {
+        setIsTooltipVisible(false);
+    }, []);
+    const sideSlotRender = (slot) => {
+        if (slot.type === '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: slot.size ?? 'sm' });
+        }
+        return slot.children;
+    };
+    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", { 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/tag/index.d.ts

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

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

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

package/dist/{types/src/components/input → temp/src/components/textarea}/Textarea.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from 'react';
-import { Size } from '../../../constant/size';
+import { type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
     size?: Extract<Size, 'xs' | 'sm'>;
@@ -12,4 +12,3 @@ interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};
-//# sourceMappingURL=Textarea.d.ts.map

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.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEvent, ComponentPropsWithRef } from 'react';
+export interface ToggleProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: 'sm' | 'md';
+    text?: string;
+    supportText?: string;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+export declare const Toggle: ({ size, text, supportText, disabled, onChange, className, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+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", { 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/toggle/index.d.ts

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

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

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

package/dist/temp/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+interface TooltipProps {
+    tooltipType?: 'white' | 'black';
+    iconType?: 'stroke' | 'fill';
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'auto';
+    size?: 'sm' | 'md';
+    hideArrow?: boolean;
+    title?: string;
+    content?: React.ReactNode;
+    type?: 'long' | 'short';
+    className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
+}
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};