@ncds/ui-admin 0.0.29 → 0.0.31

package/dist/cjs/constant/color.js

@@ -22,7 +22,6 @@ var COLOR = exports.COLOR = {
   pink100: '#fce7f6',
   pink600: '#c11574',
   yellow600: '#c27004',
-  violet600: '#5720b7',
   white: '#fff',
   currentColor: 'currentColor',
   black: '',

package/dist/esm/constant/color.js

@@ -16,7 +16,6 @@ export var COLOR = {
   pink100: '#fce7f6',
   pink600: '#c11574',
   yellow600: '#c27004',
-  violet600: '#5720b7',
   white: '#fff',
   currentColor: 'currentColor',
   black: '',

package/dist/types/constant/color.d.ts

@@ -16,7 +16,6 @@ export declare const COLOR: {
     pink100: string;
     pink600: string;
     yellow600: string;
-    violet600: string;
     white: string;
     currentColor: string;
     black: string;
@@ -31,5 +30,5 @@ export declare const COLOR: {
     'secondary-gray-blue-700': string;
 };
 export type ColorKeyType = keyof typeof COLOR;
-export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'violet' | 'disabled';
+export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled';
 //# sourceMappingURL=color.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

@@ -51,14 +51,6 @@
   --orange-500: #e4501e;
   --orange-600: #b93815;
   --orange-700: #772917;
-  --violet-50: #fbfaff;
-  --violet-100: #ece9fe;
-  --violet-200: #ddd6fe;
-  --violet-300: #c3b5fd;
-  --violet-400: #a48afb;
-  --violet-500: #6927da;
-  --violet-600: #5720b7;
-  --violet-700: #3e1486;
   --focus-ring-4px-primary-100: 0px 0px 0px 3px #ffeaee;
   --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
   --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
@@ -541,8 +533,6 @@ button {
 }
 :where(.ncua-button-group.has-border) {
   box-shadow: var(--shadow-xs);
-}
-:where(.ncua-button-group.has-border) .ncua-button-group__item {
   border: 1px solid var(--gray-200);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
@@ -556,7 +546,7 @@ button {
   background-color: var(--gray-50);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
-  border-inline-start-width: 0;
+  border-left: 1px solid var(--gray-200);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item svg {
   display: block;
@@ -585,13 +575,8 @@ button {
 .ncua-button-group--xs .ncua-button-group__item.is-only-icon {
   padding: 6px;
 }
-:where(.ncua-button-group--xs.has-border) .ncua-button-group__item:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-:where(.ncua-button-group--xs.has-border) .ncua-button-group__item:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+:where(.ncua-button-group--xs.has-border) {
+  border-radius: 4px;
 }
 
 .ncua-button-group--sm .ncua-button-group__item {
@@ -603,17 +588,12 @@ button {
 .ncua-button-group--sm .ncua-button-group__item.is-only-icon {
   padding: 6px;
 }
-:where(.ncua-button-group--sm.has-border) .ncua-button-group__item:first-child {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-:where(.ncua-button-group--sm.has-border) .ncua-button-group__item:last-child {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+:where(.ncua-button-group--sm.has-border) {
+  border-radius: 6px;
 }
 
 .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);
@@ -621,13 +601,8 @@ button {
 .ncua-button-group--md .ncua-button-group__item.is-only-icon {
   padding: 10px;
 }
-:where(.ncua-button-group--md.has-border) .ncua-button-group__item:first-child {
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-:where(.ncua-button-group--md.has-border) .ncua-button-group__item:last-child {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
+:where(.ncua-button-group--md.has-border) {
+  border-radius: 6px;
 }
 
 .ncua-button-group--lg .ncua-button-group__item {
@@ -639,13 +614,8 @@ button {
 .ncua-button-group--lg .ncua-button-group__item.is-only-icon {
   padding: 10px;
 }
-:where(.ncua-button-group--lg.has-border) .ncua-button-group__item:first-child {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-:where(.ncua-button-group--lg.has-border) .ncua-button-group__item:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
+:where(.ncua-button-group--lg.has-border) {
+  border-radius: 8px;
 }
 
 .ncua-btn-close {
@@ -994,9 +964,6 @@ button {
 .ncua-dot--pink {
   background-color: var(--pink-500);
 }
-.ncua-dot--violet {
-  background-color: var(--violet-500);
-}
 .ncua-dot--disabled {
   background-color: var(--gray-300);
 }
@@ -3340,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);
@@ -3366,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);
 }
@@ -3430,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;
 }
@@ -3453,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);
@@ -3461,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;
 }
@@ -3489,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.29",
+  "version": "0.0.31",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",