@uniai-fe/uds-primitives 0.3.40 → 0.3.42

package/dist/styles.css

@@ -586,10 +586,10 @@
   --select-text-large-line-height: var(--input-text-large-line-height);
   --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
   --select-text-large-weight: var(--input-text-large-weight);
-  --select-icon-size-xsmall: 1.4rem;
-  --select-icon-size-small: 1.6rem;
-  --select-icon-size-medium: 2rem;
-  --select-icon-size-large: 2rem;
+  --select-icon-size-xsmall: 14px;
+  --select-icon-size-small: 16px;
+  --select-icon-size-medium: 20px;
+  --select-icon-size-large: 20px;
   --select-primary-color-placeholder: var(--input-placeholder-color);
   /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */
   --select-primary-color-placeholder-disabled: var(--color-label-disabled);
@@ -3963,9 +3963,6 @@ figure.chip {
   height: var(--select-secondary-underline-width-default);
 }
 .select-button:where([data-priority=table]):where([data-readonly=true]) {
-  border-color: var(--select-table-border-readonly-color);
-  background-color: var(--select-table-surface-readonly-color);
-  cursor: not-allowed;
   --select-icon-fill: var(--select-table-icon-color-disabled);
 }
 .select-button:where(:not([data-priority=secondary])):where([data-state=disabled]), .select-button:where(:not([data-priority=secondary])):disabled {

package/package.json

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

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

@@ -43,6 +43,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       buttonType = "button",
       className,
       children,
+      icon,
       ...rest
     },
     ref,
@@ -70,7 +71,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
           return 16;
       }
     };
-    const resolvedState = disabled || readOnly ? "disabled" : state;
+
     const {
       ["aria-haspopup"]: ariaHasPopup,
       ["aria-expanded"]: ariaExpanded,
@@ -83,7 +84,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
       "data-size": resolvedSize,
       ...restProps,
       // 변경: Radix Dropdown.Trigger가 주입하는 data-state(open|closed)를 최종 단계에서 덮어써 visual state를 고정한다.
-      "data-state": resolvedState,
+      "data-state": disabled ? "disabled" : readOnly ? "readonly" : state,
       // 변경: readOnly도 disabled와 동일한 시각 상태를 사용하고 텍스트 컬러만 별도 스타일로 분리한다.
       "data-readonly": readOnly ? "true" : undefined,
       "data-open": open || undefined,
@@ -109,16 +110,18 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
     return (
       <Slot.Base ref={ref} as={as} {...sharedProps} {...elementSpecificProps}>
         {children}
-        <figure
-          className="select-icon"
-          data-size={resolvedSize}
-          aria-hidden="true"
-        >
-          <Icon
-            viewBox={`0 0 ${iconSize()} ${iconSize()}`}
-            preserveAspectRatio="xMinYMin meet"
-          />
-        </figure>
+        {icon !== false && (
+          <figure
+            className="select-icon"
+            data-size={resolvedSize}
+            aria-hidden="true"
+          >
+            <Icon
+              viewBox={`0 0 ${iconSize()} ${iconSize()}`}
+              preserveAspectRatio="xMinYMin meet"
+            />
+          </figure>
+        )}
       </Slot.Base>
     );
   },

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

