@tide-tds/components 0.2.1 → 0.3.1

package/dist/Alert.d.ts

@@ -0,0 +1,32 @@
+import { Role } from "./types.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface AlertProps extends Omit<ComponentProps<"div">, "color" | "title" | "role" | "onClose"> {
+  /**
+   * Role. Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role을 받는다. 기본값은 `info`다.
+   * 상태 알림은 `info`·`success`·`warning`·`danger`를 쓰고, 상태마다 모양이 다른 아이콘이 붙는다.
+   * `neutral`·`primary`·앱 Role은 일반 알림이라 `info`와 같은 아이콘이다.
+   * 색 계열 이름(`blue` 등)은 받지 않는다. 알림의 뜻을 색으로 전하기 때문이다(ADR 0016).
+   * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+  /** 제목. 굵은 글자로 본문 위에 놓인다. HTML `title` 속성(툴팁)은 받지 않는다. */
+  title?: ReactNode;
+  /** 본문. 문장, 목록, 같은 Role의 `Link`를 넣는다. */
+  children?: ReactNode;
+  /**
+   * live region 역할. 기본값은 없음(정적 표시)이다.
+   * 처음부터 화면에 있는 Alert는 스크린 리더가 알리지 않으므로 역할을 붙이지 않는다.
+   * 사용자 동작 뒤에 새로 나타나 바로 알려야 하면 `"alert"`(급하고 중요함, 읽던 것을 끊음),
+   * 끊지 않고 알리면 되면 `"status"`(정중하게 알림)를 준다.
+   */
+  role?: "alert" | "status";
+  /** 닫기 버튼을 눌렀을 때 부른다. 주면 끝쪽에 닫기 버튼(IconButton)이 생긴다. Alert를 빼는 일은 앱이 한다. */
+  onClose?: () => void;
+  /** 닫기 버튼 이름. 기본값은 `"닫기"`다. 같은 화면에 Alert가 여럿이면 `"결제 알림 닫기"`처럼 구분한다. */
+  closeLabel?: string;
+}
+/**
+ * 화면 안에서 상태(info·success·warning·danger)나 알릴 내용을 보여 주는 표면.
+ * 상태 아이콘(장식용), 제목, 본문, 닫기 버튼으로 이뤄진다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Alert({ color, title, children, onClose, closeLabel, className, ...props }: AlertProps): ReactElement;

package/dist/Alert.js

@@ -0,0 +1,47 @@
+import { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSurfaceClass, alertTitleClass } from "./alert-style.js";
+import { cn } from "./cn.js";
+import { IconButton } from "./IconButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@tide-tds/icons";
+
+// src/Alert.tsx
+/**
+* 화면 안에서 상태(info·success·warning·danger)나 알릴 내용을 보여 주는 표면.
+* 상태 아이콘(장식용), 제목, 본문, 닫기 버튼으로 이뤄진다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Alert({ color = "info", title, children, onClose, closeLabel = "닫기", className, ...props }) {
+	const StatusIcon = alertStatusIcon(color);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-color": color,
+		className: cn(alertLayoutClass, alertSurfaceClass, className),
+		children: [
+			/* @__PURE__ */ jsx(StatusIcon, {
+				size: 20,
+				"aria-hidden": "true",
+				className: alertIconClass
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: alertContentClass,
+				children: [title !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-body-sm font-semibold",
+					children: title
+				}), children !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-body-sm",
+					children
+				})]
+			}),
+			onClose !== void 0 && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": closeLabel,
+				variant: "ghost",
+				color,
+				size: "xs",
+				onClick: onClose,
+				className: "-my-0.5 -me-1",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+}
+
+export { Alert };

package/dist/Avatar.d.ts

