@x-plat/design-system 0.9.0 → 0.11.0

package/dist/components/AutoResizeTextArea/index.cjs

@@ -176,11 +176,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";
@@ -191,7 +196,9 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, label, required, ...textareaProps } = props;
+    const autoId = import_react.default.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = import_react.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -225,6 +232,7 @@ var AutoResizeTextArea = import_react.default.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -238,12 +246,13 @@ var AutoResizeTextArea = import_react.default.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    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 });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";

package/dist/components/AutoResizeTextArea/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);

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

@@ -6,6 +6,11 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 테두리와 배경을 없앤다. ChatInput 처럼 감싸는 쪽이 껍데기를 그릴 때 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     bare?: boolean;
 }
 declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -6,6 +6,11 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 테두리와 배경을 없앤다. ChatInput 처럼 감싸는 쪽이 껍데기를 그릴 때 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     bare?: boolean;
 }
 declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/AutoResizeTextArea/index.js

@@ -140,11 +140,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx4(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx4(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx4(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -155,7 +160,9 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = React.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, label, required, ...textareaProps } = props;
+    const autoId = React.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = React.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -189,6 +196,7 @@ var AutoResizeTextArea = React.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -202,12 +210,13 @@ var AutoResizeTextArea = React.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    return /* @__PURE__ */ jsx5(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx5(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";

package/dist/components/Badge/index.cjs

@@ -26,6 +26,9 @@ __export(Badge_exports, {
 });
 module.exports = __toCommonJS(Badge_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 = "";
@@ -53,11 +56,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/Badge/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/Badge/index.d.cts

@@ -1,3 +1,4 @@
 export { NotificationBadge as Badge, NotificationBadge, NotificationBadge as default } from '../NotificationBadge/index.cjs';
 import 'react/jsx-runtime';
 import 'react';
+import '../../status-njWqQWFV.cjs';

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

@@ -1,3 +1,4 @@
 export { NotificationBadge as Badge, NotificationBadge, NotificationBadge as default } from '../NotificationBadge/index.js';
 import 'react/jsx-runtime';
 import 'react';
+import '../../status-njWqQWFV.js';

package/dist/components/Badge/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/Box/index.d.cts

@@ -4,8 +4,11 @@ type BoxVariant = "outlined" | "elevated" | "flat";
 type BoxPadding = "none" | "sm" | "md" | "lg";
 interface BoxProps {
     children: React.ReactNode;
+    /** 상자 위쪽 제목 */
     title?: React.ReactNode;
+    /** 테두리·그림자 방식 */
     variant?: BoxVariant;
+    /** 안쪽 여백 */
     padding?: BoxPadding;
 }
 declare const Box: React.FC<BoxProps>;

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

@@ -4,8 +4,11 @@ type BoxVariant = "outlined" | "elevated" | "flat";
 type BoxPadding = "none" | "sm" | "md" | "lg";
 interface BoxProps {
     children: React.ReactNode;
+    /** 상자 위쪽 제목 */
     title?: React.ReactNode;
+    /** 테두리·그림자 방식 */
     variant?: BoxVariant;
+    /** 안쪽 여백 */
     padding?: BoxPadding;
 }
 declare const Box: React.FC<BoxProps>;

package/dist/components/Chart/index.cjs

@@ -682,7 +682,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = import_react.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_react.default.useMemo(() => data, [JSON.stringify(data)]);
@@ -691,11 +692,11 @@ var Chart = import_react.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });

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

@@ -1,10 +1,21 @@
 import React from 'react';
 
+type ChartVariant = "line" | "curve" | "bar" | "pie" | "doughnut";
 interface ChartProps {
-    type: "line" | "curve" | "bar" | "pie" | "doughnut";
+    /** 차트 종류 */
+    variant?: ChartVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: ChartVariant;
+    /** 계열 이름 → 값 배열. 키 하나가 선/막대 하나가 된다 */
     data: Record<string, number[]>;
+    /** x축 라벨. data 의 값 배열과 길이가 같아야 한다 */
     labels: string[];
+    /** 마우스를 올렸을 때 값 말풍선을 띄운다 */
     tooltip?: boolean;
+    /** 말풍선 배색 */
     tooltipType?: "dark" | "light";
 }
 declare const Chart: React.NamedExoticComponent<ChartProps>;

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

@@ -1,10 +1,21 @@
 import React from 'react';
 
+type ChartVariant = "line" | "curve" | "bar" | "pie" | "doughnut";
 interface ChartProps {
-    type: "line" | "curve" | "bar" | "pie" | "doughnut";
+    /** 차트 종류 */
+    variant?: ChartVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: ChartVariant;
+    /** 계열 이름 → 값 배열. 키 하나가 선/막대 하나가 된다 */
     data: Record<string, number[]>;
+    /** x축 라벨. data 의 값 배열과 길이가 같아야 한다 */
     labels: string[];
+    /** 마우스를 올렸을 때 값 말풍선을 띄운다 */
     tooltip?: boolean;
+    /** 말풍선 배색 */
     tooltipType?: "dark" | "light";
 }
 declare const Chart: React.NamedExoticComponent<ChartProps>;

package/dist/components/Chart/index.js

@@ -646,7 +646,8 @@ var ChartLegend = ({ data, labels, type }) => {
   }) });
 };
 var Chart = React.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 = React.useMemo(() => data, [JSON.stringify(data)]);
