@bug-on/md3-react 3.0.1 → 3.0.3

package/src/ui/buttons/button-group/types.ts

@@ -0,0 +1,77 @@
+import type * as React from "react";
+import type { MD3Size } from "../../../types/md3";
+
+export type ButtonGroupVariant = "standard" | "connected" | "navbar";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+
+/**
+ * Thuộc tính truyền vào cho thành phần nhóm nút (Button Group).
+ */
+export interface ButtonGroupProps
+	extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+	/**
+	 * Cấu trúc hiển thị của nhóm nút:
+	 * - `standard`: Các nút cách xa và có khoảng cách độc lập với nhau (gap).
+	 * - `connected`: Các nút nối liền khung viền với nhau để tạo thành dạng Segmented Button.
+	 * - `navbar`: Nút hiển thị dưới dạng thanh điều hướng với active pill chuyển động (Sliding Indicator).
+	 * @default "standard"
+	 */
+	variant?: ButtonGroupVariant;
+	/**
+	 * Hướng sắp xếp của các nút trong nhóm.
+	 * @default "horizontal"
+	 */
+	orientation?: ButtonGroupOrientation;
+	/**
+	 * Đặt thành `true` nếu bạn muốn nhóm hiển thị dạng `standard` giãn đều lấp đầy toàn bộ khu vực chứa (container).
+	 * @default false
+	 */
+	fullWidth?: boolean;
+	/**
+	 * Áp dụng thống nhất chung một kích thước (`size`) cho tất cả các con trong nhóm (ghi đè kích thước lẻ từng nút).
+	 */
+	size?: MD3Size;
+	/**
+	 * Bật/tắt hiệu ứng thu phóng độ rộng / khoảng đệm (Morphing Width) khi nhấn vào các nút (áp dụng cho nhóm `standard`).
+	 * @default true
+	 */
+	morphingWidth?: boolean;
+	/**
+	 * Tỷ lệ mở rộng chiều rộng của nút khi được nhấn (áp dụng cho nhóm `standard` ngang).
+	 * Theo MD3 Spec, mặc định là 0.15 (15%).
+	 * @default 0.15
+	 */
+	expandedRatio?: number;
+	/**
+	 * Tự động hiển thị biểu tượng (icon) Check khi một nút trạng thái nằm trong nhóm được chỉ định là `selected={true}`.
+	 * @default false
+	 */
+	showCheck?: boolean;
+	/**
+	 * Điều khiển hành vi hiển thị Icon (áp dụng chính cho `navbar`).
+	 * - `selected`: Chỉ hiển thị icon trên mục được chọn.
+	 * - `all`: Hiển thị trên tất cả.
+	 * - `none`: Ẩn toàn bộ icon.
+	 */
+	iconBehavior?: "selected" | "all" | "none";
+	/**
+	 * Điều khiển hành vi hiển thị Label (áp dụng chính cho `navbar`).
+	 * - `selected`: Chỉ hiển thị label trên mục được chọn.
+	 * - `all`: Hiển thị trên tất cả.
+	 * - `none`: Ẩn toàn bộ label.
+	 */
+	labelBehavior?: "selected" | "all" | "none";
+	/**
+	 * Tùy chọn: Bật chế độ Active Morphing (dựa trên Selection).
+	 * Khi `true`, các nút sẽ tự động co dãn (tăng/giảm width) dựa trên việc nút nào đang được chọn,
+	 * tạo hiệu ứng thay đổi kích thước mượt mà theo trạng thái.
+	 * Khi `false` hoặc `undefined`, Group sẽ hoạt động dựa trên `isPressed` (nhấn chuột) như mặc định.
+	 */
+	activeMorphing?: boolean;
+	/**
+	 * Class CSS tùy chỉnh áp dụng cho từng button con trong nhóm.
+	 * Hữu ích để thay đổi padding, min-width hoặc các thuộc tính khác một cách linh hoạt.
+	 * Đối với variant `navbar`, class này sẽ được ưu tiên hơn so với các padding mặc định.
+	 */
+	itemClassName?: string;
+}

package/src/ui/{fab.tsx → buttons/fabs/fab/fab.tsx}

@@ -13,16 +13,16 @@
 import type { HTMLMotionProps } from "motion/react";
 import { AnimatePresence, domMax, LazyMotion, m } from "motion/react";
 import * as React from "react";
-import { cn } from "../lib/utils";
-import { LoadingIndicator } from "./loading-indicator";
-import { ProgressIndicator } from "./progress-indicator";
-import { Ripple, useRippleState } from "./ripple";
+import { cn } from "../../../../lib/utils";
+import { LoadingIndicator } from "../../../loading-indicator";
+import { ProgressIndicator } from "../../../progress-indicator";
+import { Ripple, useRippleState } from "../../../ripple";
 import {
 	ICON_SPAN_VARIANTS,
 	SPRING_TRANSITION,
 	SPRING_TRANSITION_FAST,
-} from "./shared/constants";
-import { TouchTarget } from "./shared/touch-target";
+} from "../../../shared/constants";
+import { TouchTarget } from "../../../shared/touch-target";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Design Tokens