@@ -0,0 +1,27 @@
+import { ColorFamilyName, Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** Avatar의 size. 공통 size 4개를 모두 받는다. 높이는 spec size 표와 같다(24·32·40·48px). */
+type AvatarSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+export interface AvatarProps extends Omit<ComponentProps<"span">, "color" | "children" | "role" | "aria-label"> {
+  /** 사용자 이미지 주소. 없거나 빈 문자열이거나 불러오지 못하면 fallback 아이콘이 보인다. */
+  src?: string;
+  /**
+   * 대체 텍스트(보통 사람 이름). 필수다. 주면 루트가 `role="img"`가 되고 이 텍스트가 이름이 된다.
+   * 옆에 이름이 이미 적혀 있는 장식용이면 `""`를 주어 읽히지 않게 한다. 이미지가 없어도 같다.
+   */
+  alt: string;
+  /** `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px. 기본값은 `md`다. */
+  size?: AvatarSize;
+  /**
+   * fallback 배경과 아이콘의 색 계열(Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열).
+   * 뜻이 없는 장식 색이라 Role은 받지 않는다(ADR 0016·0017 후속). 기본값은 `gray`다.
+   * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: ColorFamilyName;
+}
+/**
+ * 사용자 이미지를 원 안에 보여 준다. 이미지가 없거나 불러오지 못하면 fallback 아이콘이 보인다.
+ * 누르는 동작이 없다. 클릭이 필요하면 Button이나 IconButton 안에 넣는다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Avatar({ src, alt, size, color, className, ...props }: AvatarProps): ReactElement;
+export {};

package/dist/Avatar.js

@@ -0,0 +1,44 @@
+import { cn } from "./cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UserIcon } from "@tide-tds/icons";
+
+// src/Avatar.tsx
+/** 원 크기와 fallback 아이콘 크기(원의 약 60%). */
+const sizeClass = {
+	xs: "size-6 [&_svg]:size-4",
+	sm: "size-8 [&_svg]:size-5",
+	md: "size-10 [&_svg]:size-6",
+	lg: "size-12 [&_svg]:size-7"
+};
+const baseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent-subtle text-accent align-middle select-none [&_svg]:shrink-0";
+/** 이미지 층. 아이콘 위에 원 전체를 덮고, `object-fit: cover`처럼 가운데를 채운다. */
+const imageClass = "absolute inset-0 bg-cover bg-center bg-no-repeat";
+/**
+* CSS `url("…")` 값을 만든다. 따옴표·역슬래시·줄바꿈을 CSS escape(`\HH `)로 바꿔 문자열 밖으로 나가지 못하게 한다.
+*/
+function cssUrl(src) {
+	return `url("${src.replace(/["\\\n\r\f]/g, (char) => `\\${char.charCodeAt(0).toString(16)} `)}")`;
+}
+/**
+* 사용자 이미지를 원 안에 보여 준다. 이미지가 없거나 불러오지 못하면 fallback 아이콘이 보인다.
+* 누르는 동작이 없다. 클릭이 필요하면 Button이나 IconButton 안에 넣는다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Avatar({ src, alt, size = "md", color = "gray", className, ...props }) {
+	const named = alt !== "";
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		...named ? {
+			role: "img",
+			"aria-label": alt
+		} : {},
+		"data-color": color,
+		className: cn(baseClass, sizeClass[size], className),
+		children: [/* @__PURE__ */ jsx(UserIcon, { "aria-hidden": "true" }), src ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: imageClass,
+			style: { backgroundImage: cssUrl(src) }
+		}) : null]
+	});
+}
+
+export { Avatar };

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, ReactElement } from "react";
+export interface BreadcrumbProps extends ComponentProps<"nav"> {
+  /** 탐색 영역 이름. 기본값은 `"이동 경로"`다. 한 화면에 같은 이름의 탐색 영역이 겹치지 않게 한다. */
+  "aria-label"?: string;
+}
+export interface BreadcrumbItemProps extends ComponentProps<"li"> {}
+export interface BreadcrumbLinkProps extends Omit<ComponentProps<"a">, "color"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<NextLink href="/docs" />}`.
+   * props, ref, className을 그 요소에 병합한다.
+   */
+  render?: ReactElement;
+}
+export interface BreadcrumbCurrentProps extends ComponentProps<"span"> {}
+/**
+ * 현재 페이지까지의 경로를 보여 주는 탐색 영역. `<nav>` 안의 `<ol>`이다.
+ * 자식은 `BreadcrumbItem`이고, 그 안에 `BreadcrumbLink`(상위 페이지)나 `BreadcrumbCurrent`(현재 페이지)를 둔다.
+ * `ref`·`className`은 `<nav>`에 붙는다.
+ */
+export declare function Breadcrumb({ "aria-label": ariaLabel, children, ...props }: BreadcrumbProps): ReactElement;
+/** 경로의 한 항목 `<li>`. 앞에 장식용 구분자(›)를 붙이고, 목록의 첫 항목에서는 숨긴다. */
+export declare function BreadcrumbItem({ className, children, ...props }: BreadcrumbItemProps): ReactElement;
+/** 상위 페이지 링크 `<a>`. 밑줄이 있고 hover에 짙어진다. Next.js에서는 `render={<NextLink href="/x" />}`를 쓴다. */
+export declare function BreadcrumbLink({ render, ...props }: BreadcrumbLinkProps): ReactElement;
+/** 현재 페이지 `<span aria-current="page">`. 링크가 아니다. 경로의 마지막 항목에 둔다. */
+export declare function BreadcrumbCurrent({ className, ...props }: BreadcrumbCurrentProps): ReactElement;

package/dist/Breadcrumb.js

@@ -0,0 +1,53 @@
+import { cn } from "./cn.js";
+import { renderElement } from "./render.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "@tide-tds/icons";
+
+// src/Breadcrumb.tsx
+const listClass = "flex flex-wrap items-center gap-1.5 text-body-sm text-muted";
+const itemClass = "inline-flex items-center gap-1.5";
+const separatorClass = "size-4 shrink-0 [li:first-child>&]:hidden";
+const linkClass = "cursor-pointer rounded-sm underline decoration-1 underline-offset-2 hover:text-default hover:decoration-2 focus-visible:focus-ring";
+const currentClass = "text-label-md text-default";
+/**
+* 현재 페이지까지의 경로를 보여 주는 탐색 영역. `<nav>` 안의 `<ol>`이다.
+* 자식은 `BreadcrumbItem`이고, 그 안에 `BreadcrumbLink`(상위 페이지)나 `BreadcrumbCurrent`(현재 페이지)를 둔다.
+* `ref`·`className`은 `<nav>`에 붙는다.
+*/
+function Breadcrumb({ "aria-label": ariaLabel = "이동 경로", children, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: listClass,
+			children
+		})
+	});
+}
+/** 경로의 한 항목 `<li>`. 앞에 장식용 구분자(›)를 붙이고, 목록의 첫 항목에서는 숨긴다. */
+function BreadcrumbItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("li", {
+		...props,
+		className: cn(itemClass, className),
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: separatorClass }), children]
+	});
+}
+/** 상위 페이지 링크 `<a>`. 밑줄이 있고 hover에 짙어진다. Next.js에서는 `render={<NextLink href="/x" />}`를 쓴다. */
+function BreadcrumbLink({ render, ...props }) {
+	return renderElement({
+		defaultElement: "a",
+		render,
+		baseClassName: linkClass,
+		props
+	});
+}
+/** 현재 페이지 `<span aria-current="page">`. 링크가 아니다. 경로의 마지막 항목에 둔다. */
+function BreadcrumbCurrent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-current": "page",
+		...props,
+		className: cn(currentClass, className)
+	});
+}
+
+export { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink };

package/dist/Pagination.d.ts

@@ -0,0 +1,46 @@
+import { IconButtonProps } from "./IconButton.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface PaginationProps extends ComponentProps<"nav"> {
+  /** 탐색 영역 이름. 기본값은 `"페이지 이동"`이다. 한 화면에 목록이 여럿이면 `"댓글 페이지"`처럼 구분한다. */
+  "aria-label"?: string;
+}
+export interface PaginationItemProps extends ComponentProps<"li"> {}
+export interface PaginationLinkProps extends Omit<ComponentProps<"a">, "color"> {
+  /** 현재 페이지인지. `aria-current="page"`를 붙이고 subtle 채움으로 보인다. 기본값은 `false`다. */
+  current?: boolean;
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<NextLink href="?page=2" />}`.
+   * 상태로 페이지를 바꾸면 `render={<button type="button" onClick={...} />}`를 쓴다. props, ref, className을 병합한다.
+   */
+  render?: ReactElement;
+}
+/** 이전/다음 항목 props. IconButton의 props에서 모양(variant·color·size)과 아이콘·로딩을 고정했다. */
+export interface PaginationArrowProps extends Omit<IconButtonProps, "aria-label" | "children" | "variant" | "color" | "size" | "loading" | "loadingLabel"> {
+  /** 버튼 이름. 기본값은 이전 `"이전 페이지"`, 다음 `"다음 페이지"`다. */
+  "aria-label"?: string;
+}
+export interface PaginationPreviousProps extends PaginationArrowProps {}
+export interface PaginationNextProps extends PaginationArrowProps {}
+export interface PaginationEllipsisProps extends Omit<ComponentProps<"span">, "children"> {
+  /** 스크린리더가 읽는 텍스트. 화면에는 「…」 아이콘만 보인다. 기본값은 `"페이지 생략"`이다. */
+  children?: ReactNode;
+}
+/**
+ * 페이지 이동 탐색 영역. `<nav>` 안의 `<ul>`이다.
+ * 자식은 `PaginationItem`이고, 그 안에 `PaginationPrevious`·`PaginationLink`·`PaginationEllipsis`·`PaginationNext`를 둔다.
+ * `ref`·`className`은 `<nav>`에 붙는다.
+ */
+export declare function Pagination({ "aria-label": ariaLabel, children, ...props }: PaginationProps): ReactElement;
+/** 목록의 한 항목 `<li>`. 기본 class가 없다. */
+export declare function PaginationItem(props: PaginationItemProps): ReactElement;
+/**
+ * 페이지 번호 링크. 기본은 `<a>`이고 Button(ghost, 32px) 모양이다. 현재 페이지는 `current`를 준다.
+ * Next.js에서는 `render={<NextLink href="?page=2" />}`를 쓴다.
+ */
+export declare function PaginationLink({ current, render, className, ...props }: PaginationLinkProps): ReactElement;
+/** 이전 페이지로 가는 IconButton(ghost, 32px, ‹). 첫 페이지에서는 `disabled`를 준다. */
+export declare function PaginationPrevious({ "aria-label": ariaLabel, ...props }: PaginationPreviousProps): ReactElement;
+/** 다음 페이지로 가는 IconButton(ghost, 32px, ›). 마지막 페이지에서는 `disabled`를 준다. */
+export declare function PaginationNext({ "aria-label": ariaLabel, ...props }: PaginationNextProps): ReactElement;
+/** 생략된 번호 자리 `<span>`. 화면에는 「…」 아이콘, 스크린리더에는 텍스트(기본 `"페이지 생략"`)를 보인다. */
+export declare function PaginationEllipsis({ className, children, ...props }: PaginationEllipsisProps): ReactElement;

