@x-plat/design-system 0.9.0 → 0.11.0

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-njWqQWFV.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-njWqQWFV.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;

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/Stat/index.cjs

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Stat/index.ts
+var Stat_exports = {};
+__export(Stat_exports, {
+  Stat: () => Stat_default
+});
+module.exports = __toCommonJS(Stat_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 = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Stat/Stat.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ARROW = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2014"
+};
+var Stat = (props) => {
+  const {
+    label,
+    value,
+    unit,
+    description,
+    trend,
+    icon,
+    size = "md",
+    type = "primary"
+  } = props;
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-stat", size, statusType), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stat-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stat-value-row", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "stat-icon", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "stat-value", children: value }),
+      unit && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "stat-unit", children: unit }),
+      trend && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: clsx_default("stat-trend", trend.direction), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: ARROW[trend.direction] }),
+        trend.value
+      ] })
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stat-description", children: description })
+  ] });
+};
+Stat.displayName = "Stat";
+var Stat_default = Stat;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stat
+});

package/dist/components/Stat/index.css

@@ -0,0 +1,96 @@
+/* src/components/Stat/stat.scss */
+.lib-xplat-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-1);
+}
+.lib-xplat-stat .stat-label {
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  color: var(--semantic-text-tertiary);
+}
+.lib-xplat-stat .stat-value-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-stat .stat-icon {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-stat .stat-value {
+  font-family: var(--semantic-typo-title-1-sb-font);
+  font-size: var(--semantic-typo-title-1-sb-size);
+  line-height: var(--semantic-typo-title-1-sb-lh);
+  font-weight: var(--semantic-typo-title-1-sb-weight);
+  letter-spacing: var(--semantic-typo-title-1-sb-ls);
+  color: var(--semantic-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-stat .stat-unit {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-tertiary);
+}
+.lib-xplat-stat .stat-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-stat .stat-trend.up {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-stat .stat-trend.down {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-stat .stat-trend.flat {
+  color: var(--semantic-text-tertiary);
+}
+.lib-xplat-stat .stat-description {
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  color: var(--semantic-text-tertiary);
+}
+.lib-xplat-stat.sm .stat-value {
+  font-family: var(--semantic-typo-heading-1-sb-font);
+  font-size: var(--semantic-typo-heading-1-sb-size);
+  line-height: var(--semantic-typo-heading-1-sb-lh);
+  font-weight: var(--semantic-typo-heading-1-sb-weight);
+  letter-spacing: var(--semantic-typo-heading-1-sb-ls);
+}
+.lib-xplat-stat.lg .stat-value {
+  font-family: var(--semantic-typo-display-2-sb-font);
+  font-size: var(--semantic-typo-display-2-sb-size);
+  line-height: var(--semantic-typo-display-2-sb-lh);
+  font-weight: var(--semantic-typo-display-2-sb-weight);
+  letter-spacing: var(--semantic-typo-display-2-sb-ls);
+}
+.lib-xplat-stat.success .stat-value {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-stat.error .stat-value {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-stat.warning .stat-value {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-stat.info .stat-value {
+  color: var(--semantic-text-info);
+}

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { S as StatusTypeInput } from '../../status-njWqQWFV.cjs';
+
+type StatSize = "sm" | "md" | "lg";
+type TrendDirection = "up" | "down" | "flat";
+/** 큰 숫자 하나를 강조해 보여주는 칸. 대시보드의 지표 타일에 쓴다 */
+interface StatProps {
+    /** 지표 이름 (예: "총 호출 수") */
+    label: React.ReactNode;
+    /** 강조할 값. 포맷은 호출부가 정한다 (천 단위 구분·통화 기호 등) */
+    value: React.ReactNode;
+    /** 값 뒤에 붙는 단위 (예: "원", "회"). 값보다 작게 표시된다 */
+    unit?: React.ReactNode;
+    /** 값 아래 보조 설명 */
+    description?: React.ReactNode;
+    /**
+     * 증감 표시. `value` 는 이미 포맷된 문자열을 그대로 쓴다 (예: "+12.4%").
+     * `direction` 이 색과 화살표를 정한다
+     */
+    trend?: {
+        direction: TrendDirection;
+        value: React.ReactNode;
+    };
+    /** 값 왼쪽에 놓을 아이콘 */
+    icon?: React.ReactNode;
+    /** 타일 크기 */
+    size?: StatSize;
+    /** 값 색. 상태를 나타낼 때 쓴다 */
+    type?: StatusTypeInput;
+}
+declare const Stat: {
+    (props: StatProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Stat };

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { S as StatusTypeInput } from '../../status-njWqQWFV.js';
+
+type StatSize = "sm" | "md" | "lg";
+type TrendDirection = "up" | "down" | "flat";
+/** 큰 숫자 하나를 강조해 보여주는 칸. 대시보드의 지표 타일에 쓴다 */
+interface StatProps {
+    /** 지표 이름 (예: "총 호출 수") */
+    label: React.ReactNode;
+    /** 강조할 값. 포맷은 호출부가 정한다 (천 단위 구분·통화 기호 등) */
+    value: React.ReactNode;
+    /** 값 뒤에 붙는 단위 (예: "원", "회"). 값보다 작게 표시된다 */
+    unit?: React.ReactNode;
+    /** 값 아래 보조 설명 */
+    description?: React.ReactNode;
+    /**
+     * 증감 표시. `value` 는 이미 포맷된 문자열을 그대로 쓴다 (예: "+12.4%").
+     * `direction` 이 색과 화살표를 정한다
+     */
+    trend?: {
+        direction: TrendDirection;
+        value: React.ReactNode;
+    };
+    /** 값 왼쪽에 놓을 아이콘 */
+    icon?: React.ReactNode;
+    /** 타일 크기 */
+    size?: StatSize;
+    /** 값 색. 상태를 나타낼 때 쓴다 */
+    type?: StatusTypeInput;
+}
+declare const Stat: {
+    (props: StatProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Stat };

package/dist/components/Stat/index.js

@@ -0,0 +1,57 @@
+// 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 = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Stat/Stat.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ARROW = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2014"
+};
+var Stat = (props) => {
+  const {
+    label,
+    value,
+    unit,
+    description,
+    trend,
+    icon,
+    size = "md",
+    type = "primary"
+  } = props;
+  const statusType = normalizeStatus(type);
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-stat", size, statusType), children: [
+    /* @__PURE__ */ jsx("div", { className: "stat-label", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "stat-value-row", children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "stat-icon", children: icon }),
+      /* @__PURE__ */ jsx("span", { className: "stat-value", children: value }),
+      unit && /* @__PURE__ */ jsx("span", { className: "stat-unit", children: unit }),
+      trend && /* @__PURE__ */ jsxs("span", { className: clsx_default("stat-trend", trend.direction), children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ARROW[trend.direction] }),
+        trend.value
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: "stat-description", children: description })
+  ] });
+};
+Stat.displayName = "Stat";
+var Stat_default = Stat;
+export {
+  Stat_default as Stat
+};

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-njWqQWFV.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-njWqQWFV.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 = "";
@@ -176,11 +179,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -193,11 +201,15 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
-    type = "brand",
+    type = "primary",
     disabled,
     onChange,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = import_react.default.useId();
+  const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = import_react.default.useState(false);
   const timeoutRef = import_react.default.useRef(null);
   import_react.default.useEffect(() => {
@@ -218,10 +230,11 @@ var Switch = (props) => {
   const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      id: fieldId,
       className: clsx_default(
         "lib-xplat-switch",
         size,
-        type,
+        statusType,
         value ? "checked" : void 0,
         disabled && "disabled",
         isAnimating && "animating"
@@ -232,7 +245,7 @@ var Switch = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;

package/dist/components/Switch/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);
@@ -89,10 +104,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,28 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.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[];
+    /** 스위치 크기 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     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,28 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.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[];
+    /** 스위치 크기 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     size?: SwitchSize;
-    type?: SwitchType;
+    /** 켜졌을 때의 색 */
+    type?: SwitchTypeInput;
     disabled?: boolean;
+    /** 토글될 때 바뀐 값을 준다 */
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {