@x-plat/design-system 0.9.0 → 0.10.0

package/dist/components/NotificationBadge/index.cjs

@@ -25,6 +25,9 @@ __export(NotificationBadge_exports, {
 });
 module.exports = __toCommonJS(NotificationBadge_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -52,11 +55,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";

package/dist/components/NotificationBadge/index.css

@@ -70,6 +70,7 @@
 .lib-xplat-notification-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-notification-badge .badge-indicator.primary,
 .lib-xplat-notification-badge .badge-indicator.brand {
   background-color: var(--semantic-surface-brand-default);
 }

package/dist/components/NotificationBadge/index.d.cts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
-type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+/** NotificationBadge 의 상태 색 */
+type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type NotificationBadgeTypeInput = NotificationBadgeType | LegacyStatusType;
 type NotificationBadgeSize = "sm" | "md" | "lg";
 /**
  * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
@@ -33,7 +37,7 @@ interface NotificationBadgeProps {
     /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
     dot?: boolean;
     /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
-    type?: NotificationBadgeType;
+    type?: NotificationBadgeTypeInput;
     /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
     maxCount?: number;
     /** 뱃지 크기. 대상의 크기가 아니다 */

package/dist/components/NotificationBadge/index.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
-type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+/** NotificationBadge 의 상태 색 */
+type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type NotificationBadgeTypeInput = NotificationBadgeType | LegacyStatusType;
 type NotificationBadgeSize = "sm" | "md" | "lg";
 /**
  * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
@@ -33,7 +37,7 @@ interface NotificationBadgeProps {
     /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
     dot?: boolean;
     /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
-    type?: NotificationBadgeType;
+    type?: NotificationBadgeTypeInput;
     /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
     maxCount?: number;
     /** 뱃지 크기. 대상의 크기가 아니다 */

package/dist/components/NotificationBadge/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -25,11 +28,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";

package/dist/components/Pagination/index.cjs

@@ -24,6 +24,9 @@ __export(Pagination_exports, {
 });
 module.exports = __toCommonJS(Pagination_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 
@@ -981,8 +984,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -990,7 +994,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "button",
       {

package/dist/components/Pagination/index.css

@@ -93,6 +93,7 @@
 .lib-xplat-pagination .page-btn svg {
   font-size: var(--semantic-typo-label-2-m-size);
 }
+.lib-xplat-pagination.primary .page-btn.active,
 .lib-xplat-pagination.brand .page-btn.active {
   background-color: var(--semantic-surface-brand-default);
 }

package/dist/components/Pagination/index.d.cts

@@ -1,15 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
-type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+/** Pagination 의 상태 색 */
+type PaginationType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type PaginationTypeInput = PaginationType | LegacyStatusType;
 interface PaginationProps {
+    /** 현재 페이지 (1부터 시작) */
     current: number;
+    /** **전체 아이템 수**. 페이지 수가 아니다 */
     total: number;
+    /** 한 페이지에 담기는 아이템 수. total 과 함께 페이지 수를 계산한다 */
     pageSize?: number;
+    /** 현재 페이지 좌우로 보여줄 번호 개수 */
     siblingCount?: number;
+    /** 페이지를 누르면 새 페이지 번호를 준다 */
     onChange?: (page: number) => void;
+    /** 버튼 크기 */
     size?: PaginationSize;
-    type?: PaginationType;
+    /** 활성 페이지 색 */
+    type?: PaginationTypeInput;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

package/dist/components/Pagination/index.d.ts

@@ -1,15 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 type PaginationSize = "sm" | "md" | "lg";
-type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+/** Pagination 의 상태 색 */
+type PaginationType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type PaginationTypeInput = PaginationType | LegacyStatusType;
 interface PaginationProps {
+    /** 현재 페이지 (1부터 시작) */
     current: number;
+    /** **전체 아이템 수**. 페이지 수가 아니다 */
     total: number;
+    /** 한 페이지에 담기는 아이템 수. total 과 함께 페이지 수를 계산한다 */
     pageSize?: number;
+    /** 현재 페이지 좌우로 보여줄 번호 개수 */
     siblingCount?: number;
+    /** 페이지를 누르면 새 페이지 번호를 준다 */
     onChange?: (page: number) => void;
+    /** 버튼 크기 */
     size?: PaginationSize;
-    type?: PaginationType;
+    /** 활성 페이지 색 */
+    type?: PaginationTypeInput;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

package/dist/components/Pagination/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -955,8 +958,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -964,7 +968,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ jsx295(
       "button",
       {

package/dist/components/Progress/index.cjs

@@ -24,6 +24,9 @@ __export(Progress_exports, {
 });
 module.exports = __toCommonJS(Progress_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -47,11 +50,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/components/Progress/index.css

@@ -25,6 +25,7 @@
   border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
 }
+.lib-xplat-progress.primary .bar,
 .lib-xplat-progress.brand .bar {
   background-color: var(--semantic-surface-brand-default);
 }

package/dist/components/Progress/index.d.cts

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

package/dist/components/Progress/index.d.ts

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

package/dist/components/Progress/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -21,11 +24,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/Radio/index.cjs

@@ -35,6 +35,9 @@ __export(Radio_exports, {
 });
 module.exports = __toCommonJS(Radio_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -202,10 +205,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -221,7 +225,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),

package/dist/components/Radio/index.css

@@ -112,6 +112,7 @@
   border-color: var(--semantic-icon-primary);
   background-color: var(--semantic-surface-neutral-secondary);
 }
+.lib-xplat-radio.primary > .circle.checked,
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
@@ -132,6 +133,7 @@
   background-color: var(--semantic-surface-info-default);
   border-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-radio:hover.primary > .circle.checked,
 .lib-xplat-radio:hover.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);

package/dist/components/Radio/index.d.cts

@@ -1,10 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -14,8 +18,10 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
     value: string | number;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -27,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }
 

package/dist/components/Radio/index.d.ts

@@ -1,10 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -14,8 +18,10 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
     value: string | number;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -27,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }
 

package/dist/components/Radio/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -165,10 +168,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -184,7 +188,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),

package/dist/components/Select/index.d.cts

@@ -8,6 +8,7 @@ interface SelectItemProps {
     value?: string | number;
     /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
     onClick?: () => void;
+    /** 열리지 않게 막는다 */
     disabled?: boolean;
 }
 declare const SelectItem: {
@@ -18,7 +19,9 @@ declare const SelectItem: {
 /** Select.Item 으로만 만든 엘리먼트 (다른 컴포넌트/노드 넣으면 타입 오류) */
 type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
 /** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
-type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+type SelectChangeHandler = (
+/** 선택된 값. 주면 controlled 가 된다 */
+value: string | number | undefined, label: React.ReactNode) => void;
 type SelectSize = "sm" | "md" | "lg";
 interface SelectProps {
     /** 선택 전 표시할 문구 */
@@ -34,6 +37,7 @@ interface SelectProps {
     /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

package/dist/components/Select/index.d.ts

@@ -8,6 +8,7 @@ interface SelectItemProps {
     value?: string | number;
     /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
     onClick?: () => void;
+    /** 열리지 않게 막는다 */
     disabled?: boolean;
 }
 declare const SelectItem: {
@@ -18,7 +19,9 @@ declare const SelectItem: {
 /** Select.Item 으로만 만든 엘리먼트 (다른 컴포넌트/노드 넣으면 타입 오류) */
 type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
 /** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
-type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+type SelectChangeHandler = (
+/** 선택된 값. 주면 controlled 가 된다 */
+value: string | number | undefined, label: React.ReactNode) => void;
 type SelectSize = "sm" | "md" | "lg";
 interface SelectProps {
     /** 선택 전 표시할 문구 */
@@ -34,6 +37,7 @@ interface SelectProps {
     /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

package/dist/components/Skeleton/index.d.cts

@@ -3,8 +3,11 @@ import React from 'react';
 type SkeletonVariant = "text" | "circular" | "rectangular";
 type SizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 interface SkeletonProps {
+    /** 자리표시자 모양 */
     variant?: SkeletonVariant;
+    /** 가로 크기 */
     width?: SizeToken;
+    /** 세로 크기 */
     height?: SizeToken;
 }
 declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/Skeleton/index.d.ts

@@ -3,8 +3,11 @@ import React from 'react';
 type SkeletonVariant = "text" | "circular" | "rectangular";
 type SizeToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 interface SkeletonProps {
+    /** 자리표시자 모양 */
     variant?: SkeletonVariant;
+    /** 가로 크기 */
     width?: SizeToken;
+    /** 세로 크기 */
     height?: SizeToken;
 }
 declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/Spinner/index.cjs

@@ -24,6 +24,9 @@ __export(Spinner_exports, {
 });
 module.exports = __toCommonJS(Spinner_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -45,12 +48,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, type),
+      className: clsx_default("lib-xplat-spinner", size, statusType),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [

package/dist/components/Spinner/index.css

@@ -33,6 +33,7 @@
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
 }
+.lib-xplat-spinner.primary .indicator,
 .lib-xplat-spinner.brand .indicator {
   stroke: var(--semantic-surface-brand-default);
 }

package/dist/components/Spinner/index.d.cts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 type SpinnerSize = "sm" | "md" | "lg";
-type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+/** Spinner 의 상태 색 */
+type SpinnerType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type SpinnerTypeInput = SpinnerType | LegacyStatusType;
 interface SpinnerProps {
+    /** 스피너 지름 */
     size?: SpinnerSize;
-    type?: SpinnerType;
+    /** 스피너 색 */
+    type?: SpinnerTypeInput;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;

package/dist/components/Spinner/index.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 type SpinnerSize = "sm" | "md" | "lg";
-type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+/** Spinner 의 상태 색 */
+type SpinnerType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type SpinnerTypeInput = SpinnerType | LegacyStatusType;
 interface SpinnerProps {
+    /** 스피너 지름 */
     size?: SpinnerSize;
-    type?: SpinnerType;
+    /** 스피너 색 */
+    type?: SpinnerTypeInput;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;