package/dist/Pagination.js

@@ -0,0 +1,79 @@
+import { Button } from "./Button.js";
+import { cn } from "./cn.js";
+import { IconButton } from "./IconButton.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "@tide-tds/icons";
+
+// src/Pagination.tsx
+/** 페이지 번호·이전/다음 항목의 고정 size. 둘 다 32×32px다(24×24 이상). */
+const itemSize = "sm";
+const listClass = "flex flex-wrap items-center gap-1";
+const linkClass = "min-w-8 px-2 tabular-nums";
+const ellipsisClass = "inline-flex size-8 items-center justify-center text-muted";
+/**
+* 페이지 이동 탐색 영역. `<nav>` 안의 `<ul>`이다.
+* 자식은 `PaginationItem`이고, 그 안에 `PaginationPrevious`·`PaginationLink`·`PaginationEllipsis`·`PaginationNext`를 둔다.
+* `ref`·`className`은 `<nav>`에 붙는다.
+*/
+function Pagination({ "aria-label": ariaLabel = "페이지 이동", children, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: listClass,
+			children
+		})
+	});
+}
+/** 목록의 한 항목 `<li>`. 기본 class가 없다. */
+function PaginationItem(props) {
+	return /* @__PURE__ */ jsx("li", { ...props });
+}
+/**
+* 페이지 번호 링크. 기본은 `<a>`이고 Button(ghost, 32px) 모양이다. 현재 페이지는 `current`를 준다.
+* Next.js에서는 `render={<NextLink href="?page=2" />}`를 쓴다.
+*/
+function PaginationLink({ current = false, render, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render: render ?? /* @__PURE__ */ jsx("a", {}),
+		variant: current ? "subtle" : "ghost",
+		color: current ? "primary" : "neutral",
+		size: itemSize,
+		"aria-current": current ? "page" : props["aria-current"],
+		className: cn(linkClass, className)
+	});
+}
+/** 이전 페이지로 가는 IconButton(ghost, 32px, ‹). 첫 페이지에서는 `disabled`를 준다. */
+function PaginationPrevious({ "aria-label": ariaLabel = "이전 페이지", ...props }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		...props,
+		"aria-label": ariaLabel,
+		variant: "ghost",
+		color: "neutral",
+		size: itemSize,
+		children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+}
+/** 다음 페이지로 가는 IconButton(ghost, 32px, ›). 마지막 페이지에서는 `disabled`를 준다. */
+function PaginationNext({ "aria-label": ariaLabel = "다음 페이지", ...props }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		...props,
+		"aria-label": ariaLabel,
+		variant: "ghost",
+		color: "neutral",
+		size: itemSize,
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+/** 생략된 번호 자리 `<span>`. 화면에는 「…」 아이콘, 스크린리더에는 텍스트(기본 `"페이지 생략"`)를 보인다. */
+function PaginationEllipsis({ className, children = "페이지 생략", ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className: cn(ellipsisClass, className),
+		children: [/* @__PURE__ */ jsx(EllipsisIcon, {}), /* @__PURE__ */ jsx(VisuallyHidden, { children })]
+	});
+}
+
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/Popover.d.ts

