@x-plat/design-system 0.9.0 → 0.10.0

package/dist/components/Spinner/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 = "";
@@ -19,12 +22,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ 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__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [

package/dist/components/Steps/index.cjs

@@ -24,6 +24,9 @@ __export(Steps_exports, {
 });
 module.exports = __toCommonJS(Steps_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");
 
@@ -946,9 +949,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { children: index + 1 }) }),

package/dist/components/Steps/index.css

@@ -63,6 +63,17 @@
   color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }
+.lib-xplat-steps.primary .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-primary-default);
+}
+.lib-xplat-steps.primary .step-item.completed::after {
+  background-color: var(--semantic-surface-primary-default);
+}
+.lib-xplat-steps.primary .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-primary-default);
+}
 .lib-xplat-steps.brand .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-brand-default);

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

@@ -1,14 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 interface StepItem {
     title: string;
     description?: string;
 }
-type StepsType = "brand" | "success" | "error" | "warning" | "info";
+/** Steps 의 상태 색 */
+type StepsType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type StepsTypeInput = StepsType | LegacyStatusType;
 interface StepsProps {
+    /** 단계 목록. 순서대로 그려진다 */
     items: StepItem[];
+    /** 진행 중인 단계 인덱스 (0부터). 앞은 완료, 뒤는 대기로 표시된다 */
     current: number;
-    type?: StepsType;
+    /** 완료·진행 단계의 색 */
+    type?: StepsTypeInput;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;

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

@@ -1,14 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 interface StepItem {
     title: string;
     description?: string;
 }
-type StepsType = "brand" | "success" | "error" | "warning" | "info";
+/** Steps 의 상태 색 */
+type StepsType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type StepsTypeInput = StepsType | LegacyStatusType;
 interface StepsProps {
+    /** 단계 목록. 순서대로 그려진다 */
     items: StepItem[];
+    /** 진행 중인 단계 인덱스 (0부터). 앞은 완료, 뒤는 대기로 표시된다 */
     current: number;
-    type?: StepsType;
+    /** 완료·진행 단계의 색 */
+    type?: StepsTypeInput;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;

package/dist/components/Steps/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";
 
@@ -920,9 +923,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs189("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ jsx295("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx295(CheckIcon_default, {}) : /* @__PURE__ */ jsx295("span", { children: index + 1 }) }),

package/dist/components/Switch/index.cjs

@@ -37,6 +37,9 @@ module.exports = __toCommonJS(Switch_exports);
 // src/components/Switch/Switch.tsx
 var import_react = __toESM(require("react"), 1);
 
+// 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 = "";
@@ -193,11 +196,12 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
     validations
   } = props;
