@ncds/ui-admin 1.5.2 → 1.5.4

package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -31,9 +31,11 @@ var RangeDatePickerWithButtons = function (_a) {
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
     periodKeys = _a.periodKeys,
+    periodItems = _a.periodItems,
     onDateValidation = _a.onDateValidation;
+  var items = periodItems !== null && periodItems !== void 0 ? periodItems : _datePicker.PERIOD_ITEM;
   var setCalculatedDate = function () {
-    var currentPeriodItem = _datePicker.PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = items[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -71,7 +73,7 @@ var RangeDatePickerWithButtons = function (_a) {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: _datePicker.PERIOD_ITEM[key].text,
+          label: items[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }

package/dist/cjs/src/components/image-file-input/ImageFileInput.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ImageFileInputErrorType = exports.ImageFileInput = void 0;
+exports.ImageFileInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _button = require("../button");
+var _FileInput = require("../file-input/FileInput");
 var _shared = require("../shared");
-var _ImagePreview = require("./components/ImagePreview");
 var _tooltip = require("../tooltip");
+var _ImagePreview = require("./components/ImagePreview");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -40,12 +41,6 @@ var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
-var ImageFileInputErrorType;
-(function (ImageFileInputErrorType) {
-  ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
-  ImageFileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
-  ImageFileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
-})(ImageFileInputErrorType || (exports.ImageFileInputErrorType = ImageFileInputErrorType = {}));
 var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -123,20 +118,20 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
         return f.name === file.name && f.size === file.size;
       })) {
         invalidFiles.push(__assign(__assign({}, file), {
-          errorType: ImageFileInputErrorType.ALREADY_UPLOADED
+          errorType: _FileInput.FileInputErrorType.ALREADY_UPLOADED
         }));
         return "continue";
       }
       if (!!maxFileSize && file.size > maxFileSize) {
         invalidFiles.push(__assign(__assign({}, file), {
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE
+          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_SIZE
         }));
         return "continue";
       }
       // Skip max count check if maxFileCount is 1 (allow replacement)
       if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
         invalidFiles.push(__assign(__assign({}, file), {
-          errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT
+          errorType: _FileInput.FileInputErrorType.EXCEED_MAX_FILE_COUNT
         }));
         return "continue";
       }
@@ -189,7 +184,7 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
         children: [(0, _jsxRuntime.jsx)(_button.Button, {
           onlyIcon: true,
           size: size,
-          className: "ncua-image-file-input__preview-container",
+          className: (0, _classnames.default)('ncua-image-file-input__preview-container'),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel
@@ -215,7 +210,9 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
     }));
   };
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: (0, _classnames.default)('ncua-image-file-input', "ncua-image-file-input--".concat(size))
+    className: (0, _classnames.default)('ncua-image-file-input', "ncua-image-file-input--".concat(size), {
+      destructive: destructive
+    })
   }, {
     children: [renderImagePreview(files), showFileInput && (0, _jsxRuntime.jsxs)("div", __assign({
       className: (0, _classnames.default)('ncua-file-input', "ncua-file-input--".concat(size))

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

@@ -135,6 +135,28 @@ Object.keys(_featuredIcon).forEach(function (key) {
     }
   });
 });
+var _fileInput = require("./file-input");
+Object.keys(_fileInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fileInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fileInput[key];
+    }
+  });
+});
+var _imageFileInput = require("./image-file-input");
+Object.keys(_imageFileInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _imageFileInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _imageFileInput[key];
+    }
+  });
+});
 var _input = require("./input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -332,15 +354,4 @@ Object.keys(_tooltip).forEach(function (key) {
       return _tooltip[key];
     }
   });