@@ -54,6 +54,8 @@ const SelectTriggerSelected = ({
   // 2) placeholder/label은 text input에 들어갈 수 있는 문자열로 정규화한다.
   const resolvedPlaceholder = toInputText(placeholder);
   const resolvedLabelText = valueText || toInputText(label);
+  const isLabelTextLike =
+    typeof label === "string" || typeof label === "number";
 
   // 3) custom mode 활성 시에만 label input focus를 부여한다.
   useEffect(() => {
@@ -66,64 +68,75 @@ const SelectTriggerSelected = ({
 
   return (
     <div className="select-value">
-      <input
-        ref={labelInputRef}
-        type="text"
-        // 4) 외부 inputProps는 placeholder/value/readOnly보다 먼저 병합하고,
-        //    내부 계약값을 마지막에 고정해 동작 우선순위를 명확히 한다.
-        {...inputProps}
-        className={clsx("select-input-label", inputProps?.className, {
-          "select-input-label-placeholder": isPlaceholder,
-        })}
-        placeholder={resolvedPlaceholder}
-        value={resolvedLabelText}
-        readOnly={readOnly}
-        // 5) customRegister는 name/ref/onBlur/onChange 계약을 label input에 연결한다.
-        {...customRegister}
-        onPointerDownCapture={event => {
-          inputProps?.onPointerDownCapture?.(event);
-          if (!readOnly) {
-            // 변경: 편집 가능 상태에서는 trigger 토글 이벤트 전파를 차단한다.
-            event.stopPropagation();
-          }
-        }}
-        onPointerDown={event => {
-          inputProps?.onPointerDown?.(event);
-          if (!readOnly) {
-            event.stopPropagation();
-          }
-        }}
-        onMouseDown={event => {
-          inputProps?.onMouseDown?.(event);
-          if (!readOnly) {
-            event.stopPropagation();
-          }
-        }}
-        onClickCapture={event => {
-          inputProps?.onClickCapture?.(event);
-          if (!readOnly) {
-            event.stopPropagation();
-          }
-        }}
-        onClick={event => {
-          inputProps?.onClick?.(event);
-          if (!readOnly) {
-            event.stopPropagation();
-          }
-        }}
-        onKeyDown={event => {
-          inputProps?.onKeyDown?.(event);
-          if (!readOnly) {
-            event.stopPropagation();
-          }
-        }}
-        onChange={event => {
-          // 6) RHF(customRegister) → 외부 inputProps → 내부 state 콜백 순으로 변경을 전파한다.
-          customRegister?.onChange?.(event);
-          inputProps?.onChange?.(event);
-          onLabelChange?.(event.currentTarget.value);
-        }}
-      />
+      {readOnly && !isLabelTextLike ? (
+        // 변경 설명: readonly + ReactNode label일 때는 문자열 변환 없이 label 노드를 직접 렌더링한다.
+        <div
+          className={clsx("select-input-label", inputProps?.className, {
+            "select-input-label-placeholder": isPlaceholder,
+          })}
+        >
+          {label}
+        </div>
+      ) : (
+        <input
+          ref={labelInputRef}
+          type="text"
+          // 4) 외부 inputProps는 placeholder/value/readOnly보다 먼저 병합하고,
+          //    내부 계약값을 마지막에 고정해 동작 우선순위를 명확히 한다.
+          {...inputProps}
+          className={clsx("select-input-label", inputProps?.className, {
+            "select-input-label-placeholder": isPlaceholder,
+          })}
+          placeholder={resolvedPlaceholder}
+          value={resolvedLabelText}
+          readOnly={readOnly}
+          // 5) customRegister는 name/ref/onBlur/onChange 계약을 label input에 연결한다.
+          {...customRegister}
+          onPointerDownCapture={event => {
+            inputProps?.onPointerDownCapture?.(event);
+            if (!readOnly) {
+              // 변경: 편집 가능 상태에서는 trigger 토글 이벤트 전파를 차단한다.
+              event.stopPropagation();
+            }
+          }}
+          onPointerDown={event => {
+            inputProps?.onPointerDown?.(event);
+            if (!readOnly) {
+              event.stopPropagation();
+            }
+          }}
+          onMouseDown={event => {
+            inputProps?.onMouseDown?.(event);
+            if (!readOnly) {
+              event.stopPropagation();
+            }
+          }}
+          onClickCapture={event => {
+            inputProps?.onClickCapture?.(event);
+            if (!readOnly) {
+              event.stopPropagation();
+            }
+          }}
+          onClick={event => {
+            inputProps?.onClick?.(event);
+            if (!readOnly) {
+              event.stopPropagation();
+            }
+          }}
+          onKeyDown={event => {
+            inputProps?.onKeyDown?.(event);
+            if (!readOnly) {
+              event.stopPropagation();
+            }
+          }}
+          onChange={event => {
+            // 6) RHF(customRegister) → 외부 inputProps → 내부 state 콜백 순으로 변경을 전파한다.
+            customRegister?.onChange?.(event);
+            inputProps?.onChange?.(event);
+            onLabelChange?.(event.currentTarget.value);
+          }}
+        />
+      )}
       <input
         type="hidden"
         className="select-input-value"

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

@@ -192,9 +192,9 @@
   }
 
   &:where([data-priority="table"]):where([data-readonly="true"]) {
-    border-color: var(--select-table-border-readonly-color);
-    background-color: var(--select-table-surface-readonly-color);
-    cursor: not-allowed;
+    // border-color: var(--select-table-border-readonly-color);
+    // background-color: var(--select-table-surface-readonly-color);
+    // cursor: not-allowed;
     --select-icon-fill: var(--select-table-icon-color-disabled);
   }
 

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

@@ -90,10 +90,10 @@
   --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
   --select-text-large-weight: var(--input-text-large-weight);
 
-  --select-icon-size-xsmall: 1.4rem;
-  --select-icon-size-small: 1.6rem;
-  --select-icon-size-medium: 2rem;
-  --select-icon-size-large: 2rem;
+  --select-icon-size-xsmall: 14px;
+  --select-icon-size-small: 16px;
+  --select-icon-size-medium: 20px;
+  --select-icon-size-large: 20px;
 
   --select-primary-color-placeholder: var(--input-placeholder-color);
   /* 변경: placeholder disabled/readonly 토큰을 분리해 상태별 제어 지점을 고정한다. */

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

@@ -84,6 +84,10 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * 콘텐츠
    */
   children: ReactNode;
+  /**
+   * chevron 아이콘 비활성화
+   */
+  icon?: boolean;
 }
 
 /**