@uniai-fe/uds-primitives 0.3.54 → 0.3.56

package/dist/styles.css

@@ -428,8 +428,7 @@
   --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
   --input-placeholder-disabled-color: var(--color-label-disabled);
-  /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
-  --input-placeholder-readonly-color: transparent;
+  --input-placeholder-readonly-color: var(--input-placeholder-color);
   --input-font-size: var(--input-text-medium-size);
   --input-line-height: var(--input-text-medium-line-height);
   --input-font-weight: var(--input-text-medium-weight);
@@ -590,10 +589,11 @@
   /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */
   --select-primary-color-placeholder-disabled: var(--color-label-disabled);
   --select-primary-color-placeholder-readonly: var(
-  --select-primary-color-placeholder-disabled
+  --select-primary-color-placeholder
   );
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
+  --select-color-text-value: var(--color-label-strong);
   --select-primary-color-text-focused: var(--color-label-strong);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
@@ -617,7 +617,7 @@
   --select-secondary-color-placeholder: var(--color-label-alternative);
   --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
   --select-secondary-color-placeholder-readonly: var(
-  --select-secondary-color-placeholder-disabled
+  --select-secondary-color-placeholder
   );
   --select-color-surface-secondary: transparent;
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
@@ -2777,6 +2777,11 @@ figure.chip {
   box-shadow: none;
 }
 
+.input-field[data-has-value=true] .input-element:not(:disabled) {
+  color: var(--input-text-color);
+  caret-color: var(--input-text-color);
+}
+
 .input-field-control {
   display: flex;
   align-items: center;
@@ -2809,9 +2814,24 @@ figure.chip {
   --input-textarea-gap: var(--input-textarea-gap-large);
 }
 
+.input[data-input-type=textarea] {
+  min-height: var(--input-textarea-height);
+}
+.input[data-input-type=textarea] .input-box {
+  height: 100%;
+}
+.input[data-input-type=textarea] .input-field {
+  height: 100%;
+}
+.input[data-input-type=textarea] .input-field-control {
+  flex: 1 1 auto;
+  width: 100%;
+  align-items: stretch;
+}
+
 .input-textarea-element {
   min-height: var(--input-textarea-min-height);
-  height: var(--input-textarea-height);
+  height: 100%;
   resize: none;
   margin: 0;
 }
@@ -4046,9 +4066,6 @@ figure.chip {
   color: var(--select-primary-color-text-readonly);
   caret-color: var(--select-primary-color-text-readonly);
 }
-.select-button:where([data-state=focused]) .select-input-label, .select-button:where(:focus-within) .select-input-label {
-  color: var(--color-label-strong);
-}
 .select-button:where([data-priority=secondary]):where([data-state=disabled]) .select-input-label {
   color: var(--select-secondary-color-text-disabled);
 }
@@ -4056,6 +4073,11 @@ figure.chip {
   color: var(--select-secondary-color-text-readonly);
 }
 
+.select-button:where(:not([data-state=disabled])) .select-value[data-has-value=true] .select-input-label {
+  color: var(--select-color-text-value);
+  caret-color: var(--select-color-text-value);
+}
+
 .select-input-label-placeholder {
   color: var(--select-primary-color-placeholder);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.54",
+  "version": "0.3.56",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -15,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.30.3",
+  "packageManager": "pnpm@10.32.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -89,9 +89,9 @@
     "react-daum-postcode": "^4.0.0"
   },
   "devDependencies": {
-    "@mantine/core": "^8.3.15",
-    "@mantine/dates": "^8.3.15",
-    "@mantine/hooks": "^8.3.15",
+    "@mantine/core": "^8.3.16",
+    "@mantine/dates": "^8.3.16",
+    "@mantine/hooks": "^8.3.16",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.14",

package/src/components/input/markup/foundation/Input.tsx

@@ -243,6 +243,8 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
             data-state={visualState}
             data-priority={priority}
             data-size={resolvedSize}
+            // 변경: 값 존재 여부를 DOM state로 노출해 상태 색상과 분리된 텍스트 규칙을 적용한다.
+            data-has-value={hasValue ? "true" : "false"}
             data-readonly={isReadOnly ? "true" : undefined}
             data-block={resolvedBlock ? "true" : undefined}
           >

package/src/components/input/markup/foundation/TextArea.tsx

@@ -192,6 +192,7 @@ const InputTextArea = forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
             data-state={visualState}
             data-priority={priority}
             data-size={resolvedSize}
+            data-has-value={currentLength > 0 ? "true" : "false"}
             data-readonly={isReadOnly ? "true" : undefined}
             data-block={resolvedBlock ? "true" : undefined}
           >

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

@@ -279,6 +279,11 @@
   }
 }
 
