@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/dialog.tsx

@@ -0,0 +1,384 @@
+/**
+ * @file dialog.tsx
+ *
+ * Sub-system Component Dialog theo phong cách hiển thị MD3 Expressive.
+ *
+ * Được kế thừa trên nền lõi của hệ mã Radix UI Dialog primitives đi kèm gói kén Framer Motion dùng vào việc bổ sung
+ * nhip điệu đẩy Spring ở hướng hiện vào (Entrance) cũng như bay lên (Exit); ăn liền với bản thiết kế specs MD3 Expressive siêu quyến rũ.
+ * Phục vụ cả ở chế độ Standard (Tiêu chuẩn lọt thỏm) và phiên bản Full-Screen tràn viền toàn diện.
+ *
+ * @see https://m3.material.io/components/dialogs/overview
+ */
+
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { AnimatePresence, m } from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Icon } from "./icon";
+import { IconButton } from "./icon-button";
+import { ScrollArea } from "./scroll-area";
+
+// ─── MD3 Spring Config (Expressive) ──────────────────────────────────────────
+const MD3_SPRING = {
+	type: "spring" as const,
+	stiffness: 400,
+	damping: 30,
+	mass: 1,
+};
+
+const MD3_OVERLAY_ANIM = {
+	initial: { opacity: 0 },
+	animate: {
+		opacity: 1,
+		transition: { duration: 0.2, ease: "easeOut" as const },
+	},
+	exit: { opacity: 0, transition: { duration: 0.15, ease: "easeIn" as const } },
+};
+
+const MD3_CONTENT_ANIM = {
+	initial: { opacity: 0, scale: 0.85, y: 24 },
+	animate: { opacity: 1, scale: 1, y: 0, transition: MD3_SPRING },
+	exit: {
+		opacity: 0,
+		scale: 0.95,
+		y: 8,
+		transition: { duration: 0.15, ease: "easeIn" as const },
+	},
+};
+
+const MD3_FULLSCREEN_ANIM = {
+	initial: { y: "100%" },
+	animate: { y: 0, transition: MD3_SPRING },
+	exit: { y: "100%", transition: { duration: 0.2, ease: "easeIn" as const } },
+};
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * Thuộc tính của cội gốc Root `Dialog`. Chức năng làm gương phản hồi của Radix `Dialog.Root` qua dạng controlled state đóng hay mở.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = React.useState(false);
+ *
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogTrigger asChild>
+ *      <Button>Bấm Mở Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *        <DialogTitle>Bạn có muốn phiêu lưu không?</DialogTitle>
+ *     </DialogHeader>
+ *     <DialogBody>Chuẩn bị lên đồ rời khỏi hang nào.</DialogBody>
+ *     <DialogFooter>
+ *        <Button onClick={() => setOpen(false)} variant="text">Đóng</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+export interface DialogProps {
+	/** Whether the dialog is open (controlled). Omit for uncontrolled. */
+	open?: boolean;
+	/** Called when the open state should change. */
+	onOpenChange?: (open: boolean) => void;
+	/** Dialog trigger + content. */
+	children: React.ReactNode;
+}
+
+/**
+ * Các props được tiêm vào component bao ngoài Container `DialogContent` thuộc dạng Normal Standard.
+ *
+ * @see {@link DialogContent}
+ */
+export interface DialogContentProps
+	extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+	/** Vô hình đi đi nút Close dấu (X) góc phải trên. @default false */
+	hideCloseButton?: boolean;
+	className?: string;
+}
+
+/**
+ * Thuộc tính Props của biến thể `DialogFullScreenContent` chuyên dụng dành riêng cho Mode Full-Screen tràn màn hình.
+ *
+ * @remarks
+ * Những hộp thoại Full-screen có biệt tài tự nới rộng và xâm chiếm cả bề ngang dọc nguyên thiết bị. Nó còn thiết lập một đường Top App bar (thanh ngang đỉnh)
+ * kẹp chung cả 1 nhãn title mô tả đỉnh, một nút icon X dẹp ở rìa, thêm luôn hẳn cái nút Confirm cực xịn xò.
+ *
+ * @see {@link DialogFullScreenContent}
+ * @see https://m3.material.io/components/dialogs/guidelines#full-screen
+ */
+export interface DialogFullScreenContentProps
+	extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
+	/** Nhãn Title nằm vùng khu vực thanh ngang Top Bar. */
+	title?: string;
+	/** Chữ viết đính kèm bên trong cục Nút nhấn thao tác ngay trên góc Top App bar đó (VD: "Lưu lại", "Save"). */
+	actionLabel?: string;
+	/** Hàm handler phát động cờ để kích chạy tính năng lưu, xác nhận kia. */
+	onAction?: () => void;
+	/** Rạch một làn kẻ chia cách thân body nội dung cuộn bên dưới và dòng App bar cố thủ bên trên. @default false */
+	showDivider?: boolean;
+	className?: string;
+}
+
+// ─── Re-exports wrapper ───────────────────────────────────────────────────────
+
+/**
+ * Gốc rễ Root của Component Dialog — trạc lấp lên cái module `Dialog.Root` của nhà Radix.
+ *
+ * @remarks Cơ năng hoạt động ở chế độ Controlled (kiểm soát vòng đời ở Client) xài mảng `open`/`onOpenChange`.
+ *  Tuy thế bạn nếu không thích thì đừng có xài truyền mấy cái Props tay đôi trên, mà bỏ xài kiểu Untracked thông qua cái cục `DialogTrigger` là đủ.
+ */
+const Dialog = ({ open, onOpenChange, children }: DialogProps) => (
+	<RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+		{children}
+	</RadixDialog.Root>
+);
+Dialog.displayName = "Dialog";
+
+/** Bộ Trigger gieo phát đà giúp tắt bật cờ State đóng mở của Dialog con, dùng kèm kĩ năng nhét thông qua cái cầu `asChild`. */
+const DialogTrigger = RadixDialog.Trigger;
+DialogTrigger.displayName = "DialogTrigger";
+
+// ─── Portal + Overlay + Content ───────────────────────────────────────────────
+const DialogPortal = ({
+	open,
+	children,
+}: {
+	open?: boolean;
+	children: React.ReactNode;
+}) => (
+	<RadixDialog.Portal forceMount>
+		<AnimatePresence>
+			{open ? React.Children.toArray(children) : null}
+		</AnimatePresence>
+	</RadixDialog.Portal>
+);
+DialogPortal.displayName = "DialogPortal";
+
+const DialogOverlay = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Overlay>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
+>(({ className, ...props }, ref) => (
+	<RadixDialog.Overlay ref={ref} asChild {...props}>
+		<m.div
+			className={cn("fixed inset-0 z-50 bg-black/32", className)}
+			aria-hidden="true"
+			{...MD3_OVERLAY_ANIM}
+		/>
+	</RadixDialog.Overlay>
+));
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogContent = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Content>,
+	DialogContentProps
+>(({ className, children, hideCloseButton = false, ...props }, ref) => (
+	<RadixDialog.Content
+		ref={ref}
+		asChild
+		aria-describedby={undefined}
+		{...props}
+	>
+		<m.div
+			className={cn(
+				"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+				"w-[calc(100%-2rem)] max-w-140",
+				"rounded-[28px] bg-m3-surface-container-high p-6",
+				"shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-m3-primary",
+				className,
+			)}
+			role="dialog"
+			{...MD3_CONTENT_ANIM}
+		>
+			{children}
+			{!hideCloseButton && (
+				<RadixDialog.Close asChild aria-label="Close dialog">
+					<IconButton
+						size="sm"
+						colorStyle="filled"
+						className="absolute right-4 top-4"
+						aria-label="Close"
+					>
+						<Icon name="close" aria-hidden="true" />
+					</IconButton>
+				</RadixDialog.Close>
+			)}
+		</m.div>
+	</RadixDialog.Content>
+));
+DialogContent.displayName = "DialogContent";
+
+// ─── Header & Related ────────────────────────────────────────────────────────
+const DialogIcon = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex justify-center mb-4 text-m3-secondary", className)}
+		aria-hidden="true"
+		{...props}
+	>
+		{children}
+	</div>
+));
+DialogIcon.displayName = "DialogIcon";
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col gap-2 mb-4", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+// RadixDialog.Title surfaces to the accessibility tree — required
+const DialogTitle = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Title>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Title>
+>(({ className, asChild, ...props }, ref) => (
+	<RadixDialog.Title
+		ref={ref}
+		asChild={asChild}
+		className={cn(
+			"text-[24px] leading-8 font-normal text-m3-on-surface tracking-[0em]",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Description>,
+	React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
+>(({ className, asChild, ...props }, ref) => (
+	<RadixDialog.Description
+		ref={ref}
+		asChild={asChild}
+		className={cn("text-sm text-m3-on-surface-variant leading-5", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = "DialogDescription";
+
+// ─── Body & Footer ───────────────────────────────────────────────────────────
+const DialogBody = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, dir, ...props }, ref) => (
+	<ScrollArea
+		ref={ref}
+		type="hover"
+		dir={dir as "ltr" | "rtl" | undefined}
+		className={cn("max-h-[calc(85dvh-200px)] -mx-6", className)}
+		viewportClassName="px-6"
+		{...props}
+	>
+		{children}
+	</ScrollArea>
+));
+DialogBody.displayName = "DialogBody";
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("flex flex-row justify-end gap-2 mt-6", className)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogClose = RadixDialog.Close;
+
+// ─── Full Screen Content Variant ──────────────────────────────────────────────
+const DialogFullScreenContent = React.forwardRef<
+	React.ComponentRef<typeof RadixDialog.Content>,
+	DialogFullScreenContentProps
+>(
+	(
+		{
+			className,
+			children,
+			title,
+			actionLabel,
+			onAction,
+			showDivider,
+			...props
+		},
+		ref,
+	) => (
+		<RadixDialog.Content
+			ref={ref}
+			asChild
+			aria-describedby={undefined}
+			{...props}
+		>
+			<m.div
+				className={cn(
+					"fixed inset-0 z-50 w-full h-full bg-m3-surface flex flex-col",
+					"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary",
+					className,
+				)}
+				role="dialog"
+				{...MD3_FULLSCREEN_ANIM}
+			>
+				<div className="flex shrink-0 items-center px-4 h-14 gap-2 bg-m3-surface">
+					<RadixDialog.Close asChild aria-label="Close dialog">
+						<IconButton size="sm" colorStyle="filled" aria-label="Close">
+							<Icon name="close" aria-hidden="true" />
+						</IconButton>
+					</RadixDialog.Close>
+
+					{title && (
+						<DialogTitle className="flex-1 text-[22px] leading-7 font-medium truncate pr-2">
+							{title}
+						</DialogTitle>
+					)}
+
+					{actionLabel && onAction && (
+						<button
+							type="button"
+							onClick={onAction}
+							className="text-sm font-medium text-m3-primary px-3 py-2 rounded-full hover:bg-m3-primary/8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-primary transition-colors whitespace-nowrap"
+						>
+							{actionLabel}
+						</button>
+					)}
+				</div>
+
+				{showDivider && (
+					<hr className="border-m3-outline-variant w-full shrink-0 m-0" />
+				)}
+
+				<ScrollArea
+					type="hover"
+					className="flex-1 w-full"
+					viewportClassName="p-6"
+				>
+					{children}
+				</ScrollArea>
+			</m.div>
+		</RadixDialog.Content>
+	),
+);
+DialogFullScreenContent.displayName = "DialogFullScreenContent";
+
+export {
+	Dialog,
+	DialogBody,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogFullScreenContent,
+	DialogHeader,
+	DialogIcon,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

package/src/ui/divider.test.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { render, screen } from "@testing-library/react";
+import * as MotionReact from "motion/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { buildWavePath, Divider } from "./divider";
+
+// Mock motion/react — same pattern as badge.test.tsx / chip.test.tsx
+vi.mock("motion/react", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("motion/react")>();
+	return {
+		...actual,
+		useReducedMotion: () => false,
+	};
+});
+
+// ── Test Suites ───────────────────────────────────────────────────────────────
+
+describe("Divider", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	// ── Core Accessibility ──────────────────────────────────────────────────────
+
+	describe("core accessibility", () => {
+		it("renders with role='separator' by default", () => {
+			render(<Divider />);
+			expect(screen.getByRole("separator")).toBeInTheDocument();
+		});
+
+		it("has aria-orientation='horizontal' by default", () => {
+			render(<Divider />);
+			expect(screen.getByRole("separator")).toHaveAttribute(
+				"aria-orientation",
+				"horizontal",
+			);
+		});
+
+		it("vertical orientation sets aria-orientation='vertical'", () => {
+			render(<Divider orientation="vertical" />);
+			expect(screen.getByRole("separator")).toHaveAttribute(
+				"aria-orientation",
+				"vertical",
+			);
+		});
+
+		it("decorative=true adds aria-hidden='true'", () => {
+			const { container } = render(<Divider decorative />);
+			const divider = container.firstChild as HTMLElement;
+			expect(divider).toHaveAttribute("aria-hidden", "true");
+		});
+
+		it("decorative=true removes role='separator'", () => {
+			render(<Divider decorative />);
+			expect(screen.queryByRole("separator")).toBeNull();
+		});
+	});
+
+	// ── Variants ────────────────────────────────────────────────────────────────
+
+	describe("variants", () => {
+		it("full-bleed → no indent classes", () => {
+			render(<Divider variant="full-bleed" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).not.toMatch(/ml-|mx-|mt-|my-/);
+		});
+
+		it("inset + insetStart='standard' → has class 'ml-4'", () => {
+			render(<Divider variant="inset" insetStart="standard" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("ml-4");
+		});
+
+		it("inset + insetStart='icon' → has class 'ml-[72px]'", () => {
+			render(<Divider variant="inset" insetStart="icon" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("ml-[72px]");
+		});
+
+		it("middle-inset → has class 'mx-4'", () => {
+			render(<Divider variant="middle-inset" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("mx-4");
+		});
+
+		it("subheader → no indent classes (same as full-bleed)", () => {
+			render(<Divider variant="subheader" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).not.toMatch(/ml-|mx-|mt-|my-/);
+		});
+	});
+
+	// ── Shape: flat ─────────────────────────────────────────────────────────────
+
+	describe("shape: flat", () => {
+		it("renders a div element (not svg)", () => {
+			const { container } = render(<Divider shape="flat" />);
+			// LazyMotion wrapper is present; the animated element is a div
+			const svg = container.querySelector("svg");
+			expect(svg).toBeNull();
+		});
+
+		it("has class 'bg-m3-outline-variant'", () => {
+			render(<Divider shape="flat" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("bg-m3-outline-variant");
+		});
+
+		it("horizontal → has class 'h-px'", () => {
+			render(<Divider shape="flat" orientation="horizontal" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("h-px");
+		});
+
+		it("vertical → has class 'w-px'", () => {
+			render(<Divider shape="flat" orientation="vertical" />);
+			const el = screen.getByRole("separator");
+			expect(el.className).toContain("w-px");
+		});
+	});
+
+	// ── Shape: wavy ─────────────────────────────────────────────────────────────
+
+	describe("shape: wavy", () => {
+		it("renders an svg element", () => {
+			const { container } = render(<Divider shape="wavy" />);
+			const svg = container.querySelector("svg");
+			expect(svg).toBeInTheDocument();
+		});
+
+		it("svg contains a path element with d attribute starting with 'M'", () => {
+			const { container } = render(<Divider shape="wavy" />);
+			const path = container.querySelector("path");
+			expect(path).toBeInTheDocument();
+			expect(path?.getAttribute("d")).toMatch(/^M/);
+		});
+
+		it("wavy path has strokeLinecap='round' for rounded ends", () => {
+			const { container } = render(<Divider shape="wavy" />);
+			const path = container.querySelector("path");
+			expect(path?.getAttribute("stroke-linecap")).toBe("round");
+		});
+
+		it("wavy renders direct <path> — no <pattern> element", () => {
+			const { container } = render(<Divider shape="wavy" />);
+			expect(container.querySelector("pattern")).toBeNull();
+			expect(container.querySelector("defs")).toBeNull();
+		});
+
+		it("wavy + vertical → falls back to flat (no svg rendered)", () => {
+			const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+			const { container } = render(
+				<Divider shape="wavy" orientation="vertical" />,
+			);
+			const svg = container.querySelector("svg");
+			expect(svg).toBeNull();
+			warnSpy.mockRestore();
+		});
+
+		it("wavy + vertical → emits console.warn", () => {
+			const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+			render(<Divider shape="wavy" orientation="vertical" />);
+			expect(warnSpy).toHaveBeenCalledWith(
+				expect.stringContaining(
+					"shape='wavy' is not supported with orientation='vertical'",
+				),
+			);
+			warnSpy.mockRestore();
+		});
+
+		it("custom waveConfig → renders without error", () => {
+			expect(() => {
+				render(
+					<Divider
+						shape="wavy"
+						waveConfig={{ amplitude: 5, wavelength: 24 }}
+					/>,
+				);
+			}).not.toThrow();
+		});
+	});
+
+	// ── buildWavePath Helper ────────────────────────────────────────────────────
+
+	describe("buildWavePath helper", () => {
+		it("returns a string starting with 'M {startX},{yCenter}'", () => {
+			// New signature: buildWavePath(startX, endX, amplitude, wavelength, yCenter)
+			const d = buildWavePath(0, 64, 3, 16, 4);
+			expect(d).toMatch(/^M 0,4/);
+		});
+
+		it("respects non-zero startX", () => {
+			const d = buildWavePath(0.5, 100, 2, 32, 4);
+			expect(d).toMatch(/^M 0\.5,4/);
+		});
+
+		it("contains 'C' (cubic Bézier curves)", () => {
+			const d = buildWavePath(0, 64, 3, 16, 4);
+			expect(d).toContain("C");
+		});
+
+		it("produces path with monotonically increasing X coordinates", () => {
+			const d = buildWavePath(0, 64, 3, 16, 4);
+			const parts = d.replace(/[MC]/g, " ").trim().split(/\s+/);
+			const xValues: number[] = [];
+			for (let i = 0; i < parts.length; i += 2) {
+				const x = parseFloat(parts[i] ?? "");
+				if (!Number.isNaN(x)) xValues.push(x);
+			}
+			expect(xValues.length).toBeGreaterThan(0);
+			expect(xValues[xValues.length - 1]).toBeGreaterThan(xValues[0] ?? 0);
+		});
+
+		it("returns empty string when startX >= endX", () => {
+			expect(buildWavePath(0, 0)).toBe("");
+			expect(buildWavePath(10, 5)).toBe("");
+			expect(buildWavePath(0, -10)).toBe("");
+		});
+
+		it("respects custom amplitude and wavelength", () => {
+			const d = buildWavePath(0, 32, 5, 8, 5);
+			expect(d).toMatch(/^M 0,5/);
+		});
+
+		it("path ends exactly at endX", () => {
+			const d = buildWavePath(0, 64, 2, 32, 4);
+			// Last coordinate pair in the path should be endX,yCenter
+			const match = d.match(/(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)$/);
+			expect(Number(match?.[1])).toBe(64);
+			expect(Number(match?.[2])).toBe(4);
+		});
+	});
+
+	// ── Props Forwarding ────────────────────────────────────────────────────────
+
+	describe("props forwarding", () => {
+		it("custom className is merged via cn()", () => {
+			render(<Divider className="my-custom-divider" />);
+			const el = screen.getByRole("separator");
+			expect(el).toHaveClass("my-custom-divider");
+			// Also retains base classes
+			expect(el.className).toContain("bg-m3-outline-variant");
+		});
+
+		it("style prop is forwarded to the root element", () => {
+			render(<Divider style={{ opacity: 0.5 }} />);
+			const el = screen.getByRole("separator");
+			expect(el.style.opacity).toBe("0.5");
+		});
+
+		it("ref forwarding works for flat divider (div element)", () => {
+			const ref = { current: null };
+			render(<Divider ref={ref} />);
+			expect(ref.current).not.toBeNull();
+			expect((ref.current as unknown as HTMLElement).tagName).toBe("DIV");
+		});
+
+		it("ref forwarding works for wavy divider (outer div element)", () => {
+			const ref = { current: null };
+			render(<Divider ref={ref} shape="wavy" />);
+			expect(ref.current).not.toBeNull();
+			// Wavy forwards ref to the outer wrapper div
+			expect((ref.current as unknown as HTMLElement).tagName).toBe("DIV");
+		});
+	});
+
+	// ── Reduced Motion ──────────────────────────────────────────────────────────
+
+	describe("prefers-reduced-motion", () => {
+		it("renders correctly when useReducedMotion returns true", () => {
+			vi.spyOn(MotionReact, "useReducedMotion").mockReturnValue(true);
+			render(<Divider />);
+			expect(screen.getByRole("separator")).toBeInTheDocument();
+		});
+
+		it("wavy renders correctly when useReducedMotion returns true", () => {
+			vi.spyOn(MotionReact, "useReducedMotion").mockReturnValue(true);
+			const { container } = render(<Divider shape="wavy" />);
+			expect(container.querySelector("svg")).toBeInTheDocument();
+		});
+	});
+
+	// ── Snapshots ───────────────────────────────────────────────────────────────
+
+	describe("snapshots", () => {
+		it("flat/horizontal (default)", () => {
+			const { container } = render(<Divider />);
+			expect(container.firstChild).toMatchSnapshot();
+		});
+
+		it("flat/vertical", () => {
+			const { container } = render(<Divider orientation="vertical" />);
+			expect(container.firstChild).toMatchSnapshot();
+		});
+
+		it("wavy", () => {
+			const { container } = render(<Divider shape="wavy" />);
+			expect(container.firstChild).toMatchSnapshot();
+		});
+
+		it("inset", () => {
+			const { container } = render(
+				<Divider variant="inset" insetStart="standard" />,
+			);
+			expect(container.firstChild).toMatchSnapshot();
+		});
+
+		it("middle-inset", () => {
+			const { container } = render(<Divider variant="middle-inset" />);
+			expect(container.firstChild).toMatchSnapshot();
+		});
+	});
+});