@uniai-fe/uds-primitives 0.3.46 → 0.3.48

package/dist/styles.css

@@ -705,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%;
@@ -713,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 {
@@ -735,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.46",
+  "version": "0.3.48",
   "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/chip/markup/InputStyle.tsx

@@ -35,6 +35,7 @@ const ChipInputStyle = forwardRef<
     {
       children,
       className,
+      chipStyle = "input",
       removeButtonLabel = "선택 항목 삭제",
       onRemove,
       disabled = false,
@@ -68,7 +69,7 @@ const ChipInputStyle = forwardRef<
           "chip-input-root",
           className,
         )}
-        data-style="input"
+        data-style={chipStyle}
         data-fill={fill}
         data-rounded={rounded ? "true" : undefined}
         data-removable={removable ? "true" : "false"}