@ncds/ui-admin 0.0.30 → 0.0.32

package/dist/cjs/src/components/badge/Badge.js

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Badge = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
-var _button = require("../button");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _color = require("../../../constant/color");
-var _dot = require("../dot");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -21,6 +18,10 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+var BADGE_ICON_SIZE = 12;
 var Badge = function (_a) {
   var label = _a.label,
     _b = _a.type,
@@ -32,32 +33,20 @@ var Badge = function (_a) {
     trailingIcon = _a.trailingIcon,
     _d = _a.size,
     size = _d === void 0 ? 'sm' : _d;
-  var sideSlotRender = function (slot) {
-    var _a, _b, _c, _d;
-    if (slot.type === 'icon') {
-      return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-        name: slot.icon,
-        height: (_a = slot.size) !== null && _a !== void 0 ? _a : _button.svgSize[size],
-        width: (_b = slot.size) !== null && _b !== void 0 ? _b : _button.svgSize[size],
-        color: slot.color ? _color.COLOR[slot.color] : undefined
-      });
-    }
-    if (slot.type === 'dot') {
-      return (0, _jsxRuntime.jsx)(_dot.Dot, {
-        color: (_c = slot.color) !== null && _c !== void 0 ? _c : color,
-        size: (_d = slot.size) !== null && _d !== void 0 ? _d : 'sm'
-      });
-    }
-    return slot.children;
-  };
   return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
   }, {
-    children: [leadingIcon && sideSlotRender(leadingIcon), (0, _jsxRuntime.jsx)("span", __assign({
+    children: [leadingIcon && (0, _utils.sideSlotRender)({
+      slot: leadingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    }), (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-badge__label"
     }, {
       children: label
-    })), trailingIcon && sideSlotRender(trailingIcon)]
+    })), trailingIcon && (0, _utils.sideSlotRender)({
+      slot: trailingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    })]
   }));
 };
 exports.Badge = Badge;

package/dist/cjs/src/components/badge/BadgeGroup.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeGroup = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require(".");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var DEFAULT_GROUP_ICON_SIZE = 14;
+var BadgeGroup = function (_a) {
+  var groupLabel = _a.groupLabel,
+    groupIcon = _a.groupIcon,
+    groupClassName = _a.groupClassName,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size"]);
+  return (0, _jsxRuntime.jsxs)("span", __assign({
+    className: (0, _classnames.default)('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName)
+  }, {
+    children: [(0, _jsxRuntime.jsx)(_.Badge, __assign({
+      type: "pill-dark-color",
+      color: color,
+      size: size
+    }, props)), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-badge-group__label"
+    }, {
+      children: groupLabel
+    })), groupIcon && (0, _utils.sideSlotRender)({
+      slot: groupIcon,
+      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
+    })]
+  }));
+};
+exports.BadgeGroup = BadgeGroup;

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

@@ -13,4 +13,15 @@ Object.keys(_Badge).forEach(function (key) {
       return _Badge[key];
     }
   });
+});
+var _BadgeGroup = require("./BadgeGroup");
+Object.keys(_BadgeGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BadgeGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BadgeGroup[key];
+    }
+  });
 });

