@ncds/ui-admin 1.5.2 → 1.5.3

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageFileInputErrorType = 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 _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) {
@@ -189,7 +189,9 @@ 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', {
+            destructive: destructive
+          }),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel

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,13 +26,13 @@ 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 { HintText, Label } from '../shared';
-import { ImagePreview } from './components/ImagePreview';
 import { Tooltip } from '../tooltip';
+import { ImagePreview } from './components/ImagePreview';
 export var ImageFileInputErrorType;
 (function (ImageFileInputErrorType) {
   ImageFileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
@@ -182,7 +182,9 @@ 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', {
+            destructive: destructive
+          }),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel

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/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__preview-container.destructive {
+  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.3",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",