@ncds/ui-admin 1.5.5 → 1.6.0

package/dist/esm/src/components/featured-icon/FeaturedIcon.js

@@ -17,7 +17,6 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 var iconSizeMap = {
@@ -27,7 +26,7 @@ var iconSizeMap = {
   xl: 28
 };
 export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var name = _a.name,
+  var Icon = _a.icon,
     _b = _a.theme,
     theme = _b === void 0 ? 'light-circle' : _b,
     _c = _a.color,
@@ -35,7 +34,7 @@ export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
     _d = _a.size,
     size = _d === void 0 ? 'md' : _d,
     className = _a.className,
-    rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
+    rest = __rest(_a, ["icon", "theme", "color", "size", "className"]);
   return _jsxs("div", __assign({
     ref: ref,
     className: classNames('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
@@ -47,7 +46,6 @@ export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
         className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer"
       })]
     }), _jsx(Icon, {
-      name: name,
       width: iconSizeMap[size],
       height: iconSizeMap[size]
     })]

package/dist/esm/src/components/file-input/FileInput.js

@@ -26,12 +26,12 @@ 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 } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from 'react';
+import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import Icon from '@ncds/ui-admin-icon/dynamic';
-import { Tag } from '../tag/Tag';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '../button';
 import { HintText, Label } from '../shared';
