@ncds/ui-admin 1.5.5 → 1.6.0

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

@@ -26,7 +26,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { ChevronDown } from '@ncds/ui-admin-icon';
 import { COLOR } from '../../../constant/color';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
@@ -46,29 +46,33 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
     size = _d === void 0 ? 'xs' : _d,
     _e = _a.type,
     type = _e === void 0 ? 'default' : _e,
-    _f = _a.destructive,
-    destructive = _f === void 0 ? false : _f,
+    _f = _a.autoWidth,
+    autoWidth = _f === void 0 ? true : _f,
+    _g = _a.destructive,
+    destructive = _g === void 0 ? false : _g,
     value = _a.value,
-    _g = _a.optionItems,
-    optionItems = _g === void 0 ? [] : _g,
-    _h = _a.disabled,
-    disabled = _h === void 0 ? false : _h,
-    _j = _a.maxHeight,
-    maxHeight = _j === void 0 ? DEFAULT_MAX_HEIGHT : _j,
-    _k = _a.multiple,
-    multiple = _k === void 0 ? false : _k,
+    _h = _a.optionItems,
+    optionItems = _h === void 0 ? [] : _h,
+    _j = _a.disabled,
+    disabled = _j === void 0 ? false : _j,
+    _k = _a.maxHeight,
+    maxHeight = _k === void 0 ? DEFAULT_MAX_HEIGHT : _k,
+    _l = _a.multiple,
+    multiple = _l === void 0 ? false : _l,
+    _m = _a.align,
+    align = _m === void 0 ? 'left' : _m,
     id = _a.id,
     className = _a.className,
     children = _a.children,
     register = _a.register,
     onChange = _a.onChange,
     onEdit = _a.onEdit,
-    props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "id", "className", "children", "register", "onChange", "onEdit"]);
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "autoWidth", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "align", "id", "className", "children", "register", "onChange", "onEdit"]);
   var internalRef = useRef(null);
   var dropdownRef = useRef(null);
-  var _l = useState([]),
-    selectedTags = _l[0],
-    setSelectedTags = _l[1];
+  var _o = useState([]),
+    selectedTags = _o[0],
+    setSelectedTags = _o[1];
   var selectedOption = useMemo(function () {
     if (multiple) return null;
     return optionItems.find(function (option) {
@@ -79,7 +83,7 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
     if (multiple) {
       return placeholder;
     }
-    return selectedOption ? selectedOption.label : placeholder;
+    return selectedOption ? selectedOption : placeholder;
   }, [multiple, selectedOption, placeholder]);
   var handleOptionSelect = function (option) {
     if (disabled) return;
@@ -107,7 +111,7 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
       });
     }
   };
