@uniai-fe/uds-primitives 0.12.9 → 0.12.11

package/dist/styles.css

@@ -1306,17 +1306,26 @@
   line-height: 0;
 }
 
-.badge:where([data-style="fill"][data-preset="primary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="primary"],
+  [data-style="count"][data-preset="primary"]
+) {
   --badge-background-color: var(--color-primary-default);
   --badge-text-color: var(--color-common-100);
 }
 
-.badge:where([data-style="fill"][data-preset="secondary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="secondary"],
+  [data-style="count"][data-preset="secondary"]
+) {
   --badge-background-color: var(--color-secondary-default);
   --badge-text-color: var(--color-primary-default);
 }
 
-.badge:where([data-style="fill"][data-preset="tertiary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="tertiary"],
+  [data-style="count"][data-preset="tertiary"]
+) {
   --badge-background-color: var(--color-cool-gray-10);
   --badge-text-color: var(--color-common-100);
 }
@@ -1326,22 +1335,34 @@
   --badge-text-color: var(--color-label-neutral);
 }
 
-.badge:where([data-style="fill"][data-preset="green"]) {
+.badge:where(
+  [data-style="fill"][data-preset="green"],
+  [data-style="count"][data-preset="green"]
+) {
   --badge-background-color: var(--color-green-95);
   --badge-text-color: var(--color-green-45);
 }
 
-.badge:where([data-style="fill"][data-preset="yellow"]) {
+.badge:where(
+  [data-style="fill"][data-preset="yellow"],
+  [data-style="count"][data-preset="yellow"]
+) {
   --badge-background-color: var(--color-yellow-95);
   --badge-text-color: var(--color-yellow-45);
 }
 
-.badge:where([data-style="fill"][data-preset="orange"]) {
+.badge:where(
+  [data-style="fill"][data-preset="orange"],
+  [data-style="count"][data-preset="orange"]
+) {
   --badge-background-color: var(--color-orange-95);
   --badge-text-color: var(--color-orange-55);
 }
 
-.badge:where([data-style="fill"][data-preset="red"]) {
+.badge:where(
+  [data-style="fill"][data-preset="red"],
+  [data-style="count"][data-preset="red"]
+) {
   --badge-background-color: var(--color-red-95);
   --badge-text-color: var(--color-red-55);
 }
@@ -1386,11 +1407,6 @@
   --badge-text-color: var(--color-red-55);
 }
 
-.badge:where([data-style="count"][data-preset="primary"]) {
-  --badge-background-color: var(--color-primary-default);
-  --badge-text-color: var(--color-common-100);
-}
-
 .badge:where([data-style="count"][data-preset="gray"]) {
   --badge-background-color: var(--color-cool-gray-90);
   --badge-text-color: var(--color-label-standard);
@@ -4641,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;
@@ -4712,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.9",
+  "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/uds-foundation": "0.6.0",
-    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/eslint-config": "0.4.4",
     "@uniai-fe/next-devkit": "0.4.1",
-    "@uniai-fe/tsconfig": "0.2.0"
+    "@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/badge/styles/badge.scss

@@ -121,17 +121,26 @@
   line-height: 0;
 }
 
-.badge:where([data-style="fill"][data-preset="primary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="primary"],
+  [data-style="count"][data-preset="primary"]
+) {
   --badge-background-color: var(--color-primary-default);
   --badge-text-color: var(--color-common-100);
 }
 
-.badge:where([data-style="fill"][data-preset="secondary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="secondary"],
+  [data-style="count"][data-preset="secondary"]
+) {
   --badge-background-color: var(--color-secondary-default);
   --badge-text-color: var(--color-primary-default);
 }
 
-.badge:where([data-style="fill"][data-preset="tertiary"]) {
+.badge:where(
+  [data-style="fill"][data-preset="tertiary"],
+  [data-style="count"][data-preset="tertiary"]
+) {
   --badge-background-color: var(--color-cool-gray-10);
   --badge-text-color: var(--color-common-100);
 }
@@ -141,22 +150,34 @@
   --badge-text-color: var(--color-label-neutral);
 }
 
-.badge:where([data-style="fill"][data-preset="green"]) {
+.badge:where(
+  [data-style="fill"][data-preset="green"],
+  [data-style="count"][data-preset="green"]
+) {
   --badge-background-color: var(--color-green-95);
   --badge-text-color: var(--color-green-45);
 }
 
-.badge:where([data-style="fill"][data-preset="yellow"]) {
+.badge:where(
+  [data-style="fill"][data-preset="yellow"],
+  [data-style="count"][data-preset="yellow"]
+) {
   --badge-background-color: var(--color-yellow-95);
   --badge-text-color: var(--color-yellow-45);
 }
 
-.badge:where([data-style="fill"][data-preset="orange"]) {
+.badge:where(
+  [data-style="fill"][data-preset="orange"],
+  [data-style="count"][data-preset="orange"]
+) {
   --badge-background-color: var(--color-orange-95);
   --badge-text-color: var(--color-orange-55);
 }
 
-.badge:where([data-style="fill"][data-preset="red"]) {
+.badge:where(
+  [data-style="fill"][data-preset="red"],
+  [data-style="count"][data-preset="red"]
+) {
   --badge-background-color: var(--color-red-95);
   --badge-text-color: var(--color-red-55);
 }
@@ -201,11 +222,6 @@
   --badge-text-color: var(--color-red-55);
 }
 
-.badge:where([data-style="count"][data-preset="primary"]) {
-  --badge-background-color: var(--color-primary-default);
-  --badge-text-color: var(--color-common-100);
-}
-
 .badge:where([data-style="count"][data-preset="gray"]) {
   --badge-background-color: var(--color-cool-gray-90);
   --badge-text-color: var(--color-label-standard);

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(