+  const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = import_react.default.useState(false);
   const timeoutRef = import_react.default.useRef(null);
   import_react.default.useEffect(() => {
@@ -221,7 +225,7 @@ var Switch = (props) => {
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"

package/dist/components/Switch/index.css

@@ -89,10 +89,12 @@
   pointer-events: none;
   cursor: wait;
 }
+.lib-xplat-switch.primary.checked,
 .lib-xplat-switch.brand.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
 }
+.lib-xplat-switch.primary.checked:hover:not(.disabled):not(.animating),
 .lib-xplat-switch.brand.checked:hover:not(.disabled):not(.animating) {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);

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

@@ -1,15 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type SwitchSize = "sm" | "md" | "lg";
-type SwitchType = "brand" | "success" | "error" | "warning" | "info";
+/** Switch 의 상태 색 */
+type SwitchType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type SwitchTypeInput = SwitchType | LegacyStatusType;
 interface SwitchProps {
+    /** 켜짐 여부. controlled 전용이라 onChange 와 함께 쓴다 */
     value: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 스위치 크기 */
     size?: SwitchSize;
-    type?: SwitchType;
+    /** 켜졌을 때의 색 */
+    type?: SwitchTypeInput;
     disabled?: boolean;
+    /** 토글될 때 바뀐 값을 준다 */
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {

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

@@ -1,15 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type SwitchSize = "sm" | "md" | "lg";
-type SwitchType = "brand" | "success" | "error" | "warning" | "info";
+/** Switch 의 상태 색 */
+type SwitchType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type SwitchTypeInput = SwitchType | LegacyStatusType;
 interface SwitchProps {
+    /** 켜짐 여부. controlled 전용이라 onChange 와 함께 쓴다 */
     value: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 스위치 크기 */
     size?: SwitchSize;
-    type?: SwitchType;
+    /** 켜졌을 때의 색 */
+    type?: SwitchTypeInput;
     disabled?: boolean;
+    /** 토글될 때 바뀐 값을 준다 */
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {

package/dist/components/Switch/index.js

@@ -1,6 +1,9 @@
 // src/components/Switch/Switch.tsx
 import React from "react";
 
+// 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 = "";
@@ -157,11 +160,12 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
     validations
   } = props;
+  const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = React.useState(false);
   const timeoutRef = React.useRef(null);
   React.useEffect(() => {
@@ -185,7 +189,7 @@ var Switch = (props) => {
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"

package/dist/components/Tab/index.cjs

@@ -74,7 +74,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
   const [underlineStyle, setUnderlineStyle] = import_react2.default.useState({
     left: 0,
     width: 0
@@ -89,7 +90,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       TabItem_default,
       {
@@ -102,7 +103,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         className: "tab-toggle-underline",

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

@@ -5,11 +5,22 @@ interface TabItemType {
     title: string;
 }
 type TabSize = "sm" | "md" | "lg";
+type TabVariant = "default" | "toggle";
 interface TabProps {
+    /** 활성 탭 인덱스. controlled 전용이라 onChange 와 함께 쓴다 */
     activeIndex: number;
+    /** 탭 목록. children 을 받지 않는다 */
     tabs: TabItemType[];
+    /** 첫 인자가 탭 객체, **두 번째가 인덱스**다. setActiveIndex 를 그대로 넘기면 안 된다 */
     onChange: (value: TabItemType, index: number) => void;
-    type: "default" | "toggle";
+    /** 탭 모양. `default` 는 채워진 평면 탭, `toggle` 은 밑줄 인디케이터가 슬라이드 */
+    variant?: TabVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TabVariant;
+    /** 탭 높이와 글자 크기 */
     size?: TabSize;
 }
 declare const Tab: {

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

@@ -5,11 +5,22 @@ interface TabItemType {
     title: string;
 }
 type TabSize = "sm" | "md" | "lg";
+type TabVariant = "default" | "toggle";
 interface TabProps {
+    /** 활성 탭 인덱스. controlled 전용이라 onChange 와 함께 쓴다 */
     activeIndex: number;
+    /** 탭 목록. children 을 받지 않는다 */
     tabs: TabItemType[];
+    /** 첫 인자가 탭 객체, **두 번째가 인덱스**다. setActiveIndex 를 그대로 넘기면 안 된다 */
     onChange: (value: TabItemType, index: number) => void;
-    type: "default" | "toggle";
+    /** 탭 모양. `default` 는 채워진 평면 탭, `toggle` 은 밑줄 인디케이터가 슬라이드 */
+    variant?: TabVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TabVariant;
+    /** 탭 높이와 글자 크기 */
     size?: TabSize;
 }
 declare const Tab: {

package/dist/components/Tab/index.js

@@ -38,7 +38,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type, size = "md" } = props;
+  const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
+  const shape = variant ?? type ?? "default";
   const [underlineStyle, setUnderlineStyle] = React2.useState({
     left: 0,
     width: 0
@@ -53,7 +54,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ jsx2(
       TabItem_default,
       {
@@ -66,7 +67,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx2(
+    shape === "toggle" && /* @__PURE__ */ jsx2(
       "div",
       {
         className: "tab-toggle-underline",

package/dist/components/Tag/index.cjs

@@ -939,20 +939,22 @@ var import_jsx_runtime295 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
-    type = "neutral",
+    variant,
+    type,
     onClose,
     size = "md",
     disabled = false,
     colorIndex
   } = props;
+  const shape = variant ?? type ?? "neutral";
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
     "span",
     {
       className: clsx_default(
         "lib-xplat-tag",
-        type,
+        shape,
         size,
-        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        shape === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
         disabled && "disabled"
       ),
       children: [

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

@@ -1,14 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-type TagType = "neutral" | "categorical";
+type TagVariant = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
 interface TagProps {
     children: React.ReactNode;
-    type?: TagType;
+    /** 태그 배색. `categorical` 은 `colorIndex` 로 계열 색을 고른다 */
+    variant?: TagVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TagVariant;
+    /** 주면 오른쪽에 닫기 버튼이 생긴다. 제거 가능한 태그로 쓸 때 */
     onClose?: () => void;
+    /** 태그 크기 */
     size?: TagSize;
+    /** 흐리게 표시하고 닫기 버튼을 막는다 */
     disabled?: boolean;
+    /** variant 가 categorical 일 때 쓸 계열 색 번호 (1~8) */
     colorIndex?: number;
 }
 declare const Tag: {

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

@@ -1,14 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-type TagType = "neutral" | "categorical";
+type TagVariant = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
 interface TagProps {
     children: React.ReactNode;
-    type?: TagType;
+    /** 태그 배색. `categorical` 은 `colorIndex` 로 계열 색을 고른다 */
+    variant?: TagVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TagVariant;
+    /** 주면 오른쪽에 닫기 버튼이 생긴다. 제거 가능한 태그로 쓸 때 */
     onClose?: () => void;
+    /** 태그 크기 */
     size?: TagSize;
+    /** 흐리게 표시하고 닫기 버튼을 막는다 */
     disabled?: boolean;
+    /** variant 가 categorical 일 때 쓸 계열 색 번호 (1~8) */
     colorIndex?: number;
 }
 declare const Tag: {

package/dist/components/Tag/index.js

@@ -913,20 +913,22 @@ import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
-    type = "neutral",
+    variant,
+    type,
     onClose,
     size = "md",
     disabled = false,
     colorIndex
   } = props;
+  const shape = variant ?? type ?? "neutral";
   return /* @__PURE__ */ jsxs189(
     "span",
     {
       className: clsx_default(
         "lib-xplat-tag",
-        type,
+        shape,
         size,
-        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        shape === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
         disabled && "disabled"
       ),
       children: [

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

@@ -5,10 +5,13 @@ import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    /** 안쪽 여백과 글자 크기 */
     size?: TextAreaSize;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 사용자가 크기를 조절할 방향 */
     resize?: TextAreaResize;
+    /** 기본으로 보일 줄 수 */
     rows?: number;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -5,10 +5,13 @@ import { V as Validation } from '../../validation-Dqo1zqhT.js';
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    /** 안쪽 여백과 글자 크기 */
     size?: TextAreaSize;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 사용자가 크기를 조절할 방향 */
     resize?: TextAreaResize;
+    /** 기본으로 보일 줄 수 */
     rows?: number;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Tooltip/index.cjs

@@ -72,10 +72,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = import_react.default.useRef(null);
   const tooltipRef = import_react.default.useRef(null);
   const [visible, setVisible] = import_react.default.useState(false);
@@ -185,7 +187,7 @@ var Tooltip = (props) => {
           {
             ref: tooltipRef,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-title", children: title }),

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

@@ -1,10 +1,19 @@
 import React from 'react';
 
+type TooltipVariant = "dark" | "light";
 interface TooltipProps {
     children: React.ReactNode;
+    /** 말풍선 첫 줄. 굵게 표시된다 */
     title?: React.ReactNode;
+    /** 말풍선 본문. title 과 둘 중 하나는 있어야 뜬다 */
     description?: React.ReactNode;
-    type?: "dark" | "light";
+    /** 말풍선 배색 */
+    variant?: TooltipVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TooltipVariant;
     /**
      * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
      * (PopOver/Dropdown/Select 와 같은 방식).
@@ -13,6 +22,7 @@ interface TooltipProps {
      * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
      */
     follow?: boolean;
+    /** 말풍선을 띄우지 않는다 */
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

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

@@ -1,10 +1,19 @@
 import React from 'react';
 
+type TooltipVariant = "dark" | "light";
 interface TooltipProps {
     children: React.ReactNode;
+    /** 말풍선 첫 줄. 굵게 표시된다 */
     title?: React.ReactNode;
+    /** 말풍선 본문. title 과 둘 중 하나는 있어야 뜬다 */
     description?: React.ReactNode;
-    type?: "dark" | "light";
+    /** 말풍선 배색 */
+    variant?: TooltipVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TooltipVariant;
     /**
      * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
      * (PopOver/Dropdown/Select 와 같은 방식).
@@ -13,6 +22,7 @@ interface TooltipProps {
      * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
      */
     follow?: boolean;
+    /** 말풍선을 띄우지 않는다 */
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/index.js

@@ -36,10 +36,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
   const [visible, setVisible] = React.useState(false);
@@ -149,7 +151,7 @@ var Tooltip = (props) => {
           {
             ref: tooltipRef,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
               title && /* @__PURE__ */ jsx("div", { className: "tooltip-title", children: title }),