@bug-on/md3-react 3.0.1 → 3.0.3

package/src/ui/toc.tsx

@@ -139,7 +139,7 @@ export function TableOfContents({
 			aria-label="On this page"
 			className={cn("pl-6 flex flex-col h-full", className)}
 		>
-			<h4 className="text-xs font-bold text-m3-on-surface-variant uppercase tracking-widest mb-4 sm:hidden lg:block">
+			<h4 className="text-xs font-bold text-m3-on-surface-variant uppercase tracking-widest mb-4 hidden lg:block">
 				On this page
 			</h4>
 			<ScrollArea

package/src/ui/toolbar/__snapshots__/bottom-docked-toolbar.test.tsx.snap

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BottomDockedToolbar > snapshots: with leading and trailing content 1`] = `
+<div
+  aria-label="Bottom Docked Toolbar"
+  class="fixed bottom-0 left-0 right-0 w-full z-40 flex items-center h-16 justify-between shadow-[0_-1px_3px_rgba(0,0,0,0.1)] pointer-events-auto"
+  role="toolbar"
+  style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); background-color: var(--toolbar-bg); color: var(--toolbar-color); padding-left: 16px; padding-right: 16px; transform: none;"
+>
+  <div
+    class="flex items-center justify-start flex-1 shrink-0"
+  >
+    <span>
+      Lead
+    </span>
+  </div>
+  <div
+    class="flex items-center justify-center flex-1 shrink-0"
+  >
+    Center
+  </div>
+  <div
+    class="flex items-center justify-end flex-1 shrink-0"
+  >
+    <span>
+      Trail
+    </span>
+  </div>
+</div>
+`;
+
+exports[`BottomDockedToolbar > snapshots: without optional content 1`] = `
+<div
+  aria-label="Bottom Docked Toolbar"
+  class="fixed bottom-0 left-0 right-0 w-full z-40 flex items-center h-16 justify-between shadow-[0_-1px_3px_rgba(0,0,0,0.1)] pointer-events-auto"
+  role="toolbar"
+  style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); background-color: var(--toolbar-bg); color: var(--toolbar-color); padding-left: 16px; padding-right: 16px; transform: none;"
+>
+  <div
+    class="flex items-center justify-start flex-1 shrink-0"
+  />
+  <div
+    class="flex items-center justify-center flex-1 shrink-0"
+  >
+    Center
+  </div>
+  <div
+    class="flex items-center justify-end flex-1 shrink-0"
+  />
+</div>
+`;

package/src/ui/toolbar/__snapshots__/floating-toolbar-with-fab.test.tsx.snap

@@ -0,0 +1,113 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FloatingToolbarWithFab > snapshots: horizontal with fab end 1`] = `
+<div>
+  <div
+    class="flex items-center justify-center pointer-events-auto flex-row h-(--toolbar-size)"
+    style="--fab-size: 56px; --toolbar-size: 64px; gap: 8px;"
+  >
+    <div
+      class="flex items-center shrink-0 min-w-0 min-h-0 overflow-hidden relative z-0"
+      style="padding: 24px; margin: -24px; opacity: 1; width: auto; height: auto; transform: none;"
+    >
+      <div
+        style="transform: none;"
+      >
+        <div
+          aria-expanded="true"
+          aria-label="Floating Toolbar"
+          aria-orientation="horizontal"
+          class="flex pointer-events-auto relative max-w-[90vw] h-(--toolbar-size) rounded-full shadow-md"
+          role="toolbar"
+          style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+        >
+          <div
+            class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-x-auto overflow-y-visible"
+          >
+            <div
+              class="flex items-center gap-1 min-w-0 min-h-0 flex-row h-full px-4"
+            >
+              <div
+                class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-row justify-center"
+                style="gap: 4px;"
+              >
+                <button
+                  type="button"
+                >
+                  Center
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex shrink-0 items-center justify-center relative z-10 *:w-full *:h-full"
+      style="width: 56px; height: 56px;"
+    >
+      <button
+        type="button"
+      >
+        FAB
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`FloatingToolbarWithFab > snapshots: vertical with fab bottom 1`] = `
+<div>
+  <div
+    class="flex items-center justify-center pointer-events-auto flex-col w-(--toolbar-size) h-fit"
+    style="--fab-size: 56px; --toolbar-size: 64px; gap: 8px;"
+  >
+    <div
+      class="flex items-center shrink-0 min-w-0 min-h-0 overflow-hidden relative z-0"
+      style="padding: 24px; margin: -24px; opacity: 1; width: auto; height: auto; transform: none;"
+    >
+      <div
+        style="transform: none;"
+      >
+        <div
+          aria-expanded="true"
+          aria-label="Floating Toolbar"
+          aria-orientation="vertical"
+          class="flex pointer-events-auto relative max-h-[90vh] w-(--toolbar-size) h-fit rounded-full shadow-md"
+          role="toolbar"
+          style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+        >
+          <div
+            class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-y-auto overflow-x-visible"
+          >
+            <div
+              class="flex items-center gap-1 min-w-0 min-h-0 flex-col w-full py-6"
+            >
+              <div
+                class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-col justify-center"
+                style="gap: 4px;"
+              >
+                <button
+                  type="button"
+                >
+                  Center
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex shrink-0 items-center justify-center relative z-10 *:w-full *:h-full"
+      style="width: 56px; height: 56px;"
+    >
+      <button
+        type="button"
+      >
+        FAB
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/ui/toolbar/__snapshots__/floating-toolbar.test.tsx.snap

