@ncds/ui-admin 1.8.1 → 1.8.3

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

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

package/dist/temp/src/components/forms-and-input/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/forms-and-input/slider/Slider.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
+export const Slider = ({ min = 0, max = 100, step = 1, value = 0, onChange, labelPosition, disabled = false, className, }) => {
+    const containerRef = useRef(null);
+    const sliderInstanceRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        sliderInstanceRef.current = new NcuaSlider(containerRef.current, {
+            min,
+            max,
+            step,
+            value,
+            onChange,
+            labelPosition,
+            disabled,
+        });
+        return () => {
+            if (sliderInstanceRef.current) {
+                sliderInstanceRef.current.destroy();
+                sliderInstanceRef.current = null;
+            }
+        };
+    }, [typeof value, onChange, min, max, step, labelPosition]);
+    useEffect(() => {
+        if (sliderInstanceRef.current) {
+            sliderInstanceRef.current.setValue(value);
+        }
+    }, [sliderInstanceRef, value]);
+    useEffect(() => {
+        if (sliderInstanceRef.current) {
+            if (disabled) {
+                sliderInstanceRef.current.disable();
+            }
+            else {
+                sliderInstanceRef.current.enable();
+            }
+        }
+    }, [disabled]);
+    return _jsx("div", { ref: containerRef, className: `ncua-slider ${className || ''}` });
+};
+export default Slider;

package/dist/temp/src/components/forms-and-input/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/forms-and-input/switch/index.d.ts

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

package/dist/temp/src/components/forms-and-input/switch/index.js

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

package/dist/temp/src/components/forms-and-input/textarea/Textarea.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../../constant/size';
+interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+    className?: string;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    label?: string;
+    hintText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    characterCount?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/temp/src/components/forms-and-input/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/image-and-icons/dot/Dot.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type { DotColor, DotSize, DotProps };
+export { Dot };

package/dist/temp/src/components/image-and-icons/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
+    icon: SlotIconComponent;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeaturedIconTheme, FeaturedIconColor, FeaturedIconSize, FeaturedIconProps };
+export { FeaturedIcon };

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

@@ -1,45 +1,45 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-export * from './dropdown';
-export * from './empty-state';
-export * from './featured-icon';
-export * from './file-input';
-export * from './horizontal-tab';
-export * from './image-file-input';
-export * from './input-base';
-export * from './modal';
-export * from './notification';
-export * from './number-input';
-export * from './pagination';
-export * from './password-input';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio';
-export * from './range-date-picker';
-export * from './range-date-picker-with-buttons';
-export * from './select';
-export * from './select-box';
+export * from './action/button';
+export * from './action/button-group';
+export * from './data-display/data-grid';
+export * from './data-display/table';
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+export * from './layout/divider';
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
 export * from './select-dropdown';
 export * from './shared';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
 export * from './tab';
-export * from './table';
-export * from './tag';
-export * from './textarea';
-export * from './toggle';
-export * from './tooltip';
-export * from './vertical-tab';

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

@@ -1,44 +1,53 @@
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-export * from './dropdown';
-export * from './empty-state';
-export * from './featured-icon';
-export * from './file-input';
-export * from './horizontal-tab';
-export * from './image-file-input';
-export * from './input-base';
-export * from './modal';
-export * from './notification';
-export * from './number-input';
-export * from './pagination';
-export * from './password-input';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio';
-export * from './range-date-picker';
-export * from './range-date-picker-with-buttons';
-export * from './select';
-export * from './select-box';
+// Action
+export * from './action/button';
+export * from './action/button-group';
+// Data Display
+export * from './data-display/data-grid';
+export * from './data-display/table';
+// Feedback & Status
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+// Forms and Input
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+// Image and Icons
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+// Layout
+export * from './layout/divider';
+// Navigation
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+// Overlays
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
+// Shared
 export * from './select-dropdown';
 export * from './shared';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
 export * from './tab';
-export * from './table';
-export * from './tag';
-export * from './textarea';
-export * from './toggle';
-export * from './tooltip';
-export * from './vertical-tab';

package/dist/temp/src/components/navigation/horizontal-tab/HorizontalTab.d.ts

@@ -0,0 +1,12 @@
+import { type TabButtonProps, type TabSize, type TabType } from '../../tab/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/navigation/horizontal-tab/HorizontalTab.js