package/src/ui/buttons/fabs/fab/index.ts

@@ -0,0 +1 @@
+export * from "./fab";

package/src/ui/{fab-menu.tsx → buttons/fabs/fab-menu/fab-menu.tsx}

@@ -20,10 +20,13 @@ import {
 	useTransform,
 } from "motion/react";
 import * as React from "react";
-import { cn } from "../lib/utils";
-import { Ripple, useRippleState } from "./ripple";
-import { SPRING_TRANSITION, SPRING_TRANSITION_FAST } from "./shared/constants";
-import { TouchTarget } from "./shared/touch-target";
+import { cn } from "../../../../lib/utils";
+import { Ripple, useRippleState } from "../../../ripple";
+import {
+	SPRING_TRANSITION,
+	SPRING_TRANSITION_FAST,
+} from "../../../shared/constants";
+import { TouchTarget } from "../../../shared/touch-target";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Design Tokens — MD3 FAB Menu Spec

package/src/ui/buttons/fabs/fab-menu/index.ts

@@ -0,0 +1 @@
+export * from "./fab-menu";

package/src/ui/buttons/fabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./fab";
+export * from "./fab-menu";

package/src/ui/{icon-button.tsx → buttons/icon-button/icon-button.tsx}

@@ -13,16 +13,16 @@
 import type { HTMLMotionProps } from "motion/react";
 import { AnimatePresence, domMax, LazyMotion, m } from "motion/react";
 import * as React from "react";
-import { cn } from "../lib/utils";
-import { LoadingIndicator } from "./loading-indicator";
-import { ProgressIndicator } from "./progress-indicator";
-import { Ripple, useRippleState } from "./ripple";
+import { cn } from "../../../lib/utils";
+import { LoadingIndicator } from "../../loading-indicator";
+import { ProgressIndicator } from "../../progress-indicator";
+import { Ripple, useRippleState } from "../../ripple";
 import {
 	ICON_SPAN_VARIANTS,
 	SPRING_TRANSITION,
 	SPRING_TRANSITION_FAST,
-} from "./shared/constants";
-import { TouchTarget } from "./shared/touch-target";
+} from "../../shared/constants";
+import { TouchTarget } from "../../shared/touch-target";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Design Tokens

package/src/ui/buttons/icon-button/index.ts

@@ -0,0 +1 @@
+export * from "./icon-button";

package/src/ui/buttons/index.ts

@@ -0,0 +1,4 @@
+export * from "./button";
+export * from "./button-group";
+export * from "./fabs";
+export * from "./icon-button";

package/src/ui/code-block.tsx

@@ -2,7 +2,7 @@
 
 import { createElement, useCallback, useEffect, useState } from "react";
 import { cn } from "../lib/utils";
-import { Button } from "./button";
+import { Button } from "./buttons/button";
 import { Icon } from "./icon";
 import { ScrollArea } from "./scroll-area";
 

package/src/ui/dialog.tsx

@@ -14,17 +14,14 @@ 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 { IconButton } from "./buttons/icon-button";
 import { Icon } from "./icon";
-import { IconButton } from "./icon-button";
 import { ScrollArea } from "./scroll-area";
+import { DEFAULT_SPATIAL_SPRING } from "./shared/motion-tokens";
 
 // ─── MD3 Spring Config (Expressive) ──────────────────────────────────────────
