@ncds/ui-admin 0.0.23 → 0.0.25

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

@@ -42,8 +42,9 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     destructive = _a.destructive,
     leadingElement = _a.leadingElement,
     trailingElement = _a.trailingElement,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement"]);
-  var renderOutsideSlot = function (slot, position) {
+    showHelpIcon = _a.showHelpIcon,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon"]);
+  var renderOutsideSlot = function (slot) {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
     }
@@ -69,6 +70,7 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   };
   var renderInsideSlot = function (slot, position) {
+    var _a, _b;
     switch (slot.type) {
       case 'icon':
         return _jsx("div", __assign({
@@ -78,8 +80,8 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
             className: classNames("ncua-input__".concat(position, "-icon"), slot.className),
             name: slot.icon,
             color: slot.color ? COLOR[slot.color] : undefined,
-            width: generalSvgSize[size],
-            height: generalSvgSize[size]
+            width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size],
+            height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size]
           })
         }));
       case 'custom':
@@ -129,32 +131,44 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return null;
   };
+  var renderLabel = function () {
+    if (!label) return null;
+    return _jsxs("div", __assign({
+      className: classNames('ncua-input__label', "ncua-input__label--".concat(size))
+    }, {
+      children: [_jsx(Label, __assign({
+        isRequired: required,
+        htmlFor: props.id
+      }, {
+        children: label
+      })), showHelpIcon && _jsx(Icon, {
+        className: "ncua-input__help-icon",
+        name: "help-circle"
+      })]
+    }));
+  };
   return _jsxs("div", __assign({
     className: classNames('ncua-input', "ncua-input--".concat(size), {
       destructive: destructive,
       'is-disabled': disabled,
-      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button'
+      'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button',
+      'ncua-input__leading-text-wrap': (leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.type) === 'text'
     })
   }, {
-    children: [label && _jsx(Label, __assign({
-      isRequired: required,
-      htmlFor: props.id,
-      className: "ncua-input__label--".concat(size)
-    }, {
-      children: label
-    })), _jsxs("div", __assign({
+    children: [renderLabel(), _jsxs("div", __assign({
       className: "ncua-input__content"
     }, {
-      children: [leadingElement && renderOutsideSlot(leadingElement, 'left'), _jsxs("div", __assign({
-        className: classNames('ncua-input__field', "ncua-input--".concat(size))
+      children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({
+        className: classNames('ncua-input__field', "ncua-input__field--".concat(size))
       }, {
         children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({
           ref: ref,
           type: "text",
           disabled: disabled
         }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
-      })), trailingElement && renderOutsideSlot(trailingElement, 'right')]
+      })), trailingElement && renderOutsideSlot(trailingElement)]
     })), hintText && _jsx(HintText, __assign({
+      className: "ncua-input__hint-text",
       destructive: destructive
     }, {
       children: hintText

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

@@ -66,6 +66,7 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
       inputRef.current = node;
     },
+    size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',

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

@@ -24,17 +24,19 @@ import { HintText } from '../shared/hintText/HintText';
 export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,
     hintText = _a.hintText,
     characterCount = _a.characterCount,
     destructive = _a.destructive,
-    props = __rest(_a, ["className", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
+    props = __rest(_a, ["className", "size", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
   var textareaRef = useRef(null);
-  var _c = useState(0),
-    textCount = _c[0],
-    setTextCount = _c[1];
+  var _d = useState(0),
+    textCount = _d[0],
+    setTextCount = _d[1];
   var shouldShowHintArea = hintText || characterCount;
   useEffect(function () {
     if (textareaRef.current && characterCount) {
@@ -51,7 +53,7 @@ export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }, [characterCount]);
   return _jsxs("div", __assign({
-    className: classNames('ncua-input', 'ncua-input--textarea', {
+    className: classNames('ncua-input', 'ncua-input--textarea', "ncua-input--textarea--".concat(size), {
       destructive: destructive,
       'is-disabled': disabled
     }, className)
@@ -94,7 +96,11 @@ export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
         children: _jsxs("span", __assign({
           className: "ncua-input__text-count-text"
         }, {
-          children: [textCount, " / ", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0]
+          children: [_jsx("span", __assign({
+            className: "ncua-input__text-count-text-count"
+          }, {
+            children: textCount
+          })), "/", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0]
         }))
       }))]
     }))]

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

@@ -1 +1 @@
-export { Modal } from './Modal';
+export * from './Modal';

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

@@ -1,3 +1,3 @@
-export * from './Notification';
 export * from './FloatingNotification';
-export * from './FullWidthNotification';
+export * from './FullWidthNotification';
+export * from './Notification';

package/dist/esm/src/components/select/Select.js

@@ -21,6 +21,9 @@ import Icon from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
+/**
+ * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   var icon = _a.icon,
     placeholder = _a.placeholder,

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

@@ -49,7 +49,7 @@ export var TabButton = function (_a) {
       onClick: onClick_1
     }, anchorProps, {
       children: [label, badgeInfo && _jsx(Badge, __assign({}, badgeInfo, {
-        size: "sm"
+        size: "xs"
       })), children]
     }));
   }

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

@@ -20,7 +20,7 @@ export var Tag = function (_a) {
     count = _a.count,
     close = _a.close,
     onButtonClick = _a.onButtonClick;
-  var closeSize = {
+  var iconSize = {
     sm: 14,
     md: 16
   };
@@ -31,8 +31,8 @@ export var Tag = function (_a) {
   }, {
     children: [icon && icon.name !== 'dot' && _jsx(Icon, {
       name: icon.name,
-      width: 16,
-      height: 16,
+      width: iconSize[size],
+      height: iconSize[size],
       color: icon.color
     }), _jsx("span", __assign({
       className: "ncua-tag__text"
@@ -50,8 +50,8 @@ export var Tag = function (_a) {
       children: _jsx(Icon, {
         name: "x-close",
         color: COLOR.gray300,
-        width: closeSize[size],
-        height: closeSize[size]
+        width: iconSize[size],
+        height: iconSize[size]
       })
     }))]
   }));

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

@@ -0,0 +1,57 @@
+export var PERIOD_ITEM = {
+  TODAY: {
+    text: '오늘',
+    period: 0,
+    unit: 'days'
+  },
+  YESTERDAY: {
+    text: '어제',
+    period: 1,
+    unit: 'days'
+  },
+  '3DAYS': {
+    text: '3일',
+    period: 3,
+    unit: 'days'
+  },
+  '7DAYS': {
+    text: '7일',
+    period: 7,
+    unit: 'days'
+  },
+  '1WEEK': {
+    text: '1주일',
+    period: 1,
+    unit: 'week'
+  },
+  '15DAYS': {
+    text: '15일',
+    period: 15,
+    unit: 'days'
+  },
+  '1MONTHS': {
+    text: '1개월',
+    period: 1,
+    unit: 'months'
+  },
+  '3MONTHS': {
+    text: '3개월',
+    period: 3,
+    unit: 'months'
+  },
+  '1YEAR': {
+    text: '1년',
+    period: 1,
+    unit: 'years'
+  },
+  ENTIRE: {
+    text: '전체',
+    period: 0,
+    unit: null
+  },
+  NONE: {
+    text: '',
+    period: 0,
+    unit: null
+  }
+};

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

@@ -1 +1,2 @@
-export * from './size';
+export * from './size';
+export * from './date-picker';

package/dist/esm/src/utils/date-picker.js

@@ -0,0 +1,17 @@
+import moment from 'moment';
+export function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return moment(date).format('YYYY-MM-DD');
+}
+export function getToday() {
+  return moment().toDate();
+}
+export function getSubtractDate(_a) {
+  var _b = _a.date,
+    date = _b === void 0 ? getToday() : _b,
+    period = _a.period,
+    unit = _a.unit;
+  return moment(date).subtract(period, unit).toDate();
+}

package/dist/types/index.d.ts

@@ -1,16 +1,28 @@
 export * from './src/components/badge';
+export * from './src/components/breadcrumb';
 export * from './src/components/button';
 export * from './src/components/carousel';
 export * from './src/components/checkbox';
 export * from './src/components/date-picker';
+export * from './src/components/divider';
+export * from './src/components/dropdown';
+export * from './src/components/empty-state';
+export * from './src/components/featured-icon';
 export * from './src/components/input';
+export * from './src/components/modal';
+export * from './src/components/notification';
 export * from './src/components/pagination';
+export * from './src/components/progress-bar';
+export * from './src/components/progress-circle';
 export * from './src/components/radio';
 export * from './src/components/select';
 export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
+export * from './src/components/slider';
 export * from './src/components/spinner';
+export * from './src/components/tab';
+export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

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

@@ -9,7 +9,7 @@ interface SideCommon {
 interface SideIcon {
     type: 'icon';
     icon: IconName;
-    size?: ButtonGroupSize;
+    size?: number;
     color?: ColorKeyType;
 }
 interface SideCustom {
@@ -19,10 +19,12 @@ interface SideCustom {
 type SideSlotType = SideCommon & (SideIcon | SideCustom);
 interface ButtonGroupItemCommonProps {
     label?: string;
+    size?: ButtonGroupSize;
     icon?: SideSlotType;
     children?: React.ReactNode;
     onlyIcon?: boolean;
     disabled?: boolean;
+    isCurrent?: boolean;
 }
 interface ButtonGroupItemButtonProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
     as?: 'button';
@@ -42,7 +44,7 @@ interface ButtonGroupProps {
 }
 export declare const ButtonGroup: {
     ({ children, className, hasBorder, size, onlyIcon, disabled, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-    Item({ as, label, onlyIcon, icon, disabled, children, ...props }: ButtonGroupItemProps): React.ReactElement<{
+    Item({ as, label, size, onlyIcon, icon, disabled, children, isCurrent, ...props }: ButtonGroupItemProps): React.ReactElement<{
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
         key?: React.Key | null | undefined;
         form?: string | undefined;

package/dist/types/src/components/checkbox/CheckboxInput.d.ts

@@ -6,5 +6,8 @@ export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>,
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
+/**
+ * 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=CheckboxInput.d.ts.map

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

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+import { RangeDatePickerProps } from './RangeDatePicker';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+export type PeriodKeyType = keyof typeof PERIOD_ITEM;
+type RangeDatePickerWithButtonsProps = {
+    currentButtonId: PeriodKeyType;
+    setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
+    periodKeys: PeriodKeyType[];
+} & RangeDatePickerProps;
+export declare const RangeDatePickerWithButtons: ({ currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

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

@@ -1,3 +1,5 @@
 export * from './DatePicker';
 export * from './RangeDatePicker';
+export * from './RangeDatePickerWithButtons';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -4,9 +4,10 @@ export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
-export * from './featured-icon';
 export * from './divider';
+export * from './dropdown';
 export * from './empty-state';
+export * from './featured-icon';
 export * from './input';
 export * from './modal';
 export * from './notification';
@@ -16,6 +17,7 @@ export * from './progress-circle';
 export * from './radio';
 export * from './select';
 export * from './shared';
+export * from './slider';
 export * from './spinner';
 export * from './tab';
 export * from './tag';

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

@@ -1,6 +1,7 @@
 import { IconName } from '@ncds/ui-admin-icon';
 import React from 'react';
 import { COLOR } from '../../../constant/color';
+import { Size } from '../../../constant/size';
 interface InputSideButtonSlot {
     type: 'button';
     label: string;
@@ -14,6 +15,7 @@ interface InputSideTextSlot {
 interface InputSideIconSlot {
     type: 'icon';
     icon: IconName;
+    size?: number | string;
     color?: keyof typeof COLOR;
     className?: string;
 }
@@ -28,12 +30,13 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     required?: boolean;
     label?: string;
     hintText?: string;
-    size?: 'xs' | 'md';
+    size?: Extract<Size, 'xs' | 'md'>;
     disabled?: boolean;
     validation?: boolean;
     destructive?: boolean;
     leadingElement?: InputLeadingSlotType;
     trailingElement?: InputTrailingSlotType;
+    showHelpIcon?: boolean;
 }
 interface NoneClearableInputBaseProps extends InputBaseCommonProps {
     clearText?: never;

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

@@ -1,6 +1,8 @@
 import { ComponentPropsWithRef } from 'react';
+import { Size } from '../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
+    size?: Extract<Size, 'sm' | 'md'>;
     label?: string;
     hintText?: string;
     required?: boolean;

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

@@ -1,3 +1,2 @@
-export { Modal } from './Modal';
-export type { ModalProps, ModalSize } from './Modal';
+export * from './Modal';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,4 @@
-export * from './Notification';
 export * from './FloatingNotification';
 export * from './FullWidthNotification';
+export * from './Notification';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/select/Select.d.ts

@@ -1,8 +1,8 @@
 import Icon, { IconName } from '@ncds/ui-admin-icon';
+import { COLOR } from '@ncds/ui-admin/constant/color';
 import { Size } from '@ncds/ui/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
-import { COLOR } from '@ncds/ui-admin/constant/color';
 type BaseSelectProps = Omit<ComponentPropsWithRef<'select'>, 'size'>;
 export type OptionType = {
     id: string | number;
@@ -24,6 +24,9 @@ export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
     register?: UseFormRegisterReturn;
     type?: 'default' | 'simple';
 }
+/**
+ * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export {};
 //# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1,58 @@
+export declare const PERIOD_ITEM: {
+    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;
+    };
+};
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -1,2 +1,3 @@
 export * from './size';
+export * from './date-picker';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,9 @@
+import { DurationInputArg1, DurationInputArg2 } from 'moment';
+export declare function getDateFormat(date?: Date | string): string;
+export declare function getToday(): Date;
+export declare function getSubtractDate({ date, period, unit, }: {
+    date?: string | Date;
+    period: DurationInputArg1;
+    unit: DurationInputArg2;
+}): Date;
+//# sourceMappingURL=date-picker.d.ts.map