@@ -0,0 +1,43 @@
+import { OverlayPlacement } from "./overlay.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Popover 내용의 위치. 앞은 트리거의 어느 쪽, 뒤는 그 변에서 맞출 끝이다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+export type PopoverPlacement = OverlayPlacement;
+export interface PopoverProps {
+  /** 열림 상태(제어). 주면 `onOpenChange`로 바꾼다. */
+  open?: boolean;
+  /** 처음 열림 상태(비제어). 기본값은 `false`다. */
+  defaultOpen?: boolean;
+  /** 열림 상태가 바뀌려 할 때 새 값으로 부른다. */
+  onOpenChange?: (open: boolean) => void;
+  /** `PopoverTrigger`와 `PopoverContent` */
+  children: ReactNode;
+}
+/**
+ * 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+ * 안에 `PopoverTrigger` 하나와 `PopoverContent` 하나를 둔다.
+ */
+export declare function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps): ReactElement;
+export interface PopoverTriggerProps extends ComponentProps<"button"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Button variant="outline" />}`, `render={<IconButton aria-label="설정" />}`.
+   * props, ref, className, 이벤트 핸들러를 그 요소에 병합한다. 기본은 class 없는 `<button type="button">`이다.
+   */
+  render?: ReactElement;
+}
+/**
+ * Popover를 여닫는 버튼. 누르면(마우스, 터치, Enter, Space) 열림 상태를 뒤집는다.
+ * `aria-expanded`, 열렸을 때 `aria-controls`, 열렸을 때 `data-open`이 붙는다.
+ */
+export declare function PopoverTrigger({ render, ref, id, className, ...props }: PopoverTriggerProps): ReactElement;
+export interface PopoverContentProps extends Omit<ComponentProps<"div">, "id" | "role"> {
+  /** 트리거 기준 위치. 기본값은 `bottom`(아래, 가운데 맞춤)이다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+  placement?: PopoverPlacement;
+  /** 트리거와의 간격(px). 기본값은 `8`이다. */
+  offset?: number;
+}
+/**
+ * 트리거 옆에 뜨는 내용(`role="dialog"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+ * 등장은 opacity + blur 4px + 4px 이동(`normal`), 퇴장은 그 절반(`fast`)이다. 움직임 줄이기에서는 opacity만 바뀐다.
+ * 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+ */
+export declare function PopoverContent(props: PopoverContentProps): ReactElement | null;

package/dist/Popover.js

@@ -0,0 +1,147 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { OverlayPortal, useOverlayPresence, useOverlayTheme, usePopoverOverlay } from "./overlay.js";
+import { overlaySurfaceClass, popoverMotionClass } from "./overlay-style.js";
+import { renderElement } from "./render.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, use, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DismissButton, mergeProps, mergeRefs, useDialog, useOverlayTrigger, usePress } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+
+// src/Popover.tsx
+const PopoverContext = createContext(null);
+function usePopoverContext(part) {
+	const context = use(PopoverContext);
+	if (!context) throw new Error(`${part}는 Popover 안에 둔다.`);
+	return context;
+}
+/**
+* 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+* 안에 `PopoverTrigger` 하나와 `PopoverContent` 하나를 둔다.
+*/
+function Popover({ open, defaultOpen, onOpenChange, children }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const generatedTriggerId = useId();
+	const [triggerId, setTriggerId] = useState(generatedTriggerId);
+	const value = useMemo(() => ({
+		state,
+		triggerRef,
+		triggerProps,
+		contentId: overlayProps.id,
+		triggerId,
+		setTriggerId
+	}), [
+		state,
+		triggerProps,
+		overlayProps.id,
+		triggerId
+	]);
+	return /* @__PURE__ */ jsx(PopoverContext, {
+		value,
+		children
+	});
+}
+/**
+* Popover를 여닫는 버튼. 누르면(마우스, 터치, Enter, Space) 열림 상태를 뒤집는다.
+* `aria-expanded`, 열렸을 때 `aria-controls`, 열렸을 때 `data-open`이 붙는다.
+*/
+function PopoverTrigger({ render, ref, id, className, ...props }) {
+	const { state, triggerRef, triggerProps, triggerId, setTriggerId } = usePopoverContext("PopoverTrigger");
+	const { onPress, ...ariaProps } = triggerProps;
+	const { pressProps } = usePress({
+		onPress,
+		ref: triggerRef
+	});
+	const mergedRef = useMemo(() => mergeRefs(ref, triggerRef), [ref, triggerRef]);
+	const resolvedId = id ?? triggerId;
+	useLayoutEffect(() => {
+		if (resolvedId !== triggerId) setTriggerId(resolvedId);
+	}, [
+		resolvedId,
+		triggerId,
+		setTriggerId
+	]);
+	const merged = {
+		...mergeProps(props, ariaProps, pressProps),
+		id: resolvedId,
+		ref: mergedRef,
+		"data-open": state.isOpen ? "" : void 0
+	};
+	if (!render) return createElement("button", {
+		type: "button",
+		...merged,
+		className
+	});
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: "",
+		props: {
+			...merged,
+			className
+		}
+	});
+}
+const contentClass = `isolate z-popover max-w-80 overflow-auto p-4 text-body-md outline-none ${overlaySurfaceClass} ${popoverMotionClass}`;
+/**
+* 트리거 옆에 뜨는 내용(`role="dialog"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+* 등장은 opacity + blur 4px + 4px 이동(`normal`), 퇴장은 그 절반(`fast`)이다. 움직임 줄이기에서는 opacity만 바뀐다.
+* 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+*/
+function PopoverContent(props) {
+	const context = usePopoverContext("PopoverContent");
+	const popoverRef = useRef(null);
+	if (!useOverlayPresence(context.state.isOpen, popoverRef)) return null;
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		isExiting: !context.state.isOpen,
+		children: /* @__PURE__ */ jsx(PopoverContentInner, {
+			...props,
+			context,
+			popoverRef
+		})
+	});
+}
+/** DOM에 있는 동안만 portal 안에서 렌더한다. React Aria 오버레이 hook은 요소가 있다고 보고 동작한다. */
+function PopoverContentInner({ context, popoverRef, placement = "bottom", offset = 8, ref, className, children, ...props }) {
+	const { state, triggerRef, contentId, triggerId } = context;
+	useOverlayTheme(triggerRef, popoverRef);
+	const { overlayProps } = usePopoverOverlay({
+		triggerRef,
+		popoverRef,
+		placement,
+		offset
+	}, state);
+	const { dialogProps } = useDialog({
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"]
+	}, popoverRef);
+	const labelledBy = dialogProps["aria-labelledby"] ?? (props["aria-label"] ? void 0 : triggerId);
+	const mergedRef = useMemo(() => mergeRefs(ref, popoverRef), [ref, popoverRef]);
+	const { style: _style, ...rest } = mergeProps(props, overlayProps, dialogProps);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		id: contentId,
+		ref: mergedRef,
+		"aria-labelledby": labelledBy,
+		"data-open": state.isOpen ? "" : void 0,
+		className: cn(contentClass, className),
+		style: {
+			...overlayProps.style,
+			...props.style
+		},
+		children: [
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+			children,
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+		]
+	});
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/Progress.d.ts

