@x-plat/design-system 0.10.0 → 0.11.0

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 
 interface StepItem {
     title: string;

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
 
 interface StepItem {
     title: string;

package/dist/components/Switch/index.cjs

@@ -179,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";
@@ -199,8 +204,11 @@ var Switch = (props) => {
     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);
@@ -222,6 +230,7 @@ var Switch = (props) => {
   const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      id: fieldId,
       className: clsx_default(
         "lib-xplat-switch",
         size,
@@ -236,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);

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

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
+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";
@@ -13,6 +14,10 @@ interface SwitchProps {
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
     /** 스위치 크기 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     size?: SwitchSize;
     /** 켜졌을 때의 색 */
     type?: SwitchTypeInput;

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

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
+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";
@@ -13,6 +14,10 @@ interface SwitchProps {
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
     /** 스위치 크기 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     size?: SwitchSize;
     /** 켜졌을 때의 색 */
     type?: SwitchTypeInput;

package/dist/components/Switch/index.js

@@ -143,11 +143,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";
@@ -163,8 +168,11 @@ var Switch = (props) => {
     type = "primary",
     disabled,
     onChange,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = React.useId();
   const statusType = normalizeStatus(type);
   const [isAnimating, setIsAnimating] = React.useState(false);
   const timeoutRef = React.useRef(null);
@@ -186,6 +194,7 @@ var Switch = (props) => {
   const control = /* @__PURE__ */ jsx5(
     "div",
     {
+      id: fieldId,
       className: clsx_default(
         "lib-xplat-switch",
         size,
@@ -200,7 +209,7 @@ var Switch = (props) => {
       children: /* @__PURE__ */ jsx5("div", { className: clsx_default("knob", value ? "checked" : void 0) })
     }
   );
-  return /* @__PURE__ */ jsx5(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx5(Field, { validations, label, required, htmlFor: fieldId, children: control });
 };
 Switch.displayName = "Switch";
 var Switch_default = Switch;

package/dist/components/Tab/index.cjs

@@ -59,9 +59,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var TabItem = import_react.default.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    "button",
     {
       ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
       className: clsx_default("tab-item", isActive ? "active" : null),
       onClick,
       children: title
@@ -81,6 +85,18 @@ var Tab = (props) => {
     width: 0
   });
   const itemRefs = import_react2.default.useRef([]);
+  const handleKeyDown = (e) => {
+    const last = tabs.length - 1;
+    let next = null;
+    if (e.key === "ArrowRight") next = activeIndex >= last ? 0 : activeIndex + 1;
+    else if (e.key === "ArrowLeft") next = activeIndex <= 0 ? last : activeIndex - 1;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    if (next === null) return;
+    e.preventDefault();
+    onChange(tabs[next], next);
+    itemRefs.current[next]?.focus();
+  };
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
@@ -90,30 +106,38 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-tab", `type-${shape}`, size),
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      children: [
+        tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          TabItem_default,
+          {
+            onClick: () => handleChangeActiveTab(tab, idx),
+            isActive: activeIndex === idx,
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            title: tab.title
+          },
+          `${tab.value}_${idx}`
+        )),
+        shape === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "tab-toggle-underline",
+            style: {
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "Tab";
 var Tab_default = Tab;

package/dist/components/Tab/index.css

@@ -42,6 +42,10 @@
   border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
+  appearance: none;
+  font: inherit;
+  border: none;
+  background: none;
   flex: 1;
   padding: var(--spacing-space-1) var(--spacing-space-6);
   height: 100%;

package/dist/components/Tab/index.js

@@ -23,9 +23,13 @@ import { jsx } from "react/jsx-runtime";
 var TabItem = React.forwardRef((props, ref) => {
   const { isActive, title, onClick } = props;
   return /* @__PURE__ */ jsx(
-    "div",
+    "button",
     {
       ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
       className: clsx_default("tab-item", isActive ? "active" : null),
       onClick,
       children: title
@@ -45,6 +49,18 @@ var Tab = (props) => {
     width: 0
   });
   const itemRefs = React2.useRef([]);
+  const handleKeyDown = (e) => {
+    const last = tabs.length - 1;
+    let next = null;
+    if (e.key === "ArrowRight") next = activeIndex >= last ? 0 : activeIndex + 1;
+    else if (e.key === "ArrowLeft") next = activeIndex <= 0 ? last : activeIndex - 1;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    if (next === null) return;
+    e.preventDefault();
+    onChange(tabs[next], next);
+    itemRefs.current[next]?.focus();
+  };
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
@@ -54,30 +70,38 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-tab", `type-${shape}`, size), children: [
-    tabs.map((tab, idx) => /* @__PURE__ */ jsx2(
-      TabItem_default,
-      {
-        onClick: () => handleChangeActiveTab(tab, idx),
-        isActive: activeIndex === idx,
-        ref: (el) => {
-          itemRefs.current[idx] = el;
-        },
-        title: tab.title
-      },
-      `${tab.value}_${idx}`
-    )),
-    shape === "toggle" && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "tab-toggle-underline",
-        style: {
-          left: underlineStyle.left,
-          width: underlineStyle.width
-        }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default("lib-xplat-tab", `type-${shape}`, size),
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      children: [
+        tabs.map((tab, idx) => /* @__PURE__ */ jsx2(
+          TabItem_default,
+          {
+            onClick: () => handleChangeActiveTab(tab, idx),
+            isActive: activeIndex === idx,
+            ref: (el) => {
+              itemRefs.current[idx] = el;
+            },
+            title: tab.title
+          },
+          `${tab.value}_${idx}`
+        )),
+        shape === "toggle" && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "tab-toggle-underline",
+            style: {
+              left: underlineStyle.left,
+              width: underlineStyle.width
+            }
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "Tab";
 var Tab_default = Tab;

package/dist/components/TextArea/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";
@@ -194,16 +199,21 @@ var TextArea = import_react.default.forwardRef(
       className,
       size = "md",
       validations,
+      label,
+      required,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
+    const autoId = import_react.default.useId();
+    const fieldId = props.id ?? autoId;
     const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "textarea",
       {
         ...textareaProps,
         ref,
+        id: fieldId,
         rows,
         disabled,
         "aria-invalid": hasError(validations) || void 0,
@@ -211,7 +221,7 @@ var TextArea = import_react.default.forwardRef(
         style: { resize }
       }
     ) });
-    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 });
   }
 );
 TextArea.displayName = "TextArea";