@uniai-fe/uds-primitives 0.12.10 → 0.12.11

package/dist/styles.css

@@ -4657,7 +4657,9 @@ figure.chip {
 }
 
 .input-time-period-field {
+  flex: 0 1 var(--input-time-period-field-width);
   width: var(--input-time-period-field-width);
+  min-width: 0;
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
@@ -4728,6 +4730,15 @@ figure.chip {
   border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
+.input-time:where([data-active-unit][data-format="12h"])
+  .input-time-trigger-input {
+  padding-inline: var(--spacing-padding-2);
+}
+.input-time:where([data-active-unit][data-format="12h"])
+  .input-time-icon-button {
+  margin-left: var(--spacing-gap-2);
+}
+
 .input-time:where([data-size="small"]) {
   --input-time-radius: var(--input-default-radius-small);
   --input-time-stepper-button-height: calc(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.10",
+  "version": "0.12.11",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,11 +87,11 @@
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.3",
-    "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.6.0",
+    "@uniai-fe/eslint-config": "0.4.4",
     "@uniai-fe/next-devkit": "0.4.1",
-    "@uniai-fe/util-functions": "0.4.3"
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/uds-foundation": "0.6.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

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

@@ -294,6 +294,23 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
             name={register?.name ?? name}
             form={form ?? hiddenInputProps?.form}
             required={required ?? hiddenInputProps?.required}
+            ref={node => {
+              register?.ref(node);
+              if (node && register) {
+                // RHF ref의 form default 적용이 끝난 뒤 Calendar 값을 DOM과 RHF storage에 동기화한다.
+                queueMicrotask(() => {
+                  if (!node.isConnected) {
+                    return;
+                  }
+                  node.value = serializedCalendarValue;
+                  void register.onChange({
+                    target: node,
+                    currentTarget: node,
+                    type: "change",
+                  } as unknown as ChangeEvent<HTMLInputElement>);
+                });
+              }
+            }}
           />
         )}
       </>

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

@@ -348,6 +348,23 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={startRegister?.name ?? startName}
             form={form ?? startHiddenInputProps?.form}
             required={required ?? startHiddenInputProps?.required}
+            ref={node => {
+              startRegister?.ref(node);
+              if (node && startRegister) {
+                // RHF ref의 form default 적용이 끝난 뒤 range 시작값을 DOM과 RHF storage에 동기화한다.
+                queueMicrotask(() => {
+                  if (!node.isConnected) {
+                    return;
+                  }
+                  node.value = serializedStartValue;
+                  void startRegister.onChange({
+                    target: node,
+                    currentTarget: node,
+                    type: "change",
+                  } as unknown as ChangeEvent<HTMLInputElement>);
+                });
+              }
+            }}
           />
         )}
         {(endRegister?.name || endName) && (
@@ -360,6 +377,23 @@ const InputDateRangeTemplate = forwardRef<HTMLElement, InputCalendarRangeProps>(
             name={endRegister?.name ?? endName}
             form={form ?? endHiddenInputProps?.form}
             required={required ?? endHiddenInputProps?.required}
+            ref={node => {
+              endRegister?.ref(node);
+              if (node && endRegister) {
+                // RHF ref의 form default 적용이 끝난 뒤 range 종료값을 DOM과 RHF storage에 동기화한다.
+                queueMicrotask(() => {
+                  if (!node.isConnected) {
+                    return;
+                  }
+                  node.value = serializedEndValue;
+                  void endRegister.onChange({
+                    target: node,
+                    currentTarget: node,
+                    type: "change",
+                  } as unknown as ChangeEvent<HTMLInputElement>);
+                });
+              }
+            }}
           />
         )}
       </>

package/src/components/input/markup/time/Trigger.tsx

@@ -126,6 +126,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
         data-state={state}
         data-readonly={readOnly ? "true" : undefined}
         data-active-unit={activeUnit ?? undefined}
+        data-format={format}
         data-icon-position={iconPosition}
         onBlur={onRootBlur}
         onClick={onRootClick}

package/src/components/input/styles/time.scss

@@ -85,7 +85,9 @@
 }
 
 .input-time-period-field {
+  flex: 0 1 var(--input-time-period-field-width);
   width: var(--input-time-period-field-width);
+  min-width: 0;
   height: var(--input-time-field-height);
   padding: 0;
   border: 0;
@@ -160,6 +162,16 @@
   border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
+.input-time:where([data-active-unit][data-format="12h"]) {
+  .input-time-trigger-input {
+    padding-inline: var(--spacing-padding-2);
+  }
+
+  .input-time-icon-button {
+    margin-left: var(--spacing-gap-2);
+  }
+}
+
 .input-time:where([data-size="small"]) {
   --input-time-radius: var(--input-default-radius-small);
   --input-time-stepper-button-height: calc(