@@ -0,0 +1,32 @@
+import { Role, Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** Progress의 size. 막대 굵기다. */
+type ProgressSize = Extract<Size, "sm" | "md">;
+/** 접근 가능한 이름. `aria-label`이나 `aria-labelledby` 중 하나는 꼭 준다(WAI-ARIA progressbar는 이름이 필요하다). */
+type ProgressName = {
+  "aria-label": string;
+  "aria-labelledby"?: string;
+} | {
+  "aria-label"?: string;
+  "aria-labelledby": string;
+};
+interface ProgressOwnProps extends Omit<ComponentProps<"div">, "color" | "children" | "role" | "aria-label" | "aria-labelledby" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax"> {
+  /** 현재 값. 0 이상 `max` 이하로 잘라서 쓴다. 값을 모르는 진행은 Progress가 아니라 Spinner로 보여 준다. */
+  value: number;
+  /** 끝 값. 기본값은 `100`이다. 시작 값은 항상 0이다. */
+  max?: number;
+  /** 막대 굵기. `sm` 4px, `md` 8px. 기본값은 `md`다. */
+  size?: ProgressSize;
+  /**
+   * 막대 색. 진행 상태는 뜻이 있는 표시라 Role만 받는다(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role, ADR 0016).
+   * 기본값은 `primary`다. 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+}
+export type ProgressProps = ProgressOwnProps & ProgressName;
+/**
+ * 작업이 얼마나 진행됐는지 막대로 보여 준다. 역할은 `progressbar`이고 값은 `aria-valuenow`로 나간다.
+ * 움직임 줄이기에서도 진행 표시는 그대로다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Progress({ value, max, size, color, className, ...props }: ProgressProps): ReactElement;
+export {};

package/dist/Progress.js

@@ -0,0 +1,40 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Progress.tsx
+const sizeClass = {
+	sm: "h-1",
+	md: "h-2"
+};
+const trackClass = "relative block w-full overflow-hidden rounded-full bg-accent-subtle forced-colors:forced-color-adjust-none forced-colors:border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas]";
+const barClass = "block h-full rounded-full bg-current text-accent motion-safe:transition-[width] forced-colors:text-[Highlight]";
+/** 0 이상 max 이하로 자른다. max가 0 이하이거나 숫자가 아니면 0으로 본다. */
+function clamp(value, max) {
+	if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0;
+	return Math.min(Math.max(value, 0), max);
+}
+/**
+* 작업이 얼마나 진행됐는지 막대로 보여 준다. 역할은 `progressbar`이고 값은 `aria-valuenow`로 나간다.
+* 움직임 줄이기에서도 진행 표시는 그대로다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Progress({ value, max = 100, size = "md", color = "primary", className, ...props }) {
+	const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+	const now = clamp(value, safeMax);
+	const percent = now / safeMax * 100;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "progressbar",
+		"aria-valuenow": now,
+		"aria-valuemin": 0,
+		"aria-valuemax": safeMax,
+		"data-color": color,
+		className: cn(trackClass, sizeClass[size], className),
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: barClass,
+			style: { width: `${percent}%` }
+		})
+	});
+}
+
+export { Progress };

package/dist/Skeleton.d.ts

@@ -0,0 +1,24 @@
+import { Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** 원의 size. Avatar size와 같은 24·32·40·48px다(Avatar 자리를 그대로 채운다). */
+type SkeletonCircleSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+interface SkeletonBaseProps extends Omit<ComponentProps<"div">, "children" | "aria-hidden"> {}
+/** `variant`에 따라 받는 props가 다르다. `size`는 원(`circle`)에만 있다. */
+export type SkeletonProps = SkeletonBaseProps & ({
+  /**
+   * 모양. `text`는 글 한 줄(높이 1em, 너비 100%), `rect`는 사각형 영역(너비 100%, 높이는 `className`으로 준다),
+   * `circle`은 원(크기는 `size`). 기본값은 `text`다.
+   */
+  variant?: "text" | "rect";
+  size?: never;
+} | {
+  variant: "circle";
+  /** 원 크기. `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px(Avatar와 같다). 기본값은 `md`다. */
+  size?: SkeletonCircleSize;
+});
+/**
+ * 내용이 오기 전 자리를 표시한다. 스크린 리더에는 읽히지 않는다(`aria-hidden`).
+ * 불러오는 중이라는 사실은 앱이 영역의 `aria-busy`나 보이는 문구로 알린다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Skeleton({ variant, size, className, ...props }: SkeletonProps): ReactElement;
+export {};

package/dist/Skeleton.js

@@ -0,0 +1,29 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Skeleton.tsx
+const variantClass = {
+	text: "h-[1em] w-full rounded-sm",
+	rect: "w-full rounded-md",
+	circle: "shrink-0 rounded-full"
+};
+const circleSizeClass = {
+	xs: "size-6",
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-12"
+};
+const baseClass = "block border border-transparent bg-neutral-subtle-active motion-safe:animate-pulse";
+/**
+* 내용이 오기 전 자리를 표시한다. 스크린 리더에는 읽히지 않는다(`aria-hidden`).
+* 불러오는 중이라는 사실은 앱이 영역의 `aria-busy`나 보이는 문구로 알린다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Skeleton({ variant = "text", size, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-hidden": "true",
+		className: cn(baseClass, variantClass[variant], variant === "circle" ? circleSizeClass[size ?? "md"] : void 0, className)
+	});
+}
+
+export { Skeleton };

package/dist/Table.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ReactElement } from "react";
+export interface TableProps extends ComponentProps<"table"> {}
+export interface TableHeadProps extends ComponentProps<"thead"> {}
+export interface TableBodyProps extends ComponentProps<"tbody"> {}
+export interface TableRowProps extends ComponentProps<"tr"> {}
+export interface TableHeaderCellProps extends ComponentProps<"th"> {
+  /**
+   * 이 머리 칸이 맡는 범위. 기본값은 `"col"`(아래 열)이다. 본문 행의 첫 칸처럼 행을 맡으면 `"row"`를 준다.
+   * 열 그룹·행 그룹 머리는 `"colgroup"`·`"rowgroup"`이다.
+   */
+  scope?: "col" | "row" | "colgroup" | "rowgroup";
+}
+export interface TableCellProps extends ComponentProps<"td"> {}
+/**
+ * 시맨틱 `<table>`. 행·열로 된 데이터를 보여 준다. 정렬·행 선택·가상화는 없다. 서버 컴포넌트로 쓸 수 있다.
+ * 표의 이름은 `<caption>`이나 `aria-label`·`aria-labelledby`로 준다.
+ */
+export declare function Table({ className, ...props }: TableProps): ReactElement;
+/** 머리 행 묶음 `<thead>`. 안의 행은 hover로 바뀌지 않는다. */
+export declare function TableHead(props: TableHeadProps): ReactElement;
+/** 본문 행 묶음 `<tbody>`. 바로 아래 `TableRow`에 마우스를 올리면 배경이 바로 바뀐다. */
+export declare function TableBody(props: TableBodyProps): ReactElement;
+/** 행 `<tr>`. 아래 경계가 있고, `TableBody` 안에서는 hover 배경이 transition 없이 바로 바뀐다. */
+export declare function TableRow({ className, ...props }: TableRowProps): ReactElement;
+/**
+ * 머리 칸 `<th>`. 기본은 `scope="col"`(열 머리, columnheader)이다. 본문 행의 행 머리는 `scope="row"`(rowheader)를 준다.
+ * 복잡한 표(여러 줄 머리)는 `id`와 칸의 `headers`로 직접 잇는다.
+ */
+export declare function TableHeaderCell({ scope, className, ...props }: TableHeaderCellProps): ReactElement;
+/** 데이터 칸 `<td>`. 숫자 열은 `className="tabular-nums text-end"`로 자릿수를 맞춘다. */
+export declare function TableCell({ className, ...props }: TableCellProps): ReactElement;