-const MD3_SPRING = {
-	type: "spring" as const,
-	stiffness: 400,
-	damping: 30,
-	mass: 1,
-};
+// MD3 default.spatial: stiffness=380, dampingRatio=0.8 → Framer damping ≈ 31.19
+const MD3_SPRING = DEFAULT_SPATIAL_SPRING;
 
 const MD3_OVERLAY_ANIM = {
 	initial: { opacity: 0 },

package/src/ui/drawer.tsx

@@ -3,15 +3,12 @@ import { AnimatePresence, m } from "motion/react";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { Icon } from "./icon";
+import { DEFAULT_SPATIAL_SPRING } from "./shared/motion-tokens";
 
 // ─── MD3 Expressive Drawer Animation ─────────────────────────────────────────
-// Slide từ dưới lên, spring physics giống Google Material's "Emphasized" easing
-const MD3_DRAWER_SPRING = {
-	type: "spring" as const,
-	stiffness: 350,
-	damping: 35,
-	mass: 0.9,
-};
+// Slide from bottom, MD3 default.spatial spring
+// (stiffness=380, dampingRatio=0.8 → Framer damping ≈ 31.19)
+const MD3_DRAWER_SPRING = DEFAULT_SPATIAL_SPRING;
 
 const MD3_DRAWER_ANIM = {
 	initial: { y: "100%", opacity: 0.6 },

package/src/ui/menu/menu-animations.ts

@@ -1,28 +1,22 @@
 // ─── MD3 Expressive Menu — Framer Motion Animation Variants ──────────────────
-// FastSpatial: mirrors MotionSchemeKeyTokens.FastSpatial
-//   Android: spring(stiffness=380, dampingRatio=0.7)
-//   Framer:  damping = 2 × 0.7 × √(380 × 1) ≈ 27.3 → use 28
-// FastEffects: mirrors MotionSchemeKeyTokens.FastEffects
-//   Android: duration=150ms, FastOutLinearIn
-//   Framer:  duration=0.15, ease=[0.4, 0, 1, 1]
+// FastSpatial: md.sys.motion.spring.fast.spatial
+//   MD3: stiffness=800, dampingRatio=0.6 → Framer damping ≈ 33.94
+// FastEffects: md.sys.motion.spring.fast.effects (CSS fallback used for exit)
+//   MD3: duration=150ms, cubic-bezier(0.31, 0.94, 0.34, 1.00)
 
-import type { Transition, Variants } from "motion/react";
+import type { Variants } from "motion/react";
+import {
+	FAST_EFFECTS_SPRING,
+	FAST_SPATIAL_SPRING,
+} from "../shared/motion-tokens";
 
-// ─── Shared spring/easing specs ───────────────────────────────────────────────
+export { FAST_EFFECTS_SPRING, FAST_SPATIAL_SPRING };
 
-/** FastSpatial spring — used for shape morphing and spatial enter animations */
-export const FAST_SPATIAL_SPRING: Transition = {
-	type: "spring",
-	stiffness: 380,
-	damping: 28,
-	mass: 1,
-};
-
-/** FastEffects transition — used for opacity and exit animations */
-export const FAST_EFFECTS_TRANSITION: Transition = {
+/** FastEffects CSS-fallback transition — used for opacity/exit animations */
+export const FAST_EFFECTS_TRANSITION = {
 	duration: 0.15,
-	ease: [0.4, 0, 1, 1], // FastOutLinearIn
-};
+	ease: [0.31, 0.94, 0.34, 1.0] as [number, number, number, number],
+} as const;
 
 // ─── Menu popup container ─────────────────────────────────────────────────────
 

package/src/ui/menu/menu-tokens.ts

@@ -2,6 +2,8 @@
 // Sourced from: SegmentedMenuTokens.kt, StandardMenuTokens.kt, VibrantMenuTokens.kt,
 //               MenuTokens.kt, MenuDefaults.kt, ListTokens.kt
 
+import { cornerRadius } from "@bug-on/md3-tokens";
+
 // ─── Spacing (px → dp) ────────────────────────────────────────────────────────
 
 /** Horizontal padding for menu items: 16dp (ItemLeadingSpace / ItemTrailingSpace) */
@@ -64,23 +66,23 @@ export const BASELINE_ITEM_SHAPE = "rounded-none";
  */
 export const GROUP_SHAPES = {
 	/** Active standalone group shape: CornerLarge all corners (16px) */
-	standaloneActive: "16px",
+	standaloneActive: `${cornerRadius.large}px`,
 	/**
 	 * Active leading group shape: top=CornerLarge(16px), bottom=CornerSmall(8px)
 	 * Source: SegmentedMenuTokens — LeadingContainerShape:
 	 * topStart=CornerLarge, topEnd=CornerLarge, bottomStart=CornerSmall, bottomEnd=CornerSmall
 	 */
-	leadingActive: "16px 16px 8px 8px",
+	leadingActive: `${cornerRadius.large}px ${cornerRadius.large}px ${cornerRadius.small}px ${cornerRadius.small}px`,
 	/** Active middle group shape: CornerExtraSmall all corners (4px) */
-	middleActive: "4px",
+	middleActive: `${cornerRadius.extraSmall}px`,
 	/**
 	 * Active trailing group shape: top=CornerSmall(8px), bottom=CornerLarge(16px)
 	 * Source: SegmentedMenuTokens — TrailingContainerShape:
 	 * topStart=CornerSmall, topEnd=CornerSmall, bottomStart=CornerLarge, bottomEnd=CornerLarge
 	 */
-	trailingActive: "8px 8px 16px 16px",
+	trailingActive: `${cornerRadius.small}px ${cornerRadius.small}px ${cornerRadius.large}px ${cornerRadius.large}px`,
 	/** Inactive (default, pre-hover) shape for all groups: CornerExtraSmall (4px) */
-	inactive: "4px",
+	inactive: `${cornerRadius.extraSmall}px`,
 } as const;
 
 /**

package/src/ui/menu/menu.test.tsx

@@ -616,9 +616,14 @@ describe("Menu Internals", () => {
 		expect(screen.getByText("A")).toBeInTheDocument();
 	});
 
-	// 3. Animation variants check
-	it("FAST_SPATIAL_SPRING has correct spring parameters", () => {
-		expect(FAST_SPATIAL_SPRING.stiffness).toBe(380);
-		expect(FAST_SPATIAL_SPRING.damping).toBe(28);
+	// 3. Animation variants check — values must match MD3 fast.spatial token
+	// md.sys.motion.spring.fast.spatial: stiffness=800, dampingRatio=0.6
+	// Framer damping = 2 × 0.6 × √800 ≈ 33.94
+	it("FAST_SPATIAL_SPRING has correct MD3 spring parameters", () => {
+		expect(FAST_SPATIAL_SPRING.stiffness).toBe(800);
+		expect((FAST_SPATIAL_SPRING as { damping: number }).damping).toBeCloseTo(
+			33.94,
+			1,
+		);
 	});
 });

package/src/ui/navigation-bar.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { NavigationBar, NavigationBarItem } from "./navigation-bar";
+
+describe("NavigationBar", () => {
+	it("renders with correct role and aria-label", () => {
+		render(
+			<NavigationBar>
+				<NavigationBarItem selected icon={<span />} label="Home" />
+			</NavigationBar>,
+		);
+		const nav = screen.getByRole("navigation", { name: "Main navigation" });
+		expect(nav).toBeInTheDocument();
+	});
+
+	it("renders correct number of items", () => {
+		render(
+			<NavigationBar>
+				<NavigationBarItem selected icon={<span />} label="Home" />
+				<NavigationBarItem selected={false} icon={<span />} label="Search" />
+			</NavigationBar>,
+		);
+		const items = screen.getAllByRole("menuitem");
+		expect(items).toHaveLength(2);
+	});
+
+	it('marks selected item with aria-current="page"', () => {
+		render(
+			<NavigationBar>
+				<NavigationBarItem selected icon={<span />} label="Home" />
+				<NavigationBarItem selected={false} icon={<span />} label="Search" />
+			</NavigationBar>,
+		);
+		const selectedItem = screen.getByRole("menuitem", { current: "page" });
+		expect(selectedItem).toHaveTextContent("Home");
+	});
+
+	it("calls onClick when item clicked", () => {
+		const onClick = vi.fn();
+		render(
+			<NavigationBar>
+				<NavigationBarItem
+					selected={false}
+					icon={<span />}
+					label="Home"
+					onClick={onClick}
+				/>
+			</NavigationBar>,
+		);
+		const item = screen.getByRole("menuitem");
+		fireEvent.click(item);
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+
+	it("does not call onClick when disabled", () => {
+		const onClick = vi.fn();
+		render(
+			<NavigationBar>
+				<NavigationBarItem
+					selected={false}
+					disabled
+					icon={<span />}
+					label="Home"
+					onClick={onClick}
+				/>
+			</NavigationBar>,
+		);
+		const item = screen.getByRole("menuitem");
+		fireEvent.click(item);
+		expect(onClick).not.toHaveBeenCalled();
+		expect(item).toHaveAttribute("aria-disabled", "true");
+	});
+
+	it("renders badge when provided", () => {
+		render(
+			<NavigationBar>
+				<NavigationBarItem selected icon={<span />} label="Home" badge="1" />
+			</NavigationBar>,
+		);
+		const badge = screen.getByText("1");
+		expect(badge).toBeInTheDocument();
+	});
+
+	it("uses aria-label prop when provided", () => {
+		render(
+			<NavigationBar>
+				<NavigationBarItem
+					selected
+					icon={<span />}
+					label="Home"
+					aria-label="Go to homepage"
+				/>
+			</NavigationBar>,
+		);
+		const item = screen.getByRole("menuitem");
+		expect(item).toHaveAttribute("aria-label", "Go to homepage");
+	});
+
+	it("renders xr variant with correct classes", () => {
+		render(
+			<NavigationBar variant="xr">
+				<NavigationBarItem selected icon={<span />} label="Home" />
+			</NavigationBar>,
+		);
+		const nav = screen.getByRole("navigation", { name: "Main navigation" });
+		expect(nav).toHaveClass("bottom-6");
+		expect(nav).toHaveClass("left-1/2");
+		expect(nav).toHaveClass("-translate-x-1/2");
+		expect(nav).toHaveClass("rounded-[48px]");
+	});
+});