@@ -0,0 +1,24 @@
+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 '../../tab/TabButton';
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+const HorizontalTab = ({ type = 'button-primary', size = 'sm', activeTab, fullWidth = false, menus = [], className, }) => {
+    const getTabGap = (type) => {
+        const gap = {
+            underline: UNDERLINE_GAP,
+        };
+        return gap[type] ?? DEFAULT_GAP;
+    };
+    if (!menus.length)
+        return null;
+    return (_jsx("div", { className: classNames('ncua-horizontal-tab', `ncua-horizontal-tab--${type}`, `ncua-horizontal-tab--${size}`, {
+            'full-width': fullWidth,
+        }, className), children: _jsx(Swiper, { slidesPerView: "auto", spaceBetween: getTabGap(type), children: menus.map((menu) => {
+                const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+                return (_jsx(SwiperSlide, { className: "ncua-horizontal-tab__item", children: _jsx(TabButton, { ...menu, isActive: isActive, tabButtonType: type, size: size }) }, uniqueId('horizontal-tab')));
+            }) }) }));
+};
+export { HorizontalTab };

package/dist/temp/src/components/navigation/pagination/NavButton.d.ts

@@ -0,0 +1,31 @@
+import type { SlotIconComponent } from '../../../types/side-slot';
+declare const NAV_BUTTON_CONFIG: {
+    readonly first: {
+        readonly label: "처음";
+        readonly className: "ncua-pagination__first";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+    readonly prev: {
+        readonly label: "이전";
+        readonly className: "ncua-pagination__before";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly next: {
+        readonly label: "다음";
+        readonly className: "ncua-pagination__next";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly last: {
+        readonly label: "마지막";
+        readonly className: "ncua-pagination__last";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+};
+export declare const NavButton: ({ type, breakPoint, noPrev, noNext, onClick, }: {
+    type: keyof typeof NAV_BUTTON_CONFIG;
+    breakPoint: 'pc' | 'mo';
+    noPrev: boolean;
+    noNext: boolean;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/navigation/pagination/NavButton.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, } from '@ncds/ui-admin-icon';
+import { Button } from '../../action/button';
+const ICON_SIZE_PC = 16;
+const ICON_SIZE_MOBILE = 20;
+const NAV_BUTTON_CONFIG = {
+    first: {
+        label: '처음',
+        className: 'ncua-pagination__first',
+        getIcon: (_isPC) => ChevronLeftDouble,
+    },
+    prev: {
+        label: '이전',
+        className: 'ncua-pagination__before',
+        getIcon: (isPC) => (isPC ? ChevronLeft : ArrowLeft),
+    },
+    next: {
+        label: '다음',
+        className: 'ncua-pagination__next',
+        getIcon: (isPC) => (isPC ? ChevronRight : ArrowRight),
+    },
+    last: {
+        label: '마지막',
+        className: 'ncua-pagination__last',
+        getIcon: (_isPC) => ChevronRightDouble,
+    },
+};
+export const NavButton = ({ type, breakPoint, noPrev, noNext, onClick, }) => {
+    const config = NAV_BUTTON_CONFIG[type];
+    const isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+    const isFirstOrPrev = type === 'first' || type === 'prev';
+    const isNextOrLast = type === 'next' || type === 'last';
+    const disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
+    const isPC = breakPoint === 'pc';
+    // key를 제외한 공통 props
+    const buttonProps = {
+        label: config.label,
+        className: config.className,
+        onlyIcon: true,
+        leadingIcon: {
+            type: 'icon',
+            icon: config.getIcon(isPC),
+            size: isPC ? ICON_SIZE_PC : ICON_SIZE_MOBILE,
+            color: disabled ? 'gray200' : 'gray700',
+        },
+        hierarchy: 'secondary-gray',
+        size: (isPC ? 'xs' : 'sm'),
+        disabled,
+        onClick,
+    };
+    // key 값 별도 계산
+    const buttonKey = isNavigationButton ? `${breakPoint}-${type}` : undefined;
+    return _jsx(Button, { ...buttonProps }, buttonKey);
+};

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

@@ -0,0 +1,9 @@
+import { type TabButtonProps } from '../../tab/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;