@ncds/ui-admin 0.0.30 → 0.0.31

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

@@ -593,7 +593,7 @@ 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);
@@ -3307,7 +3307,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 +3333,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);
 }
@@ -3397,9 +3409,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;
 }
@@ -3420,7 +3429,7 @@ 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 +3437,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 +3468,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.31",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",