+.input-field[data-has-value="true"] .input-element:not(:disabled) {
+  color: var(--input-text-color);
+  caret-color: var(--input-text-color);
+}
+
 .input-field-control {
   display: flex;
   align-items: center;
@@ -315,9 +320,28 @@
   }
 }
 
+// 변경: textarea 높이 토큰은 native element가 아니라 root layout이 소유하고 내부는 남은 높이를 채운다.
+.input[data-input-type="textarea"] {
+  min-height: var(--input-textarea-height);
+
+  .input-box {
+    height: 100%;
+  }
+
+  .input-field {
+    height: 100%;
+  }
+
+  .input-field-control {
+    flex: 1 1 auto;
+    width: 100%;
+    align-items: stretch;
+  }
+}
+
 .input-textarea-element {
   min-height: var(--input-textarea-min-height);
-  height: var(--input-textarea-height);
+  height: 100%;
   resize: none;
   margin: 0;
 }

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

@@ -85,8 +85,7 @@
   --input-text-disabled-color: var(--color-label-disabled);
   --input-placeholder-color: var(--color-label-alternative);
   --input-placeholder-disabled-color: var(--color-label-disabled);
-  /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
-  --input-placeholder-readonly-color: transparent;
+  --input-placeholder-readonly-color: var(--input-placeholder-color);
   --input-font-size: var(--input-text-medium-size);
   --input-line-height: var(--input-text-medium-line-height);
   --input-font-weight: var(--input-text-medium-weight);

package/src/components/select/markup/Default.tsx