package/dist/Table.js

@@ -0,0 +1,53 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Table.tsx
+const tableClass = "w-full border-collapse text-body-sm text-default";
+const rowClass = "border-b border-default [:where(tbody>&)]:hover:bg-neutral-subtle-hover";
+const headerCellClass = "px-3 py-2.5 text-start align-middle text-label-md";
+const cellClass = "px-3 py-2.5 text-start align-middle";
+/**
+* 시맨틱 `<table>`. 행·열로 된 데이터를 보여 준다. 정렬·행 선택·가상화는 없다. 서버 컴포넌트로 쓸 수 있다.
+* 표의 이름은 `<caption>`이나 `aria-label`·`aria-labelledby`로 준다.
+*/
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		...props,
+		className: cn(tableClass, className)
+	});
+}
+/** 머리 행 묶음 `<thead>`. 안의 행은 hover로 바뀌지 않는다. */
+function TableHead(props) {
+	return /* @__PURE__ */ jsx("thead", { ...props });
+}
+/** 본문 행 묶음 `<tbody>`. 바로 아래 `TableRow`에 마우스를 올리면 배경이 바로 바뀐다. */
+function TableBody(props) {
+	return /* @__PURE__ */ jsx("tbody", { ...props });
+}
+/** 행 `<tr>`. 아래 경계가 있고, `TableBody` 안에서는 hover 배경이 transition 없이 바로 바뀐다. */
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		...props,
+		className: cn(rowClass, className)
+	});
+}
+/**
+* 머리 칸 `<th>`. 기본은 `scope="col"`(열 머리, columnheader)이다. 본문 행의 행 머리는 `scope="row"`(rowheader)를 준다.
+* 복잡한 표(여러 줄 머리)는 `id`와 칸의 `headers`로 직접 잇는다.
+*/
+function TableHeaderCell({ scope = "col", className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		...props,
+		scope,
+		className: cn(headerCellClass, className)
+	});
+}
+/** 데이터 칸 `<td>`. 숫자 열은 `className="tabular-nums text-end"`로 자릿수를 맞춘다. */
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		className: cn(cellClass, className)
+	});
+}
+
+export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow };

package/dist/alert-style.js

@@ -0,0 +1,40 @@
+import { CircleCheckIcon, InfoIcon, OctagonExclamationPointIcon, TriangleExclamationPointIcon } from "@tide-tds/icons";
+
+// src/alert-style.ts
+/**
+* 배치. 아이콘·내용·닫기 버튼을 한 줄로 놓고 위에 맞춘다. 여백은 16px, radius는 담는 요소의 lg다(spec radius 「쓰는 곳」).
+* border 1px는 항상 둔다. forced-colors에서 브라우저가 경계를 CanvasText로 덮어 배경 없이도 영역이 남는다.
+*/
+const alertLayoutClass = "flex items-start gap-3 rounded-lg border p-4";
+/**
+* Alert의 subtle 표면. 모두 등록된 대비 쌍이다.
+* - 글자·아이콘: text-accent × bg-accent-subtle 4.5:1(Role `text-<role>` × `bg-<role>-subtle`, neutral은 text-default ×
+*   bg-neutral-subtle, 앱 Role은 색 이름 규칙 text × subtle)
+* - 경계: border-accent × 바깥 표면 층 3:1(`border-<role>` × 표면 층, neutral은 border-strong)과
+*   × 안쪽 bg-accent-subtle 3:1(`border-<role>` × `bg-<role>-subtle`, neutral은 border-strong × bg-neutral-subtle)
+*/
+const alertSurfaceClass = "border-accent bg-accent-subtle text-accent";
+/** 상태 아이콘 자리. 글자 첫 줄 높이(body-sm 20px)와 같은 20px라 첫 줄 가운데에 맞는다. */
+const alertIconClass = "size-5 shrink-0";
+/** 제목과 본문을 세로로 쌓는다. 긴 단어가 닫기 버튼을 밀어내지 않게 min-w-0을 둔다. */
+const alertContentClass = "flex min-w-0 flex-1 flex-col gap-1";
+/** 제목. 본문과 같은 크기에 굵기만 올린다. 제목 수준(h1~h6)은 화면마다 다르므로 heading 요소를 쓰지 않는다. */
+const alertTitleClass = "text-body-sm font-semibold";
+/** 본문 */
+const alertDescriptionClass = "text-body-sm";
+/** 닫기 버튼(IconButton xs, 24px). 위아래 2px를 겹쳐 첫 줄 높이(20px)를 늘리지 않고, 끝쪽 4px를 여백에 겹친다. */
+const alertCloseClass = "-my-0.5 -me-1";
+const statusIcons = {
+	neutral: InfoIcon,
+	primary: InfoIcon,
+	info: InfoIcon,
+	success: CircleCheckIcon,
+	warning: TriangleExclamationPointIcon,
+	danger: OctagonExclamationPointIcon
+};
+/** Role의 상태 아이콘. 앱이 더한 Role(예: `brand`)은 일반 알림으로 보고 i 아이콘을 쓴다. */
+function alertStatusIcon(color) {
+	return Object.hasOwn(statusIcons, color) ? statusIcons[color] : InfoIcon;
+}
+
+export { alertCloseClass, alertContentClass, alertDescriptionClass, alertIconClass, alertLayoutClass, alertStatusIcon, alertSurfaceClass, alertTitleClass };

