@uniai-fe/uds-primitives 0.3.45 → 0.3.47

package/dist/styles.css

@@ -534,14 +534,10 @@
   --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-readonly-color: var(
-  --select-table-border-disabled-color
-  );
+  --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
-  --select-table-surface-readonly-color: var(
-  --select-table-surface-disabled-color
-  );
+  --select-table-surface-readonly-color: transparent;
   --select-table-color-text: var(--input-text-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
@@ -709,6 +705,22 @@
     transform: rotate(360deg);
   }
 }
+.empty-text {
+  font-size: 1.4rem;
+  color: var(--color-cool-gray-70);
+  line-height: 1.5;
+  word-break: keep-all;
+  text-align: center;
+}
+
+.alternate-text {
+  font-size: 1.4rem;
+  color: var(--color-cool-gray-70);
+  line-height: 1.5;
+  word-break: keep-all;
+  text-align: center;
+}
+
 .alternate {
   width: 100%;
   height: 100%;
@@ -717,20 +729,15 @@
   align-items: center;
   justify-content: center;
 }
-.alternate .empty-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
-  word-break: keep-all;
-  text-align: center;
-}
 .alternate.is-horizontal {
   flex-direction: row;
 }
 .alternate.is-horizontal.loading .empty-text {
   transform: translateY(0.2rem);
+  margin-left: 1rem;
 }
