@uniai-fe/uds-primitives 0.5.6 → 0.6.1

package/README.md

@@ -53,10 +53,22 @@ export default function Page() {
 - `Alternate.LoadingDefault`
 - `Alternate.LoadingIcon`
 - `Alternate.Text`
+- `Alternate.Layout.Container`
+- `Alternate.Layout.Figure`
+- `Alternate.Layout.Title`
+- `Alternate.Layout.Contents`
+- `Alternate.Layout.TextButton`
+- `Alternate.Layout.Button`
 - `AlternateEmptyDataProps`
 - `AlternateLoadingDefaultProps`
 - `AlternateLoadingIconProps`
 - `AlternateTextProps`
+- `AlternateLayoutContainerProps`
+- `AlternateLayoutFigureProps`
+- `AlternateLayoutTitleProps`
+- `AlternateLayoutContentsProps`
+- `AlternateLayoutTextButtonProps`
+- `AlternateLayoutButtonProps`
 - `Badge`
 - `BadgeProps`
 - `Chip.Default`
@@ -194,6 +206,15 @@ export default function Page() {
 - `TableRootProps`
 - `TableContainerProps`
 - `TableCellProps`
+- `Toast.Host`
+- `Toast.Item`
+- `ToastIcon`
+- `ToastItemData`
+- `ToastHostProps`
+- `ToastItemProps`
+- `ToastState`
+- `ToastHorizontal`
+- `ToastVertical`
 - `Button.Default`
 - `Button.Text`
 - `Button.Rounded`
@@ -413,10 +434,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
 ```plaintext
 src/components/{category}/
-  markup/   // 컴포넌트 구현
-  types/    // 외부 노출 타입
-  styles/   // SCSS (foundation 토큰 기반)
-  hooks/    // 카테고리 전용 훅
+  markup|unit|layout/  // 컴포넌트 구현
+  types/               // 외부 노출 타입
+  styles/              // SCSS (foundation 토큰 기반)
+  hooks/               // 카테고리 전용 훅
 ```
 
 - 배럴(`components/{category}/index.tsx`)은 항상 `import "./index.scss"`를 포함합니다.

package/dist/styles.css

@@ -1,5 +1,32 @@
 @charset "UTF-8";
 :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;
   --theme-badge-height-xsmall: var(--theme-size-small-1);
   --theme-badge-height-small: var(--theme-size-small-2);
   /* 변경: Figma 2421:619 기준 medium 배지 높이 32px를 추가한다. */
@@ -779,6 +806,26 @@
   --table-td-text-size: 15px;
   --table-td-text-weight: var(--font-body-xsmall-weight);
   --table-td-text-line-height: var(--font-body-xsmall-line-height);
+  --toast-stack-margin: var(--spacing-padding-7);
+  --toast-stack-gap: var(--spacing-gap-3);
+  --toast-stack-z-index: 10000;
+  --toast-width: 361px;
+  --toast-background-color: var(--color-surface-heavy);
+  --toast-foreground-color: var(--color-common-100);
+  --toast-radius: var(--theme-radius-large-1);
+  --toast-padding-block: var(--spacing-padding-5);
+  --toast-padding-inline: var(--spacing-padding-7);
+  --toast-gap: var(--spacing-gap-5);
+  --toast-icon-size: 24px;
+  --toast-transition-duration: 0.6s;
+  --toast-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --toast-transition-distance: -24%;
+  --toast-transition-x: 0;
+  --toast-transition-y: 0;
+  --toast-message-font-size: var(--font-body-xsmall-size);
+  --toast-message-line-height: var(--font-body-xsmall-line-height);
+  --toast-message-letter-spacing: var(--font-body-xsmall-letter-spacing);
+  --toast-message-font-weight: var(--font-body-xsmall-weight);
   --tooltip-message-background: var(--color-cool-gray-20);
   --tooltip-message-foreground: var(--color-common-100);
   --tooltip-message-radius: var(--theme-radius-medium-3);
@@ -801,17 +848,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;
 }
@@ -829,25 +876,25 @@
 }
 .alternate.is-horizontal.loading .empty-text {
   transform: translateY(0.2rem);
-  margin-left: 1rem;
+  margin-left: var(--alternate-unit-gap);
 }
 .alternate.is-horizontal.loading .alternate-text {
   transform: translateY(0.2rem);
-  margin-left: 1rem;
+  margin-left: var(--alternate-unit-gap);
 }
 .alternate.is-vertical {
   flex-direction: column;
 }
 .alternate.is-vertical .empty-text {
-  margin-top: 1rem;
+  margin-top: var(--alternate-unit-gap);
 }
 .alternate.is-vertical .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;
