@ncds/ui-admin 1.8.24 → 1.8.25-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,4 +16,4 @@ type BadgeProps = {
16
16
  };
17
17
  declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
18
18
  export { Badge };
19
- export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
19
+ export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
@@ -4,8 +4,10 @@ interface BreadcrumbItemProps {
4
4
  }
5
5
  interface BreadcrumbProps {
6
6
  items: BreadcrumbItemProps[];
7
+ /** 첫 항목을 홈 아이콘으로 렌더링할지 여부. false 이면 label 텍스트로 렌더링한다. */
8
+ showHomeIcon?: boolean;
7
9
  className?: string;
8
10
  }
9
- declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
11
+ declare const BreadCrumb: ({ items, showHomeIcon, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
10
12
  export { BreadCrumb };
11
13
  export type { BreadcrumbItemProps, BreadcrumbProps };
@@ -67,9 +67,6 @@
67
67
  --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
68
68
  --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
69
69
  --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
70
- --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
71
- --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
72
- --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
73
70
  --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
74
71
  --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
75
72
  --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -327,7 +324,7 @@ button {
327
324
  background-color: var(--primary-red-450);
328
325
  border: 1px solid var(--primary-red-500);
329
326
  color: var(--base-white);
330
- box-shadow: var(--shadow-xs-focused-4px-primary-100);
327
+ box-shadow: var(--shadow-sm-focused-4px-primary-100);
331
328
  }
332
329
  .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
333
330
  background-color: var(--primary-red-100);
@@ -373,7 +370,7 @@ button {
373
370
  background-color: var(--base-white);
374
371
  border: 1px solid var(--gray-200);
375
372
  color: var(--gray-700);
376
- box-shadow: var(--shadow-xs-focused-4px-gray-100);
373
+ box-shadow: var(--shadow-sm-focused-4px-gray-100);
377
374
  }
378
375
  .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
379
376
  background-color: var(--base-white);
@@ -959,7 +956,7 @@ button {
959
956
  }
960
957
  .ncua-checkbox-input.destructive :where(input):focus {
961
958
  border-color: var(--primary-red-600);
962
- box-shadow: var(--shadow-xs-focused-4px-error-100);
959
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
963
960
  }
964
961
  .ncua-checkbox-input:hover {
965
962
  border-color: var(--gray-600);
@@ -1740,7 +1737,7 @@ button {
1740
1737
  border-color: var(--primary-red-600);
1741
1738
  }
1742
1739
  .ncua-input.destructive:where(:focus-within) .ncua-input__field {
1743
- box-shadow: var(--shadow-xs-focused-4px-error-100);
1740
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
1744
1741
  }
1745
1742
  .ncua-input.is-disabled .ncua-input__content > :not(button) {
1746
1743
  background-color: var(--gray-50);
@@ -1930,7 +1927,7 @@ button {
1930
1927
  border-color: var(--primary-red-600);
1931
1928
  }
1932
1929
  .ncua-input--textarea.destructive textarea:focus {
1933
- box-shadow: var(--shadow-xs-focused-4px-error-100);
1930
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
1934
1931
  }
1935
1932
 
1936
1933
  .ncua-input--textarea--xs textarea {
@@ -3192,7 +3189,7 @@ button {
3192
3189
  }
3193
3190
  .ncua-radio-input.destructive :where(input):focus {
3194
3191
  border-color: var(--primary-red-600);
3195
- box-shadow: var(--shadow-xs-focused-4px-error-100);
3192
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
3196
3193
  }
3197
3194
 
3198
3195
  .ncua-radio-field {
@@ -3694,7 +3691,7 @@ button {
3694
3691
  border-color: var(--primary-red-600);
3695
3692
  }
3696
3693
  .ncua-select.destructive .ncua-select__content:focus-within {
3697
- box-shadow: var(--shadow-xs-focused-4px-error-100);
3694
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
3698
3695
  }
3699
3696
  .ncua-select--xs .ncua-select__content {
3700
3697
  height: var(--select-height-xs);
@@ -4035,7 +4032,7 @@ button {
4035
4032
  border-color: var(--primary-red-600);
4036
4033
  }
4037
4034
  .ncua-selectbox.destructive .ncua-selectbox__content:focus {
4038
- box-shadow: var(--shadow-xs-focused-4px-error-100);
4035
+ box-shadow: var(--shadow-sm-focused-4px-error-100);
4039
4036
  }
4040
4037
  .ncua-selectbox--xs .ncua-selectbox__content {
4041
4038
  height: var(--select-height-xs);
@@ -5197,7 +5194,7 @@ button {
5197
5194
  font-weight: var(--font-weights-commerce-sans-1);
5198
5195
  cursor: pointer;
5199
5196
  }
5200
- .ncua-breadcrumb__list-item:first-child {
5197
+ .ncua-breadcrumb__list-item--home {
5201
5198
  height: 24px;
5202
5199
  padding: 4px;
5203
5200
  }
@@ -5328,15 +5325,16 @@ button {
5328
5325
  justify-content: center;
5329
5326
  color: var(--pink-600);
5330
5327
  background-color: var(--pink-200);
5331
- border-radius: 5px;
5332
5328
  }
5333
5329
  .ncua-badge--new-badge-sm {
5334
5330
  width: 16px;
5335
5331
  height: 16px;
5332
+ border-radius: 3px;
5336
5333
  }
5337
5334
  .ncua-badge--new-badge-md {
5338
5335
  width: 20px;
5339
5336
  height: 20px;
5337
+ border-radius: 4px;
5340
5338
  }
5341
5339
 
5342
5340
  .ncua-badge-group {
@@ -6598,7 +6596,7 @@ button {
6598
6596
  bottom: 0;
6599
6597
  width: 3px;
6600
6598
  background: var(--base-black);
6601
- z-index: 1;
6599
+ z-index: var(--z-index-1);
6602
6600
  }
6603
6601
  .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
6604
6602
  background: var(--orange-50);
@@ -6743,7 +6741,7 @@ button {
6743
6741
  .ncua-table--fixed-header .ncua-table__header-cell {
6744
6742
  position: sticky;
6745
6743
  top: 0;
6746
- z-index: 10;
6744
+ z-index: var(--z-index-sticky);
6747
6745
  padding: 0 var(--spacing-m);
6748
6746
  height: var(--ncua-table-header-height);
6749
6747
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncds/ui-admin",
3
- "version": "1.8.24",
3
+ "version": "1.8.25-alpha.0",
4
4
  "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
5
5
  "scripts": {
6
6
  "barrel": "node barrel.js",
@@ -78,7 +78,7 @@
78
78
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
79
79
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
80
80
  "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
81
- "@ncds/ui-admin-icon": "0.1.13",
81
+ "@ncds/ui-admin-icon": "0.1.12",
82
82
  "classnames": "2.5.1",
83
83
  "dompurify": "3.4.12",
84
84
  "flatpickr": "4.6.13",