@uniai-fe/uds-primitives 0.3.53 → 0.3.55

package/dist/styles.css

@@ -533,7 +533,7 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-error-color: var(--input-border-error-color);
-  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-disabled-color: transparent;
   --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
@@ -594,6 +594,7 @@
   );
   --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);
@@ -2777,6 +2778,11 @@ figure.chip {
   box-shadow: none;
 }
 
+.input-field[data-has-value=true] .input-element {
+  color: var(--input-text-color);
+  caret-color: var(--input-text-color);
+}
+
 .input-field-control {
   display: flex;
   align-items: center;
@@ -2809,9 +2815,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 +4067,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 +4074,11 @@ figure.chip {
   color: var(--select-secondary-color-text-readonly);
 }
 
+.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.53",
+  "version": "0.3.55",
   "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/styles/foundation.scss

@@ -279,6 +279,11 @@
   }
 }
 
+.input-field[data-has-value="true"] .input-element {
+  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/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,11 @@
   }
 }
 
+.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

@@ -36,7 +36,7 @@
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
   --select-table-border-error-color: var(--input-border-error-color);
-  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-border-disabled-color: transparent;
   --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
@@ -99,6 +99,7 @@
   );
   --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);

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 여부
    */

package/src/components/table/markup/Container.tsx

@@ -7,6 +7,7 @@ import TableHead from "./foundation/Head";
 import TableTh from "./foundation/Th";
 import TableRoot from "./foundation/Root";
 import TableRow from "./foundation/Row";
+import { Slot } from "../../slot/markup";
 
 /**
  * Table Preset; 기본 Container 조합 컴포넌트
@@ -45,6 +46,8 @@ const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
       isCustomBody = false,
       scrollable = false,
       scrollAxis = "x",
+      scrollAs = "div",
+      scrollProps,
       scrollClassName,
       footer,
       children,
@@ -153,14 +156,16 @@ const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
     }
 
     return (
-      <div
+      <Slot.Base
+        as={scrollAs}
         className={clsx("table-scroll-wrapper", scrollClassName)}
         data-layout={tableProps?.layout ?? "line"}
         data-role={tableProps?.role ?? "table"}
         data-scroll-axis={scrollAxis}
+        {...scrollProps}
       >
         {tableNode}
-      </div>
+      </Slot.Base>
     );
   },
 );

package/src/components/table/types/foundation.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from "react";
-import type { SlotTextProps } from "../../slot";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import type { SlotComponentProps, SlotTextProps } from "../../slot";
 
 export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
 export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
@@ -154,6 +154,8 @@ export interface TableColumnData<
  * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
  * @property {boolean} [scrollable=false] true면 외부 스크롤 래퍼를 추가한다.
  * @property {"x" | "y" | "both"} [scrollAxis="x"] scrollable일 때 스크롤 축
+ * @property {ElementType} [scrollAs="div"] scrollable wrapper element
+ * @property {Omit<SlotComponentProps<ElementType>, "as" | "children" | "className">} [scrollProps] scrollable wrapper native props
  * @property {string} [scrollClassName] 스크롤 래퍼 className
  * @property {React.ReactNode} [footer] footer 노드
  * @property {React.ReactNode} [children] body 콘텐츠
@@ -177,6 +179,17 @@ export interface TableContainerProps<
    * scrollable일 때 스크롤 축
    */
   scrollAxis?: TableScrollAxis;
+  /**
+   * scrollable wrapper element
+   */
+  scrollAs?: ElementType;
+  /**
+   * scrollable wrapper native props
+   */
+  scrollProps?: Omit<
+    SlotComponentProps<ElementType>,
+    "as" | "children" | "className"
+  >;
   /**
    * 스크롤 래퍼 className
    */