@ncds/ui-admin 1.5.4 → 1.5.5

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

@@ -49,7 +49,8 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     _d = _a.isEndDate,
     isEndDate = _d === void 0 ? false : _d,
     onValidationError = _a.onValidationError,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError"]);
+    className = _a.className,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError", "className"]);
   var flatpickrInstanceRef = (0, _react.useRef)(null);
   var dateFormatRef = (0, _react.useRef)('Y-m-d');
   var minMaxDateRef = (0, _react.useRef)({});
@@ -302,7 +303,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       'ncua-date-picker--disabled': attrs.disabled,
       'ncua-date-picker--has-time': hasTimeOption,
       'ncua-date-picker--destructive': attrs.destructive
-    })
+    }, className)
   }, {
     children: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
       ref: ref || undefined,

package/dist/cjs/src/components/dropdown/Dropdown.js

@@ -150,7 +150,7 @@ var Dropdown = function (_a) {
     return null;
   };
   var renderItem = function (item) {
-    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
     return (0, _jsxRuntime.jsxs)("div", __assign({
       className: itemClasses
     }, {

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

@@ -112,6 +112,9 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
           })
         }));
       case 'custom':
+        if (slot.placement !== 'inside') {
+          return null;
+        }
         return slot.children;
       default:
         return null;

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

