@x-plat/design-system 0.10.0 → 0.12.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

@@ -7,6 +7,10 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** 컨트롤 아래에 표시할 검증 메시지. 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

@@ -7,6 +7,10 @@ interface AutoResizeTextAreaProps extends TextareaAttributes {
     /** 컨트롤 아래에 표시할 검증 메시지. 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.d.cts

@@ -1,4 +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';
+import '../../status-njWqQWFV.cjs';

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

@@ -1,4 +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';
+import '../../status-njWqQWFV.js';

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

@@ -12,6 +12,10 @@ interface ChatInputProps {
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
     /** 전송 버튼 색 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     buttonType?: ButtonType;
     /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;

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

@@ -12,6 +12,10 @@ interface ChatInputProps {
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
     /** 전송 버튼 색 */
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     buttonType?: ButtonType;
     /** Enter 또는 전송 버튼을 누르면 현재 값을 준다 */
     onSubmit?: (value: string) => void;

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

@@ -1063,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";

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

@@ -1,6 +1,6 @@
 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 { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import 'react';
 

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

@@ -1,6 +1,6 @@
 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 { L as LegacyStatusType } from '../../status-njWqQWFV.js';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import 'react';
 

package/dist/components/CheckBox/index.js

@@ -1037,11 +1037,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx295(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx295(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx295(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";