@x-plat/design-system 0.12.0 → 0.13.0

package/dist/components/DatePicker/index.js

@@ -167,11 +167,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx5(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx5("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1609,8 +1609,12 @@ var SingleDatePicker = (props) => {
     highlightDates = [],
     locale = "ko",
     rangeStart,
-    rangeEnd
+    rangeEnd,
+    label,
+    required,
+    validations
   } = props;
+  const labelId = React6.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
@@ -1673,10 +1677,12 @@ var SingleDatePicker = (props) => {
   const monthLabels = MONTH_LABELS[locale];
   const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   const hasRange = rangeStart != null && rangeEnd != null;
-  return /* @__PURE__ */ jsxs191(
+  const calendar = /* @__PURE__ */ jsxs191(
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
       children: [
         /* @__PURE__ */ jsxs191("div", { className: "datepicker-header", children: [
           /* @__PURE__ */ jsx300("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx300(ChevronLeftIcon_default, {}) }),
@@ -1697,18 +1703,18 @@ var SingleDatePicker = (props) => {
               y
             );
           }) }),
-          pickerMode === "months" && /* @__PURE__ */ jsx300("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx300(
+          pickerMode === "months" && /* @__PURE__ */ jsx300("div", { className: "datepicker-picker-grid", children: monthLabels.map((label2, i) => /* @__PURE__ */ jsx300(
             "button",
             {
               type: "button",
               className: clsx_default("datepicker-picker-cell", i === month && "active"),
               onClick: () => handleMonthSelect(i),
-              children: label
+              children: label2
             },
             i
           )) }),
           pickerMode === "days" && /* @__PURE__ */ jsxs191(Fragment2, { children: [
-            /* @__PURE__ */ jsx300("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx300(
+            /* @__PURE__ */ jsx300("div", { className: "datepicker-weekdays", children: weekdays.map((label2, i) => /* @__PURE__ */ jsx300(
               "div",
               {
                 className: clsx_default(
@@ -1716,9 +1722,9 @@ var SingleDatePicker = (props) => {
                   i === 0 && "sunday",
                   i === 6 && "saturday"
                 ),
-                children: label
+                children: label2
               },
-              label
+              label2
             )) }),
             /* @__PURE__ */ jsx300("div", { className: "datepicker-grid", children: days.map((day, idx) => {
               const t = day.date.getTime();
@@ -1750,6 +1756,7 @@ var SingleDatePicker = (props) => {
       ]
     }
   );
+  return /* @__PURE__ */ jsx300(Field, { label, required, labelId, validations, children: calendar });
 };
 SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
@@ -1764,7 +1771,18 @@ var formatDate = (date) => {
   return `${y}/${m}/${d}`;
 };
 var InputDatePicker = (props) => {
-  const { value, onChange, minDate, maxDate, disabled, locale = "ko", placeholder } = props;
+  const {
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    disabled,
+    locale = "ko",
+    placeholder,
+    label,
+    required,
+    validations
+  } = props;
   const [isOpen, setIsOpen] = React7.useState(false);
   const [tempDate, setTempDate] = React7.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
@@ -1790,6 +1808,9 @@ var InputDatePicker = (props) => {
         placeholder,
         suffix: /* @__PURE__ */ jsx301(CalenderIcon_default, {}),
         disabled,
+        label,
+        required,
+        validations,
         readOnly: true
       }
     ) }),
@@ -1921,8 +1942,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    locale = "ko"
+    locale = "ko",
+    label,
+    required,
+    validations
   } = props;
+  const labelId = React10.useId();
   const [activeTab, setActiveTab] = React10.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
@@ -1936,70 +1961,79 @@ var RangePicker = (props) => {
   };
   const startMaxDate = maxDate && endDate < maxDate ? endDate : endDate;
   const endMinDate = minDate && startDate > minDate ? startDate : startDate;
-  return /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-datepicker", "range"), children: [
-    /* @__PURE__ */ jsx304("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx304(
-      Tab_default,
-      {
-        activeIndex: activeTab === "start" ? 0 : 1,
-        tabs: [
-          { value: "start", title: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start" },
-          { value: "end", title: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End" }
-        ],
-        onChange: (tab) => setActiveTab(tab.value),
-        type: "toggle",
-        size: "sm"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs194("div", { className: "datepicker-range-panels", children: [
-      /* @__PURE__ */ jsx304(
-        SingleDatePicker_default,
-        {
-          value: startDate,
-          onChange: handleStartChange,
-          minDate,
-          maxDate: startMaxDate,
-          rangeStart: startDate,
-          rangeEnd: endDate,
-          locale
-        }
-      ),
-      /* @__PURE__ */ jsx304(
-        SingleDatePicker_default,
-        {
-          value: endDate,
-          onChange: handleEndChange,
-          minDate: endMinDate,
-          maxDate,
-          rangeStart: startDate,
-          rangeEnd: endDate,
-          locale
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx304("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx304(
-      SingleDatePicker_default,
-      {
-        value: startDate,
-        onChange: handleStartChange,
-        minDate,
-        maxDate: startMaxDate,
-        rangeStart: startDate,
-        rangeEnd: endDate,
-        locale
-      }
-    ) : /* @__PURE__ */ jsx304(
-      SingleDatePicker_default,
-      {
-        value: endDate,
-        onChange: handleEndChange,
-        minDate: endMinDate,
-        maxDate,
-        rangeStart: startDate,
-        rangeEnd: endDate,
-        locale
-      }
-    ) })
-  ] });
+  const calendar = /* @__PURE__ */ jsxs194(
+    "div",
+    {
+      className: clsx_default("lib-xplat-datepicker", "range"),
+      role: "group",
+      "aria-labelledby": label ? labelId : void 0,
+      children: [
+        /* @__PURE__ */ jsx304("div", { className: "datepicker-range-tabs", children: /* @__PURE__ */ jsx304(
+          Tab_default,
+          {
+            activeIndex: activeTab === "start" ? 0 : 1,
+            tabs: [
+              { value: "start", title: locale === "ko" ? "\uC2DC\uC791\uC77C" : "Start" },
+              { value: "end", title: locale === "ko" ? "\uC885\uB8CC\uC77C" : "End" }
+            ],
+            onChange: (tab) => setActiveTab(tab.value),
+            type: "toggle",
+            size: "sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs194("div", { className: "datepicker-range-panels", children: [
+          /* @__PURE__ */ jsx304(
+            SingleDatePicker_default,
+            {
+              value: startDate,
+              onChange: handleStartChange,
+              minDate,
+              maxDate: startMaxDate,
+              rangeStart: startDate,
+              rangeEnd: endDate,
+              locale
+            }
+          ),
+          /* @__PURE__ */ jsx304(
+            SingleDatePicker_default,
+            {
+              value: endDate,
+              onChange: handleEndChange,
+              minDate: endMinDate,
+              maxDate,
+              rangeStart: startDate,
+              rangeEnd: endDate,
+              locale
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx304("div", { className: "datepicker-range-mobile", children: activeTab === "start" ? /* @__PURE__ */ jsx304(
+          SingleDatePicker_default,
+          {
+            value: startDate,
+            onChange: handleStartChange,
+            minDate,
+            maxDate: startMaxDate,
+            rangeStart: startDate,
+            rangeEnd: endDate,
+            locale
+          }
+        ) : /* @__PURE__ */ jsx304(
+          SingleDatePicker_default,
+          {
+            value: endDate,
+            onChange: handleEndChange,
+            minDate: endMinDate,
+            maxDate,
+            rangeStart: startDate,
+            rangeEnd: endDate,
+            locale
+          }
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx304(Field, { label, required, labelId, validations, children: calendar });
 };
 RangePicker.displayName = "RangePicker";
 var RangePicker_default = RangePicker;

package/dist/components/Editor/index.css

@@ -286,6 +286,9 @@
   color: var(--semantic-text-inverse);
   border-color: var(--semantic-surface-brand-default);
 }
+.lib-xplat-editor.readonly .lib-xplat-editor__editable ul.checklist > li::before {
+  cursor: default;
+}
 .lib-xplat-editor__editable .align-center {
   text-align: center;
 }

package/dist/components/FieldMessage/index.cjs

@@ -166,11 +166,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

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

@@ -31,6 +31,14 @@ interface FieldProps {
     required?: boolean;
     /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
     htmlFor?: string;
+    /**
+     * 라벨 자체에 붙일 id.
+     *
+     * `htmlFor` 로 이을 수 없는 컨트롤 — 달력처럼 포커스 대상이 여럿이라
+     * 하나를 고를 수 없는 것 — 이 `role="group"` + `aria-labelledby` 로
+     * 라벨을 가리킬 때 쓴다.
+     */
+    labelId?: string;
     validations?: Validation[];
     children: React.ReactNode;
 }

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

@@ -31,6 +31,14 @@ interface FieldProps {
     required?: boolean;
     /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
     htmlFor?: string;
+    /**
+     * 라벨 자체에 붙일 id.
+     *
+     * `htmlFor` 로 이을 수 없는 컨트롤 — 달력처럼 포커스 대상이 여럿이라
+     * 하나를 고를 수 없는 것 — 이 `role="group"` + `aria-labelledby` 로
+     * 라벨을 가리킬 때 쓴다.
+     */
+    labelId?: string;
     validations?: Validation[];
     children: React.ReactNode;
 }

package/dist/components/FieldMessage/index.js

@@ -138,11 +138,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/FileUpload/index.cjs

@@ -1076,11 +1076,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1099,10 +1099,13 @@ var FileUpload = (props) => {
     multiple = false,
     maxSize,
     onChange,
-    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    placeholder = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = import_react.default.useId();
   const [isDragOver, setIsDragOver] = import_react.default.useState(false);
   const inputRef = import_react.default.useRef(null);
   const handleFiles = (fileList) => {
@@ -1147,6 +1150,7 @@ var FileUpload = (props) => {
           "input",
           {
             ref: inputRef,
+            id: fieldId,
             type: "file",
             accept,
             multiple,
@@ -1155,12 +1159,12 @@ var FileUpload = (props) => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "upload-icon", children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(UploadIcon_default, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-label", children: placeholder }),
         description && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("p", { className: "upload-description", children: description })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;

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

@@ -12,10 +12,23 @@ interface FileUploadProps {
     maxSize?: number;
     /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
-    /** 상자 안 큰 글자 */
-    label?: string;
+    /**
+     * 상자 안 큰 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
     /** 상자 안 작은 설명 */
     description?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
 }
 declare const FileUpload: React.FC<FileUploadProps>;
 

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

@@ -12,10 +12,23 @@ interface FileUploadProps {
     maxSize?: number;
     /** 고른 파일 목록을 준다. maxSize 로 걸러진 것은 빠져 있다 */
     onChange?: (files: File[]) => void;
-    /** 상자 안 큰 글자 */
-    label?: string;
+    /**
+     * 상자 안 큰 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
     /** 상자 안 작은 설명 */
     description?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
 }
 declare const FileUpload: React.FC<FileUploadProps>;
 

package/dist/components/FileUpload/index.js

@@ -1040,11 +1040,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1063,10 +1063,13 @@ var FileUpload = (props) => {
     multiple = false,
     maxSize,
     onChange,
-    label = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
+    placeholder = "\uD30C\uC77C\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \uD074\uB9AD\uD558\uC5EC \uC5C5\uB85C\uB4DC",
     description,
-    validations
+    validations,
+    label,
+    required
   } = props;
+  const fieldId = React.useId();
   const [isDragOver, setIsDragOver] = React.useState(false);
   const inputRef = React.useRef(null);
   const handleFiles = (fileList) => {
@@ -1111,6 +1114,7 @@ var FileUpload = (props) => {
           "input",
           {
             ref: inputRef,
+            id: fieldId,
             type: "file",
             accept,
             multiple,
@@ -1119,12 +1123,12 @@ var FileUpload = (props) => {
           }
         ),
         /* @__PURE__ */ jsx296("div", { className: "upload-icon", children: /* @__PURE__ */ jsx296(UploadIcon_default, {}) }),
-        /* @__PURE__ */ jsx296("p", { className: "upload-label", children: label }),
+        /* @__PURE__ */ jsx296("p", { className: "upload-label", children: placeholder }),
         description && /* @__PURE__ */ jsx296("p", { className: "upload-description", children: description })
       ]
     }
   );
-  return /* @__PURE__ */ jsx296(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx296(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;

package/dist/components/ImageSelector/index.cjs

@@ -1143,11 +1143,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1161,7 +1161,8 @@ var hasError = (validations) => !!validations?.some((v) => v.status === "error")
 // src/components/ImageSelector/ImageSelector.tsx
 var import_jsx_runtime296 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
-  const { value, label, onChange, validations } = props;
+  const { value, placeholder, onChange, validations, label, required } = props;
+  const fieldId = import_react.default.useId();
   const [previewUrl, setPreviewUrl] = import_react.default.useState();
   import_react.default.useEffect(() => {
     if (!value) {
@@ -1191,7 +1192,7 @@ var ImageSelector = (props) => {
       {
         type: "file",
         accept: "image/*",
-        id: "image-input",
+        id: fieldId,
         onChange: handleFileChange,
         ref: inputRef,
         "aria-invalid": hasError(validations) || void 0
@@ -1203,10 +1204,10 @@ var ImageSelector = (props) => {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "content", children: previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
       /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(ImageIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "label", children: placeholder || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { validations, children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;

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

@@ -6,8 +6,21 @@ interface ImageSelectorProps {
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 비어 있을 때 표시할 안내 글자 */
-    label?: string;
+    /**
+     * 비어 있을 때 상자 안에 표시할 안내 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }

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

@@ -6,8 +6,21 @@ interface ImageSelectorProps {
     value?: File;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 비어 있을 때 표시할 안내 글자 */
-    label?: string;
+    /**
+     * 비어 있을 때 상자 안에 표시할 안내 글자.
+     *
+     * **0.13.0 에서 `label` 이 필드 라벨로 바뀌면서 이 이름으로 옮겨졌다.**
+     * DS 전체에서 `placeholder` 는 "빈 컨트롤 안에 보이는 글자" 를 뜻한다.
+     */
+    placeholder?: string;
+    /**
+     * 상자 **위에** 붙는 필드 라벨. 클릭하면 파일 선택창이 열린다.
+     *
+     * **0.13.0 이전에는 상자 안 글자를 뜻했다.** 그 용도는 `placeholder` 로 옮겼다.
+     */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 이미지를 고르거나 지우면 호출된다. 지우면 undefined 가 온다 */
     onChange?: (value: File | undefined) => void;
 }

package/dist/components/ImageSelector/index.js

@@ -1107,11 +1107,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),
@@ -1125,7 +1125,8 @@ var hasError = (validations) => !!validations?.some((v) => v.status === "error")
 // src/components/ImageSelector/ImageSelector.tsx
 import { jsx as jsx296, jsxs as jsxs190 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
-  const { value, label, onChange, validations } = props;
+  const { value, placeholder, onChange, validations, label, required } = props;
+  const fieldId = React.useId();
   const [previewUrl, setPreviewUrl] = React.useState();
   React.useEffect(() => {
     if (!value) {
@@ -1155,7 +1156,7 @@ var ImageSelector = (props) => {
       {
         type: "file",
         accept: "image/*",
-        id: "image-input",
+        id: fieldId,
         onChange: handleFileChange,
         ref: inputRef,
         "aria-invalid": hasError(validations) || void 0
@@ -1167,10 +1168,10 @@ var ImageSelector = (props) => {
     ] }),
     /* @__PURE__ */ jsx296("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx296("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs190("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
       /* @__PURE__ */ jsx296("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx296(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx296("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+      /* @__PURE__ */ jsx296("div", { className: "label", children: placeholder || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
-  return /* @__PURE__ */ jsx296(Field, { validations, children: control });
+  return /* @__PURE__ */ jsx296(Field, { label, required, htmlFor: fieldId, validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;