@x-plat/design-system 0.9.0 → 0.10.0

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

@@ -6,6 +6,7 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 테두리와 배경을 없앤다. ChatInput 처럼 감싸는 쪽이 껍데기를 그릴 때 */
     bare?: boolean;
 }
 declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -6,6 +6,7 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 테두리와 배경을 없앤다. ChatInput 처럼 감싸는 쪽이 껍데기를 그릴 때 */
     bare?: boolean;
 }
 declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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-g_KP3qT6.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-g_KP3qT6.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.d.cts

@@ -3,13 +3,19 @@ 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[];
+    /** 전송 버튼 색 */
     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,19 @@ 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[];
+    /** 전송 버튼 색 */
     buttonType?: ButtonType;
+    /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;
+    /** 입력할 때마다 값을 준다 */
     onChange?: (value: string) => void;
 }
 declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;

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 = "";
@@ -1080,10 +1083,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 +1095,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",
       {

package/dist/components/CheckBox/index.css

@@ -110,6 +110,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);
 }
@@ -125,6 +126,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);
 }

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

@@ -1,17 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+/** CheckBox 의 상태 색 */
+type CheckBoxType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type CheckBoxTypeInput = CheckBoxType | LegacyStatusType;
 interface CheckBoxProps extends Omit<InputAttributes, "size"> {
+    /** 체크박스 옆에 붙는 글자. 클릭하면 체크가 토글된다 */
     label?: string;
+    /** 체크 여부. 주면 controlled 가 되므로 onChange 와 함께 쓴다 */
     checked?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기. 글자 크기도 함께 바뀐다 */
     size?: CheckBoxSize;
-    type?: CheckBoxType;
+    /** 체크됐을 때의 색 */
+    type?: CheckBoxTypeInput;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;

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

@@ -1,17 +1,25 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+/** CheckBox 의 상태 색 */
+type CheckBoxType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type CheckBoxTypeInput = CheckBoxType | LegacyStatusType;
 interface CheckBoxProps extends Omit<InputAttributes, "size"> {
+    /** 체크박스 옆에 붙는 글자. 클릭하면 체크가 토글된다 */
     label?: string;
+    /** 체크 여부. 주면 controlled 가 되므로 onChange 와 함께 쓴다 */
     checked?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기. 글자 크기도 함께 바뀐다 */
     size?: CheckBoxSize;
-    type?: CheckBoxType;
+    /** 체크됐을 때의 색 */
+    type?: CheckBoxTypeInput;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;

package/dist/components/CheckBox/index.js

@@ -993,6 +993,9 @@ import { jsx as jsx294, jsxs as jsxs188 } from "react/jsx-runtime";
 // src/tokens/index.ts
 import { cssVar } from "@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 = "";
@@ -1054,10 +1057,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);
   };