-  var _m = useDropdown({
+  var _p = useDropdown({
       triggerRef: internalRef,
       dropdownRef: dropdownRef,
       maxHeight: maxHeight,
@@ -117,16 +121,16 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
       multiple: multiple,
       onSelect: handleOptionSelect
     }),
-    isOpen = _m.isOpen,
-    dropdownDirection = _m.direction,
-    focusedIndex = _m.focusedIndex,
-    toggleDropdown = _m.toggleDropdown,
-    closeDropdown = _m.closeDropdown,
-    handleKeyDown = _m.handleKeyDown,
-    handleDropdownSelect = _m.handleOptionSelect,
-    handleMouseMove = _m.handleMouseMove,
-    isKeyboardNavigation = _m.isKeyboardNavigation,
-    setFocusedIndex = _m.setFocusedIndex;
+    isOpen = _p.isOpen,
+    dropdownDirection = _p.direction,
+    focusedIndex = _p.focusedIndex,
+    toggleDropdown = _p.toggleDropdown,
+    closeDropdown = _p.closeDropdown,
+    handleKeyDown = _p.handleKeyDown,
+    handleDropdownSelect = _p.handleOptionSelect,
+    handleMouseMove = _p.handleMouseMove,
+    isKeyboardNavigation = _p.isKeyboardNavigation,
+    setFocusedIndex = _p.setFocusedIndex;
   var activeDescendantId = useMemo(function () {
     if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
       return undefined;
@@ -140,11 +144,11 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [handleMouseMove, setFocusedIndex]);
   // Multiple select 관련 로직
   var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-  var _o = useMultiSelect(currentSelectedValues, optionItems),
-    selectAllButtonText = _o.buttonText,
-    toggleSelectAll = _o.toggleSelectAll,
-    getSelectedTagsData = _o.getSelectedTagsData,
-    removeTag = _o.removeTag;
+  var _q = useMultiSelect(currentSelectedValues, optionItems),
+    selectAllButtonText = _q.buttonText,
+    toggleSelectAll = _q.toggleSelectAll,
+    getSelectedTagsData = _q.getSelectedTagsData,
+    removeTag = _q.removeTag;
   var handleSelectAll = function () {
     if (!multiple || !onChange) return;
     var newSelectedValues = toggleSelectAll();
@@ -174,11 +178,11 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
   useScrollLock(isOpen, dropdownRef);
   useLayoutEffect(function () {
-    if (isOpen && dropdownRef.current && internalRef.current) {
+    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
       var dropdownWidth = dropdownRef.current.offsetWidth;
       internalRef.current.style.width = "".concat(dropdownWidth, "px");
     }
-  }, [isOpen, optionItems]);
+  }, [autoWidth, isOpen, optionItems]);
   useImperativeHandle(ref, function () {
     return internalRef.current;
   }, []);
@@ -209,12 +213,30 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: [_jsxs("div", __assign({
           className: "ncua-selectbox__content-inner"
         }, {
-          children: [_jsx("span", __assign({
+          children: [_jsx("div", __assign({
             className: "ncua-selectbox__value"
           }, {
-            children: displayValue
-          })), _jsx(Icon, {
-            name: "chevron-down",
+            children: typeof displayValue === 'string' ? _jsx("span", __assign({
+              className: "ncua-selectbox__value-text"
+            }, {
+              children: displayValue
+            })) : _jsxs("div", __assign({
+              className: "ncua-selectbox__value-container"
+            }, {
+              children: [displayValue.icon && _jsx("span", __assign({
+                className: "ncua-selectbox__value-icon"
+              }, {
+                children: _jsx(displayValue.icon, {
+                  width: 16,
+                  height: 16
+                })
+              })), _jsx("span", __assign({
+                className: "ncua-selectbox__value-text"
+              }, {
+                children: displayValue.label
+              }))]
+            }))
+          })), _jsx(ChevronDown, {
             width: size === 'xs' ? 14 : 16,
             height: size === 'xs' ? 14 : 16,
             color: disabled ? COLOR.gray300 : COLOR.gray500,
@@ -238,6 +260,7 @@ export var SelectBox = /*#__PURE__*/forwardRef(function (_a, ref) {
           componentType: "selectbox",
           isKeyboardNavigation: isKeyboardNavigation,
           activeDescendantId: activeDescendantId,
+          align: align,
           onOptionSelect: handleDropdownSelect,
           onMouseMove: handleMouseMove,
           onOptionHover: handleOptionHover,

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

@@ -17,9 +17,9 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { Badge } from '../badge/Badge';
-import Icon from '@ncds/ui-admin-icon/dynamic';
 export var TabButton = function (_a) {
   var id = _a.id,
     label = _a.label,
@@ -75,8 +75,7 @@ export var TabButton = function (_a) {
         return onClose === null || onClose === void 0 ? void 0 : onClose(id !== null && id !== void 0 ? id : '');
       }
     }, {
-      children: _jsx(Icon, {
-        name: "x-close",
+      children: _jsx(XClose, {
         width: 14,
         height: 14
       })

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
@@ -103,8 +103,8 @@ export var Tag = function (_a) {
   var sideSlotRender = function (slot) {
     var _a;
     if (slot.type === 'icon') {
-      return _jsx(Icon, {
-        name: slot.icon,
+      var SlotIcon = slot.icon;
+      return _jsx(SlotIcon, {
         width: iconSize[size],
         height: iconSize[size],
         color: slot.color
@@ -139,8 +139,7 @@ export var Tag = function (_a) {
       className: "ncua-tag__close",
       onClick: onButtonClick
     }, {
-      children: _jsx(Icon, {
-        name: "x-close",
+      children: _jsx(XClose, {
         color: COLOR.gray300,
         width: iconSize[size],
         height: iconSize[size]

package/dist/types/src/components/badge/utils.d.ts

@@ -1,7 +1,7 @@
-import { SideSlotType } from '../../types/side-slot';
+import type { SideSlotType } from '../../types/side-slot';
 export type SideSlotRenderProps = {
     slot: SideSlotType;
     defaultIconSize: number;
 };
-export declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => any;
+export declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/types/src/components/button/Button.d.ts

@@ -1,9 +1,7 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
-import { DotProps } from '../dot';
-export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
-export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type DotProps } from '../dot';
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: ReactNode;
     className?: string;
@@ -16,21 +14,21 @@ type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentPr
     children?: ReactNode;
     underline?: boolean;
 };
-export type ButtonProps = CommonButtonProps<'button'>;
+type ButtonElementProps = CommonButtonProps<Exclude<keyof HTMLElementTagNameMap, 'a'>> & {
+    as?: Exclude<keyof HTMLElementTagNameMap, 'a'>;
+    href?: never;
+};
+type AnchorElementProps = CommonButtonProps<'a'> & {
+    as: 'a';
+    href: string;
+    target?: HTMLAnchorElement['target'];
+};
+export type ButtonProps = ButtonElementProps | AnchorElementProps;
+export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
+export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 export declare const svgSize: Record<ButtonSize, number>;
 export declare const iconOnlySvgSize: Record<ButtonSize, number>;
 export declare const dotSize: Record<ButtonSize, DotProps['size']>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    label: ReactNode;
-    className?: string | undefined;
-    hierarchy?: ButtonTheme | undefined;
-    disabled?: boolean | undefined;
-    leadingIcon?: SideSlotType | undefined;
-    trailingIcon?: SideSlotType | undefined;
-    onlyIcon?: boolean | undefined;
-    size?: ButtonSize | undefined;
-    children?: ReactNode;
-    underline?: boolean | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/src/components/button/ButtonCloseX.d.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../../constant/size';
+import type { Size } from '../../../constant/size';
 export type ButtonCloseXProps = {
     size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
     theme?: 'dark' | 'light';

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentProps } from 'react';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
+import React, { type ComponentProps } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
 export type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
@@ -107,7 +107,7 @@ export declare const ButtonGroup: {
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
+        "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;

package/dist/types/src/components/combobox/ComboBox.d.ts

@@ -1,7 +1,7 @@
-import { Size } from '@ncds/ui/constant/size';
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { UseFormRegisterReturn } from 'react-hook-form';
-import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
+import type { Size } from '@ncds/ui/constant/size';
+import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const defaultMaxHeight = 275;
 type BaseComboBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;
 export interface ComboBoxProps extends PropsWithChildren<BaseComboBoxProps> {

package/dist/types/src/components/date-picker/CustomInput.d.ts

@@ -1,9 +1,8 @@
 import { type InputHTMLAttributes } from 'react';
-import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import type { Size } from '../../../constant/size';
 interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
     disabled: boolean;
-    iconName: Extract<IconName, 'calendar' | 'clock'>;
+    iconName: 'calendar' | 'clock';
     iconSize: Extract<Size, 'xs' | 'sm'>;
     placeholder?: string;
 }

package/dist/types/src/components/dot/Dot.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Size } from '../../../constant/size';
 import { ColorTone } from '../../../constant/color';
-export type DotColor = ColorTone;
+export type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
 export type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
 export interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /**

package/dist/types/src/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { type IconName } from '@ncds/ui-admin-icon/dynamic';
+import type { SlotIconComponent } from '../../types/side-slot';
 export type AvatarTrigger = {
     type: 'avatar';
     avatar: string;
@@ -13,7 +13,7 @@ export type ButtonTrigger = {
 };
 export type IconTrigger = {
     type: 'icon';
-    icon?: IconName;
+    icon?: SlotIconComponent;
 };
 export type CustomTrigger = {
     type: 'custom';
@@ -22,7 +22,7 @@ export type CustomTrigger = {
 export type DropdownItemType = {
     id: string;
     text: string;
-    icon?: IconName;
+    icon?: SlotIconComponent;
     shortcut?: string;
     onClick?: () => void;
     disabled?: boolean;

package/dist/types/src/components/featured-icon/FeaturedIcon.d.ts

@@ -1,10 +1,10 @@
-import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
 export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
 export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
 export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
-    name: IconName;
+    icon: SlotIconComponent;
     theme?: FeaturedIconTheme;
     color?: FeaturedIconColor;
     size?: FeaturedIconSize;

package/dist/types/src/components/file-input/FileInput.d.ts

@@ -1,4 +1,4 @@
-import { InputBaseProps } from '../input/InputBase';
+import type { InputBaseProps } from '../input/InputBase';
 export declare enum FileInputErrorType {
     ALREADY_UPLOADED = "ALREADY_UPLOADED",
     EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",

package/dist/types/src/components/image-file-input/ImageFileInput.d.ts

@@ -1,5 +1,5 @@
-import { InvalidFile } from '../file-input/FileInput';
-import { InputBaseProps } from '../input/InputBase';
+import { type InvalidFile } from '../file-input/FileInput';
+import type { InputBaseProps } from '../input/InputBase';
 export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
     /**
      * Accepted file types

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

@@ -30,4 +30,5 @@ export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';
+export { type SideSlotType, type SlotIconComponent } from '../types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/input/InputBase.d.ts

@@ -1,7 +1,7 @@
-import { type IconName } from '@ncds/ui-admin-icon/dynamic';
-import React from 'react';
+import type React from 'react';
+import { type ElementType } from 'react';
 import { COLOR } from '../../../constant/color';
-import { Size } from '../../../constant/size';
+import type { Size } from '../../../constant/size';
 interface InputSideButtonSlot {
     type: 'button';
     label: string;
@@ -14,7 +14,7 @@ interface InputSideTextSlot {
 }
 interface InputSideIconSlot {
     type: 'icon';
-    icon: IconName;
+    icon: ElementType;
     size?: number | string;
     color?: keyof typeof COLOR;
     className?: string;

package/dist/types/src/components/modal/Modal.d.ts

@@ -1,5 +1,5 @@
-import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ReactNode } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
 import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
@@ -53,7 +53,7 @@ export type ModalHeaderProps = {
     children?: ReactNode;
     onClose: () => void;
     featuredIcon?: {
-        name: IconName;
+        icon: SlotIconComponent;
         color: FeaturedIconColor;
         theme: FeaturedIconTheme;
     };

package/dist/types/src/components/notification/MessageNotification.d.ts

@@ -1,5 +1,5 @@
-import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
 import { NotificationAction, NotificationColor } from './Notification';
 export interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
@@ -11,9 +11,9 @@ export interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<
      */
     supportingText?: ReactNode;
     /**
-     * 알림 아이콘 이름 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
      */
-    icon?: IconName;
+    icon?: SlotIconComponent;
     /**
      * 알림 색상 스타일
      * @default 'neutral'

package/dist/types/src/components/notification/Notification.d.ts

@@ -1,5 +1,5 @@
-import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
 import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';
 export type NotificationType = 'floating' | 'full-width' | 'message';
@@ -34,9 +34,9 @@ export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      */
     supportingText?: ReactNode;
     /**
-     * 알림 아이콘 이름 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
      */
-    icon?: IconName;
+    icon?: SlotIconComponent;
     /**
      * 알림 색상 스타일
      * @default 'neutral'

package/dist/types/src/components/pagination/NavButton.d.ts

@@ -1,23 +1,24 @@
+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) => string;
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
     };
     readonly prev: {
         readonly label: "이전";
         readonly className: "ncua-pagination__before";
-        readonly getIcon: (isPC: boolean) => "arrow-left" | "chevron-left";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
     };
     readonly next: {
         readonly label: "다음";
         readonly className: "ncua-pagination__next";
-        readonly getIcon: (isPC: boolean) => "arrow-right" | "chevron-right";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
     };
     readonly last: {
         readonly label: "마지막";
         readonly className: "ncua-pagination__last";
-        readonly getIcon: (isPC: boolean) => string;
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
     };
 };
 export declare const NavButton: ({ type, breakPoint, noPrev, noNext, onClick, }: {

package/dist/types/src/components/select-dropdown/SelectDropdown.d.ts

@@ -23,6 +23,7 @@ export type SelectDropdownProps = ComponentPropsWithRef<'div'> & {
     onComplete?: () => void;
     activeDescendantId?: string;
     componentType?: 'selectbox' | 'combobox';
+    align?: 'left' | 'right';
 };
 export declare const SelectDropdown: import("react").ForwardRefExoticComponent<Omit<SelectDropdownProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=SelectDropdown.d.ts.map

package/dist/types/src/components/selectbox/SelectBox.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
 import type { Size } from '../../../constant/size';
-import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
+import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const DEFAULT_MAX_HEIGHT = 275;
 type BaseSelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;
 export type SelectBoxProps = PropsWithChildren<BaseSelectBoxProps> & {
@@ -10,6 +10,7 @@ export type SelectBoxProps = PropsWithChildren<BaseSelectBoxProps> & {
     hintText?: string;
     destructive?: boolean;
     size?: Extract<Size, 'xs' | 'sm' | 'md'>;
+    autoWidth?: boolean;
     type?: 'default' | 'simple';
     optionItems?: OptionType[];
     value?: OptionValue;
@@ -19,6 +20,7 @@ export type SelectBoxProps = PropsWithChildren<BaseSelectBoxProps> & {
     maxHeight?: number;
     multiple?: boolean;
     onEdit?: () => void;
+    align?: 'left' | 'right';
 };
 export declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,5 +1,5 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import { BadgeProps } from '../badge/Badge';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { type BadgeProps } from '../badge/Badge';
 export type TabSize = 'sm' | 'md' | 'lg';
 export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {

package/dist/types/src/types/dropdown/option.d.ts

@@ -4,6 +4,10 @@
 export type OptionType = {
     id: string | number;
     label: string;
+    icon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+    }>;
 };
 /**
  * 옵션 값 타입 (단일 또는 다중 선택)

package/dist/types/src/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './dropdown';
+export type * from './side-slot';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -3161,6 +3161,10 @@ button {
 .ncua-select-dropdown--up {
   bottom: calc(100% + 4px);
 }
+.ncua-select-dropdown--align-right {
+  left: initial;
+  right: 0;
+}
 .ncua-select-dropdown__content {
   padding: 8px 6px;
 }
@@ -3194,6 +3198,10 @@ button {
   transition: background-color 0.15s ease, color 0.15s ease;
   position: relative;
   border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--gray-600);
 }
 .ncua-select-dropdown__option:hover, .ncua-select-dropdown__option--focused {
   background-color: var(--gray-50);
@@ -3201,10 +3209,15 @@ button {
 .ncua-select-dropdown__option--selected {
   background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24' stroke='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 8px center;
 }
-.ncua-select-dropdown__option__option-text {
+.ncua-select-dropdown__option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+.ncua-select-dropdown__option-text {
   display: inline-block;
   max-width: 327px;
-  color: var(--gray-600);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3280,6 +3293,17 @@ button {
   content: attr(data-placeholder);
   color: var(--gray-400);
 }
+.ncua-selectbox__value-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-selectbox__value-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
 .ncua-selectbox__chevron {
   position: absolute;
   right: 8px;