@uniai-fe/uds-primitives 0.5.6 → 0.6.1

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

@@ -0,0 +1,63 @@
+.alternate-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: var(--alternate-layout-min-block-size);
+  box-sizing: border-box;
+  gap: var(--alternate-layout-gap);
+  text-align: center;
+}
+
+.alternate-layout-figure {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--alternate-layout-figure-size);
+  height: var(--alternate-layout-figure-size);
+  margin: 0;
+}
+
+.alternate-layout-title {
+  margin: 0;
+  color: var(--alternate-layout-title-color);
+  font-size: var(--alternate-layout-title-font-size);
+  line-height: var(--alternate-layout-title-line-height);
+  letter-spacing: var(--alternate-layout-title-letter-spacing);
+  font-weight: var(--alternate-layout-title-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-contents {
+  max-width: 48rem;
+  margin: 0;
+  color: var(--alternate-layout-contents-color);
+  font-size: var(--alternate-layout-contents-font-size);
+  line-height: var(--alternate-layout-contents-line-height);
+  letter-spacing: var(--alternate-layout-contents-letter-spacing);
+  font-weight: var(--alternate-layout-contents-font-weight);
+  word-break: keep-all;
+}
+
+.alternate-layout-text-button {
+  // 변경: paragraph 내부 text action이라는 명시 계약에 따라 inline display 예외를 둔다.
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--alternate-layout-text-button-color);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: var(--alternate-layout-text-button-underline-offset);
+  cursor: pointer;
+}
+
+.alternate-layout-text-button:where(:disabled) {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.alternate-layout-button {
+  flex-shrink: 0;
+}

package/src/components/alternate/styles/{alternate.scss → unit.scss}

@@ -9,17 +9,17 @@
 }
 
 .empty-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
 
 .alternate-text {
-  font-size: 1.4rem;
-  color: var(--color-cool-gray-70);
-  line-height: 1.5;
+  color: var(--alternate-unit-text-color);
+  font-size: var(--alternate-unit-text-font-size);
+  line-height: var(--alternate-unit-text-line-height);
   word-break: keep-all;
   text-align: center;
 }
@@ -38,11 +38,11 @@
     &.loading {
       .empty-text {
         transform: translateY(0.2rem);
-        margin-left: 1rem;
+        margin-left: var(--alternate-unit-gap);
       }
       .alternate-text {
         transform: translateY(0.2rem);
-        margin-left: 1rem;
+        margin-left: var(--alternate-unit-gap);
       }
     }
   }