package/dist/index.d.ts

@@ -13,8 +13,16 @@ import { CheckboxGroup, CheckboxGroupProps, ChoiceOrientation } from "./Checkbox
 import { Radio, RadioProps } from "./Radio.js";
 import { RadioGroup, RadioGroupProps } from "./RadioGroup.js";
 import { Switch, SwitchProps } from "./Switch.js";
+import { Alert, AlertProps } from "./Alert.js";
+import { Avatar, AvatarProps } from "./Avatar.js";
 import { Badge, BadgeProps } from "./Badge.js";
 import { Card, CardProps } from "./Card.js";
 import { Separator, SeparatorProps } from "./Separator.js";
+import { Skeleton, SkeletonProps } from "./Skeleton.js";
+import { Progress, ProgressProps } from "./Progress.js";
+import { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableProps, TableRow, TableRowProps } from "./Table.js";
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbCurrentProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps } from "./Breadcrumb.js";
+import { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps } from "./Pagination.js";
+import { Popover, PopoverContent, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTrigger, PopoverTriggerProps } from "./Popover.js";
 import { Color, ColorFamilyName, ColorFamilyRegistry, FillVariant, Role, RoleRegistry, Size } from "./types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceOrientation, type Color, type ColorFamilyName, type ColorFamilyRegistry, Field, type FieldProps, type FillVariant, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Role, type RoleRegistry, Separator, type SeparatorProps, type Size, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };
+export { Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbCurrent, type BreadcrumbCurrentProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceOrientation, type Color, type ColorFamilyName, type ColorFamilyRegistry, Field, type FieldProps, type FillVariant, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverPlacement, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Role, type RoleRegistry, Separator, type SeparatorProps, type Size, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, type TableRowProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };

package/dist/index.js

@@ -13,8 +13,16 @@ import { CheckboxGroup } from "./CheckboxGroup.js";
 import { Radio } from "./Radio.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
+import { Alert } from "./Alert.js";
+import { Avatar } from "./Avatar.js";
 import { Badge } from "./Badge.js";
 import { Card } from "./Card.js";
 import { Separator } from "./Separator.js";
+import { Skeleton } from "./Skeleton.js";
+import { Progress } from "./Progress.js";
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "./Table.js";
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink } from "./Breadcrumb.js";
+import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./Pagination.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
 
-export { Badge, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, Separator, Spinner, Switch, Textarea, Typography, VisuallyHidden, cn };
+export { Alert, Avatar, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Separator, Skeleton, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Textarea, Typography, VisuallyHidden, cn };

package/dist/overlay-style.js

@@ -0,0 +1,35 @@
+// src/overlay-style.ts
+/**
+* 오버레이 표면. raised 표면(`bg-raised`), `shadow-md`, radius `lg`, 경계 `border-raised`(light 투명 / dark gray-800).
+* - 글자는 `text-default`다. `text-default × bg-raised` 4.5:1이 등록되어 있다.
+* - `border-raised`는 장식용 경계라 대비 검사에서 빠진다. light의 투명 border는 forced-colors에서 CanvasText로 칠해져
+*   그림자 없이도 경계가 남는다(spec Elevation, 사용자 이야기 37). forced-colors에서는 브라우저가 box-shadow를 지운다.
+*/
+const overlaySurfaceClass = "rounded-lg border border-raised bg-raised text-default shadow-md";
+/**
+* 「가끔 씀」 오버레이의 등장·퇴장(spec 「motion 적용」). 요소에 `data-open`(열림)과 `data-placement`(트리거 기준 방향,
+* `top`·`bottom`·`left`·`right`)가 있어야 한다.
+*
+* - 등장: `@starting-style`(`starting:`)에서 opacity 0 + blur 4px(`blur-xs`) + 트리거 쪽으로 4px(`*-translate-*-1`)
+*   떨어진 곳에서 시작해 `normal`(300ms)로 제자리에 온다.
+* - 퇴장: `data-open`이 빠지면 같은 조합의 절반(blur 2px, 2px 이동)으로 `fast`(150ms)에 사라진다.
+*   duration은 도착 상태의 값을 쓰므로 기본 `duration-fast`에 열림만 `data-open:duration-normal`이다. easing은 둘 다 out이다.
+* - 닫힌 상태는 `display: none`(`hidden`)이고 `transition-discrete`(`transition-behavior: allow-discrete`)로 display도
+*   전환 대상에 넣어, 퇴장 전환이 끝날 때 사라진다. 이 둘을 지원하지 않는 브라우저에서는 바로 나타나고 사라진다.
+*   요소를 DOM에서 빼는 시점은 `useOverlayPresence`가 전환이 끝나기를 기다려 정한다.
+* - 퇴장 중에는 `pointer-events-none`으로 눌리지 않는다.
+* - reduced-motion: 이동·blur와 그 전환 대상(filter, translate)은 `motion-safe:`일 때만 둔다. 움직임 줄이기에서는
+*   opacity(와 display)만 같은 시간으로 바뀐다.
+* - `transition-all`은 쓰지 않는다. 전환 대상을 적는다.
+*/
+const popoverMotionClass = [
+	"transition-[opacity,display] transition-discrete duration-fast ease-out data-open:duration-normal motion-safe:transition-[opacity,filter,translate,display]",
+	"not-data-open:pointer-events-none not-data-open:hidden not-data-open:opacity-0 motion-safe:not-data-open:blur-[2px]",
+	"motion-safe:not-data-open:data-[placement=bottom]:-translate-y-0.5 motion-safe:not-data-open:data-[placement=top]:translate-y-0.5",
+	"motion-safe:not-data-open:data-[placement=right]:-translate-x-0.5 motion-safe:not-data-open:data-[placement=left]:translate-x-0.5",
+	"starting:opacity-0 motion-safe:starting:blur-xs",
+	"motion-safe:data-[placement=bottom]:starting:-translate-y-1 motion-safe:data-[placement=top]:starting:translate-y-1",
+	"motion-safe:data-[placement=right]:starting:-translate-x-1 motion-safe:data-[placement=left]:starting:translate-x-1"
+].join(" ");
+
+export { overlaySurfaceClass, popoverMotionClass };

