@uniai-fe/uds-primitives 0.4.2 → 0.4.4

package/dist/styles.css

@@ -1580,6 +1580,10 @@
   color: var(--color-common-100);
 }
 
+.calendar-day:where(:disabled, [data-disabled=true]) {
+  color: var(--color-label-disabled);
+}
+
 .calendar-day:where(:not([data-disabled=true])):hover {
   background-color: var(--color-secondary-default);
   color: var(--color-label-standard);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/calendar/styles/mantine-calendar.scss

@@ -229,6 +229,11 @@
   color: var(--color-common-100);
 }
 
+.calendar-day:where(:disabled, [data-disabled="true"]) {
+  // 변경: disabled day는 배경 변경 없이 텍스트 컬러만 낮춰 상태를 드러낸다.
+  color: var(--color-label-disabled);
+}
+
 .calendar-day:where(:not([data-disabled="true"])):hover {
   background-color: var(--color-secondary-default);
   color: var(--color-label-standard);

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}
+          />
+        )}
+      </>
     );
   },
 );