package/dist/cjs/src/components/badge/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sideSlotRender = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _color = require("../../../constant/color");
+var _Dot = require("../dot/Dot");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var DEFAULT_DOT_COLOR = 'neutral';
+var sideSlotRender = function (_a) {
+  var _b, _c, _d, _e;
+  var slot = _a.slot,
+    defaultIconSize = _a.defaultIconSize;
+  if (slot.type === 'icon') {
+    return (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: slot.icon,
+      height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
+      width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,
+      color: slot.color ? _color.COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return (0, _jsxRuntime.jsx)(_Dot.Dot, {
+      color: (_d = slot.color) !== null && _d !== void 0 ? _d : DEFAULT_DOT_COLOR,
+      size: (_e = slot.size) !== null && _e !== void 0 ? _e : 'sm'
+    });
+  }
+  return slot.children;
+};
+exports.sideSlotRender = sideSlotRender;

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

@@ -24,10 +24,16 @@ var Dropdown = function (_a) {
     align = _b === void 0 ? 'left' : _b,
     header = _a.header,
     groups = _a.groups,
-    className = _a.className;
-  var _c = (0, _react.useState)(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
+    className = _a.className,
+    _c = _a.opened,
+    opened = _c === void 0 ? false : _c,
+    _d = _a.closeOnClickItem,
+    closeOnClickItem = _d === void 0 ? true : _d,
+    _e = _a.closeOnClickOutside,
+    closeOnClickOutside = _e === void 0 ? true : _e;
+  var _f = (0, _react.useState)(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
   var dropdownRef = (0, _react.useRef)(null);
   var toggleDropdown = function () {
     setIsOpen(!isOpen);
@@ -40,15 +46,19 @@ var Dropdown = function (_a) {
   var handleClickItem = function (item) {
     if (!item.disabled && item.onClick) {
       item.onClick();
-      setIsOpen(false);
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
     }
   };
   (0, _react.useEffect)(function () {
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
   var renderTrigger = function () {
     switch (trigger.type) {
       case 'custom':

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

@@ -117,7 +117,7 @@ Modal.Header = function (_a) {
         onClick: onClose
       }, {
         children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: "x"
+          name: "x-close"
         })
       }))]
     })), showDivider && (0, _jsxRuntime.jsx)("div", {

package/dist/esm/src/components/badge/Badge.js

@@ -9,11 +9,12 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon';
-import { svgSize } from '../button';
 import classNames from 'classnames';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { sideSlotRender } from './utils';
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+var BADGE_ICON_SIZE = 12;
 export var Badge = function (_a) {
   var label = _a.label,
     _b = _a.type,
@@ -25,31 +26,19 @@ export var Badge = function (_a) {
     trailingIcon = _a.trailingIcon,
     _d = _a.size,
     size = _d === void 0 ? 'sm' : _d;
-  var sideSlotRender = function (slot) {
-    var _a, _b, _c, _d;
-    if (slot.type === 'icon') {
-      return _jsx(Icon, {
-        name: slot.icon,
-        height: (_a = slot.size) !== null && _a !== void 0 ? _a : svgSize[size],
-        width: (_b = slot.size) !== null && _b !== void 0 ? _b : svgSize[size],
-        color: slot.color ? COLOR[slot.color] : undefined
-      });
-    }
-    if (slot.type === 'dot') {
-      return _jsx(Dot, {
-        color: (_c = slot.color) !== null && _c !== void 0 ? _c : color,
-        size: (_d = slot.size) !== null && _d !== void 0 ? _d : 'sm'
-      });
-    }
-    return slot.children;
-  };
   return _jsxs("span", __assign({
     className: classNames('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
   }, {
-    children: [leadingIcon && sideSlotRender(leadingIcon), _jsx("span", __assign({
+    children: [leadingIcon && sideSlotRender({
+      slot: leadingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    }), _jsx("span", __assign({
       className: "ncua-badge__label"
     }, {
       children: label
-    })), trailingIcon && sideSlotRender(trailingIcon)]
+    })), trailingIcon && sideSlotRender({
+      slot: trailingIcon,
+      defaultIconSize: BADGE_ICON_SIZE
+    })]
   }));
 };

package/dist/esm/src/components/badge/BadgeGroup.js

@@ -0,0 +1,49 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Badge } from '.';
+import { sideSlotRender } from './utils';
+var DEFAULT_GROUP_ICON_SIZE = 14;
+export var BadgeGroup = function (_a) {
+  var groupLabel = _a.groupLabel,
+    groupIcon = _a.groupIcon,
+    groupClassName = _a.groupClassName,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size"]);
+  return _jsxs("span", __assign({
+    className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName)
+  }, {
+    children: [_jsx(Badge, __assign({
+      type: "pill-dark-color",
+      color: color,
+      size: size
+    }, props)), _jsx("span", __assign({
+      className: "ncua-badge-group__label"
+    }, {
+      children: groupLabel
+    })), groupIcon && sideSlotRender({
+      slot: groupIcon,
+      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
+    })]
+  }));
+};

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

@@ -1 +1,2 @@
-export * from './Badge';
+export * from './Badge';
+export * from './BadgeGroup';

package/dist/esm/src/components/badge/utils.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot/Dot';
+var DEFAULT_DOT_COLOR = 'neutral';
+export var sideSlotRender = function (_a) {
+  var _b, _c, _d, _e;
+  var slot = _a.slot,
+    defaultIconSize = _a.defaultIconSize;
+  if (slot.type === 'icon') {
+    return _jsx(Icon, {
+      name: slot.icon,
+      height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
+      width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,
+      color: slot.color ? COLOR[slot.color] : undefined
+    });
+  }
+  if (slot.type === 'dot') {
+    return _jsx(Dot, {
+      color: (_d = slot.color) !== null && _d !== void 0 ? _d : DEFAULT_DOT_COLOR,
+      size: (_e = slot.size) !== null && _e !== void 0 ? _e : 'sm'
+    });
+  }
+  return slot.children;
+};

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

@@ -17,10 +17,16 @@ export var Dropdown = function (_a) {
     align = _b === void 0 ? 'left' : _b,
     header = _a.header,
     groups = _a.groups,
-    className = _a.className;
-  var _c = useState(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
+    className = _a.className,
+    _c = _a.opened,
+    opened = _c === void 0 ? false : _c,
+    _d = _a.closeOnClickItem,
+    closeOnClickItem = _d === void 0 ? true : _d,
+    _e = _a.closeOnClickOutside,
+    closeOnClickOutside = _e === void 0 ? true : _e;
+  var _f = useState(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
   var dropdownRef = useRef(null);
   var toggleDropdown = function () {
     setIsOpen(!isOpen);
@@ -33,15 +39,19 @@ export var Dropdown = function (_a) {
   var handleClickItem = function (item) {
     if (!item.disabled && item.onClick) {
       item.onClick();
-      setIsOpen(false);
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
     }
   };
   useEffect(function () {
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
   var renderTrigger = function () {
     switch (trigger.type) {
       case 'custom':

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

@@ -109,7 +109,7 @@ Modal.Header = function (_a) {
         onClick: onClose
       }, {
         children: _jsx(Icon, {
-          name: "x"
+          name: "x-close"
         })
       }))]
     })), showDivider && _jsx("div", {

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

@@ -0,0 +1,15 @@
+import { ColorTone } from 'ui-admin/constant/color';
+import { BadgeProps } from '.';
+import { Size } from '../../../constant/size';
+import { SideSlotType } from '../../types/side-slot';
+export type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
+export type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
+export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
+    groupLabel: string;
+    groupIcon?: SideSlotType;
+    groupClassName?: string;
+    size?: BadgeGroupSize;
+    color?: BadgeGroupColor;
+};
+export declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BadgeGroup.d.ts.map

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

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

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

@@ -0,0 +1,7 @@
+import { SideSlotType } from '../../types/side-slot';
+export type SideSlotRenderProps = {
+    slot: SideSlotType;
+    defaultIconSize: number;
+};
+export declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => any;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -108,7 +108,7 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
@@ -387,7 +387,7 @@ export declare const ButtonGroup: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "step" | "date" | "page" | "location" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;

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

@@ -44,10 +44,13 @@ export type TextHeader = {
 export type DropdownHeaderType = AvatarHeader | TextHeader;
 export type DropdownProps = {
     trigger: AvatarTrigger | TextTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    opened?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnClickItem?: boolean;
     align?: 'left' | 'right';
     header?: DropdownHeaderType;
     groups: DropdownGroup[];
     className?: string;
 };
-export declare const Dropdown: ({ trigger, align, header, groups, className }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ trigger, align, header, groups, className, opened, closeOnClickItem, closeOnClickOutside, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Dropdown.d.ts.map

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

@@ -1,7 +1,7 @@
 import 'swiper/css';
 import { TabButtonProps, TabType } from './TabButton';
 export type HorizontalTabProps = {
-    type?: TabType;
+    type?: Exclude<TabType, 'line-vertical'>;
     size?: 'xs' | 'sm' | 'md';
     activeTab?: string;
     fullWidth?: boolean;

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

@@ -501,6 +501,7 @@ button {
   color: var(--gray-400);
 }
 .ncua-button-group__item {
+  position: relative;
   cursor: pointer;
   color: inherit;
   border: none;
@@ -516,7 +517,6 @@ button {
   text-decoration: none;
 }
 .ncua-button-group__item[href]:hover {
-  color: inherit;
   text-decoration: none;
 }
 .ncua-button-group__item:first-child {
@@ -525,41 +525,16 @@ button {
 .ncua-button-group__item:last-child {
   padding-right: 0;
 }
-.ncua-button-group__item.is-disabled {
-  color: var(--gray-200);
-}
-.ncua-button-group__item.is-current {
+.ncua-button-group__item.is-current, .ncua-button-group__item:hover, .ncua-button-group__item:focus {
   color: var(--gray-600);
 }
-:where(.ncua-button-group.has-border) {
-  box-shadow: var(--shadow-xs);
-  border: 1px solid var(--gray-200);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
-  background-color: var(--gray-50);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item:focus {
-  color: var(--gray-600);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item.is-current {
-  color: var(--gray-600);
-  background-color: var(--gray-50);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
-  border-left: 1px solid var(--gray-200);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
-  display: block;
-}
-
-.ncua-button-group:not(.has-border) .ncua-button-group__item {
-  position: relative;
-  background-color: transparent;
+.ncua-button-group__item:disabled, .ncua-button-group__item:disabled:hover, .ncua-button-group__item:disabled:focus, .ncua-button-group__item.is-disabled, .ncua-button-group__item.is-disabled:hover, .ncua-button-group__item.is-disabled:focus {
+  color: var(--gray-200);
 }
-.ncua-button-group:not(.has-border) .ncua-button-group__item:not(:last-child):after {
+.ncua-button-group__item + .ncua-button-group__item::after {
   content: "";
   position: absolute;
-  right: 0;
+  left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
@@ -572,7 +547,10 @@ button {
   line-height: var(--line-heights-xxxs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--xs .ncua-button-group__item.is-only-icon {
+:where(.ncua-button-group--xs .ncua-button-group__item.is-current, .ncua-button-group--xs .ncua-button-group__item:hover, .ncua-button-group--xs .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--xs .ncua-button-group__item:where(.is-only-icon) {
   padding: 6px;
 }
 :where(.ncua-button-group--xs.has-border) {
@@ -585,7 +563,10 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--sm .ncua-button-group__item.is-only-icon {
+:where(.ncua-button-group--sm .ncua-button-group__item.is-current, .ncua-button-group--sm .ncua-button-group__item:hover, .ncua-button-group--sm .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--sm .ncua-button-group__item:where(.is-only-icon) {
   padding: 6px;
 }
 :where(.ncua-button-group--sm.has-border) {
@@ -593,12 +574,15 @@ button {
 }
 
 .ncua-button-group--md .ncua-button-group__item {
-  padding: 7px 16px;
+  padding: 6px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--md .ncua-button-group__item.is-only-icon {
+:where(.ncua-button-group--md .ncua-button-group__item.is-current, .ncua-button-group--md .ncua-button-group__item:hover, .ncua-button-group--md .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
   padding: 10px;
 }
 :where(.ncua-button-group--md.has-border) {
@@ -611,13 +595,33 @@ button {
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
-.ncua-button-group--lg .ncua-button-group__item.is-only-icon {
+:where(.ncua-button-group--lg .ncua-button-group__item.is-current, .ncua-button-group--lg .ncua-button-group__item:hover, .ncua-button-group--lg .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-button-group--lg .ncua-button-group__item:where(.is-only-icon) {
   padding: 10px;
 }
 :where(.ncua-button-group--lg.has-border) {
   border-radius: 8px;
 }
 
+:where(.ncua-button-group.has-border) {
+  box-shadow: var(--shadow-xs);
+  border: 1px solid var(--gray-200);
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item + .ncua-button-group__item::after {
+  content: none;
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item.is-current, :where(.ncua-button-group.has-border) .ncua-button-group__item:focus, :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
+  background-color: var(--gray-50);
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
+  border-left: 1px solid var(--gray-200);
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
+  display: block;
+}
+
 .ncua-btn-close {
   display: inline-flex;
   align-items: center;
@@ -665,6 +669,7 @@ button {
   height: 16px;
   line-height: 1;
   background-color: var(--base-white);
+  border-radius: 4px;
 }
 .ncua-checkbox-input :where(input) {
   position: absolute;
@@ -976,8 +981,9 @@ button {
   cursor: pointer;
   padding: 0;
   background: none;
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .ncua-dropdown__trigger--icon {
   width: 20px;
@@ -1196,12 +1202,6 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  line-height: 1;
 }
 .ncua-input__field--xs {
   padding: 5px 10px;
@@ -1209,6 +1209,14 @@ button {
 .ncua-input__field--md {
   padding: 6px 12px;
 }
+.ncua-input__field {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1;
+}
 .ncua-input:focus-within :where(.ncua-input__field) {
   border-color: var(--gray-400);
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
@@ -1348,10 +1356,6 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
-  border-radius: 6px 0 0 6px;
-  border-right-width: 0;
-  color: var(--gray-400);
-  font-size: var(--font-size-sm);
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
   padding: 5px 10px;
@@ -1359,9 +1363,16 @@ button {
 .ncua-input__leading-text-wrap .ncua-input__leading-text--md {
   padding: 6px 12px;
 }
+.ncua-input__leading-text-wrap .ncua-input__leading-text {
+  border-radius: 6px 0 0 6px;
+  border-right-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
 .ncua-input__leading-text-wrap .ncua-input__leading-text + .ncua-input__field {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  margin-left: -1px;
 }
 
 .ncua-input__trailing-button .ncua-input__button {
@@ -1369,10 +1380,6 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
-  border-radius: 0 6px 6px 0;
-  border-left-width: 0;
-  color: var(--gray-700);
-  font-weight: var(--font-weights-commerce-sans-2);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
   padding: 5px 10px;
@@ -1380,6 +1387,12 @@ button {
 .ncua-input__trailing-button .ncua-input__button--md {
   padding: 6px 12px;
 }
+.ncua-input__trailing-button .ncua-input__button {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-700);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
 .ncua-input__trailing-button .ncua-input__button:not(:disabled) {
   cursor: pointer;
 }
@@ -1398,6 +1411,7 @@ button {
 .ncua-input__trailing-button .ncua-input__field {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  margin-right: -1px;
 }
 
 .ncua-input--textarea {
@@ -2015,6 +2029,7 @@ button {
   height: 16px;
   line-height: 1;
   background-color: var(--base-white);
+  border-radius: 50%;
 }
 .ncua-radio-input :where(input) {
   position: absolute;
@@ -2168,6 +2183,8 @@ button {
 
 .ncua-tooltip {
   position: relative;
+}
+.ncua-tooltip {
   font-size: var(--font-size-xxs);
 }
 .ncua-tooltip svg {
@@ -2319,23 +2336,23 @@ button {
 }
 
 .ncua-select__content {
-  position: relative;
   display: flex;
   align-items: center;
   padding-inline-start: 14px;
   border: 1px solid var(--gray-200);
   background-color: var(--base-white);
   overflow: hidden;
+  position: relative;
 }
 .ncua-select__content::after {
-  position: absolute;
-  top: 50%;
-  right: 10px;
   width: 14px;
   height: 14px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   content: "";
   transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  right: 10px;
 }
 .ncua-select__icon {
   margin-right: 8px;
@@ -2371,9 +2388,12 @@ button {
 .ncua-select--xs > .ncua-select__tag {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xs);
 }
 .ncua-select--xs + .ncua-hint-text {
   margin-block-start: 4px;
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
 }
 .ncua-select--sm {
   height: var(--select-height-sm);
@@ -2383,9 +2403,12 @@ button {
 .ncua-select--sm > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-sm);
 }
 .ncua-select--sm + .ncua-hint-text {
   margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
 }
 .ncua-select--sm.ncua-select__content::after {
   width: 16px;
@@ -2401,9 +2424,12 @@ button {
 .ncua-select--md > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-sm);
 }
 .ncua-select--md + .ncua-hint-text {
   margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
 }
 .ncua-select--md.ncua-select__content::after {
   width: 16px;
@@ -2413,9 +2439,7 @@ button {
 .ncua-select--simple .ncua-select__content {
   padding-inline-start: 0;
   border: 0;
-}
-.ncua-select--simple .ncua-select__content::after {
-  right: 0;
+  background-color: transparent;
 }
 .ncua-select--simple .ncua-select--xs {
   min-width: auto;
@@ -2432,14 +2456,6 @@ button {
   height: var(--select-simple-height-md);
   border-radius: 0;
 }
-.ncua-select--simple select {
-  padding-right: 18px;
-}
-.ncua-select .ncua-hint-text {
-  font-size: var(--font-size-xxs);
-  line-height: var(--line-heights-xxs);
-  color: var(--gray-400);
-}
 
 .ncua-pagination {
   display: flex;
@@ -3208,6 +3224,64 @@ button {
   background-color: var(--gray-100);
 }
 
+.ncua-badge-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px 4px 4px;
+  border-radius: 16px;
+}
+.ncua-badge-group__label {
+  margin-left: 8px;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-badge-group svg {
+  margin-left: 4px;
+}
+.ncua-badge-group.ncua-badge-group--neutral {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-100);
+}
+.ncua-badge-group.ncua-badge-group--neutral:hover {
+  background-color: var(--gray-100);
+  border-color: var(--gray-200);
+}
+.ncua-badge-group.ncua-badge-group--error {
+  color: var(--primary-red-600);
+  background-color: var(--primary-red-50);
+  border: 1px solid var(--primary-red-100);
+}
+.ncua-badge-group.ncua-badge-group--error:hover {
+  background-color: var(--primary-red-100);
+  border-color: var(--primary-red-200);
+}
+.ncua-badge-group.ncua-badge-group--warning {
+  color: var(--orange-600);
+  background-color: var(--orange-50);
+  border: 1px solid var(--orange-100);
+}
+.ncua-badge-group.ncua-badge-group--warning:hover {
+  background-color: var(--orange-100);
+  border-color: var(--orange-200);
+}
+.ncua-badge-group.ncua-badge-group--success {
+  color: var(--green-600);
+  background-color: var(--green-50);
+  border: 1px solid var(--green-100);
+}
+.ncua-badge-group.ncua-badge-group--success:hover {
+  background-color: var(--green-100);
+  border-color: var(--green-200);
+}
+.ncua-badge-group.ncua-badge-group--xs {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-badge-group.ncua-badge-group--sm {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+
 .ncua-progress-bar {
   position: relative;
   display: flex;
@@ -3307,7 +3381,7 @@ button {
   color: var(--gray-400);
   border-radius: 6px;
   cursor: pointer;
-  background-color: var(--base-white);
+  background-color: transparent;
 }
 .ncua-tab-button:hover, .ncua-tab-button.is-active {
   color: var(--gray-700);
@@ -3333,6 +3407,18 @@ button {
 .ncua-tab-button--button-primary:focus {
   box-shadow: var(--focus-ring-4px-gray-100);
 }
+.ncua-tab-button--button-white.ncua-tab-button--xs {
+  padding: 5px 12px;
+  height: 28px;
+}
+.ncua-tab-button--button-white.ncua-tab-button--sm {
+  padding: 7px 12px;
+  height: 32px;
+}
+.ncua-tab-button--button-white.ncua-tab-button--md {
+  padding: 9px 14px;
+  height: 40px;
+}
 .ncua-tab-button--button-white:hover {
   box-shadow: var(--shadow-sm);
 }
@@ -3340,9 +3426,6 @@ button {
   color: var(--gray-500);
   box-shadow: var(--shadow-sm);
 }
-.ncua-tab-button--button-white:focus {
-  box-shadow: var(--shadow-sm-focused-4px-gray-100);
-}
 .ncua-tab-button--underline-fill {
   position: relative;
   border-radius: 0;
@@ -3351,13 +3434,13 @@ button {
   background-color: var(--gray-100);
 }
 .ncua-tab-button--underline-fill:hover::before, .ncua-tab-button--underline-fill.is-active::before, .ncua-tab-button--underline-fill.is-active:focus::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
   width: 100%;
   height: 2px;
   content: "";
   background-color: var(--gray-500);
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 .ncua-tab-button--underline {
   border-radius: 0;
@@ -3366,13 +3449,13 @@ button {
   position: relative;
 }
 .ncua-tab-button--underline:hover::before, .ncua-tab-button--underline.is-active::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
   width: 100%;
   height: 2px;
   content: "";
   background-color: var(--gray-500);
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 .ncua-tab-button--line-vertical {
   border-radius: 0;
@@ -3397,12 +3480,6 @@ button {
   content: "";
   background-color: var(--gray-100);
 }
-:where(.ncua-horizontal-tab--underline, .ncua-horizontal-tab--underline-fill) .ncua-tab-button {
-  background-color: transparent;
-}
-.ncua-horizontal-tab--button-primary .swiper-slide, .ncua-horizontal-tab--button-white .swiper-slide {
-  padding: 4px 0;
-}
 .ncua-horizontal-tab--button-primary .swiper-slide:first-child, .ncua-horizontal-tab--button-white .swiper-slide:first-child {
   padding-left: 4px;
 }
@@ -3410,17 +3487,23 @@ button {
   padding-right: 4px;
   margin-right: 0;
 }
+.ncua-horizontal-tab--button-primary .swiper-slide {
+  padding: 4px 0;
+}
 .ncua-horizontal-tab--button-white {
   display: inline-block;
   background: var(--gray-50);
   border: 1px solid var(--gray-100);
   border-radius: 8px;
 }
+.ncua-horizontal-tab--button-white .swiper-slide {
+  padding: 3px 0;
+}
 .ncua-horizontal-tab--button-white .ncua-tab-button {
   background-color: var(--gray-50);
 }
 .ncua-horizontal-tab--button-white .ncua-tab-button:hover, .ncua-horizontal-tab--button-white .ncua-tab-button.is-active {
-  background-color: #fff;
+  background-color: var(--base-white);
   border-radius: 6px;
   box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
   color: var(--gray-500);
@@ -3428,6 +3511,9 @@ button {
 .ncua-horizontal-tab--fullWidth {
   width: 100%;
 }
+.ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
+  width: 100% !important;
+}
 .ncua-horizontal-tab--fullWidth .swiper-slide {
   flex-shrink: 1;
 }
@@ -3456,6 +3542,9 @@ button {
   box-shadow: var(--shadow-sm);
   color: var(--gray-500);
 }
+.ncua-vertical-tab .ncua-tab-button {
+  justify-content: flex-start;
+}
 
 .ncua-progress-circle {
   position: relative;

package/package.json

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