+import { Tag } from '../tag/Tag';
 export var FileInputErrorType;
 (function (FileInputErrorType) {
   FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
@@ -200,9 +200,8 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
           isRequired: isRequired
         }, {
           children: label
-        })), showHelpIcon && _jsx(Icon, {
-          className: "ncua-input__help-icon",
-          name: "help-circle"
+        })), showHelpIcon && _jsx(HelpCircle, {
+          className: "ncua-input__help-icon"
         })]
       })), _jsx(Button, {
         size: size,
@@ -210,7 +209,7 @@ export var FileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         disabled: disabled,
         leadingIcon: {
           type: 'icon',
-          icon: 'share-01'
+          icon: Upload01
         },
         label: buttonLabel
       }), hintText && _jsx(HintText, __assign({

package/dist/esm/src/components/image-file-input/ImageFileInput.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 } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '../button';
@@ -229,9 +229,8 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
             isRequired: isRequired
           }, {
             children: label
-          })), showHelpIcon && _jsx(Icon, {
-            className: "ncua-input__help-icon",
-            name: "help-circle"
+          })), showHelpIcon && _jsx(HelpCircle, {
+            className: "ncua-input__help-icon"
           })]
         })), _jsx(Button, {
           size: "xs",
@@ -239,7 +238,7 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
           disabled: disabled,
           leadingIcon: {
             type: 'icon',
-            icon: 'share-01'
+            icon: Upload01
           },
           label: buttonLabel
         }), showHintText && hintText && _jsx(HintText, __assign({

package/dist/esm/src/components/image-file-input/components/ImagePreview.js

@@ -9,6 +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 { Trash03 } from '@ncds/ui-admin-icon';
 import { Button } from '../../button';
 export var ImagePreview = function (_a) {
   var file = _a.file,
@@ -26,7 +27,7 @@ export var ImagePreview = function (_a) {
       onlyIcon: true,
       leadingIcon: {
         type: 'icon',
-        icon: 'trash-03',
+        icon: Trash03,
         color: 'gray200'
       },
       label: "Remove image",

package/dist/esm/src/components/input/InputBase.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
@@ -93,17 +93,19 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     var _a, _b;
     switch (slot.type) {
       case 'icon':
-        return _jsx("div", __assign({
-          className: "ncua-input__icon-wrap"
-        }, {
-          children: _jsx(Icon, {
-            className: classNames("ncua-input__".concat(position, "-icon"), slot.className),
-            name: slot.icon,
-            color: slot.color ? COLOR[slot.color] : undefined,
-            width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
-            height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
-          })
-        }));
+        {
+          var SlotIcon = slot.icon;
+          return _jsx("div", __assign({
+            className: "ncua-input__icon-wrap"
+          }, {
+            children: _jsx(SlotIcon, {
+              className: classNames("ncua-input__".concat(position, "-icon"), slot.className),
+              color: slot.color ? COLOR[slot.color] : undefined,
+              width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
+              height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
+            })
+          }));
+        }
       case 'custom':
         if (slot.placement !== 'inside') {
           return null;
@@ -116,11 +118,11 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
   var renderClearButton = function () {
     if (!props.clearText) return null;
     return _jsx("button", __assign({
-      className: "ncua-input__icon-wrap ncua-input__right-icon ncua-input__clear",
+      type: "button",
+      className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
       onClick: props.onClearText
     }, {
-      children: _jsx(Icon, {
-        name: "x",
+      children: _jsx(X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],
         height: validationSvgSize[size]
@@ -132,8 +134,7 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
       return _jsx("div", __assign({
         className: "ncua-input__icon-wrap ncua-input__right-icon"
       }, {
-        children: _jsx(Icon, {
-          name: "info-circle",
+        children: _jsx(InfoCircle, {
           className: "ncua-input__destructive-icon",
           width: validationSvgSize[size],
           height: validationSvgSize[size]
@@ -144,8 +145,7 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
       return _jsx("div", __assign({
         className: "ncua-input__icon-wrap ncua-input__right-icon"
       }, {
-        children: _jsx(Icon, {
-          name: "check-circle",
+        children: _jsx(CheckCircle, {
           className: "ncua-input__validation-icon",
           width: validationSvgSize[size],
           height: validationSvgSize[size]
@@ -164,9 +164,8 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
         htmlFor: props.id
       }, {
         children: label
-      })), showHelpIcon && _jsx(Icon, {
-        className: "ncua-input__help-icon",
-        name: "help-circle"
+      })), showHelpIcon && _jsx(HelpCircle, {
+        className: "ncua-input__help-icon"
       })]
     }));
   };
@@ -194,8 +193,6 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
               } else if (ref) {
                 ref.current = node;
               }
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore - ref assignment is needed for internal tracking
               inputRef.current = node;
             },
             type: "text",

package/dist/esm/src/components/input/PasswordInput.js

@@ -17,7 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Eye, EyeOff } from '@ncds/ui-admin-icon';
+import { Eye, EyeOff, Lock01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
 import { InputBase } from './InputBase';
@@ -47,7 +47,7 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
-      icon: 'lock-01',
+      icon: Lock01,
       color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {

package/dist/esm/src/components/modal/Modal.js

@@ -92,7 +92,7 @@ Modal.Header = function (_a) {
       })
     }, {
       children: [featuredIcon && _jsx(FeaturedIcon, {
-        name: featuredIcon.name,
+        icon: featuredIcon.icon,
         color: featuredIcon.color,
         theme: featuredIcon.theme,
         size: "sm"

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -17,6 +17,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { MEDIA_QUERY } from '../../constant/breakpoint';
@@ -24,11 +25,11 @@ import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Button } from '../button';
 import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-var iconNameMap = {
-  neutral: 'pin-02',
-  error: 'alert-triangle',
-  warning: 'alert-circle',
-  success: 'check-circle'
+var iconMap = {
+  neutral: Pin02,
+  error: AlertTriangle,
+  warning: AlertCircle,
+  success: CheckCircle
   // info는 floating에서는 지원하지 않음
 };
 export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -47,7 +48,7 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
     setShouldRemove = _d[1];
   var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[color] || 'pin-02',
+    icon: iconMap[color] || Pin02,
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
@@ -91,7 +92,7 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
       children: _jsxs("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+        children: [iconMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
           size: isMobile ? 'md' : 'sm'
         })), _jsxs("div", __assign({
           className: "ncua-floating-notification__text-container"

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -17,16 +17,16 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
-var iconNameMap = {
-  neutral: 'message-chat-square',
-  error: 'alert-triangle',
-  warning: 'alert-triangle',
-  success: 'check-circle',
-  info: 'info-circle'
+var iconMap = {
+  neutral: MessageChatSquare,
+  error: AlertTriangle,
+  warning: AlertTriangle,
+  success: CheckCircle,
+  info: InfoCircle
 };
 var iconColorMap = {
   neutral: 'gray700',
@@ -94,13 +94,15 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: [_jsxs("div", __assign({
           className: "ncua-full-width-notification__content-wrapper"
         }, {
-          children: [_jsx(Icon, {
-            name: iconNameMap[color],
-            width: 16,
-            height: 16,
-            color: COLOR[iconColorMap[color]],
-            className: "ncua-full-width-notification__icon"
-          }), _jsxs("div", __assign({
+          children: [function () {
+            var IconComponent = iconMap[color];
+            return _jsx(IconComponent, {
+              width: 16,
+              height: 16,
+              color: COLOR[iconColorMap[color]],
+              className: "ncua-full-width-notification__icon"
+            });
+          }(), _jsxs("div", __assign({
             className: "ncua-full-width-notification__text-container"
           }, {
             children: [_jsx("span", __assign({
@@ -148,9 +150,7 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             onClick: onClose,
             "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
           }, {
-            children: _jsx(Icon, __assign({
-              name: "x-close"
-            }, closeIconSize, {
+            children: _jsx(XClose, __assign({}, closeIconSize, {
               color: COLOR[iconColorMap[color]]
             }))
           }))]

package/dist/esm/src/components/notification/MessageNotification.js

@@ -17,17 +17,17 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Button } from '../button';
 import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-var iconNameMap = {
-  neutral: 'pin-02',
-  error: 'alert-triangle',
-  warning: 'alert-circle',
-  success: 'check-circle'
+var iconMap = {
+  neutral: Pin02,
+  error: AlertTriangle,
+  warning: AlertCircle,
+  success: CheckCircle
 };
 var iconColorMap = {
   neutral: 'gray700',
@@ -38,7 +38,7 @@ var iconColorMap = {
 export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    icon = _a.icon,
+    Icon = _a.icon,
     _b = _a.color,
     color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
@@ -50,7 +50,7 @@ export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var validColor = color === 'info' ? 'neutral' : color;
   var iconColor = validColor;
   var featuredIconProps = {
-    name: icon || iconNameMap[validColor] || 'pin-02',
+    icon: Icon || iconMap[validColor] || Pin02,
     size: 'lg',
     color: iconColor,
     theme: 'light-circle'
@@ -70,7 +70,7 @@ export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: [_jsxs("div", __assign({
           className: "ncua-message-notification__content-wrapper"
         }, {
-          children: [iconNameMap[validColor] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+          children: [iconMap[validColor] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
             className: "ncua-message-notification__icon"
           })), _jsxs("div", __assign({
             className: "ncua-message-notification__text-container"
@@ -105,7 +105,7 @@ export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
         }, {
           children: [onHidePermanently && _jsx("button", __assign({
             type: "button",
-            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'),
             onClick: onHidePermanently
           }, {
             children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
@@ -115,8 +115,7 @@ export var MessageNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             onClick: onClose,
             "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
           }, {
-            children: _jsx(Icon, {
-              name: "x-close",
+            children: _jsx(XClose, {
               width: 20,
               height: 20,
               color: closeIconColor

package/dist/esm/src/components/pagination/NavButton.js

@@ -9,34 +9,35 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from '@ncds/ui-admin-icon';
 import { Button } from '../button';
 var NAV_BUTTON_CONFIG = {
   first: {
     label: '처음',
     className: 'ncua-pagination__first',
-    getIcon: function (isPC) {
-      return 'chevron-left-double';
+    getIcon: function (_isPC) {
+      return ChevronLeftDouble;
     }
   },
   prev: {
     label: '이전',
     className: 'ncua-pagination__before',
     getIcon: function (isPC) {
-      return isPC ? 'chevron-left' : 'arrow-left';
+      return isPC ? ChevronLeft : ArrowLeft;
     }
   },
   next: {
     label: '다음',
     className: 'ncua-pagination__next',
     getIcon: function (isPC) {
-      return isPC ? 'chevron-right' : 'arrow-right';
+      return isPC ? ChevronRight : ArrowRight;
     }
   },
   last: {
     label: '마지막',
     className: 'ncua-pagination__last',
-    getIcon: function (isPC) {
-      return 'chevron-right-double';
+    getIcon: function (_isPC) {
+      return ChevronRightDouble;
     }
   }
 };
@@ -50,7 +51,7 @@ export var NavButton = function (_a) {
   var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
   var isFirstOrPrev = type === 'first' || type === 'prev';
   var isNextOrLast = type === 'next' || type === 'last';
-  var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
+  var disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
   var isPC = breakPoint === 'pc';
   // key를 제외한 공통 props
   var buttonProps = {
@@ -60,8 +61,8 @@ export var NavButton = function (_a) {
     leadingIcon: {
       type: 'icon',
       icon: config.getIcon(isPC),
-      color: disabled ? 'gray200' : 'gray700',
-      size: isPC ? 16 : 20
+      size: isPC ? 16 : 20,
+      color: disabled ? 'gray200' : 'gray700'
     },
     hierarchy: 'secondary-gray',
     size: isPC ? 'xs' : 'sm',

package/dist/esm/src/components/select-dropdown/SelectDropdown.js

@@ -49,12 +49,15 @@ export var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
     className = _a.className,
     activeDescendantId = _a.activeDescendantId,
     componentType = _a.componentType,
-    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType"]);
+    _h = _a.align,
+    align = _h === void 0 ? 'left' : _h,
+    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType", "align"]);
   if (!isOpen) return null;
   return _jsxs("div", __assign({
     ref: ref,
     className: classNames('ncua-select-dropdown', "ncua-select-dropdown--".concat(direction), "ncua-select-dropdown--".concat(size), {
       'ncua-select-dropdown--multiple': multiple,
+      'ncua-select-dropdown--align-right': align === 'right',
       'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple
     }, className),
     onMouseMove: onMouseMove,
@@ -80,7 +83,7 @@ export var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
           var handleMouseEnter = function () {
             onOptionHover === null || onOptionHover === void 0 ? void 0 : onOptionHover(index);
           };
-          return _jsx("li", __assign({
+          return _jsxs("li", __assign({
             id: optionId,
             className: classNames('ncua-select-dropdown__option', {
               'ncua-select-dropdown__option--selected': isSelected,
@@ -93,11 +96,18 @@ export var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
             role: "option",
             "aria-selected": isSelected
           }, {
-            children: _jsx("span", __assign({
+            children: [option.icon && _jsx("span", __assign({
+              className: "ncua-select-dropdown__option-icon"
+            }, {
+              children: _jsx(option.icon, {
+                width: 16,
+                height: 16
+              })
+            })), _jsx("span", __assign({
               className: "ncua-select-dropdown__option-text"
             }, {
               children: option.label
-            }))
+            }))]
           }), option.id);
         }), children]
       }))