@@ -302,6 +302,7 @@ export function SelectDefault<OptionData = unknown>({
                   ? labelInputValue
                   : (resolvedSelectedOption?.value ?? "")
               }
+              valueStateSource={isCustomInputActive ? "label" : "hidden"}
               // 변경: custom mode 진입 시 label input에 focus를 연결한다.
               shouldFocusInput={isCustomInputActive}
               onLabelChange={setCustomLabelValue}

package/src/components/select/markup/foundation/Selected.tsx

@@ -48,6 +48,7 @@ const SelectTriggerSelected = ({
   inputProps,
   valueText = "",
   valueFieldValue = "",
+  valueStateSource = "label",
   shouldFocusInput = false,
   onLabelChange,
 }: SelectSelectedProps) => {
@@ -60,12 +61,26 @@ const SelectTriggerSelected = ({
   const resolvedInputValueText = toInputText(inputProps?.value as ReactNode);
   const resolvedLabelText =
     valueText || resolvedInputValueText || toInputText(label);
+  // 변경 설명: 색상 계약은 hidden value 또는 label value 중 지정된 source를 기준으로 계산한다.
+  const resolvedHiddenValueText =
+    typeof valueFieldValue === "string" || typeof valueFieldValue === "number"
+      ? String(valueFieldValue)
+      : "";
+  const hasDisplayValue =
+    valueStateSource === "hidden"
+      ? resolvedHiddenValueText.length > 0
+      : resolvedLabelText.length > 0;
   const isLabelTextLike =
     typeof label === "string" || typeof label === "number";
+  const shouldUsePlaceholderStyle = !hasDisplayValue;
   // 변경 설명: readOnly에서 non-text label을 직접 렌더링하되, placeholder 상태일 때는 input placeholder 경로를 유지한다.
   // custom mode처럼 valueText가 있는 경우에는 input 렌더 경로를 유지해 값 표시를 보장한다.
   const shouldRenderReadonlyLabelNode =
-    readOnly && !isLabelTextLike && !isPlaceholder && !resolvedLabelText;
+    readOnly &&
+    !isLabelTextLike &&
+    !isPlaceholder &&
+    !shouldUsePlaceholderStyle &&
+    !resolvedLabelText;
 
   // 3) custom mode 활성 시에만 label input focus를 부여한다.
   useEffect(() => {
@@ -77,13 +92,17 @@ const SelectTriggerSelected = ({
   }, [readOnly, shouldFocusInput]);
 
   return (
-    <div className="select-value">
+    <div
+      className="select-value"
+      data-has-value={hasDisplayValue ? "true" : "false"}
+    >
       {shouldRenderReadonlyLabelNode ? (
         // 변경 설명: readonly + ReactNode label일 때는 문자열 변환 없이 label 노드를 직접 렌더링한다.
         <div
           className={clsx("select-input-label", inputProps?.className, {
-            "select-input-label-placeholder": isPlaceholder,
+            "select-input-label-placeholder": shouldUsePlaceholderStyle,
           })}
+          data-has-value={hasDisplayValue ? "true" : "false"}
         >
           {label}
         </div>
@@ -95,8 +114,9 @@ const SelectTriggerSelected = ({
           //    내부 계약값을 마지막에 고정해 동작 우선순위를 명확히 한다.
           {...inputProps}
           className={clsx("select-input-label", inputProps?.className, {
-            "select-input-label-placeholder": isPlaceholder,
+            "select-input-label-placeholder": shouldUsePlaceholderStyle,
           })}
+          data-has-value={hasDisplayValue ? "true" : "false"}
           placeholder={resolvedPlaceholder}
           value={resolvedLabelText}
           readOnly={readOnly}
@@ -151,6 +171,7 @@ const SelectTriggerSelected = ({
         type="hidden"
         className="select-input-value"
         value={valueFieldValue}
+        data-has-value={resolvedHiddenValueText.length > 0 ? "true" : "false"}
         {...register}
       />
     </div>

package/src/components/select/styles/select.scss

@@ -281,11 +281,6 @@
     color: var(--select-primary-color-text-readonly);
     caret-color: var(--select-primary-color-text-readonly);
   }
-  // 변경: legacy label 텍스트 색상 규칙을 input 렌더 구조로 이관한다.
-  .select-button:where([data-state="focused"]) &,
-  .select-button:where(:focus-within) & {
-    color: var(--color-label-strong);
-  }
 
   .select-button:where([data-priority="secondary"]):where(
       [data-state="disabled"]
@@ -302,6 +297,13 @@
   }
 }
 
+.select-button:where(:not([data-state="disabled"]))
+  .select-value[data-has-value="true"]
+  .select-input-label {
+  color: var(--select-color-text-value);
+  caret-color: var(--select-color-text-value);
+}
+
 .select-input-label-placeholder {
   color: var(--select-primary-color-placeholder);
 

package/src/components/select/styles/variables.scss

@@ -95,10 +95,11 @@
   /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */
   --select-primary-color-placeholder-disabled: var(--color-label-disabled);
   --select-primary-color-placeholder-readonly: var(
-    --select-primary-color-placeholder-disabled
+    --select-primary-color-placeholder
   );
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
+  --select-color-text-value: var(--color-label-strong);
   --select-primary-color-text-focused: var(--color-label-strong);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
@@ -122,7 +123,7 @@
   --select-secondary-color-placeholder: var(--color-label-alternative);
   --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
   --select-secondary-color-placeholder-readonly: var(
-    --select-secondary-color-placeholder-disabled
+    --select-secondary-color-placeholder
   );
   --select-color-surface-secondary: transparent;
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);

package/src/components/select/types/trigger.ts

@@ -159,6 +159,7 @@ export interface SelectTriggerMultipleProps extends SelectTriggerBaseFoundationP
  * @property {ComponentPropsWithoutRef<"input">} [inputProps] label input native 속성
  * @property {string} [valueText] label input 표시 문자열
  * @property {SelectOptionValue | ""} [valueFieldValue] hidden value input 값
+ * @property {"label" | "hidden"} [valueStateSource] 표시값 존재 여부를 판정할 source
  * @property {boolean} [shouldFocusInput] custom mode 진입 시 label input focus 여부
  * @property {(value: string) => void} [onLabelChange] label 입력 변경 콜백
  */
@@ -200,6 +201,12 @@ export interface SelectSelectedProps {
    * hidden value input 값
    */
   valueFieldValue?: SelectOptionValue | "";
+  /**
+   * 표시값 존재 여부를 판정할 source
+   * - label: select-input-label value 기준
+   * - hidden: select-input-value value 기준
+   */
+  valueStateSource?: "label" | "hidden";
   /**
    * custom mode 진입 시 label input focus 여부
    */