@@ -50,17 +50,17 @@
   &.is-vertical {
     flex-direction: column;
     .empty-text {
-      margin-top: 1rem;
+      margin-top: var(--alternate-unit-gap);
     }
     .alternate-text {
-      margin-top: 1rem;
+      margin-top: var(--alternate-unit-gap);
     }
   }
 }
 
 .alternate-loading-icon {
-  width: 2.4rem;
-  height: 2.4rem;
+  width: var(--alternate-loading-icon-small-size);
+  height: var(--alternate-loading-icon-small-size);
   position: relative;
   margin: 0;
   display: flex;
@@ -69,13 +69,13 @@
   animation: alternate-loading-spin 1s linear infinite;
 
   &.is-medium {
-    width: 3.6rem;
-    height: 3.6rem;
+    width: var(--alternate-loading-icon-medium-size);
+    height: var(--alternate-loading-icon-medium-size);
   }
 
   &.is-large {
-    width: 5.2rem;
-    height: 5.2rem;
+    width: var(--alternate-loading-icon-large-size);
+    height: var(--alternate-loading-icon-large-size);
   }
 
   svg {

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

@@ -0,0 +1,30 @@
+:root {
+  --alternate-unit-text-color: var(--color-cool-gray-70);
+  --alternate-unit-text-font-size: 1.4rem;
+  --alternate-unit-text-line-height: 1.5;
+  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-loading-icon-small-size: 2.4rem;
+  --alternate-loading-icon-medium-size: 3.6rem;
+  --alternate-loading-icon-large-size: 5.2rem;
+
+  --alternate-layout-min-block-size: 320px;
+  --alternate-layout-gap: var(--spacing-gap-7);
+  --alternate-layout-content-gap: var(--spacing-gap-4);
+  --alternate-layout-figure-size: 120px;
+  --alternate-layout-title-color: var(--color-label-strong);
+  --alternate-layout-title-font-size: var(--font-heading-small-size);
+  --alternate-layout-title-line-height: var(--font-heading-small-line-height);
+  --alternate-layout-title-letter-spacing: var(
+    --font-heading-small-letter-spacing
+  );
+  --alternate-layout-title-font-weight: var(--font-heading-small-weight);
+  --alternate-layout-contents-color: var(--color-label-neutral);
+  --alternate-layout-contents-font-size: var(--font-body-small-size);
+  --alternate-layout-contents-line-height: var(--font-body-small-line-height);
+  --alternate-layout-contents-letter-spacing: var(
+    --font-body-small-letter-spacing
+  );
+  --alternate-layout-contents-font-weight: var(--font-body-small-weight);
+  --alternate-layout-text-button-color: var(--color-primary-standard);
+  --alternate-layout-text-button-underline-offset: 0.2em;
+}

package/src/components/alternate/types/index.ts

@@ -1,77 +1,2 @@
-import type { ReactNode } from "react";
-
-/**
- * Alternate Direction; fallback 레이아웃 방향 축
- * @typedef {"vertical" | "horizontal"} AlternateDirection
- */
-export type AlternateDirection = "vertical" | "horizontal";
-
-/**
- * Alternate Loading Icon Size; 로딩 아이콘 스케일 축
- * @typedef {"small" | "medium" | "large"} AlternateLoadingIconSize
- */
-export type AlternateLoadingIconSize = "small" | "medium" | "large";
-
-/**
- * Alternate Text Props; fallback 문구 슬롯 props
- * @property {ReactNode} children 렌더링할 문구 콘텐츠다.
- */
-export interface AlternateTextProps {
-  /**
-   * 렌더링할 문구 콘텐츠다.
-   */
-  children: ReactNode;
-}
-
-/**
- * Alternate Empty Data Props; 빈 데이터 안내 레이아웃 props
- * @property {string} [className] 루트 className override다.
- * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
- * @property {ReactNode} [children] 안내 문구 콘텐츠다.
- */
-export interface AlternateEmptyDataProps {
-  /**
-   * 루트 className override다.
-   */
-  className?: string;
-  /**
-   * 아이콘/문구 배치 방향이다.
-   */
-  direction?: AlternateDirection;
-  /**
-   * 안내 문구 콘텐츠다.
-   */
-  children?: ReactNode;
-}
-
-/**
- * Alternate Loading Default Props; 로딩 안내 레이아웃 props
- * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
- * @property {ReactNode} [children] 안내 문구 콘텐츠다.
- */
-export interface AlternateLoadingDefaultProps {
-  /**
-   * 아이콘/문구 배치 방향이다.
-   */
-  direction?: AlternateDirection;
-  /**
-   * 안내 문구 콘텐츠다.
-   */
-  children?: ReactNode;
-}
-
-/**
- * Alternate Loading Icon Props; 단독 스피너 아이콘 props
- * @property {"small" | "medium" | "large"} [size] 로딩 아이콘 스케일이다.
- * @property {"vertical" | "horizontal"} [direction] 부모 레이아웃 방향 클래스 동기화용 값이다.
- */
-export interface AlternateLoadingIconProps {
-  /**
-   * 로딩 아이콘 스케일이다.
-   */
-  size?: AlternateLoadingIconSize;
-  /**
-   * 부모 레이아웃 방향 클래스 동기화용 값이다.
-   */
-  direction?: AlternateDirection;
-}
+export type * from "./unit";
+export type * from "./layout";

package/src/components/alternate/types/layout.ts

@@ -0,0 +1,126 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+/**
+ * Alternate Layout Container Props; edge-case anatomy 루트 props
+ * @property {string} [className] 루트 className override다.
+ * @property {ReactNode} [children] layout 내부 콘텐츠다.
+ */
+export interface AlternateLayoutContainerProps {
+  /**
+   * 루트 className override다.
+   */
+  className?: string;
+  /**
+   * layout 내부 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Figure Props; figure 영역 props
+ * @property {string} [className] figure className override다.
+ * @property {ReactNode} [children] 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+ */
+export interface AlternateLayoutFigureProps {
+  /**
+   * figure className override다.
+   */
+  className?: string;
+  /**
+   * 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Title Props; 제목 텍스트 props
+ * @property {ElementType} [as] 렌더링할 제목 요소다. 기본값은 strong이다.
+ * @property {string} [className] 제목 className override다.
+ * @property {ReactNode} [children] 제목 콘텐츠다.
+ */
+export interface AlternateLayoutTitleProps {
+  /**
+   * 렌더링할 제목 요소다.
+   * 기본값은 strong이다.
+   */
+  as?: ElementType;
+  /**
+   * 제목 className override다.
+   */
+  className?: string;
+  /**
+   * 제목 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Contents Props; 본문 텍스트 props
+ * @property {string} [className] 본문 className override다.
+ * @property {ReactNode} [children] 본문 콘텐츠다.
+ */
+export interface AlternateLayoutContentsProps {
+  /**
+   * 본문 className override다.
+   */
+  className?: string;
+  /**
+   * 본문 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Layout Text Button Native Props; 문장 내부 action native props
+ */
+type AlternateLayoutTextButtonNativeProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "children" | "className"
+> &
+  Omit<ComponentPropsWithoutRef<"a">, "children" | "className">;
+
+/**
+ * Alternate Layout Text Button Props; 문장 내부 action props
+ * @property {string} [className] action className override다.
+ * @property {ReactNode} [children] action 라벨 콘텐츠다.
+ * @property {string} [href] 링크 action으로 렌더링할 href다.
+ * @property {string} [target] 링크 target 값이다.
+ */
+export interface AlternateLayoutTextButtonProps extends AlternateLayoutTextButtonNativeProps {
+  /**
+   * action className override다.
+   */
+  className?: string;
+  /**
+   * action 라벨 콘텐츠다.
+   */
+  children?: ReactNode;
+  /**
+   * 링크 action으로 렌더링할 href다.
+   */
+  href?: string;
+  /**
+   * 링크 target 값이다.
+   */
+  target?: string;
+}
+
+/**
+ * Alternate Layout Button Props; Button.Default adapter props
+ * @extends ButtonProps
+ * @property {ElementType} [as] 렌더링할 요소다.
+ * @property {ReactNode} [children] 버튼 라벨 또는 콘텐츠다.
+ * @property {string} [className] 버튼 className override다.
+ * @property {"default" | "readonly" | "disabled"} [state] UI 상태다.
+ * @property {boolean} [block] width:100% 확장 여부다.
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] Form.Field width preset 또는 custom width다.
+ * @property {boolean} [loading] true면 readonly 상태로 렌더링한다.
+ * @property {ReactNode} [left] 라벨 왼쪽 콘텐츠다.
+ * @property {ReactNode} [right] 라벨 오른쪽 콘텐츠다.
+ * @property {"hover" | "pressed"} ["data-user-action"] Interaction 상태 강제 표현용 data attr이다.
+ */
+export interface AlternateLayoutButtonProps extends Omit<
+  ButtonProps,
+  "fill" | "priority" | "size" | "scale"
+> {}

package/src/components/alternate/types/unit.ts

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+
+/**
+ * Alternate Direction; fallback 레이아웃 방향 축
+ * @typedef {"vertical" | "horizontal"} AlternateDirection
+ */
+export type AlternateDirection = "vertical" | "horizontal";
+
+/**
+ * Alternate Loading Icon Size; 로딩 아이콘 스케일 축
+ * @typedef {"small" | "medium" | "large"} AlternateLoadingIconSize
+ */
+export type AlternateLoadingIconSize = "small" | "medium" | "large";
+
+/**
+ * Alternate Text Props; fallback 문구 슬롯 props
+ * @property {ReactNode} children 렌더링할 문구 콘텐츠다.
+ */
+export interface AlternateTextProps {
+  /**
+   * 렌더링할 문구 콘텐츠다.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Alternate Empty Data Props; 빈 데이터 안내 레이아웃 props
+ * @property {string} [className] 루트 className override다.
+ * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
+ * @property {ReactNode} [children] 안내 문구 콘텐츠다.
+ */
+export interface AlternateEmptyDataProps {
+  /**
+   * 루트 className override다.
+   */
+  className?: string;
+  /**
+   * 아이콘/문구 배치 방향이다.
+   */
+  direction?: AlternateDirection;
+  /**
+   * 안내 문구 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Loading Default Props; 로딩 안내 레이아웃 props
+ * @property {"vertical" | "horizontal"} [direction] 아이콘/문구 배치 방향이다.
+ * @property {ReactNode} [children] 안내 문구 콘텐츠다.
+ */
+export interface AlternateLoadingDefaultProps {
+  /**
+   * 아이콘/문구 배치 방향이다.
+   */
+  direction?: AlternateDirection;
+  /**
+   * 안내 문구 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Alternate Loading Icon Props; 단독 스피너 아이콘 props
+ * @property {"small" | "medium" | "large"} [size] 로딩 아이콘 스케일이다.
+ * @property {"vertical" | "horizontal"} [direction] 부모 레이아웃 방향 클래스 동기화용 값이다.
+ */
+export interface AlternateLoadingIconProps {
+  /**
+   * 로딩 아이콘 스케일이다.
+   */
+  size?: AlternateLoadingIconSize;
+  /**
+   * 부모 레이아웃 방향 클래스 동기화용 값이다.
+   */
+  direction?: AlternateDirection;
+}

package/src/components/alternate/{markup → unit}/empty/Data.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { clsx } from "clsx";
-import AlternateText from "../Label";
+import AlternateText from "../Text";
 import type { AlternateEmptyDataProps } from "../../types";
 
 /**

package/src/components/alternate/{markup → unit}/loading/Default.tsx

@@ -2,7 +2,7 @@
 
 import { clsx } from "clsx";
 import AlternateLoadingIcon from "./Icon";
-import AlternateText from "../Label";
+import AlternateText from "../Text";
 import type { AlternateLoadingDefaultProps } from "../../types";
 
 /**

package/src/components/toast/img/error.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#313235"/>
+<circle cx="12" cy="12" r="10" fill="#DA1D0B"/>
+<path d="M12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15Z" fill="white"/>
+<path d="M12 7.2002C12.4418 7.2002 12.7998 7.55817 12.7998 8V13C12.7998 13.4418 12.4418 13.7998 12 13.7998C11.5582 13.7998 11.2002 13.4418 11.2002 13V8C11.2002 7.55817 11.5582 7.2002 12 7.2002Z" fill="white"/>
+</svg>

package/src/components/toast/img/success.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#313235"/>
+<circle cx="12" cy="12" r="10" fill="#1AB24D"/>
+<path d="M7.19152 11.8688C6.8791 11.5564 6.8791 11.0501 7.19152 10.7377C7.50394 10.4253 8.0102 10.4253 8.32262 10.7377L10.9391 13.3541L15.6768 8.61636C15.9892 8.30394 16.4955 8.30394 16.8079 8.61636C17.1203 8.92877 17.1203 9.43503 16.8079 9.74745L11.5046 15.0508C11.1922 15.3632 10.6859 15.3632 10.3735 15.0508L7.19152 11.8688Z" fill="white"/>
+</svg>

package/src/components/toast/img/warning.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.6303 18.0362L10.2478 4.18631C11.0076 2.80476 12.9928 2.80476 13.7526 4.18631L21.3701 18.0362C22.1032 19.3691 21.1389 21.0001 19.6176 21.0001H4.38273C2.86153 21.0001 1.8972 19.3691 2.6303 18.0362Z" fill="#F2CC0D"/>
+<path d="M12 16C12.5523 16 13 16.4477 13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16Z" fill="#313235"/>
+<path d="M12 8.2002C12.4418 8.2002 12.7998 8.55817 12.7998 9V14C12.7998 14.4418 12.4418 14.7998 12 14.7998C11.5582 14.7998 11.2002 14.4418 11.2002 14V9C11.2002 8.55817 11.5582 8.2002 12 8.2002Z" fill="#313235"/>
+</svg>

package/src/components/toast/index.scss

@@ -0,0 +1 @@
+@use "./styles";

package/src/components/toast/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Toast; semantic feedback toast 카테고리 배럴
+ * @desc
+ * - `Toast.Host`: 트리거 로직이 만든 item data를 위치별 stack으로 렌더링한다.
+ * - `Toast.Item`: state icon/content/timer close를 담당하는 개별 toast다.
+ * - `ToastIcon`, `ToastItemData`, `ToastState`: public contract 도구다.
+ */
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/toast/markup/Host.tsx

@@ -0,0 +1,74 @@
+import { Fragment } from "react";
+
+import type { ToastHostProps, ToastItemData } from "../types";
+import type { ToastStackGroup, ToastStackStyle } from "../types/internal";
+import { ToastItem } from "./Item";
+
+/**
+ * Toast Host; x/y/margin 기준으로 Toast stack을 렌더링하는 Host
+ * @component
+ * @param {ToastHostProps} props
+ * @param {ToastItemData[]} props.items Toast item 데이터 목록
+ * @param {(toastKey: string) => void} props.onClose 닫힘 요청 핸들러
+ * @example
+ * <Toast.Host items={toastItems} onClose={onToastClose} />
+ */
+export function ToastHost({ items, onClose }: ToastHostProps) {
+  const stackGroups = items.reduce<ToastStackGroup[]>((groups, item) => {
+    const stackKey = `${item.y}-${item.x}-${String(item.margin)}`;
+    const nextGroup = groups.find(group => group.stackKey === stackKey);
+
+    if (nextGroup) {
+      nextGroup.items.push(item);
+      return groups;
+    }
+
+    groups.push({
+      stackKey,
+      x: item.x,
+      y: item.y,
+      margin: item.margin,
+      items: [item],
+    });
+
+    return groups;
+  }, []);
+
+  if (!stackGroups.length) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {stackGroups.map(group => {
+        const stackMargin =
+          typeof group.margin === "number" ? `${group.margin}px` : group.margin;
+        const stackStyle: ToastStackStyle = {
+          "--toast-stack-margin": stackMargin,
+        };
+
+        return (
+          <div
+            key={group.stackKey}
+            className="toast-stack"
+            data-x={group.x}
+            data-y={group.y}
+            style={stackStyle}
+          >
+            {group.items.map((item: ToastItemData) => (
+              <ToastItem
+                key={item.toastKey}
+                toastKey={item.toastKey}
+                duration={item.duration}
+                state={item.state}
+                message={item.message}
+                description={item.description}
+                onClose={onClose}
+              />
+            ))}
+          </div>
+        );
+      })}
+    </Fragment>
+  );
+}

package/src/components/toast/markup/Icon.tsx

@@ -0,0 +1,15 @@
+import ErrorIcon from "../img/error.svg";
+import SuccessIcon from "../img/success.svg";
+import WarningIcon from "../img/warning.svg";
+
+/**
+ * Toast Icon Set; 상태별 아이콘 컴포넌트 맵
+ * @desc
+ * - standard는 Figma 기준 아이콘을 렌더링하지 않는다.
+ * - success/warning/error는 제공된 state SVG를 사용한다.
+ */
+export const ToastIcon = {
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+} as const;