@@ -0,0 +1,169 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HorizontalFloatingToolbar > snapshots: horizontal collapsed 1`] = `
+<div
+  style="transform: none;"
+>
+  <div
+    aria-expanded="false"
+    aria-label="Floating Toolbar"
+    aria-orientation="horizontal"
+    class="flex pointer-events-auto relative max-w-[90vw] h-(--toolbar-size) rounded-full shadow-sm"
+    role="toolbar"
+    style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+  >
+    <div
+      class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-x-auto overflow-y-visible"
+    >
+      <div
+        class="flex items-center gap-1 min-w-0 min-h-0 flex-row h-full px-4"
+      >
+        <div
+          class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-row justify-center"
+          style="gap: 4px;"
+        >
+          <button
+            type="button"
+          >
+            Center
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`HorizontalFloatingToolbar > snapshots: horizontal expanded 1`] = `
+<div
+  style="transform: none;"
+>
+  <div
+    aria-expanded="true"
+    aria-label="Floating Toolbar"
+    aria-orientation="horizontal"
+    class="flex pointer-events-auto relative max-w-[90vw] h-(--toolbar-size) rounded-full shadow-md"
+    role="toolbar"
+    style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+  >
+    <div
+      class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-x-auto overflow-y-visible"
+    >
+      <div
+        class="flex items-center gap-1 min-w-0 min-h-0 flex-row h-full px-4"
+      >
+        <div
+          class="flex shrink-0 overflow-hidden flex-row"
+          style="opacity: 1; width: auto; height: auto; transform: none;"
+        >
+          <span>
+            Lead
+          </span>
+        </div>
+        <div
+          class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-row justify-center"
+          style="gap: 4px;"
+        >
+          <button
+            type="button"
+          >
+            Center
+          </button>
+        </div>
+        <div
+          class="flex shrink-0 overflow-hidden flex-row"
+          style="opacity: 1; width: auto; height: auto; transform: none;"
+        >
+          <span>
+            Trail
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalFloatingToolbar > snapshots: vertical collapsed 1`] = `
+<div
+  style="transform: none;"
+>
+  <div
+    aria-expanded="false"
+    aria-label="Floating Toolbar"
+    aria-orientation="vertical"
+    class="flex pointer-events-auto relative max-h-[90vh] w-(--toolbar-size) h-fit rounded-full shadow-sm"
+    role="toolbar"
+    style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+  >
+    <div
+      class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-y-auto overflow-x-visible"
+    >
+      <div
+        class="flex items-center gap-1 min-w-0 min-h-0 flex-col w-full py-6"
+      >
+        <div
+          class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-col justify-center"
+          style="gap: 4px;"
+        >
+          <button
+            type="button"
+          >
+            Center
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalFloatingToolbar > snapshots: vertical expanded 1`] = `
+<div
+  style="transform: none;"
+>
+  <div
+    aria-expanded="true"
+    aria-label="Floating Toolbar"
+    aria-orientation="vertical"
+    class="flex pointer-events-auto relative max-h-[90vh] w-(--toolbar-size) h-fit rounded-full shadow-md"
+    role="toolbar"
+    style="--toolbar-bg: var(--md-sys-color-surface-container); --toolbar-color: var(--md-sys-color-on-surface); --toolbar-size: 64px; background-color: var(--toolbar-bg); color: var(--toolbar-color);"
+  >
+    <div
+      class="flex-1 w-full h-full rounded-[inherit] scrollbar-hide overflow-y-auto overflow-x-visible"
+    >
+      <div
+        class="flex items-center gap-1 min-w-0 min-h-0 flex-col w-full py-6"
+      >
+        <div
+          class="flex shrink-0 overflow-hidden flex-col"
+          style="opacity: 1; width: auto; height: auto; transform: none;"
+        >
+          <span>
+            Lead
+          </span>
+        </div>
+        <div
+          class="flex flex-1 items-center min-w-0 min-h-0 h-full flex-col justify-center"
+          style="gap: 4px;"
+        >
+          <button
+            type="button"
+          >
+            Center
+          </button>
+        </div>
+        <div
+          class="flex shrink-0 overflow-hidden flex-col"
+          style="opacity: 1; width: auto; height: auto; transform: none;"
+        >
+          <span>
+            Trail
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/ui/toolbar/bottom-docked-toolbar.test.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import { BottomDockedToolbar } from "./docked-toolbar";
+
+describe("BottomDockedToolbar", () => {
+	it("renders at bottom of screen (position fixed)", () => {
+		const { container } = render(
+			<BottomDockedToolbar>Test</BottomDockedToolbar>,
+		);
+		expect(container.firstChild).toHaveClass("fixed bottom-0");
+	});
+
+	it("renders full-width (w-full)", () => {
+		const { container } = render(
+			<BottomDockedToolbar>Test</BottomDockedToolbar>,
+		);
+		expect(container.firstChild).toHaveClass("w-full");
+	});
+
+	it("renders with correct height (h-16 = 64px)", () => {
+		const { container } = render(
+			<BottomDockedToolbar>Test</BottomDockedToolbar>,
+		);
+		expect(container.firstChild).toHaveClass("h-16");
+	});
+
+	it("renders startContent", () => {
+		render(
+			<BottomDockedToolbar startContent={<span data-testid="leading" />}>
+				Test
+			</BottomDockedToolbar>,
+		);
+		expect(screen.getByTestId("leading")).toBeInTheDocument();
+	});
+
+	it("renders endContent", () => {
+		render(
+			<BottomDockedToolbar endContent={<span data-testid="trailing" />}>
+				Test
+			</BottomDockedToolbar>,
+		);
+		expect(screen.getByTestId("trailing")).toBeInTheDocument();
+	});
+
+	it("renders children in center", () => {
+		render(
+			<BottomDockedToolbar>
+				<span data-testid="center" />
+			</BottomDockedToolbar>,
+		);
+		expect(screen.getByTestId("center")).toBeInTheDocument();
+	});
+
+	it("standard and vibrant color variants", () => {
+		const { container: c1 } = render(
+			<BottomDockedToolbar variant="standard">Test</BottomDockedToolbar>,
+		);
+		expect(
+			(c1.firstChild as HTMLElement).style.getPropertyValue("--toolbar-bg"),
+		).toBe("var(--md-sys-color-surface-container)");
+
+		const { container: c2 } = render(
+			<BottomDockedToolbar variant="vibrant">Test</BottomDockedToolbar>,
+		);
+		expect(
+			(c2.firstChild as HTMLElement).style.getPropertyValue("--toolbar-bg"),
+		).toBe("var(--md-sys-color-primary-container)");
+	});
+
+	it("no rounded corners by default", () => {
+		const { container } = render(
+			<BottomDockedToolbar>Test</BottomDockedToolbar>,
+		);
+		// Tailwind rounded classes aren't present
+		expect(container.firstChild).not.toHaveClass("rounded-full");
+		expect(container.firstChild).not.toHaveClass("rounded-2xl");
+	});
+
+	it("applies aria-label", () => {
+		render(
+			<BottomDockedToolbar aria-label="Test Docked">Test</BottomDockedToolbar>,
+		);
+		expect(screen.getByRole("toolbar")).toHaveAttribute(
+			"aria-label",
+			"Test Docked",
+		);
+	});
+
+	it("forwards ref", () => {
+		const ref = React.createRef<HTMLDivElement>();
+		render(<BottomDockedToolbar ref={ref}>Test</BottomDockedToolbar>);
+		expect(ref.current).toBeInstanceOf(HTMLDivElement);
+	});
+
+	it("snapshots: with leading and trailing content", () => {
+		const { container } = render(
+			<BottomDockedToolbar
+				startContent={<span>Lead</span>}
+				endContent={<span>Trail</span>}
+			>
+				Center
+			</BottomDockedToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it("snapshots: without optional content", () => {
+		const { container } = render(
+			<BottomDockedToolbar>Center</BottomDockedToolbar>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});

package/src/ui/toolbar/docked-toolbar.tsx

@@ -0,0 +1,186 @@
+import { m, useMotionValueEvent, useScroll } from "motion/react";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { SPRING_TRANSITION } from "../shared/constants";
+import {
+	type FloatingToolbarColors,
+	standardFloatingToolbarColors,
+	vibrantFloatingToolbarColors,
+} from "./toolbar-colors";
+import { ToolbarContext } from "./toolbar-context";
+
+export interface BottomDockedToolbarProps {
+	/** Color variant: standard or vibrant */
+	variant?: "standard" | "vibrant";
+	/** Custom colors override */
+	colors?: FloatingToolbarColors;
+	/** Whether to hide on scroll */
+	hideOnScroll?: boolean;
+	/** Scroll container ref for scroll behavior (if empty, uses window scroll) */
+	scrollContainerRef?: React.RefObject<HTMLElement | null>;
+	/** Start content (left-aligned) */
+	startContent?: React.ReactNode;
+	/** End content (right-aligned) */
+	endContent?: React.ReactNode;
+	/** Center content */
+	children?: React.ReactNode;
+	/**
+	 * Horizontal padding (px) applied to the toolbar container.
+	 * MD3 spec requires a minimum of 16dp on leading and trailing edges.
+	 * @default 16
+	 */
+	paddingX?: number;
+	/**
+	 * Layout distribution of toolbar content.
+	 * - `"between"` – leading/center/trailing spread across full width (default, compact screens).
+	 * - `"center"` – all content centered; ideal for medium+ screen widths.
+	 * - `"end-weighted"` – key action is centered while others are pushed to the edges.
+	 * @default "between"
+	 */
+	justify?: "between" | "center" | "end-weighted";
+	/**
+	 * Container shape.
+	 * - `"none"` – straight corners (MD3 default for mobile docked toolbars).
+	 * - `"large"` – large rounded corners (recommended for web / large screens).
+	 * - `"full"` – fully pill-shaped.
+	 *
+	 * MD3 guideline: *"On web and large screens, the docked toolbar can be rounded."*
+	 * @default "none"
+	 */
+	shape?: "none" | "large" | "full";
+	className?: string;
+	"aria-label"?: string;
+}
+
+/**
+ * A full-width docked toolbar typically fixed at the bottom of the screen.
+ * Replaces the deprecated Bottom App Bar in MD3 Expressive.
+ *
+ * @example
+ * ```tsx
+ * <BottomDockedToolbar hideOnScroll startContent={<IconButton aria-label="Menu"><Icon name="menu" /></IconButton>}>
+ *   <div className="flex gap-2">
+ *     <IconButton aria-label="Search"><Icon name="search" /></IconButton>
+ *     <IconButton aria-label="Edit"><Icon name="edit" /></IconButton>
+ *   </div>
+ * </BottomDockedToolbar>
+ * ```
+ */
+export const BottomDockedToolbar = React.forwardRef<
+	HTMLDivElement,
+	BottomDockedToolbarProps
+>(
+	(
+		{
+			variant = "standard",
+			colors: customColors,
+			hideOnScroll = false,
+			scrollContainerRef,
+			startContent,
+			endContent,
+			children,
+			paddingX = 16,
+			justify = "between",
+			shape = "none",
+			className,
+			"aria-label": ariaLabel,
+			...props
+		},
+		ref,
+	) => {
+		const colors =
+			customColors ||
+			(variant === "vibrant"
+				? vibrantFloatingToolbarColors
+				: standardFloatingToolbarColors);
+
+		const { scrollY } = useScroll(
+			scrollContainerRef ? { container: scrollContainerRef } : undefined,
+		);
+
+		const [isHidden, setIsHidden] = React.useState(false);
+		const lastScrollY = React.useRef(0);
+
+		useMotionValueEvent(scrollY, "change", (latest) => {
+			if (!hideOnScroll) return;
+
+			const diff = latest - lastScrollY.current;
+
+			if (latest <= 0) {
+				setIsHidden(false);
+				lastScrollY.current = 0;
+				return;
+			}
+
+			if (Math.abs(diff) > 10) {
+				setIsHidden(diff > 0);
+				lastScrollY.current = latest;
+			}
+		});
+
+		const cssVars = {
+			"--toolbar-bg": colors.toolbarContainerColor,
+			"--toolbar-color": colors.toolbarContentColor,
+		} as React.CSSProperties;
+
+		const SHAPE_CLASSES = {
+			none: "",
+			large: "rounded-2xl",
+			full: "rounded-full",
+		};
+
+		const justifyClass =
+			justify === "center" ? "justify-center gap-4" : "justify-between";
+
+		return (
+			<ToolbarContext.Provider value={{ orientation: "horizontal" }}>
+				<m.div
+					ref={ref}
+					role="toolbar"
+					aria-label={ariaLabel || "Bottom Docked Toolbar"}
+					initial={false}
+					animate={{
+						y: isHidden ? "100%" : "0%",
+					}}
+					transition={SPRING_TRANSITION}
+					style={{
+						...cssVars,
+						backgroundColor: "var(--toolbar-bg)",
+						color: "var(--toolbar-color)",
+						// Apply safe area inset for mobile bottom indicators
+						paddingBottom: "env(safe-area-inset-bottom, 0px)",
+						paddingLeft: paddingX,
+						paddingRight: paddingX,
+					}}
+					className={cn(
+						"fixed bottom-0 left-0 right-0 w-full z-40",
+						"flex items-center h-16",
+						justifyClass,
+						SHAPE_CLASSES[shape],
+						"shadow-[0_-1px_3px_rgba(0,0,0,0.1)] pointer-events-auto",
+						className,
+					)}
+					{...props}
+				>
+					<div className="flex items-center justify-start flex-1 shrink-0">
+						{startContent}
+					</div>
+
+					<div
+						className={cn(
+							"flex items-center justify-center",
+							justify === "center" ? "gap-1" : "flex-1 shrink-0",
+						)}
+					>
+						{children}
+					</div>
+
+					<div className="flex items-center justify-end flex-1 shrink-0">
+						{endContent}
+					</div>
+				</m.div>
+			</ToolbarContext.Provider>
+		);
+	},
+);
+BottomDockedToolbar.displayName = "BottomDockedToolbar";