@ncds/ui-admin 1.8.19-alpha.0 → 1.8.19

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 14
+  md: 16
 };
 const Badge = _ref => {
   let {

package/dist/cjs/src/components/forms-and-input/input-base/InputBase.js

@@ -35,8 +35,6 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     showHelpIcon,
     maxLength,
     showTextCount,
-    clearText,
-    onClearText,
     className,
     ...props
   } = _ref;
@@ -102,11 +100,11 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     }
   };
   const renderClearButton = () => {
-    if (!clearText) return null;
+    if (!props.clearText) return null;
     return (0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: onClearText,
+      onClick: props.onClearText,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

package/dist/esm/src/components/feedback-and-status/badge/Badge.js

@@ -9,7 +9,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 14
+  md: 16
 };
 const Badge = _ref => {
   let {

package/dist/esm/src/components/forms-and-input/input-base/InputBase.js

@@ -28,8 +28,6 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     showHelpIcon,
     maxLength,
     showTextCount,
-    clearText,
-    onClearText,
     className,
     ...props
   } = _ref;
@@ -95,11 +93,11 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   const renderClearButton = () => {
-    if (!clearText) return null;
+    if (!props.clearText) return null;
     return _jsx("button", {
       type: "button",
       className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: onClearText,
+      onClick: props.onClearText,
       children: _jsx(X, {
         className: "ncua-input__clear-icon",
         width: validationSvgSize[size],

package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/temp/src/components/feedback-and-status/badge/Badge.js

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
     // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
     // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)

package/dist/temp/src/components/forms-and-input/input-base/InputBase.js

@@ -13,7 +13,7 @@ const generalSvgSize = {
     xs: 14,
     sm: 20,
 };
-const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, clearText, onClearText, className, ...props }, ref) => {
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
     const inputRef = useRef(null);
     const [textCount, setTextCount] = useState(0);
     useEffect(() => {
@@ -59,9 +59,9 @@ const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled
         }
     };
     const renderClearButton = () => {
-        if (!clearText)
+        if (!props.clearText)
             return null;
-        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
     };
     const renderStatusIcon = () => {
         if (destructive) {

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

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

@@ -5039,16 +5039,15 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
+  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
-  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
-  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6310,7 +6309,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: var(--z-index-1);
+  z-index: 1;
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6455,7 +6454,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: var(--z-index-sticky);
+  z-index: 10;
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }
@@ -6501,7 +6500,6 @@ button {
 .ncua-table--vertical .ncua-table__body > .ncua-table__row {
   height: 48px;
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child {
   width: 240px;
   min-width: 240px;
@@ -6521,19 +6519,16 @@ button {
   text-align: left;
   font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip),
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) {
   display: flex;
   align-items: center;
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip {
   display: inline-flex;
   align-items: center;
   line-height: 1;
   margin-left: var(--spacing-xs);
 }
-.ncua-table--vertical .ncua-table__body > .ncua-table__row td:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:first-child > div:has(> .ncua-tooltip) > .ncua-tooltip > .ncua-tooltip__icon {
   display: inline-flex;
   align-items: center;
@@ -6566,6 +6561,7 @@ button {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
+  color: var(--gray-700);
   text-align: center;
   background: var(--base-white);
   border-right: 1px solid var(--gray-100);

package/package.json

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

package/dist/cjs/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _react = require("react");
-var _client = require("react-dom/client");
-var _testUtils = require("react-dom/test-utils");
-var _vitest = require("vitest");
-var _InputBase = require("../InputBase");
-// @vitest-environment jsdom
-
-// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-function mountInputBase() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const root = (0, _client.createRoot)(container);
-  (0, _testUtils.act)(() => {
-    root.render(/*#__PURE__*/(0, _react.createElement)(_InputBase.InputBase, props));
-  });
-  const unmount = () => {
-    (0, _testUtils.act)(() => {
-      root.unmount();
-    });
-    container.remove();
-  };
-  return {
-    container,
-    unmount
-  };
-}
-(0, _vitest.describe)('InputBase — clearText prop DOM 누출', () => {
-  (0, _vitest.it)('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
-    // Given: console.error를 감시하는 상태에서
-    const consoleErrorSpy = _vitest.vi.spyOn(console, 'error');
-    // When: clearText, onClearText를 전달해 렌더하면
-    const view = mountInputBase({
-      clearText: true,
-      onClearText: _vitest.vi.fn()
-    });
-    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
-    const input = view.container.querySelector('input');
-    (0, _vitest.expect)(input).not.toBeNull();
-    (0, _vitest.expect)(input?.hasAttribute('cleartext')).toBe(false);
-    (0, _vitest.expect)(consoleErrorSpy).not.toHaveBeenCalled();
-    consoleErrorSpy.mockRestore();
-    view.unmount();
-  });
-  (0, _vitest.it)('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
-    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
-    const onClearText = _vitest.vi.fn();
-    const view = mountInputBase({
-      clearText: true,
-      onClearText
-    });
-    // When: clear 버튼을 찾아 클릭하면
-    const clearButton = view.container.querySelector('.ncua-input__clear');
-    (0, _vitest.expect)(clearButton).not.toBeNull();
-    (0, _testUtils.act)(() => {
-      clearButton?.click();
-    });
-    // Then: onClearText가 호출된다
-    (0, _vitest.expect)(onClearText).toHaveBeenCalledTimes(1);
-    view.unmount();
-  });
-  (0, _vitest.it)('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
-    // Given/When: clearText 없이 렌더하면
-    const view = mountInputBase();
-    // Then: clear 버튼이 존재하지 않는다
-    (0, _vitest.expect)(view.container.querySelector('.ncua-input__clear')).toBeNull();
-    view.unmount();
-  });
-});

package/dist/esm/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -1,69 +0,0 @@
-// @vitest-environment jsdom
-import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { describe, expect, it, vi } from 'vitest';
-import { InputBase } from '../InputBase';
-// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-function mountInputBase() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const root = createRoot(container);
-  act(() => {
-    root.render(/*#__PURE__*/createElement(InputBase, props));
-  });
-  const unmount = () => {
-    act(() => {
-      root.unmount();
-    });
-    container.remove();
-  };
-  return {
-    container,
-    unmount
-  };
-}
-describe('InputBase — clearText prop DOM 누출', () => {
-  it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
-    // Given: console.error를 감시하는 상태에서
-    const consoleErrorSpy = vi.spyOn(console, 'error');
-    // When: clearText, onClearText를 전달해 렌더하면
-    const view = mountInputBase({
-      clearText: true,
-      onClearText: vi.fn()
-    });
-    // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
-    const input = view.container.querySelector('input');
-    expect(input).not.toBeNull();
-    expect(input?.hasAttribute('cleartext')).toBe(false);
-    expect(consoleErrorSpy).not.toHaveBeenCalled();
-    consoleErrorSpy.mockRestore();
-    view.unmount();
-  });
-  it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
-    // Given: clearText와 onClearText를 전달해 렌더한 상태에서
-    const onClearText = vi.fn();
-    const view = mountInputBase({
-      clearText: true,
-      onClearText
-    });
-    // When: clear 버튼을 찾아 클릭하면
-    const clearButton = view.container.querySelector('.ncua-input__clear');
-    expect(clearButton).not.toBeNull();
-    act(() => {
-      clearButton?.click();
-    });
-    // Then: onClearText가 호출된다
-    expect(onClearText).toHaveBeenCalledTimes(1);
-    view.unmount();
-  });
-  it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
-    // Given/When: clearText 없이 렌더하면
-    const view = mountInputBase();
-    // Then: clear 버튼이 존재하지 않는다
-    expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
-    view.unmount();
-  });
-});

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -1,59 +0,0 @@
-// @vitest-environment jsdom
-import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { describe, expect, it, vi } from 'vitest';
-import { InputBase } from '../InputBase';
-// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-function mountInputBase(props = {}) {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    act(() => {
-        root.render(createElement(InputBase, props));
-    });
-    const unmount = () => {
-        act(() => {
-            root.unmount();
-        });
-        container.remove();
-    };
-    return { container, unmount };
-}
-describe('InputBase — clearText prop DOM 누출', () => {
-    it('clearText/onClearText가 DOM input 속성으로 전달되지 않는다', () => {
-        // Given: console.error를 감시하는 상태에서
-        const consoleErrorSpy = vi.spyOn(console, 'error');
-        // When: clearText, onClearText를 전달해 렌더하면
-        const view = mountInputBase({ clearText: true, onClearText: vi.fn() });
-        // Then: 렌더된 <input>에 cleartext 속성이 없고, unknown prop 경고도 발생하지 않는다
-        const input = view.container.querySelector('input');
-        expect(input).not.toBeNull();
-        expect(input?.hasAttribute('cleartext')).toBe(false);
-        expect(consoleErrorSpy).not.toHaveBeenCalled();
-        consoleErrorSpy.mockRestore();
-        view.unmount();
-    });
-    it('clearText가 true면 clear 버튼이 렌더되고 클릭 시 onClearText가 호출된다', () => {
-        // Given: clearText와 onClearText를 전달해 렌더한 상태에서
-        const onClearText = vi.fn();
-        const view = mountInputBase({ clearText: true, onClearText });
-        // When: clear 버튼을 찾아 클릭하면
-        const clearButton = view.container.querySelector('.ncua-input__clear');
-        expect(clearButton).not.toBeNull();
-        act(() => {
-            clearButton?.click();
-        });
-        // Then: onClearText가 호출된다
-        expect(onClearText).toHaveBeenCalledTimes(1);
-        view.unmount();
-    });
-    it('clearText를 전달하지 않으면 clear 버튼이 렌더되지 않는다', () => {
-        // Given/When: clearText 없이 렌더하면
-        const view = mountInputBase();
-        // Then: clear 버튼이 존재하지 않는다
-        expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
-        view.unmount();
-    });
-});

package/dist/types/src/components/forms-and-input/input-base/__tests__/InputBase.test.d.ts

@@ -1 +0,0 @@
-export {};