@@ -856,18 +903,81 @@
   animation: alternate-loading-spin 1s linear infinite;
 }
 .alternate-loading-icon.is-medium {
-  width: 3.6rem;
-  height: 3.6rem;
+  width: var(--alternate-loading-icon-medium-size);
+  height: var(--alternate-loading-icon-medium-size);
 }
 .alternate-loading-icon.is-large {
-  width: 5.2rem;
-  height: 5.2rem;
+  width: var(--alternate-loading-icon-large-size);
+  height: var(--alternate-loading-icon-large-size);
 }
 .alternate-loading-icon svg {
   width: 100%;
   height: 100%;
 }
 
+.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 {
+  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;
+}
+
 /* Badge 기본 토큰 래핑 */
 
 
@@ -5097,6 +5207,117 @@ figure.chip {
 
 
 
+.toast-stack {
+  --toast-stack-translate-x: 0;
+  --toast-stack-translate-y: 0;
+  position: fixed;
+  z-index: var(--toast-stack-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-stack-gap);
+  pointer-events: none;
+  transform: translate(var(--toast-stack-translate-x), var(--toast-stack-translate-y));
+}
+
+.toast-stack:where([data-x=left]) {
+  left: var(--toast-stack-margin);
+  --toast-transition-x: calc(var(--toast-transition-distance) * -1);
+}
+
+.toast-stack:where([data-x=center]) {
+  left: 50%;
+  --toast-stack-translate-x: -50%;
+  --toast-transition-distance: -80%;
+}
+
+.toast-stack:where([data-x=right]) {
+  right: var(--toast-stack-margin);
+  --toast-transition-x: var(--toast-transition-distance);
+}
+
+.toast-stack:where([data-y=top]) {
+  top: var(--toast-stack-margin);
+}
+
+.toast-stack:where([data-y=center]) {
+  top: 50%;
+  --toast-stack-translate-y: -50%;
+}
+
+.toast-stack:where([data-y=bottom]) {
+  bottom: var(--toast-stack-margin);
+}
+
+.toast-stack:where([data-x=center][data-y=top]) {
+  --toast-transition-y: calc(var(--toast-transition-distance) * -1);
+}
+
+.toast-stack:where([data-x=center][data-y=bottom]) {
+  --toast-transition-y: var(--toast-transition-distance);
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  width: min(var(--toast-width), 100vw - var(--toast-stack-margin) * 2);
+  box-sizing: border-box;
+  gap: var(--toast-gap);
+  overflow: hidden;
+  padding: var(--toast-padding-block) var(--toast-padding-inline);
+  border-radius: var(--toast-radius);
+  background-color: var(--toast-background-color);
+  opacity: 0;
+  pointer-events: auto;
+  transform: translate(var(--toast-transition-x), var(--toast-transition-y));
+  transition: opacity var(--toast-transition-duration) var(--toast-transition-easing), transform var(--toast-transition-duration) var(--toast-transition-easing);
+}
+
+.toast:where([data-phase=open]) {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--toast-icon-size);
+  height: var(--toast-icon-size);
+  margin: 0;
+}
+
+.toast-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.toast-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.toast-text {
+  overflow: hidden;
+  margin: 0;
+  color: var(--toast-foreground-color);
+  font-size: var(--toast-message-font-size);
+  line-height: var(--toast-message-line-height);
+  letter-spacing: var(--toast-message-letter-spacing);
+  font-weight: var(--toast-message-font-weight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toast-description {
+  opacity: 0.82;
+}
+
+
+
 .tooltip-trigger {
   display: inline-flex;
   align-items: center;

package/package.json

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

package/src/components/alternate/{markup/index.tsx → Alternate.tsx}

@@ -1,7 +1,8 @@
-import AlternateEmptyData from "./empty/Data";
-import AlternateText from "./Label";
-import AlternateLoadingDefault from "./loading/Default";
-import AlternateLoadingIcon from "./loading/Icon";
+import AlternateLayout from "./layout/Layout";
+import AlternateEmptyData from "./unit/empty/Data";
+import AlternateText from "./unit/Text";
+import AlternateLoadingDefault from "./unit/loading/Default";
+import AlternateLoadingIcon from "./unit/loading/Icon";
 
 /**
  * Alternate; empty/loading fallback namespace
@@ -10,12 +11,14 @@ import AlternateLoadingIcon from "./loading/Icon";
  * - `Alternate.LoadingDefault`: 로딩 안내 레이아웃이다.
  * - `Alternate.LoadingIcon`: 단독 스피너 아이콘이다.
  * - `Alternate.Text`: 안내 문구 슬롯이다.
+ * - `Alternate.Layout`: edge-case 조합을 위한 anatomy namespace다.
  */
 const Alternate = {
   EmptyData: AlternateEmptyData,
   LoadingDefault: AlternateLoadingDefault,
   LoadingIcon: AlternateLoadingIcon,
   Text: AlternateText,
+  Layout: AlternateLayout,
 };
 
 export default Alternate;

package/src/components/alternate/index.tsx

@@ -5,6 +5,7 @@
  * - `Alternate.LoadingDefault`: 로딩 아이콘과 안내 문구를 함께 렌더링한다.
  * - `Alternate.LoadingIcon`: 단독 스피너 아이콘이다.
  * - `Alternate.Text`: fallback 문구 스타일 슬롯이다.
+ * - `Alternate.Layout`: edge-case 조합 anatomy다.
  */
-export { default as Alternate } from "./markup";
+export { default as Alternate } from "./Alternate";
 export type * from "./types";

package/src/components/alternate/layout/Button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { clsx } from "clsx";
+import { Button } from "../../button";
+import type { AlternateLayoutButtonProps } from "../types";
+
+/**
+ * Alternate Layout Button; Button.Default preset adapter
+ * @component
+ * @param {AlternateLayoutButtonProps} props
+ * @param {React.ReactNode} [props.children] 버튼 라벨 또는 콘텐츠다.
+ * @param {string} [props.className] 버튼 className override다.
+ * @example
+ * <Alternate.Layout.Button as="a" href="/">홈으로 이동</Alternate.Layout.Button>
+ */
+export default function AlternateLayoutButton({
+  className,
+  ...buttonProps
+}: AlternateLayoutButtonProps) {
+  return (
+    <Button.Default
+      {...buttonProps}
+      className={clsx("alternate-layout-button", className)}
+      fill="outlined"
+      priority="secondary"
+      size="small"
+    />
+  );
+}

package/src/components/alternate/layout/Container.tsx

@@ -0,0 +1,24 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutContainerProps } from "../types";
+
+/**
+ * Alternate Layout Container; edge-case anatomy 루트
+ * @component
+ * @param {AlternateLayoutContainerProps} props
+ * @param {string} [props.className] 루트 className override다.
+ * @param {React.ReactNode} [props.children] layout 내부 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Container>
+ *   <Alternate.Layout.Title>데이터가 없습니다.</Alternate.Layout.Title>
+ * </Alternate.Layout.Container>
+ */
+export default function AlternateLayoutContainer({
+  className,
+  children,
+}: AlternateLayoutContainerProps) {
+  return (
+    <section className={clsx("alternate-layout", className)}>
+      {children}
+    </section>
+  );
+}

package/src/components/alternate/layout/Contents.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import { Slot } from "../../slot";
+import type { AlternateLayoutContentsProps } from "../types";
+
+/**
+ * Alternate Layout Contents; edge-case 본문
+ * @component
+ * @param {AlternateLayoutContentsProps} props
+ * @param {string} [props.className] 본문 className override다.
+ * @param {React.ReactNode} [props.children] 본문 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Contents>다시 시도해 주세요.</Alternate.Layout.Contents>
+ */
+export default function AlternateLayoutContents({
+  className,
+  children,
+}: AlternateLayoutContentsProps) {
+  return (
+    <Slot.Text as="p" className={clsx("alternate-layout-contents", className)}>
+      {children}
+    </Slot.Text>
+  );
+}

package/src/components/alternate/layout/Figure.tsx

@@ -0,0 +1,24 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutFigureProps } from "../types";
+
+/**
+ * Alternate Layout Figure; edge-case visual 영역
+ * @component
+ * @param {AlternateLayoutFigureProps} props
+ * @param {string} [props.className] figure className override다.
+ * @param {React.ReactNode} [props.children] 도입 측이 직접 제어하는 SVG, 이미지, 아이콘 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Figure>
+ *   <img src="/empty.svg" alt="" />
+ * </Alternate.Layout.Figure>
+ */
+export default function AlternateLayoutFigure({
+  className,
+  children,
+}: AlternateLayoutFigureProps) {
+  return (
+    <figure className={clsx("alternate-layout-figure", className)}>
+      {children}
+    </figure>
+  );
+}

package/src/components/alternate/layout/Layout.tsx

@@ -0,0 +1,27 @@
+import AlternateLayoutButton from "./Button";
+import AlternateLayoutContainer from "./Container";
+import AlternateLayoutContents from "./Contents";
+import AlternateLayoutFigure from "./Figure";
+import AlternateLayoutTextButton from "./TextButton";
+import AlternateLayoutTitle from "./Title";
+
+/**
+ * Alternate Layout; edge-case anatomy namespace
+ * @desc
+ * - `Container`: 화면 상태 조합 루트다.
+ * - `Figure`: 도입 측이 제어하는 visual 영역이다.
+ * - `Title`: 제목 텍스트 영역이다.
+ * - `Contents`: 본문 텍스트 영역이다.
+ * - `TextButton`: paragraph 내부 text action이다.
+ * - `Button`: Button.Default 기반 action adapter다.
+ */
+const AlternateLayout = {
+  Container: AlternateLayoutContainer,
+  Figure: AlternateLayoutFigure,
+  Title: AlternateLayoutTitle,
+  Contents: AlternateLayoutContents,
+  TextButton: AlternateLayoutTextButton,
+  Button: AlternateLayoutButton,
+};
+
+export default AlternateLayout;

package/src/components/alternate/layout/TextButton.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { clsx } from "clsx";
+import type { AlternateLayoutTextButtonProps } from "../types";
+
+/**
+ * Alternate Layout TextButton; paragraph 내부 text action
+ * @component
+ * @param {AlternateLayoutTextButtonProps} props
+ * @param {string} [props.className] action className override다.
+ * @param {React.ReactNode} [props.children] action 라벨 콘텐츠다.
+ * @param {string} [props.href] 링크 action으로 렌더링할 href다.
+ * @param {string} [props.target] 링크 target 값이다.
+ * @example
+ * <Alternate.Layout.TextButton onClick={onRetry}>다시 시도</Alternate.Layout.TextButton>
+ */
+export default function AlternateLayoutTextButton({
+  className,
+  children,
+  href,
+  target,
+  type: typeProp,
+  ...htmlAttrs
+}: AlternateLayoutTextButtonProps) {
+  const textButtonClassName = clsx("alternate-layout-text-button", className);
+
+  if (href) {
+    return (
+      <a
+        className={textButtonClassName}
+        href={href}
+        target={target}
+        {...htmlAttrs}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // 변경: href가 없으면 문장 내부 action을 native button으로 고정한다.
+  return (
+    <button
+      className={textButtonClassName}
+      type={typeProp ?? "button"}
+      {...htmlAttrs}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/alternate/layout/Title.tsx

@@ -0,0 +1,25 @@
+import { clsx } from "clsx";
+import { Slot } from "../../slot";
+import type { AlternateLayoutTitleProps } from "../types";
+
+/**
+ * Alternate Layout Title; edge-case 제목
+ * @component
+ * @param {AlternateLayoutTitleProps} props
+ * @param {React.ElementType} [props.as="strong"] 렌더링할 제목 요소다.
+ * @param {string} [props.className] 제목 className override다.
+ * @param {React.ReactNode} [props.children] 제목 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Title as="h1">페이지를 찾을 수 없습니다.</Alternate.Layout.Title>
+ */
+export default function AlternateLayoutTitle({
+  as = "strong",
+  className,
+  children,
+}: AlternateLayoutTitleProps) {
+  return (
+    <Slot.Text as={as} className={clsx("alternate-layout-title", className)}>
+      {children}
+    </Slot.Text>
+  );
+}

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

@@ -0,0 +1 @@
+export { default as AlternateLayout } from "./Layout";

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

@@ -1 +1,3 @@
-@forward "./alternate";
+@forward "./variables";
+@forward "./unit";
+@forward "./layout";