@@ -655,11 +656,11 @@ var Chart = React.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
+    ready && shape === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     ready && (type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
     tooltip.visible && tooltip.content && /* @__PURE__ */ jsx(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, tooltipType, children: tooltip.content })
   ] });

package/dist/components/ChatInput/index.cjs

@@ -235,11 +235,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -250,7 +255,9 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, label, required, ...textareaProps } = props;
+    const autoId = import_react.default.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = import_react.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -284,6 +291,7 @@ var AutoResizeTextArea = import_react.default.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -297,12 +305,13 @@ var AutoResizeTextArea = import_react.default.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Field, { validations, children: control });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
@@ -319,8 +328,11 @@ var ChatInput = import_react2.default.forwardRef(
       buttonType = "primary",
       onSubmit,
       onChange,
-      validations
+      validations,
+      label,
+      required
     } = props;
+    const fieldId = import_react2.default.useId();
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = import_react2.default.useState("");
     const value = isControlled ? valueProp : internalValue;
@@ -345,6 +357,7 @@ var ChatInput = import_react2.default.forwardRef(
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AutoResizeTextArea_default,
         {
+          id: fieldId,
           ref,
           bare: true,
           className: "chat-input-textarea",
@@ -369,7 +382,7 @@ var ChatInput = import_react2.default.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Field, { validations, children: control });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";

package/dist/components/ChatInput/index.css

@@ -82,6 +82,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);

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

@@ -3,13 +3,23 @@ import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {
+    /** 비어 있을 때 표시할 안내 글자 */
     placeholder?: string;
+    /** 입력값. 주면 controlled 가 된다 */
     value?: string;
+    /** 입력과 전송을 막는다 */
     disabled?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 전송 버튼 색 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     buttonType?: ButtonType;
+    /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;
+    /** 입력할 때마다 값을 준다 */
     onChange?: (value: string) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -3,13 +3,23 @@ import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type ButtonType = "primary" | "secondary" | "ghost";
 interface ChatInputProps {
+    /** 비어 있을 때 표시할 안내 글자 */
     placeholder?: string;
+    /** 입력값. 주면 controlled 가 된다 */
     value?: string;
+    /** 입력과 전송을 막는다 */
     disabled?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 전송 버튼 색 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     buttonType?: ButtonType;
+    /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;
+    /** 입력할 때마다 값을 준다 */
     onChange?: (value: string) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ChatInput/index.js

@@ -199,11 +199,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx12(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx12(Fragment, { children });
   return /* @__PURE__ */ jsxs6("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs6("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx12("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx12(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx12(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -214,7 +219,9 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var MAX_HEIGHT = 400;
 var AutoResizeTextArea = React.forwardRef(
   (props, ref) => {
-    const { value, className, onChange, disabled, bare = false, validations, ...textareaProps } = props;
+    const { value, className, onChange, disabled, bare = false, validations, label, required, ...textareaProps } = props;
+    const autoId = React.useId();
+    const fieldId = props.id ?? autoId;
     const localRef = React.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -248,6 +255,7 @@ var AutoResizeTextArea = React.forwardRef(
           "aria-invalid": hasError(validations) || void 0,
           ...textareaProps,
           ref: setRefs,
+          id: fieldId,
           className,
           disabled,
           value,
@@ -261,12 +269,13 @@ var AutoResizeTextArea = React.forwardRef(
         "aria-invalid": hasError(validations) || void 0,
         ...textareaProps,
         ref: setRefs,
+        id: fieldId,
         disabled,
         value,
         onChange: handleChange
       }
     ) }) });
-    return /* @__PURE__ */ jsx13(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx13(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 AutoResizeTextArea.displayName = "AutoResizeTextArea";
@@ -283,8 +292,11 @@ var ChatInput = React2.forwardRef(
       buttonType = "primary",
       onSubmit,
       onChange,
-      validations
+      validations,
+      label,
+      required
     } = props;
+    const fieldId = React2.useId();
     const isControlled = valueProp !== void 0;
     const [internalValue, setInternalValue] = React2.useState("");
     const value = isControlled ? valueProp : internalValue;
@@ -309,6 +321,7 @@ var ChatInput = React2.forwardRef(
       /* @__PURE__ */ jsx14(
         AutoResizeTextArea_default,
         {
+          id: fieldId,
           ref,
           bare: true,
           className: "chat-input-textarea",
@@ -333,7 +346,7 @@ var ChatInput = React2.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsx14(Field, { validations, children: control });
+    return /* @__PURE__ */ jsx14(Field, { validations, label, required, htmlFor: fieldId, children: control });
   }
 );
 ChatInput.displayName = "ChatInput";

package/dist/components/CheckBox/index.cjs

@@ -1019,6 +1019,9 @@ var import_jsx_runtime294 = require("react/jsx-runtime");
 // 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;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -1060,11 +1063,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -1080,10 +1088,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);
   };
@@ -1091,7 +1100,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  const control = /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
       "input",
       {