@ncds/ui-admin 1.7.0 → 1.8.0

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

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    size = 'xs',
+    label,
+    required,
+    disabled,
+    hintText,
+    characterCount,
+    destructive,
+    ...props
+  } = _ref;
+  const textareaRef = (0, _react.useRef)(null);
+  const [textCount, setTextCount] = (0, _react.useState)(0);
+  const shouldShowHintArea = hintText || characterCount;
+  (0, _react.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 (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', `ncua-input--textarea--${size}`, {
+      destructive: destructive,
+      'is-disabled': disabled
+    }, className),
+    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: props.id,
+      isRequired: required,
+      children: label
+    }), (0, _jsxRuntime.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 && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__text-count-wrap",
+      children: [hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        as: "div",
+        destructive: destructive,
+        children: hintText
+      }), characterCount && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__text-count",
+        children: (0, _jsxRuntime.jsxs)("span", {
+          className: "ncua-input__text-count-text",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-input__text-count-text-count",
+            children: textCount
+          }), "/", props.maxLength ?? 0]
+        })
+      })]
+    })]
+  });
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Textarea = require("./Textarea");
+Object.keys(_Textarea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Textarea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Textarea[key];
+    }
+  });
+});

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

@@ -7,66 +7,42 @@ exports.Toggle = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var Toggle = function (_a) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
-    _c = _a.text,
-    text = _c === void 0 ? '' : _c,
-    _d = _a.supportText,
-    supportText = _d === void 0 ? '' : _d,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e,
-    onChange = _a.onChange,
-    className = _a.className,
-    props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
-  return (0, _jsxRuntime.jsxs)("label", __assign({
-    className: (0, _classnames.default)('ncua-toggle', "ncua-toggle--".concat(size), {
+const Toggle = _ref => {
+  let {
+    size = 'sm',
+    text = '',
+    supportText = '',
+    disabled = false,
+    onChange,
+    className,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("label", {
+    className: (0, _classnames.default)('ncua-toggle', `ncua-toggle--${size}`, {
       'ncua-toggle--disabled': disabled
-    }, className)
-  }, {
-    children: [(0, _jsxRuntime.jsx)("input", __assign({
+    }, className),
+    children: [(0, _jsxRuntime.jsx)("input", {
       type: "checkbox",
       className: "ncua-toggle__input",
-      checked: props === null || props === void 0 ? void 0 : props.checked,
+      checked: props?.checked,
       disabled: disabled,
-      onChange: onChange
-    }, props)), (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-toggle__switch"
-    }, {
+      onChange: onChange,
+      ...props
+    }), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-toggle__switch",
       children: (0, _jsxRuntime.jsx)("span", {
         className: "ncua-toggle__slider"
       })
-    })), text && (0, _jsxRuntime.jsxs)("span", __assign({
-      className: "ncua-toggle__text-wrapper"
-    }, {
-      children: [(0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-toggle__text"
-      }, {
+    }), text && (0, _jsxRuntime.jsxs)("span", {
+      className: "ncua-toggle__text-wrapper",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-toggle__text",
         children: text
-      })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-toggle__support-text"
-      }, {
+      }), supportText && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-toggle__support-text",
         children: supportText
-      }))]
-    }))]
-  }));
+      })]
+    })]
+  });
 };
 exports.Toggle = Toggle;

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

@@ -10,63 +10,52 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ButtonCloseX = require("../button/ButtonCloseX");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var ICON_SIZE_SM = 14;
-var ICON_SIZE_DEFAULT = 16;
-var MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
-var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
 // 수직 위치(top/bottom)일 때 수평 정렬 보정
-var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
-  var centerX = triggerRect.left + triggerRect.width / 2;
-  var tooltipHalfWidth = tooltipWidth / 2;
+const resolveVerticalAlignment = (position, triggerRect, tooltipWidth, viewportWidth) => {
+  const centerX = triggerRect.left + triggerRect.width / 2;
+  const tooltipHalfWidth = tooltipWidth / 2;
   if (centerX - tooltipHalfWidth < MARGIN) {
-    return "".concat(position, "-left");
+    return `${position}-left`;
   }
   if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-    return "".concat(position, "-right");
+    return `${position}-right`;
   }
   return position;
 };
 // 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
-var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
-  var isVertical = position === 'bottom' || position === 'top';
-  var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+const hasEnoughSpace = (position, spaces, tooltipWidth, tooltipHeight) => {
+  const isVertical = position === 'bottom' || position === 'top';
+  const requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
   return spaces[position] >= requiredSpace + MARGIN;
 };
 // 위치 계산 position='auto' 일 때 사용
-var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
-  if (preferredPosition === void 0) {
-    preferredPosition = 'bottom';
-  }
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var spaces = {
+const calculateOptimalPosition = function (triggerElement, tooltipElement) {
+  let preferredPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const spaces = {
     top: triggerRect.top,
     bottom: viewportHeight - triggerRect.bottom,
     left: triggerRect.left,
     right: viewportWidth - triggerRect.right
   };
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
-    var position = POSITION_PRIORITY_1[_i];
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  for (const position of POSITION_PRIORITY) {
     if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
       continue;
     }
-    var isVertical = position === 'bottom' || position === 'top';
+    const isVertical = position === 'bottom' || position === 'top';
     if (isVertical) {
       return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
     }
@@ -74,88 +63,69 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement, preferr
   }
   return preferredPosition;
 };
-var Tooltip = function (_a) {
-  var _b = _a.tooltipType,
-    tooltipType = _b === void 0 ? 'black' : _b,
-    _c = _a.iconType,
-    iconType = _c === void 0 ? 'stroke' : _c,
-    _d = _a.position,
-    position = _d === void 0 ? 'auto' : _d,
-    _e = _a.size,
-    size = _e === void 0 ? 'sm' : _e,
-    title = _a.title,
-    content = _a.content,
-    _f = _a.hideArrow,
-    hideArrow = _f === void 0 ? false : _f,
-    _g = _a.type,
-    type = _g === void 0 ? 'short' : _g,
-    _h = _a.iconColor,
-    iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
-    _j = _a.iconStyle,
-    iconStyle = _j === void 0 ? 'help-circle' : _j,
-    className = _a.className;
-  var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
-  var tooltipRef = (0, _react.useRef)(null);
-  var tooltipBgRef = (0, _react.useRef)(null);
-  var _k = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
-    calculatedPosition = _k[0],
-    setCalculatedPosition = _k[1];
-  var _l = (0, _react.useState)(false),
-    isVisible = _l[0],
-    setIsVisible = _l[1];
-  var _m = (0, _react.useState)(false),
-    isManuallyClose = _m[0],
-    setIsManuallyClose = _m[1];
-  var _o = (0, _react.useState)(false),
-    isMeasuring = _o[0],
-    setIsMeasuring = _o[1];
-  var handleMouseEnter = (0, _react.useCallback)(function () {
+const Tooltip = _ref => {
+  let {
+    tooltipType = 'white',
+    iconType = 'stroke',
+    position = 'auto',
+    size = 'sm',
+    title,
+    content,
+    hideArrow = false,
+    type = 'short',
+    iconColor = 'var(--gray-300)',
+    iconStyle = 'help-circle',
+    className
+  } = _ref;
+  const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+  const tooltipRef = (0, _react.useRef)(null);
+  const tooltipBgRef = (0, _react.useRef)(null);
+  const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)(position === 'auto' ? 'bottom' : position);
+  const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const [isManuallyClose, setIsManuallyClose] = (0, _react.useState)(false);
+  const [isMeasuring, setIsMeasuring] = (0, _react.useState)(false);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
     if (isManuallyClose) return;
     setIsVisible(true);
     if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
       // 크기 측정을 위해 임시로 measuring 클래스 추가
       setIsMeasuring(true);
       // 다음 렌더링 사이클에서 크기 측정
-      setTimeout(function () {
+      setTimeout(() => {
         if (tooltipRef.current && tooltipBgRef.current) {
-          var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+          const optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
           setCalculatedPosition(optimalPosition);
           setIsMeasuring(false);
         }
       }, 0);
     }
   }, [position, isManuallyClose]);
-  var handleMouseLeave = (0, _react.useCallback)(function () {
+  const handleMouseLeave = (0, _react.useCallback)(() => {
     if (type === 'short') {
       setIsVisible(false);
     }
     setIsManuallyClose(false);
   }, [type]);
-  var handleCloseClick = (0, _react.useCallback)(function () {
+  const handleCloseClick = (0, _react.useCallback)(() => {
     setIsVisible(false);
     setIsManuallyClose(true);
   }, []);
-  var finalPosition = position === 'auto' ? calculatedPosition : position;
-  var tooltipClassName = (0, _react.useMemo)(function () {
-    return (0, _classnames.default)('ncua-tooltip', "ncua-tooltip--".concat(size), "ncua-tooltip--".concat(type), {
-      'ncua-tooltip--hidden-arrow': hideArrow,
-      'ncua-tooltip--stroke': iconType === 'stroke',
-      'ncua-tooltip--auto': position === 'auto'
-    }, className);
-  }, [size, type, hideArrow, iconType, position, className]);
-  var tooltipBgClassName = (0, _react.useMemo)(function () {
-    return (0, _classnames.default)('ncua-tooltip__bg', "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(finalPosition), {
-      'ncua-tooltip__bg--visible': isVisible,
-      'ncua-tooltip__bg--measuring': isMeasuring,
-      'ncua-tooltip__bg--force-hidden': isManuallyClose
-    });
-  }, [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
-  return (0, _jsxRuntime.jsxs)("span", __assign({
+  const finalPosition = position === 'auto' ? calculatedPosition : position;
+  const tooltipClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+    'ncua-tooltip--hidden-arrow': hideArrow,
+    'ncua-tooltip--stroke': iconType === 'stroke',
+    'ncua-tooltip--auto': position === 'auto'
+  }, className), [size, type, hideArrow, iconType, position, className]);
+  const tooltipBgClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': isVisible,
+    'ncua-tooltip__bg--measuring': isMeasuring,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose
+  }), [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+  return (0, _jsxRuntime.jsxs)("span", {
     ref: tooltipRef,
     className: tooltipClassName,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, {
+    onMouseLeave: handleMouseLeave,
     children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
       width: iconSize,
       height: iconSize,
@@ -172,26 +142,23 @@ var Tooltip = function (_a) {
       width: iconSize,
       height: iconSize,
       color: iconColor
-    })), (0, _jsxRuntime.jsxs)("span", __assign({
+    })), (0, _jsxRuntime.jsxs)("span", {
       ref: tooltipBgRef,
-      className: tooltipBgClassName
-    }, {
-      children: [title && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-tooltip__title"
-      }, {
+      className: tooltipBgClassName,
+      children: [title && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tooltip__title",
         children: title
-      })), content && (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-tooltip__content"
-      }, {
+      }), content && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-tooltip__content",
         children: content
-      })), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+      }), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
         className: "ncua-tooltip__close-button",
         size: "xs",
         theme: tooltipType === 'white' ? 'dark' : 'light',
         onClick: handleCloseClick,
         "aria-label": "\uD234\uD301 \uB2EB\uAE30"
       })]