-.alternate.is-horizontal.loading .empty-text {
+.alternate.is-horizontal.loading .alternate-text {
+  transform: translateY(0.2rem);
   margin-left: 1rem;
 }
 .alternate.is-vertical {
@@ -739,6 +746,9 @@
 .alternate.is-vertical .empty-text {
   margin-top: 1rem;
 }
+.alternate.is-vertical .alternate-text {
+  margin-top: 1rem;
+}
 
 .alternate-loading-icon {
   width: 2.4rem;
@@ -3963,6 +3973,9 @@ 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.45",
+  "version": "0.3.47",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/alternate/markup/Label.tsx

@@ -0,0 +1,9 @@
+import { Slot } from "../../slot";
+
+export default function AlternateText({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Slot.Text className="alternate-text">{children}</Slot.Text>;
+}

package/src/components/alternate/markup/empty/Data.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { clsx } from "clsx";
+import AlternateText from "../Label";
 
 /**
  * 차트; 데이터 없는 경우 대체 컴포넌트
@@ -20,7 +21,7 @@ export default function AlternateEmptyData({
 
   return (
     <div className={clsx("alternate empty-data", directionClass, className)}>
-      <span className="empty-text">{text || "데이터가 없습니다."}</span>
+      <AlternateText>{text || "데이터가 없습니다."}</AlternateText>
     </div>
   );
 }

package/src/components/alternate/markup/index.tsx

@@ -1,4 +1,5 @@
 import AlternateEmptyData from "./empty/Data";
+import AlternateText from "./Label";
 import AlternateLoadingDefault from "./loading/Default";
 import AlternateLoadingIcon from "./loading/Icon";
 
@@ -6,6 +7,7 @@ const Alternate = {
   EmptyData: AlternateEmptyData,
   LoadingDefault: AlternateLoadingDefault,
   LoadingIcon: AlternateLoadingIcon,
+  Text: AlternateText,
 };
 
 export default Alternate;

package/src/components/alternate/markup/loading/Default.tsx

@@ -2,6 +2,7 @@
 
 import { clsx } from "clsx";
 import AlternateLoadingIcon from "./Icon";
+import AlternateText from "../Label";
 
 /**
  * 데이터 로딩중 컴포넌트
@@ -21,9 +22,7 @@ export default function AlternateLoadingDefault({
     <div className={clsx("alternate loading", directionClass)}>
       <AlternateLoadingIcon direction={direction} />
       {["string", "undefined"].includes(typeof text) ? (
-        <span className="empty-text">
-          {text || "데이터를 불러오는 중입니다."}
-        </span>
+        <AlternateText>{text || "데이터를 불러오는 중입니다."}</AlternateText>
       ) : (
         text
       )}

package/src/components/alternate/markup/loading/Icon.tsx

@@ -25,13 +25,31 @@ export default function AlternateLoadingIcon({
       )}
     >
       {size === "small" && (
-        <SpinnerSmallIcon alt="불러오는 중" width={24} height={24} />
+        <SpinnerSmallIcon
+          alt="불러오는 중"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          preserveAspectRatio="xMinYMin meet"
+        />
       )}
       {size === "medium" && (
-        <SpinnerMediumIcon alt="불러오는 중" width={36} height={36} />
+        <SpinnerMediumIcon
+          alt="불러오는 중"
+          width={36}
+          height={36}
+          viewBox="0 0 36 36"
+          preserveAspectRatio="xMinYMin meet"
+        />
       )}
       {size === "large" && (
-        <SpinnerLargeIcon alt="불러오는 중" width={52} height={52} />
+        <SpinnerLargeIcon
+          alt="불러오는 중"
+          width={52}
+          height={52}
+          viewBox="0 0 52 52"
+          preserveAspectRatio="xMinYMin meet"
+        />
       )}
     </figure>
   );

package/src/components/alternate/styles/alternate.scss

@@ -8,6 +8,22 @@
   }
 }
 
+.empty-text {
+  font-size: 1.4rem;
+  color: var(--color-cool-gray-70);
+  line-height: 1.5;
+  word-break: keep-all;
+  text-align: center;
+}
+
+.alternate-text {
+  font-size: 1.4rem;
+  color: var(--color-cool-gray-70);
+  line-height: 1.5;
+  word-break: keep-all;
+  text-align: center;
+}
+
 .alternate {
   width: 100%;
   height: 100%;
@@ -16,22 +32,16 @@
   align-items: center;
   justify-content: center;
 
-  .empty-text {
-    font-size: 1.4rem;
-    color: var(--color-cool-gray-70);
-    line-height: 1.5;
-    word-break: keep-all;
-    text-align: center;
-  }
-
   &.is-horizontal {
     flex-direction: row;
 
     &.loading {
       .empty-text {
         transform: translateY(0.2rem);
+        margin-left: 1rem;
       }
-      .empty-text {
+      .alternate-text {
+        transform: translateY(0.2rem);
         margin-left: 1rem;
       }
     }
@@ -42,6 +52,9 @@
     .empty-text {
       margin-top: 1rem;
     }
+    .alternate-text {
+      margin-top: 1rem;
+    }
   }
 }
 

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

@@ -59,6 +59,9 @@ const SelectTriggerSelected = ({
   const resolvedLabelText = valueText || toInputText(label);
   const isLabelTextLike =
     typeof label === "string" || typeof label === "number";
+  // 변경 설명: readOnly에서 non-text label을 직접 렌더링하되, placeholder 상태일 때는 input placeholder 경로를 유지한다.
+  const shouldRenderReadonlyLabelNode =
+    readOnly && !isLabelTextLike && !isPlaceholder;
 
   // 3) custom mode 활성 시에만 label input focus를 부여한다.
   useEffect(() => {
@@ -71,7 +74,7 @@ const SelectTriggerSelected = ({
 
   return (
     <div className="select-value">
-      {readOnly && !isLabelTextLike ? (
+      {shouldRenderReadonlyLabelNode ? (
         // 변경 설명: readonly + ReactNode label일 때는 문자열 변환 없이 label 노드를 직접 렌더링한다.
         <div
           className={clsx("select-input-label", inputProps?.className, {

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

@@ -37,14 +37,10 @@
   --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-readonly-color: var(
-    --select-table-border-disabled-color
-  );
+  --select-table-border-readonly-color: transparent;
   --select-table-surface-color: transparent;
   --select-table-surface-disabled-color: var(--input-surface-disabled-color);
-  --select-table-surface-readonly-color: var(
-    --select-table-surface-disabled-color
-  );
+  --select-table-surface-readonly-color: transparent;
   --select-table-color-text: var(--input-text-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);