@x-plat/design-system 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -7255,7 +7255,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = import_react6.default.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const { variant, type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const shape = variant ?? type ?? "line";
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
@@ -7264,11 +7265,11 @@ var Chart = import_react6.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "line" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
@@ -7388,6 +7389,9 @@ var import_tokens_core = require("@x-plat/tokens-core");
 // src/tokens/index.ts
 var import_tokens_core2 = require("@x-plat/tokens-core");
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/components/CheckBox/CheckBox.tsx
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var CheckBox = (props) => {
@@ -7398,10 +7402,11 @@ var CheckBox = (props) => {
     onChange,
     disabled,
     size = "md",
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
@@ -7409,7 +7414,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  const control = /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
       "input",
       {
@@ -7944,7 +7949,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime317 = 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_react14.default.useState({
     left: 0,
     width: 0
@@ -7959,7 +7965,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       TabItem_default,
       {
@@ -7972,7 +7978,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
       "div",
       {
         className: "tab-toggle-underline",
@@ -9398,11 +9404,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_runtime330.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";
@@ -9443,8 +9450,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) => {
@@ -9452,7 +9460,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime331.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_runtime331.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_runtime331.jsx)(
       "button",
       {
@@ -9553,11 +9561,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_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
       "div",
       {
@@ -9602,10 +9611,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;
@@ -9621,7 +9631,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),
@@ -9900,12 +9910,13 @@ var import_jsx_runtime339 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ (0, import_jsx_runtime339.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_runtime339.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -9943,9 +9954,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ (0, import_jsx_runtime340.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_runtime340.jsxs)("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime340.jsx)("span", { children: index + 1 }) }),
@@ -10270,11 +10282,12 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
     validations
   } = props;
+  const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = import_react32.default.useState(false);
   const timeoutRef = import_react32.default.useRef(null);
   import_react32.default.useEffect(() => {
@@ -10298,7 +10311,7 @@ var Switch = (props) => {
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"
@@ -10515,20 +10528,22 @@ var import_jsx_runtime348 = 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_runtime348.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: [
@@ -10675,10 +10690,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = import_react40.default.useRef(null);
   const tooltipRef = import_react40.default.useRef(null);
   const [visible, setVisible] = import_react40.default.useState(false);
@@ -10788,7 +10805,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_runtime351.jsx)("div", { className: "tooltip-title", children: title }),

package/dist/index.css

@@ -2545,6 +2545,7 @@
 .lib-xplat-checkbox:hover > .checkbox.unchecked {
   background-color: var(--semantic-surface-neutral-disabled);
 }
+.lib-xplat-checkbox.primary > .checkbox.checked,
 .lib-xplat-checkbox.brand > .checkbox.checked {
   background-color: var(--semantic-surface-brand-default);
 }
@@ -2560,6 +2561,7 @@
 .lib-xplat-checkbox.info > .checkbox.checked {
   background-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-checkbox:hover.primary > .checkbox.checked,
 .lib-xplat-checkbox:hover.brand > .checkbox.checked {
   background-color: var(--semantic-surface-brand-strong);
 }
@@ -3912,6 +3914,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);
 }
@@ -4011,6 +4014,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);
 }
@@ -4084,6 +4088,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);
 }
@@ -4186,6 +4191,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);
@@ -4206,6 +4212,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);
@@ -4472,6 +4479,7 @@
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
 }
+.lib-xplat-spinner.primary .indicator,
 .lib-xplat-spinner.brand .indicator {
   stroke: var(--semantic-surface-brand-default);
 }
@@ -4561,6 +4569,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);
@@ -4757,10 +4776,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/index.d.cts

@@ -58,3 +58,4 @@ import 'react';
 import './attributes-DJIWir_0.cjs';
 import './validation-Dqo1zqhT.cjs';
 import 'react/jsx-runtime';
+import './status-g_KP3qT6.cjs';

package/dist/index.d.ts

@@ -58,3 +58,4 @@ import 'react';
 import './attributes-DJIWir_0.js';
 import './validation-Dqo1zqhT.js';
 import 'react/jsx-runtime';
+import './status-g_KP3qT6.js';

package/dist/index.js

@@ -6848,7 +6848,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = React6.memo((props) => {
-  const { type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const { variant, type, data, labels, tooltip: showTooltip = true, tooltipType = "light" } = props;
+  const shape = variant ?? type ?? "line";
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = React6.useMemo(() => data, [JSON.stringify(data)]);
@@ -6857,11 +6858,11 @@ var Chart = React6.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx306(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx306(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx306(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "line" && /* @__PURE__ */ jsx306(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ jsx306(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ jsx306(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "doughnut" && /* @__PURE__ */ jsx306(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx306(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ jsx306(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });
@@ -6981,6 +6982,9 @@ import { semantic } from "@x-plat/tokens-core";
 // src/tokens/index.ts
 import { cssVar } from "@x-plat/tokens-core";
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/components/CheckBox/CheckBox.tsx
 import { jsx as jsx309, jsxs as jsxs198 } from "react/jsx-runtime";
 var CheckBox = (props) => {
@@ -6991,10 +6995,11 @@ var CheckBox = (props) => {
     onChange,
     disabled,
     size = "md",
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
@@ -7002,7 +7007,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  const control = /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+  const control = /* @__PURE__ */ jsxs198("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
     /* @__PURE__ */ jsx309(
       "input",
       {
@@ -7537,7 +7542,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 import { jsx as jsx317, jsxs as jsxs202 } 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] = React14.useState({
     left: 0,
     width: 0
@@ -7552,7 +7558,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ jsx317(
       TabItem_default,
       {
@@ -7565,7 +7571,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx317(
+    shape === "toggle" && /* @__PURE__ */ jsx317(
       "div",
       {
         className: "tab-toggle-underline",
@@ -8991,11 +8997,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__ */ jsxs211("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx330("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx330("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";
@@ -9036,8 +9043,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) => {
@@ -9045,7 +9053,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ jsxs212("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ jsx331(
       "button",
       {
@@ -9146,11 +9154,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__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ jsxs214("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ jsx333(
       "div",
       {
@@ -9195,10 +9204,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;
@@ -9214,7 +9224,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),
@@ -9493,12 +9503,13 @@ import { jsx as jsx339, jsxs as jsxs217 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   return /* @__PURE__ */ jsx339(
     "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__ */ jsxs217("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -9536,9 +9547,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    type = "brand"
+    type = "primary"
   } = props;
-  return /* @__PURE__ */ jsx340("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ jsx340("div", { className: clsx_default("lib-xplat-steps", statusType), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs218("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ jsx340("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx340(CheckIcon_default, {}) : /* @__PURE__ */ jsx340("span", { children: index + 1 }) }),
@@ -9863,11 +9875,12 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
     validations
   } = props;
+  const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = React32.useState(false);
   const timeoutRef = React32.useRef(null);
   React32.useEffect(() => {
@@ -9891,7 +9904,7 @@ var Switch = (props) => {
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"
@@ -10108,20 +10121,22 @@ import { jsx as jsx348, jsxs as jsxs220 } 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__ */ jsxs220(
     "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: [
@@ -10268,10 +10283,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = React40.useRef(null);
   const tooltipRef = React40.useRef(null);
   const [visible, setVisible] = React40.useState(false);
@@ -10381,7 +10398,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__ */ jsx351("div", { className: "tooltip-title", children: title }),

package/dist/status-g_KP3qT6.d.cts

@@ -0,0 +1,8 @@
+/**
+ * 예전 이름. `brand` 는 `primary` 와 같은 것을 가리켰다.
+ *
+ * @deprecated `"primary"` 를 쓸 것. 기존 사용처가 깨지지 않도록 계속 받는다.
+ */
+type LegacyStatusType = "brand";
+
+export type { LegacyStatusType as L };

package/dist/status-g_KP3qT6.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 예전 이름. `brand` 는 `primary` 와 같은 것을 가리켰다.
+ *
+ * @deprecated `"primary"` 를 쓸 것. 기존 사용처가 깨지지 않도록 계속 받는다.
+ */
+type LegacyStatusType = "brand";
+
+export type { LegacyStatusType as L };

package/guidelines/AGENT_PROMPT.md

@@ -600,6 +600,21 @@ CSS 변수 `--semantic-{category}-{role}` 사용.
 | 미디어 | `Video`, `FileUpload`, `ImageSelector`, `Swiper` |
 | 기타 | `Accordion`, `Chart`, `HtmlTypeWriter` |
 
+### prop 규약 — `type` 과 `variant` 는 다른 축이다
+
+| prop | 뜻 | 값 |
+|---|---|---|
+| `type` | **상태 색** — 이 요소가 어떤 상태인가 | `primary` `success` `error` `warning` `info` |
+| `variant` | **모양·동작 변형** — 어떻게 생겼는가 | 컴포넌트마다 다름 (`outlined`/`toggle`/`dark` 등) |
+
+- 상태 색의 `primary` 는 예전에 `brand` 였다. **`brand` 도 계속 받지만 새 코드는 `primary`** 를 쓴다.
+- `Chart`·`Tab`·`Tooltip`·`Tag` 는 모양 변형을 예전에 `type` 으로 받았다. **`variant` 로 쓸 것.**
+  `type` 도 아직 받지만 deprecated 이고, 둘 다 주면 `variant` 가 이긴다.
+- 폼 컨트롤의 검증 메시지는 전부 `validations` 다. [form.md](./components/form.md) 참고.
+- **`Modal` 을 조건부 렌더하지 말 것.** `{open && <MyModal/>}` 은 닫는 애니메이션을
+  없앤다. `<MyModal isOpen={open}/>` 로 계속 마운트한다 — 닫히면 스스로 `null` 을
+  돌려주므로 DOM 에 안 남는다. [overlay.md](./components/overlay.md) 참고.
+
 ---
 
 ## 추가 참조 (필요 시 fetch)