-});
-var _imageFileInput = require("./image-file-input");
-Object.keys(_imageFileInput).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _imageFileInput[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _imageFileInput[key];
-    }
-  });
 });

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

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _hooks = require("../../hooks");
 var _InputBase = require("./InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -40,37 +39,23 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var _c = (0, _react.useState)(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
-  var _d = (0, _react.useState)(false),
-    hasContent = _d[0],
-    setHasContent = _d[1];
-  var callbackRef = (0, _hooks.useCallbackRef)(function (node) {
-    if (node) {
-      setHasContent(!!node.value);
-      var handleInput_1 = function () {
-        setHasContent(!!node.value);
-      };
-      node.addEventListener('input', handleInput_1);
-      return function () {
-        node.removeEventListener('input', handleInput_1);
-      };
-    }
-  });
-  var mergedRef = (0, _hooks.useMergeRefs)([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
   };
   var handleVisibilityChange = function () {
-    setIsVisible(!isVisible);
+    setIsVisible(function (prev) {
+      return !prev;
+    });
   };
   return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
-    ref: mergedRef,
+    ref: ref,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
       icon: 'lock-01',
-      color: hasContent ? 'gray600' : 'gray300'
+      color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {
       type: 'custom',

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -39,7 +39,7 @@ var HorizontalTab = function (_a) {
   };
   if (!menus.length) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   return (0, _jsxRuntime.jsx)("div", __assign({
-    className: (0, _classnames.default)('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
+    className: (0, _classnames.default)('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
       'ncua-horizontal-tab--fullWidth': fullWidth
     })
   }, {

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -25,9 +25,11 @@ export var RangeDatePickerWithButtons = function (_a) {
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
     periodKeys = _a.periodKeys,
+    periodItems = _a.periodItems,
     onDateValidation = _a.onDateValidation;
+  var items = periodItems !== null && periodItems !== void 0 ? periodItems : PERIOD_ITEM;
   var setCalculatedDate = function () {
-    var currentPeriodItem = PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = items[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -65,7 +67,7 @@ export var RangeDatePickerWithButtons = function (_a) {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: PERIOD_ITEM[key].text,
+          label: items[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }

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

@@ -26,19 +26,14 @@ 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 classNames from 'classnames';
 import Icon from '@ncds/ui-admin-icon/dynamic';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '../button';
+import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
 import { HintText, Label } from '../shared';
-import { ImagePreview } from './components/ImagePreview';
 import { Tooltip } from '../tooltip';
-export var ImageFileInputErrorType;
-(function (ImageFileInputErrorType) {
-  ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
-  ImageFileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
-  ImageFileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
-})(ImageFileInputErrorType || (ImageFileInputErrorType = {}));
+import { ImagePreview } from './components/ImagePreview';
 export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'sm' : _b,
@@ -182,7 +177,7 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: [_jsx(Button, {
           onlyIcon: true,
           size: size,
-          className: "ncua-image-file-input__preview-container",
+          className: classNames('ncua-image-file-input__preview-container'),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel
@@ -208,7 +203,9 @@ export var ImageFileInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     }));
   };
   return _jsxs("div", __assign({
-    className: classNames('ncua-image-file-input', "ncua-image-file-input--".concat(size))
+    className: classNames('ncua-image-file-input', "ncua-image-file-input--".concat(size), {
+      destructive: destructive
+    })
   }, {
     children: [renderImagePreview(files), showFileInput && _jsxs("div", __assign({
       className: classNames('ncua-file-input', "ncua-file-input--".concat(size))

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

@@ -10,6 +10,8 @@ export * from './dot';
 export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
+export * from './file-input';
+export * from './image-file-input';
 export * from './input';
 export * from './modal';
 export * from './notification';
@@ -27,5 +29,4 @@ export * from './switch';
 export * from './tab';
 export * from './tag';
 export * from './toggle';
-export * from './tooltip';
-export * from './image-file-input';
+export * from './tooltip';

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

@@ -20,7 +20,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useState } from 'react';
-import { useCallbackRef, useMergeRefs } from '../../hooks';
 import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
@@ -33,37 +32,23 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _c = useState(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
-  var _d = useState(false),
-    hasContent = _d[0],
-    setHasContent = _d[1];
-  var callbackRef = useCallbackRef(function (node) {
-    if (node) {
-      setHasContent(!!node.value);
-      var handleInput_1 = function () {
-        setHasContent(!!node.value);
-      };
-      node.addEventListener('input', handleInput_1);
-      return function () {
-        node.removeEventListener('input', handleInput_1);
-      };
-    }
-  });
-  var mergedRef = useMergeRefs([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
   };
   var handleVisibilityChange = function () {
-    setIsVisible(!isVisible);
+    setIsVisible(function (prev) {
+      return !prev;
+    });
   };
   return _jsx(InputBase, __assign({
-    ref: mergedRef,
+    ref: ref,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
       icon: 'lock-01',
-      color: hasContent ? 'gray600' : 'gray300'
+      color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {
       type: 'custom',

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

@@ -32,7 +32,7 @@ export var HorizontalTab = function (_a) {
   };
   if (!menus.length) return _jsx(_Fragment, {});
   return _jsx("div", __assign({
-    className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
+    className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
       'ncua-horizontal-tab--fullWidth': fullWidth
     })
   }, {

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

@@ -1,14 +1,71 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
 import { type RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
-type RangeDatePickerWithButtonsProps = {
+type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
     useYesterdayAsEndDate?: boolean;
-    currentButtonId: PeriodKeyType;
-    setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
-    periodKeys: PeriodKeyType[];
+    currentButtonId: keyof T & string;
+    setCurrentButtonId: Dispatch<SetStateAction<keyof T & string>>;
+    periodKeys: (keyof T & string)[];
+    periodItems?: T;
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+}>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

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

@@ -1,12 +1,5 @@
+import { InvalidFile } from '../file-input/FileInput';
 import { InputBaseProps } from '../input/InputBase';
-export declare enum ImageFileInputErrorType {
-    ALREADY_UPLOADED = "ALREADY_UPLOADED",
-    EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",
-    EXCEED_MAX_FILE_COUNT = "EXCEED_MAX_FILE_COUNT"
-}
-export interface InvalidFile extends Omit<File, 'constructor'> {
-    errorType: ImageFileInputErrorType;
-}
 export interface ImageFileInputProps extends Omit<InputBaseProps, 'clearText' | 'onClearText' | 'hintText' | 'value' | 'onChange'> {
     /**
      * Accepted file types

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

@@ -10,6 +10,8 @@ export * from './dot';
 export * from './dropdown';
 export * from './empty-state';
 export * from './featured-icon';
+export * from './file-input';
+export * from './image-file-input';
 export * from './input';
 export * from './modal';
 export * from './notification';
@@ -28,5 +30,4 @@ export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';
-export * from './image-file-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/constant/date-picker.d.ts

@@ -1,3 +1,9 @@
+export type PeriodItem = {
+    text: string;
+    period: number;
+    unit: string | null;
+};
+export type PeriodItemMap = Record<string, PeriodItem>;
 export declare const PERIOD_ITEM: {
     TODAY: {
         text: string;

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :root {
   --primary-red-50: #fffafd;
   --primary-red-100: #ffeaee;
@@ -4158,6 +4157,10 @@ button {
   background-color: var(--gray-500);
   border-color: var(--gray-500);
 }
+.ncua-date-picker .flatpickr-day.selected.nextMonthDay, .ncua-date-picker .flatpickr-day.selected.prevMonthDay {
+  background-color: var(--gray-500);
+  border-color: var(--gray-500);
+}
 .ncua-date-picker .flatpickr-day.selected:hover {
   border-color: var(--gray-700);
   background-color: var(--gray-700);
@@ -5227,19 +5230,10 @@ button {
 }
 .ncua-file-input__hint-list {
   margin: 0;
-  padding: 0;
+  list-style: disc;
   color: var(--gray-400);
-}
-.ncua-file-input__hint-item {
-  position: relative;
   padding-left: 16px;
 }
-.ncua-file-input__hint-item::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  top: 0;
-}
 .ncua-file-input--xs {
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);
@@ -5332,6 +5326,10 @@ button {
 .ncua-image-file-input__preview-container[disabled], .ncua-image-file-input__preview-container.is-disable, .ncua-image-file-input__preview-container.ncua-btn:hover {
   border: 1px dashed var(--gray-200);
 }
+.ncua-image-file-input.destructive .ncua-image-file-input__preview-container {
+  background-color: var(--primary-red-100);
+  border: 1px solid var(--primary-red-600);
+}
 .ncua-image-file-input__preview-remove-button {
   position: absolute;
   top: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",