@@ -1065,7 +1069,7 @@ var CheckBox = (props) => {
   const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  const control = /* @__PURE__ */ jsxs190("label", { className: clsx_default("lib-xplat-checkbox", size, type, className), children: [
+  const control = /* @__PURE__ */ jsxs190("label", { className: clsx_default("lib-xplat-checkbox", size, statusType, className), children: [
     /* @__PURE__ */ jsx296(
       "input",
       {

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

@@ -5,7 +5,9 @@ type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "war
 type ChipSize = "sm" | "md" | "lg";
 interface ChipProps {
     children: React.ReactNode;
+    /** 칩 색. 상태를 나타낸다 */
     type?: ChipType;
+    /** 칩 크기 */
     size?: ChipSize;
 }
 declare const Chip: {

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

@@ -5,7 +5,9 @@ type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "war
 type ChipSize = "sm" | "md" | "lg";
 interface ChipProps {
     children: React.ReactNode;
+    /** 칩 색. 상태를 나타낸다 */
     type?: ChipType;
+    /** 칩 크기 */
     size?: ChipSize;
 }
 declare const Chip: {

package/dist/components/DatePicker/index.cjs

@@ -1792,7 +1792,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime303 = 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_react8.default.useState({
     left: 0,
     width: 0
@@ -1807,7 +1808,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
       TabItem_default,
       {
@@ -1820,7 +1821,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
       "div",
       {
         className: "tab-toggle-underline",

package/dist/components/DatePicker/index.js

@@ -1753,7 +1753,8 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 import { jsx as jsx303, jsxs as jsxs193 } 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] = React8.useState({
     left: 0,
     width: 0
@@ -1768,7 +1769,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
+  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ jsx303(
       TabItem_default,
       {
@@ -1781,7 +1782,7 @@ var Tab = (props) => {
       },
       `${tab.value}_${idx}`
     )),
-    type === "toggle" && /* @__PURE__ */ jsx303(
+    shape === "toggle" && /* @__PURE__ */ jsx303(
       "div",
       {
         className: "tab-toggle-underline",

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

@@ -6,6 +6,7 @@ interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
+    /** 패널 너비 */
     size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;

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

@@ -6,6 +6,7 @@ interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     placement?: DrawerPlacement;
+    /** 패널 너비 */
     size?: DrawerSize;
     title?: React.ReactNode;
     children?: React.ReactNode;

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

@@ -2,13 +2,19 @@ import React from 'react';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 interface FileUploadProps {
+    /** 고를 수 있는 파일 형식 (input 의 accept 와 같다) */
     accept?: string;
+    /** 여러 개를 한 번에 고를 수 있게 한다 */
     multiple?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 바이트 단위 최대 크기. **초과분은 조용히 걸러진다** */
     maxSize?: number;
+    /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
+    /** 상자 안 큰 글자 */
     label?: string;
+    /** 상자 안 작은 설명 */
     description?: string;
 }
 declare const FileUpload: React.FC<FileUploadProps>;

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

@@ -2,13 +2,19 @@ import React from 'react';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 interface FileUploadProps {
+    /** 고를 수 있는 파일 형식 (input 의 accept 와 같다) */
     accept?: string;
+    /** 여러 개를 한 번에 고를 수 있게 한다 */
     multiple?: boolean;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 바이트 단위 최대 크기. **초과분은 조용히 걸러진다** */
     maxSize?: number;
+    /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
+    /** 상자 안 큰 글자 */
     label?: string;
+    /** 상자 안 작은 설명 */
     description?: string;
 }
 declare const FileUpload: React.FC<FileUploadProps>;

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

@@ -2,10 +2,13 @@ import React from 'react';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 interface ImageSelectorProps {
+    /** 선택된 이미지 파일. 주면 미리보기가 나온다 */
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 비어 있을 때 표시할 안내 글자 */
     label?: string;
+    /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }
 declare const ImageSelector: React.FC<ImageSelectorProps>;

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

@@ -2,10 +2,13 @@ import React from 'react';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 interface ImageSelectorProps {
+    /** 선택된 이미지 파일. 주면 미리보기가 나온다 */
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 비어 있을 때 표시할 안내 글자 */
     label?: string;
+    /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }
 declare const ImageSelector: React.FC<ImageSelectorProps>;

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

@@ -4,9 +4,12 @@ import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {
+    /** 입력 종류. number 는 천 단위 구분, tel 은 하이픈을 자동으로 넣는다 */
     type?: "text" | "number" | "email" | "password" | "tel";
+    /** 높이와 글자 크기 */
     size?: InputSize$1;
     validations?: Validation[];
+    /** 입력칸 오른쪽에 붙일 요소 (단위·아이콘 등) */
     suffix?: React.ReactNode;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -14,6 +17,7 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 type InputSize = "sm" | "md" | "lg";
 interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
+    /** 높이와 글자 크기 */
     size?: InputSize;
     reg?: RegExp;
 }

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

@@ -4,9 +4,12 @@ import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {
+    /** 입력 종류. number 는 천 단위 구분, tel 은 하이픈을 자동으로 넣는다 */
     type?: "text" | "number" | "email" | "password" | "tel";
+    /** 높이와 글자 크기 */
     size?: InputSize$1;
     validations?: Validation[];
+    /** 입력칸 오른쪽에 붙일 요소 (단위·아이콘 등) */
     suffix?: React.ReactNode;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -14,6 +17,7 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 type InputSize = "sm" | "md" | "lg";
 interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
+    /** 높이와 글자 크기 */
     size?: InputSize;
     reg?: RegExp;
 }