@ncds/ui-admin 1.5.4 → 1.6.0

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

@@ -1,10 +1,10 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import { BadgeProps } from '../badge/Badge';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { type BadgeProps } from '../badge/Badge';
 export type TabSize = 'sm' | 'md' | 'lg';
 export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {
     id?: string;
-    label: string;
+    label?: string;
     size?: TabSize;
     tabButtonType?: TabType;
     isActive?: boolean;

package/dist/types/src/components/tag/Tag.d.ts

@@ -1,6 +1,6 @@
-import { MouseEventHandler } from 'react';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
+import { type MouseEventHandler } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
 interface TagProps {
     size?: Extract<Size, 'sm' | 'md'>;
     icon?: SideSlotType;

package/dist/types/src/types/dropdown/option.d.ts

@@ -4,6 +4,10 @@
 export type OptionType = {
     id: string | number;
     label: string;
+    icon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+    }>;
 };
 /**
  * 옵션 값 타입 (단일 또는 다중 선택)

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

@@ -1,2 +1,3 @@
 export * from './dropdown';
+export type * from './side-slot';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1368,9 +1368,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__field--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__field--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__field:has(.ncua-input__stepper-button-group ~ .ncua-input__number) {
@@ -1563,9 +1565,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text {
@@ -1588,9 +1592,11 @@ button {
   padding: 4px 10px;
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
+  line-height: var(--line-heights-xs);
   padding: 4px 10px;
 }
 .ncua-input__trailing-button .ncua-input__button--sm {
+  line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
 .ncua-input__trailing-button .ncua-input__button {
@@ -1603,19 +1609,19 @@ button {
   cursor: pointer;
 }
 .ncua-input__trailing-button .ncua-input__button {
-  padding: 5px 10px;
+  padding: 4px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--sm {
-  padding: 7px 14px;
+  padding: 6px 12px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
@@ -3155,6 +3161,10 @@ button {
 .ncua-select-dropdown--up {
   bottom: calc(100% + 4px);
 }
+.ncua-select-dropdown--align-right {
+  left: initial;
+  right: 0;
+}
 .ncua-select-dropdown__content {
   padding: 8px 6px;
 }
@@ -3188,6 +3198,10 @@ button {
   transition: background-color 0.15s ease, color 0.15s ease;
   position: relative;
   border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--gray-600);
 }
 .ncua-select-dropdown__option:hover, .ncua-select-dropdown__option--focused {
   background-color: var(--gray-50);
@@ -3195,10 +3209,15 @@ button {
 .ncua-select-dropdown__option--selected {
   background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24' stroke='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 8px center;
 }
-.ncua-select-dropdown__option__option-text {
+.ncua-select-dropdown__option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+.ncua-select-dropdown__option-text {
   display: inline-block;
   max-width: 327px;
-  color: var(--gray-600);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3274,6 +3293,17 @@ button {
   content: attr(data-placeholder);
   color: var(--gray-400);
 }
+.ncua-selectbox__value-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-selectbox__value-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
 .ncua-selectbox__chevron {
   position: absolute;
   right: 8px;

package/package.json

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