package/dist/overlay.d.ts

@@ -0,0 +1,7 @@
+import "react";
+import "react-stately";
+/**
+ * 트리거 기준 위치. 앞은 트리거의 어느 쪽에 놓을지(주축), 뒤는 그 변에서 어디에 맞출지(교차축)다.
+ * 공간이 모자라면 반대쪽으로 뒤집는다(React Aria `shouldFlip` 기본값).
+ */
+export type OverlayPlacement = "top" | "top start" | "top end" | "bottom" | "bottom start" | "bottom end" | "left" | "left top" | "left bottom" | "right" | "right top" | "right bottom";

package/dist/overlay.js

@@ -0,0 +1,106 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from "react";
+import { Overlay, usePopover } from "react-aria";
+
+// src/overlay.tsx
+const isAxis = (value) => value === "top" || value === "bottom" || value === "left" || value === "right";
+/**
+* 열림 상태가 꺼져도 퇴장 전환이 끝날 때까지 오버레이를 DOM에 남긴다. DOM에 둘지(`true`)를 돌려준다.
+*
+* 닫힌 뒤 요소의 `getAnimations()`(CSS transition 포함)가 모두 끝나면 뺀다. 전환이 없으면(지원하지 않는 브라우저,
+* 전환이 없는 오버레이) 바로 뺀다. 퇴장 중에 다시 열리면 빼지 않는다. React Aria hooks에는 퇴장을 기다리는 hook이
+* 없어서(react-aria-components의 `isExiting`은 Component 층에만 있다) 이 hook이 그 일을 한다.
+*/
+function useOverlayPresence(isOpen, ref) {
+	const [present, setPresent] = useState(isOpen);
+	if (isOpen && !present) setPresent(true);
+	useLayoutEffect(() => {
+		if (isOpen || !present) return;
+		const element = ref.current;
+		if (!element || typeof element.getAnimations !== "function") {
+			setPresent(false);
+			return;
+		}
+		let cancelled = false;
+		const waitForExit = () => {
+			const animations = element.getAnimations();
+			if (animations.length === 0) {
+				setPresent(false);
+				return;
+			}
+			Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+				if (!cancelled) waitForExit();
+			});
+		};
+		waitForExit();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		isOpen,
+		present,
+		ref
+	]);
+	return isOpen || present;
+}
+/**
+* React Aria가 위치 style에 넣는 `zIndex: 100000`을 빼고 주축 방향을 `data-placement`로 붙인다.
+* 쌓임은 쌓임 단계 class(`z-popover` 등)로만 정한다(spec 「오버레이」).
+*
+* `placement`가 아직 없으면(처음 렌더) 요청한 placement의 주축을 쓴다. 등장 전환의 시작 방향이 첫 스타일 계산에서
+* 정해지기 때문이다. 공간이 없어 뒤집힌 경우에만 첫 프레임의 시작 방향이 요청한 쪽이 된다(4px).
+*/
+function overlayPositionProps(props, placement, requested) {
+	const { zIndex: _zIndex, ...style } = props.style ?? {};
+	const fallback = requested.split(" ")[0];
+	return {
+		...props,
+		style,
+		"data-placement": isAxis(placement) ? placement : fallback
+	};
+}
+/**
+* 트리거에 붙는 오버레이(Popover, Menu, Select·Combobox 목록)의 위치·닫기 동작. React Aria `usePopover`를 감싼다.
+* - 닫기: Esc, 바깥 누름, 포커스가 바깥으로 나감(`usePopover` 기본). 위에 쌓인 오버레이부터 닫힌다.
+* - 모달: 기본은 바깥을 `inert`로 막고 스크롤을 잠근다. `nonModal`이면 둘 다 하지 않는다.
+* - 위치: 공간이 모자라면 반대쪽으로 뒤집고, 주축 길이는 `max-height`로 줄여 트리거를 덮지 않는다(WCAG 2.4.11, Comments 참고).
+* 돌려받은 `overlayProps`(style 포함)를 오버레이 요소에 펼친다. 쌓임 단계 class는 부르는 쪽이 붙인다.
+*/
+function usePopoverOverlay({ triggerRef, popoverRef, placement, offset, nonModal = false }, state) {
+	const { popoverProps, placement: actual } = usePopover({
+		triggerRef,
+		popoverRef,
+		placement,
+		offset,
+		isNonModal: nonModal
+	}, state);
+	return { overlayProps: overlayPositionProps(popoverProps, actual, placement) };
+}
+/**
+* 트리거가 놓인 Theme(`data-theme`)을 portal로 나간 오버레이에 옮긴다. Theme을 `<html>`이 아닌 일부 영역에
+* 붙인 앱에서도 오버레이가 같은 색이 된다. 오버레이에 이미 `data-theme`이 있으면 두고, 트리거 위에 Theme이 없으면
+* 붙이지 않는다(`:root` 기본값을 따른다). 위치를 계산하기 전(첫 스타일 계산 전)에 붙도록 위치 hook보다 먼저 부른다.
+*/
+function useOverlayTheme(triggerRef, overlayRef) {
+	useLayoutEffect(() => {
+		const overlay = overlayRef.current;
+		if (!overlay || overlay.hasAttribute("data-theme")) return;
+		const theme = triggerRef.current?.closest("[data-theme]")?.getAttribute("data-theme");
+		if (theme) overlay.setAttribute("data-theme", theme);
+	}, [triggerRef, overlayRef]);
+}
+/**
+* 오버레이를 `document.body`에 portal한다(React Aria `Overlay`). top-layer(`<dialog>`, popover API)는 쓰지 않는다.
+* 안을 `FocusScope`(`restoreFocus`)로 감싸서, DOM에서 빠질 때 포커스가 열기 전 요소(보통 트리거)로 돌아간다.
+* 역할 hook이 포커스 가두기를 요청하면(`useDialog` 등) Tab이 안에서 돈다. 서버 렌더에서는 아무것도 그리지 않는다.
+*/
+function OverlayPortal({ isExiting, children }) {
+	return /* @__PURE__ */ jsx(Overlay, {
+		isExiting,
+		children
+	});
+}
+
+export { OverlayPortal, overlayPositionProps, useOverlayPresence, useOverlayTheme, usePopoverOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.2.1",
-    "@tide-tds/icons": "0.2.1",
+    "@tide-tds/foundation": "0.3.1",
+    "@tide-tds/icons": "0.3.1",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",