-    }))]
-  }));
+    })]
+  });
 };
 exports.Tooltip = Tooltip;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalTab = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Select = require("../select/Select");
+var _TabButton = require("../tab/TabButton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VerticalTab = _ref => {
+  let {
+    type = 'button-primary',
+    breakPoint = 'pc',
+    activeTab,
+    menus,
+    onSelect
+  } = _ref;
+  const handleSelectChange = e => {
+    onSelect?.(e.target.value);
+  };
+  const optionItems = menus?.map(menu => ({
+    id: menu.id || '',
+    label: menu.label || ''
+  })) || [];
+  if (breakPoint === 'mobile') {
+    return (0, _jsxRuntime.jsx)(_Select.Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-vertical-tab', `ncua-vertical-tab--${type}`),
+    children: menus?.map(menu => {
+      const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+      return (0, _jsxRuntime.jsx)(_TabButton.TabButton, {
+        ...menu,
+        isActive: isActive,
+        tabButtonType: type,
+        size: "md"
+      }, menu.id);
+    })
+  });
+};
+exports.VerticalTab = VerticalTab;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _VerticalTab = require("./VerticalTab");
+Object.keys(_VerticalTab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _VerticalTab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _VerticalTab[key];
+    }
+  });
+});

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MEDIA_QUERY = exports.BREAKPOINT = void 0;
-var BREAKPOINT = exports.BREAKPOINT = {
+const BREAKPOINT = exports.BREAKPOINT = {
   mobile: '768px'
 };
-var MEDIA_QUERY = exports.MEDIA_QUERY = {
-  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+const MEDIA_QUERY = exports.MEDIA_QUERY = {
+  mobile: `(max-width: ${BREAKPOINT.mobile})`
 };

package/dist/cjs/src/constant/date-picker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PERIOD_ITEM = void 0;
-var PERIOD_ITEM = exports.PERIOD_ITEM = {
+const PERIOD_ITEM = exports.PERIOD_ITEM = {
   TODAY: {
     text: '오늘',
     period: 0,

package/dist/cjs/src/constant/size.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MINIMUM_PC_SIZE = void 0;
-var MINIMUM_PC_SIZE = exports.MINIMUM_PC_SIZE = 768;
+const MINIMUM_PC_SIZE = exports.MINIMUM_PC_SIZE = 768;