@uniai-fe/uds-primitives 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -103,7 +103,7 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.8.1",
-    "react-hook-form": "^7.71.2",
+    "react-hook-form": "^7.72.0",
     "sass": "^1.98.0",
     "typescript": "~5.9.3"
   }

package/src/components/form/markup/form-field/Header.tsx

@@ -19,6 +19,7 @@ import { Slot } from "../../../slot";
 export default function FormFieldHeader({
   className,
   label,
+  labelJsx,
   labelAs: LabelTag = "h5",
   labelId,
   labelProps = {},
@@ -26,12 +27,15 @@ export default function FormFieldHeader({
   children,
   ...headerAttrs
 }: FormFieldHeaderProps) {
+  const resolvedLabel =
+    labelJsx ?? (label ? <Slot.Text>{label}</Slot.Text> : null);
+
   return (
     <header className={clsx("form-field-header", className)} {...headerAttrs}>
-      {label && (
+      {resolvedLabel && (
         <LabelTag className="form-field-label" {...labelProps} id={labelId}>
-          {/* 변경: label 텍스트 래핑 규칙을 Slot.Text로 통일한다. */}
-          <Slot.Text>{label}</Slot.Text>
+          {/* JSX 라벨은 그대로 렌더하고, 문자열/숫자만 Slot.Text로 감싼다. */}
+          {resolvedLabel}
           {required && <span className="form-field-required">*</span>}
         </LabelTag>
       )}

package/src/components/input/markup/date/Template.tsx

@@ -132,6 +132,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         ) ?? "",
       [calendarValue, priority],
     );
+    const serializedCalendarValue = serializeCalendarValue(calendarValue);
 
     const handleTriggerClick = (event: ReactMouseEvent<Element>) => {
       triggerOnClick?.(event);
@@ -167,8 +168,6 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
     const triggerNode = trigger ?? renderTrigger?.(triggerRenderProps) ?? (
       <InputDateTrigger
         id={id}
-        name={name ?? register?.name}
-        register={register}
         placeholder={placeholder}
         displayValue={triggerValue}
         disabled={disabled}
@@ -180,24 +179,35 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
     );
 
     return (
-      <Calendar.Root
-        ref={ref}
-        className={clsx("input-date-field", className)}
-        mode={mode}
-        columns={columns}
-        disabled={disabled}
-        readOnly={readOnly}
-        value={calendarValue}
-        onChange={handleCalendarChange}
-        // 변경: Mantine DatePicker는 valueFormat prop을 지원하지 않으므로 옵션을 그대로 전달한다.
-        datePickerProps={datePickerProps}
-        header={header}
-        footer={footerContent}
-        open={resolvedCalendarOpen}
-        onOpenChange={setInternalCalendarOpen}
-      >
-        {triggerNode}
-      </Calendar.Root>
+      <>
+        <Calendar.Root
+          ref={ref}
+          className={clsx("input-date-field", className)}
+          mode={mode}
+          columns={columns}
+          disabled={disabled}
+          readOnly={readOnly}
+          value={calendarValue}
+          onChange={handleCalendarChange}
+          // 변경: Mantine DatePicker는 valueFormat prop을 지원하지 않으므로 옵션을 그대로 전달한다.
+          datePickerProps={datePickerProps}
+          header={header}
+          footer={footerContent}
+          open={resolvedCalendarOpen}
+          onOpenChange={setInternalCalendarOpen}
+        >
+          {triggerNode}
+        </Calendar.Root>
+        {(register?.name || name) && (
+          <input
+            // 변경: trigger 표시값과 저장값을 분리하기 위해 form 참여는 hidden input만 담당한다.
+            type="hidden"
+            value={serializedCalendarValue}
+            name={register?.name ?? name}
+            {...register}
+          />
+        )}
+      </>
     );
   },
 );