@ncds/ui-admin 0.0.26 → 0.0.27

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -99,7 +99,8 @@ ButtonGroup.Item = function (_a) {
     }, {
       'is-current': isCurrent
     }),
-    disabled: disabled
+    disabled: disabled,
+    type: as === 'button' ? 'button' : undefined
   }, props), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
   }));

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

@@ -21,7 +21,9 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var RangeDatePickerWithButtons = function (_a) {
-  var currentButtonId = _a.currentButtonId,
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
@@ -60,7 +62,7 @@ var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
-      size: "sm"
+      size: buttonGroupSize
     }, {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {

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

@@ -29,7 +29,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var icon = _a.icon,
@@ -87,14 +87,6 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
             children: item.label
           }), "option-".concat(index));
         }), children]
-      })), destructive && (0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-select__destructive-icon"
-      }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: "info-circle",
-          width: 14,
-          height: 14
-        })
       }))]
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
       destructive: destructive,

package/dist/esm/src/components/button/ButtonGroup.js

@@ -89,7 +89,8 @@ ButtonGroup.Item = function (_a) {
     }, {
       'is-current': isCurrent
     }),
-    disabled: disabled
+    disabled: disabled,
+    type: as === 'button' ? 'button' : undefined
   }, props), _jsxs(_Fragment, {
     children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
   }));

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

@@ -15,7 +15,9 @@ import { ButtonGroup } from '../button';
 import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { PERIOD_ITEM } from '../../constant/date-picker';
 export var RangeDatePickerWithButtons = function (_a) {
-  var currentButtonId = _a.currentButtonId,
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
@@ -54,7 +56,7 @@ export var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [_jsx(ButtonGroup, __assign({
-      size: "sm"
+      size: buttonGroupSize
     }, {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {

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

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   var icon = _a.icon,
@@ -80,14 +80,6 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: item.label
           }), "option-".concat(index));
         }), children]
-      })), destructive && _jsx("div", __assign({
-        className: "ncua-select__destructive-icon"
-      }, {
-        children: _jsx(Icon, {
-          name: "info-circle",
-          width: 14,
-          height: 14
-        })
       }))]
     })), hintText && _jsx(HintText, __assign({
       destructive: destructive,

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

@@ -2,7 +2,7 @@ import { IconName } from '@ncds/ui-admin-icon';
 import React, { ComponentProps } from 'react';
 import { ColorKeyType } from '../../../constant/color';
 import { Size } from '../../../constant/size';
-type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+export type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }
@@ -54,7 +54,7 @@ export declare const ButtonGroup: {
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
         name?: string | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
+        type: string | undefined;
         value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -333,7 +333,7 @@ export declare const ButtonGroup: {
         media?: string | undefined;
         ping?: string | undefined;
         target?: React.HTMLAttributeAnchorTarget | undefined;
-        type?: string | undefined;
+        type: string | undefined;
         referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;

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

@@ -1,12 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
 import { RangeDatePickerProps } from './RangeDatePicker';
+import { ButtonGroupSize } from '../button';
 import { PERIOD_ITEM } from '../../constant/date-picker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
+    buttonGroupSize?: ButtonGroupSize;
     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 declare const RangeDatePickerWithButtons: ({ buttonGroupSize, 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/select/Select.d.ts

@@ -25,7 +25,7 @@ export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
     type?: 'default' | 'simple';
 }
 /**
- * 현재 icon과 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export {};

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

@@ -532,7 +532,7 @@ button {
   color: var(--gray-600);
 }
 :where(.ncua-button-group.has-border) {
-  border: 1px solid var(--gray-200);
+  outline: 1px solid var(--gray-200);
   box-shadow: var(--shadow-xs);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
@@ -721,15 +721,13 @@ button {
   display: none;
 }
 .ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
-  background-color: var(--gray-100);
   border-radius: 4px;
 }
 
 .ncua-checkbox-field {
   position: relative;
-  line-height: 18px;
-  font-weight: var(--font-weights-commerce-sans-0);
   font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   cursor: pointer;
 }
 .ncua-checkbox-field__text {
@@ -739,17 +737,17 @@ button {
 }
 .ncua-checkbox-field__support-text {
   color: var(--gray-400);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-checkbox-field:hover .ncua-checkbox-field__input {
   border-color: var(--gray-700);
   background-color: var(--gray-50);
   border-radius: 4px;
 }
-.ncua-checkbox-field--md .ncua-checkbox-field__text {
+.ncua-checkbox-field--md .ncua-checkbox-field__text,
+.ncua-checkbox-field--md .ncua-checkbox-field__support-text {
   font-size: var(--font-size-sm);
-  line-height: 22px;
+  line-height: var(--line-heights-sm);
 }
 .ncua-checkbox-field.has-text {
   display: inline-flex;
@@ -2050,7 +2048,7 @@ button {
 .ncua-radio-field__support-text {
   color: var(--gray-400);
 }
-.ncua-radio-field--md .ncua-radio-field__text {
+.ncua-radio-field--md .ncua-radio-field__text, .ncua-radio-field--md .ncua-radio-field__support-text {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
@@ -2339,34 +2337,30 @@ button {
 .ncua-select.destructive .ncua-select__content:focus-within {
   box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
-.ncua-select__destructive-icon {
-  position: absolute;
-  top: 50%;
-  right: 25px;
-  width: 14px;
-  height: 14px;
-  font-size: 0;
-  color: var(--primary-red-600);
-  transform: translateY(-50%);
-}
 .ncua-select--xs {
   height: var(--select-height-xs);
   border-radius: 6px;
-  padding-right: 28px;
+  padding-inline: 10px 28px;
 }
 .ncua-select--xs > .ncua-select__tag {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-select--xs + .ncua-hint-text {
+  margin-block-start: 4px;
+}
 .ncua-select--sm {
   height: var(--select-height-sm);
   border-radius: 6px;
-  padding-right: 30px;
+  padding-inline: 12px 30px;
 }
 .ncua-select--sm > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-select--sm + .ncua-hint-text {
+  margin-block-start: 6px;
+}
 .ncua-select--sm.ncua-select__content::after {
   width: 16px;
   height: 16px;
@@ -2376,12 +2370,15 @@ button {
   min-width: 132px;
   height: var(--select-height-md);
   border-radius: 8px;
-  padding-right: 30px;
+  padding-inline: 12px 30px;
 }
 .ncua-select--md > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-select--md + .ncua-hint-text {
+  margin-block-start: 6px;
+}
 .ncua-select--md.ncua-select__content::after {
   width: 16px;
   height: 16px;
@@ -2413,8 +2410,9 @@ button {
   padding-right: 18px;
 }
 .ncua-select .ncua-hint-text {
-  margin-block-start: 6px;
-  font-size: var(--font-size-xxxs);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  color: var(--gray-400);
 }
 
 .ncua-pagination {

package/package.json

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