@ncds/ui-admin 1.8.8 → 1.8.11

package/dist/types/src/components/navigation/context-tab/ContextTab.d.ts

@@ -0,0 +1,18 @@
+interface ContextTabItemProps {
+    id: string;
+    label: string;
+    isNew?: boolean;
+    /** pill-outline 배지로 표시할 텍스트. 있으면 비신규 항목에도 배지를 노출한다. */
+    badgeLabel?: string;
+    disabled?: boolean;
+}
+interface ContextTabProps {
+    menus?: ContextTabItemProps[];
+    activeTab?: string;
+    onTabChange?: (id: string) => void;
+    visibleTabsCount?: number;
+    className?: string;
+}
+declare const ContextTab: ({ menus, activeTab, onTabChange, visibleTabsCount, className, }: ContextTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export { ContextTab };
+export type { ContextTabItemProps, ContextTabProps };

package/dist/types/src/components/navigation/context-tab/index.d.ts

@@ -0,0 +1 @@
+export * from './ContextTab';

package/dist/types/src/components/navigation/context-tab/useContextTabScroll.d.ts

@@ -0,0 +1,22 @@
+interface UseContextTabScrollParams {
+    activeTab?: string;
+    menus: {
+        id: string;
+    }[];
+    visibleTabsCount: number;
+}
+/**
+ * ContextTab Tab Bar의 네이티브 가로 스크롤·페이징 메커니즘을 담당하는 훅.
+ *
+ * - `barRef`: 스크롤 컨테이너(ref)
+ * - `isBeginning` / `isEnd`: 좌/우 네비 버튼의 disabled 판정
+ * - `scrollByPage`: `<` `>` 클릭 시 한 페이지(보이는 폭)만큼 이동 — scroll-snap이 탭 경계에 맞춰 정렬
+ * - `activeTab` 변경 시 해당 탭이 보이는 페이지로 자동 스크롤
+ */
+export declare const useContextTabScroll: ({ activeTab, menus, visibleTabsCount }: UseContextTabScrollParams) => {
+    barRef: import("react").RefObject<HTMLDivElement>;
+    isBeginning: boolean;
+    isEnd: boolean;
+    scrollByPage: (direction: 1 | -1) => void;
+};
+export {};

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

@@ -5017,6 +5017,20 @@ button {
   color: var(--gray-300);
   background-color: var(--gray-100);
 }
+.ncua-badge--new-badge {
+  justify-content: center;
+  color: var(--pink-600);
+  background-color: var(--pink-200);
+  border-radius: 5px;
+}
+.ncua-badge--new-badge-sm {
+  width: 16px;
+  height: 16px;
+}
+.ncua-badge--new-badge-md {
+  width: 20px;
+  height: 20px;
+}
 
 .ncua-badge-group {
   display: inline-flex;
@@ -5508,6 +5522,164 @@ button {
   box-shadow: -2px 0 var(--gray-700);
 }
 
+.ncua-context-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 4px;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background-color: var(--gray-100);
+}
+.ncua-context-tab__bar {
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+  padding-block: 4px;
+  padding-inline-end: 4px;
+  margin-inline-end: -4px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.ncua-context-tab__bar::-webkit-scrollbar {
+  display: none;
+}
+.ncua-context-tab__bar.is-fill .ncua-context-tab__tab {
+  flex: 1 1 0;
+}
+.ncua-context-tab__tab {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex: 0 0 calc((100% - (var(--ncua-context-tab-visible, 7) - 1) * 8px) / var(--ncua-context-tab-visible, 7));
+  min-width: 0;
+  scroll-snap-align: start;
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  font-weight: 700;
+  color: var(--gray-400);
+  white-space: nowrap;
+}
+.ncua-context-tab__tab-label {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  min-width: 0;
+}
+.ncua-context-tab__tab:hover {
+  color: var(--gray-500);
+}
+.ncua-context-tab__tab.is-active {
+  color: var(--gray-700);
+}
+.ncua-context-tab__tab.is-disabled, .ncua-context-tab__tab:disabled {
+  color: var(--gray-300);
+  cursor: not-allowed;
+}
+.ncua-context-tab__tab.is-disabled:hover, .ncua-context-tab__tab:disabled:hover {
+  background-color: transparent;
+  box-shadow: none;
+}
+.ncua-context-tab__control {
+  flex-shrink: 0;
+}
+.ncua-context-tab__control--menu.ncua-btn--xs, .ncua-context-tab__control--prev.ncua-btn--xs, .ncua-context-tab__control--next.ncua-btn--xs {
+  width: 32px;
+  height: 32px;
+  transition: none;
+}
+.ncua-context-tab__tab:hover, .ncua-context-tab__tab.is-active, .ncua-context-tab__control--menu.ncua-btn--xs[aria-expanded]:hover, .ncua-context-tab__control--menu.ncua-btn--xs[aria-expanded=true], .ncua-context-tab__control--prev.ncua-btn--xs:not(.is-disable):hover, .ncua-context-tab__control--next.ncua-btn--xs:not(.is-disable):hover {
+  background-color: var(--base-white);
+  box-shadow: var(--shadow-sm);
+}
+.ncua-context-tab__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.ncua-context-tab__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  z-index: 10;
+  display: flex;
+  width: 100%;
+  max-height: 188px;
+  overflow-y: auto;
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  background-color: var(--base-white);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-context-tab__panel-column {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 4px 0;
+  list-style: none;
+  margin: 0;
+}
+.ncua-context-tab__panel-column li {
+  padding: 2px 6px;
+}
+.ncua-context-tab__option {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 120px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: 500;
+  color: var(--gray-500);
+  text-align: left;
+}
+.ncua-context-tab__option-label {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  min-width: 0;
+}
+.ncua-context-tab__option-check {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  color: var(--gray-700);
+}
+.ncua-context-tab__option:hover {
+  background-color: var(--gray-50);
+}
+.ncua-context-tab__option:disabled {
+  color: var(--gray-300);
+  cursor: not-allowed;
+}
+.ncua-context-tab__option:disabled:hover {
+  background-color: transparent;
+}
+.ncua-context-tab .ncua-badge {
+  flex-shrink: 0;
+}
+
 .ncua-progress-circle {
   position: relative;
   display: inline-flex;
@@ -5965,6 +6137,8 @@ button {
 }
 
 .ncua-table {
+  --ncua-table-header-height: 40px;
+  --ncua-table-default-min-width: 1140px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -6357,6 +6531,24 @@ button {
   align-items: center;
   line-height: 1;
 }
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:first-child {
+  width: auto;
+  min-width: 0;
+  max-width: none;
+  padding: 0 var(--spacing-m);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+  text-align: center;
+  background: var(--gray-100);
+  border-right: 1px solid var(--gray-200);
+}
+.ncua-table--vertical .ncua-table .ncua-table__header > .ncua-table__row th:last-child {
+  padding: 0 var(--spacing-m);
+  text-align: center;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
   width: auto;
@@ -6501,7 +6693,15 @@ button {
   border: 1px solid var(--gray-100);
   border-radius: 12px;
   box-shadow: var(--shadow-sm);
-  overflow: hidden;
+}
+.ncua-block-container > *:first-child {
+  border-radius: 12px 12px 0 0;
+}
+.ncua-block-container > *:last-child {
+  border-radius: 0 0 12px 12px;
+}
+.ncua-block-container > *:only-child, .ncua-block-container > *:first-child:has(~ *:last-child[style*="display: none"]), .ncua-block-container > *:first-child:has(~ *:last-child[hidden]) {
+  border-radius: 12px;
 }
 .ncua-block-container__body {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.8",
+  "version": "1.8.11",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -70,7 +70,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
-    "@ncds/ui-admin-icon": "0.1.9",
+    "@ncds/ui-admin-icon": "0.1.11",
     "classnames": "2.5.1",
     "dompurify": "3.4.1",
     "flatpickr": "4.6.13",