@tide-tds/components 0.2.0 → 0.3.0

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/Badge.d.ts

@@ -0,0 +1,26 @@
+import { Color, FillVariant, Size } from "./types.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Badge의 채움 방식. 상호작용이 없어 테두리·투명 채움(`outline`·`ghost`)은 받지 않는다. */
+type BadgeVariant = Extract<FillVariant, "subtle" | "solid">;
+/** Badge의 size. 조작 요소가 아니라 높이가 size 표보다 한 단계 작다(`sm` 20px, `md` 24px). */
+type BadgeSize = Extract<Size, "sm" | "md">;
+export interface BadgeProps extends Omit<ComponentProps<"span">, "color" | "children"> {
+  /** 상태를 말하는 텍스트. 필수다. 색만으로 상태를 전하지 않기 위해서다(WCAG 1.4.1). */
+  children: ReactNode;
+  /** `subtle`(옅은 배경, 기본값)과 `solid`(진한 배경). 같은 화면 안에서는 한 가지로 맞춘다. */
+  variant?: BadgeVariant;
+  /** `sm` 높이 20px·`label-sm`, `md` 높이 24px·`label-md`. 기본값은 `md`다. */
+  size?: BadgeSize;
+  /**
+   * 색 이름. 상태는 Role(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role), 뜻 없는 분류는 색 계열 이름
+   * (Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열)을 쓴다(ADR 0016·0017). 기본값은 `neutral`이다.
+   * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Color;
+}
+/**
+ * 상태나 분류를 짧은 텍스트로 보여 주는 라벨. 누르거나 고르는 동작이 없다.
+ * 상태는 Role, 분류는 색 계열 이름으로 색을 고르고, 뜻은 반드시 텍스트로 적는다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Badge({ variant, size, color, className, ...props }: BadgeProps): ReactElement;
+export {};

package/dist/Badge.js

@@ -0,0 +1,27 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Badge.tsx
+const variantClass = {
+	subtle: "bg-accent-subtle text-accent",
+	solid: "bg-accent-solid text-accent-on-solid"
+};
+/** 높이는 border 1px를 포함한다. 글자 줄 높이(label-sm 16px, label-md 20px) + border 2px + 세로 여백이다. */
+const sizeClass = {
+	sm: "h-5 gap-1 px-1.5 text-label-sm",
+	md: "h-6 gap-1 px-2 text-label-md"
+};
+const baseClass = "inline-flex max-w-full shrink-0 items-center rounded-sm border border-transparent align-middle whitespace-nowrap [&_svg]:size-3 [&_svg]:shrink-0";
+/**
+* 상태나 분류를 짧은 텍스트로 보여 주는 라벨. 누르거나 고르는 동작이 없다.
+* 상태는 Role, 분류는 색 계열 이름으로 색을 고르고, 뜻은 반드시 텍스트로 적는다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Badge({ variant = "subtle", size = "md", color = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-color": color,
+		className: cn(baseClass, variantClass[variant], sizeClass[size], className)
+	});
+}
+
+export { Badge };

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/Card.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactElement } from "react";
+export interface CardProps extends ComponentProps<"div"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<article />}`, `render={<li />}`.
+   * 묶음의 뜻이 있으면 그 요소를 고른다. props, ref, className을 그 요소에 병합한다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 관련 내용을 한 덩어리로 묶는 surface 표면 컨테이너. 경계만 있고 그림자는 없다.
+ * 기본 요소는 `div`이고, `render`로 `article`·`section`·`li` 등을 쓴다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Card({ render, ...props }: CardProps): ReactElement;

package/dist/Card.js

@@ -0,0 +1,18 @@
+import { renderElement } from "./render.js";
+
+// src/Card.tsx
+const baseClass = "rounded-lg border border-default bg-surface p-4 text-default";
+/**
+* 관련 내용을 한 덩어리로 묶는 surface 표면 컨테이너. 경계만 있고 그림자는 없다.
+* 기본 요소는 `div`이고, `render`로 `article`·`section`·`li` 등을 쓴다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Card({ render, ...props }) {
+	return renderElement({
+		defaultElement: "div",
+		render,
+		baseClassName: baseClass,
+		props
+	});
+}
+
+export { Card };

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/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/Separator.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactElement } from "react";
+/** Separator의 방향 */
+type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends Omit<ComponentProps<"hr">, "children" | "role"> {
+  /** `horizontal`(기본값)은 위아래 내용을, `vertical`은 한 줄 안의 양옆 내용을 나눈다. */
+  orientation?: SeparatorOrientation;
+  /**
+   * 보기만 나누는 선이면 `true`. `role="none"`이 붙어 보조 기술에서 빠진다. 기본값은 `false`(separator 역할)다.
+   * 내용의 주제가 바뀌는 곳이면 `false`로 둔다.
+   */
+  decorative?: boolean;
+}
+/**
+ * 내용 묶음 사이를 선으로 나눈다. 기본은 의미 구분(separator 역할)이고, `decorative`면 보조 기술에서 빠진다.
+ * 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): ReactElement;
+export {};

package/dist/Separator.js

@@ -0,0 +1,24 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Separator.tsx
+const orientationClass = {
+	horizontal: "h-0 w-full border-t",
+	vertical: "h-auto w-0 self-stretch border-s"
+};
+const baseClass = "m-0 shrink-0 border-0 border-default";
+/**
+* 내용 묶음 사이를 선으로 나눈다. 기본은 의미 구분(separator 역할)이고, `decorative`면 보조 기술에서 빠진다.
+* 서버 컴포넌트로 쓸 수 있다.
+*/
+function Separator({ orientation = "horizontal", decorative = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		role: decorative ? "none" : void 0,
+		"aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+		"data-orientation": orientation,
+		className: cn(baseClass, orientationClass[orientation], className)
+	});
+}
+
+export { Separator };

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,5 +13,15 @@ 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 { Color, ColorFamilyName, ColorFamilyRegistry, FillVariant, Role, RoleRegistry, Size } from "./types.js";
-export { Button, type ButtonProps, 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, 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, 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,5 +13,15 @@ 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";
 
-export { Button, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, 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, Progress, Radio, RadioGroup, Separator, Skeleton, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Textarea, Typography, VisuallyHidden, cn };

package/package.json

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