@@ -128,9 +128,10 @@ Modal.Header = function (_a) {
   });
 };
 Modal.Content = function (_a) {
-  var children = _a.children;
+  var children = _a.children,
+    className = _a.className;
   return (0, _jsxRuntime.jsx)("div", __assign({
-    className: "ncua-modal__content"
+    className: (0, _classnames.default)('ncua-modal__content', className)
   }, {
     children: children
   }));
@@ -171,12 +172,13 @@ Modal.Actions = function (_a) {
     showDivider = _c === void 0 ? false : _c,
     _d = _a.align,
     align = _d === void 0 ? 'stretch' : _d,
-    checkboxContent = _a.checkboxContent;
+    checkboxContent = _a.checkboxContent,
+    className = _a.className;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__actions-divider"
     }), (0, _jsxRuntime.jsxs)("div", __assign({
-      className: (0, _classnames.default)('ncua-modal__actions-wrapper', {
+      className: (0, _classnames.default)('ncua-modal__actions-wrapper', className, {
         'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
       })
     }, {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _Button = require("../button/Button");
+var _button = require("../button");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -76,6 +76,6 @@ var NavButton = function (_a) {
   };
   // key 값 별도 계산
   var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
-  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({}, buttonProps), buttonKey);
+  return (0, _jsxRuntime.jsx)(_button.Button, __assign({}, buttonProps), buttonKey);
 };
 exports.NavButton = NavButton;

package/dist/cjs/src/components/selectbox/SelectBox.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
-var _color = require("@ncds/ui-admin/constant/color");
+var _color = require("../../../constant/color");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _dropdown = require("../../hooks/dropdown");

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

@@ -40,7 +40,8 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     _d = _a.isEndDate,
     isEndDate = _d === void 0 ? false : _d,
     onValidationError = _a.onValidationError,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError"]);
+    className = _a.className,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError", "className"]);
   var flatpickrInstanceRef = useRef(null);
   var dateFormatRef = useRef('Y-m-d');
   var minMaxDateRef = useRef({});
@@ -293,7 +294,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       'ncua-date-picker--disabled': attrs.disabled,
       'ncua-date-picker--has-time': hasTimeOption,
       'ncua-date-picker--destructive': attrs.destructive
-    })
+    }, className)
   }, {
     children: [_jsx(Flatpickr, __assign({}, attrs, {
       ref: ref || undefined,

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -143,7 +143,7 @@ export var Dropdown = function (_a) {
     return null;
   };
   var renderItem = function (item) {
-    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
     return _jsxs("div", __assign({
       className: itemClasses
     }, {

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

@@ -105,6 +105,9 @@ export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
           })
         }));
       case 'custom':
+        if (slot.placement !== 'inside') {
+          return null;
+        }
         return slot.children;
       default:
         return null;

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

@@ -120,9 +120,10 @@ Modal.Header = function (_a) {
   });
 };
 Modal.Content = function (_a) {
-  var children = _a.children;
+  var children = _a.children,
+    className = _a.className;
   return _jsx("div", __assign({
-    className: "ncua-modal__content"
+    className: classnames('ncua-modal__content', className)
   }, {
     children: children
   }));
@@ -163,12 +164,13 @@ Modal.Actions = function (_a) {
     showDivider = _c === void 0 ? false : _c,
     _d = _a.align,
     align = _d === void 0 ? 'stretch' : _d,
-    checkboxContent = _a.checkboxContent;
+    checkboxContent = _a.checkboxContent,
+    className = _a.className;
   return _jsxs(_Fragment, {
     children: [showDivider && _jsx("div", {
       className: "ncua-modal__actions-divider"
     }), _jsxs("div", __assign({
-      className: classnames('ncua-modal__actions-wrapper', {
+      className: classnames('ncua-modal__actions-wrapper', className, {
         'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
       })
     }, {

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

@@ -9,7 +9,7 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '../button/Button';
+import { Button } from '../button';
 var NAV_BUTTON_CONFIG = {
   first: {
     label: '처음',

package/dist/esm/src/components/selectbox/SelectBox.js

@@ -27,7 +27,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
-import { COLOR } from '@ncds/ui-admin/constant/color';
+import { COLOR } from '../../../constant/color';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useDropdown, useScrollLock } from '../../hooks/dropdown';

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

@@ -11,7 +11,7 @@ var __assign = this && this.__assign || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon/dynamic';
 import classNames from 'classnames';
-import { useState, useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 var MARGIN = 10;

package/dist/types/src/components/badge/BadgeGroup.d.ts

@@ -1,7 +1,7 @@
-import { ColorTone } from '@ncds/ui-admin/constant/color';
-import { BadgeProps } from '.';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type BadgeProps } from '.';
 export type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
 export type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
 export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {

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

@@ -5,7 +5,7 @@ import { DotProps } from '../dot';
 export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
 export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
-    label: string;
+    label: ReactNode;
     className?: string;
     hierarchy?: ButtonTheme;
     disabled?: boolean;
@@ -21,7 +21,7 @@ export declare const svgSize: Record<ButtonSize, number>;
 export declare const iconOnlySvgSize: Record<ButtonSize, number>;
 export declare const dotSize: Record<ButtonSize, DotProps['size']>;
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    label: string;
+    label: ReactNode;
     className?: string | undefined;
     hierarchy?: ButtonTheme | undefined;
     disabled?: boolean | undefined;

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

@@ -15,9 +15,9 @@ interface ButtonGroupItemCommonProps {
     disabled?: boolean;
     isCurrent?: boolean;
 }
-interface ButtonGroupItemProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
+export interface ButtonGroupItemProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
 }
-interface ButtonGroupProps {
+export interface ButtonGroupProps {
     className?: string;
     size?: ButtonGroupSize;
     children: React.ReactNode;

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

@@ -9,6 +9,7 @@ export type DatePickerProps = {
     destructive?: string;
     placeholder?: string;
     isEndDate?: boolean;
+    className?: string;
     onChangeDate: (date: string) => void;
     onValidationError?: (error: {
         date: Date;

package/dist/types/src/components/dropdown/Dropdown.d.ts

@@ -27,6 +27,7 @@ export type DropdownItemType = {
     onClick?: () => void;
     disabled?: boolean;
     type?: 'default' | 'danger';
+    className?: string;
 };
 export type DropdownGroup = {
     items: DropdownItemType[];

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

@@ -18,7 +18,7 @@ export type ModalProps = {
 export declare const Modal: {
     ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
     Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
-    Content({ children }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+    Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Modal.Actions - The actions area of the modal
      *
@@ -47,7 +47,7 @@ export declare const Modal: {
      *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
-    Actions({ children, layout, showDivider, align, checkboxContent, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
 };
 export type ModalHeaderProps = {
     children?: ReactNode;
@@ -65,8 +65,10 @@ export type ModalHeaderProps = {
 };
 export type ModalContentProps = {
     children: ReactNode;
+    className?: string;
 };
 export type ModalActionsProps = {
+    className?: string;
     children: ReactNode;
     layout?: ModalActionsLayout;
     showDivider?: boolean;

package/dist/types/src/components/selectbox/SelectBox.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { UseFormRegisterReturn } from 'react-hook-form';
-import { Size } from '../../../constant/size';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { Size } from '../../../constant/size';
 import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
 export declare const DEFAULT_MAX_HEIGHT = 275;
 type BaseSelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;

package/dist/types/src/components/tab/TabButton.d.ts

@@ -4,7 +4,7 @@ export type TabSize = 'sm' | 'md' | 'lg';
 export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {
     id?: string;
-    label: string;
+    label?: string;
     size?: TabSize;
     tabButtonType?: TabType;
     isActive?: boolean;

package/dist/types/src/components/tag/Tag.d.ts

@@ -1,6 +1,6 @@
-import { MouseEventHandler } from 'react';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
+import { type MouseEventHandler } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
 interface TagProps {
     size?: Extract<Size, 'sm' | 'md'>;
     icon?: SideSlotType;

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

@@ -1368,9 +1368,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__field--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__field--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__field:has(.ncua-input__stepper-button-group ~ .ncua-input__number) {
@@ -1563,9 +1565,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text {
@@ -1588,9 +1592,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__trailing-button .ncua-input__button--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__trailing-button .ncua-input__button {
@@ -1603,19 +1609,19 @@ button {
   cursor: pointer;
 }
 .ncua-input__trailing-button .ncua-input__button {
-  padding: 5px 10px;
+  padding: 4px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--sm {
-  padding: 7px 14px;
+  padding: 6px 12px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);

package/package.json

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