@bug-on/md3-react 3.0.2 → 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.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { cva } from "class-variance-authority";
-import { AnimatePresence, domMax, LazyMotion, m, type Transition } from "motion/react";
+import {
+	AnimatePresence,
+	domMax,
+	LazyMotion,
+	m,
+	type Transition,
+} from "motion/react";
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { Icon } from "./icon";
@@ -416,7 +422,9 @@ export const NavigationBarComponent = React.forwardRef<
 
 		return (
 			<LazyMotion features={domMax} strict>
-				<NavigationBarContext.Provider value={{ variant, itemLayout, activeIndicatorTransition }}>
+				<NavigationBarContext.Provider
+					value={{ variant, itemLayout, activeIndicatorTransition }}
+				>
 					<m.nav
 						ref={ref}
 						role="navigation"
@@ -424,7 +432,13 @@ export const NavigationBarComponent = React.forwardRef<
 						className={navBaseClasses}
 						style={style}
 						initial={false}
-						animate={{ y: isVisible ? "0%" : "100%" }}
+						animate={{
+							y: isVisible
+								? "0%"
+								: variant === "xr"
+									? "calc(100% + 40px)"
+									: "100%",
+						}}
 						transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
 					>
 						<div
@@ -432,7 +446,9 @@ export const NavigationBarComponent = React.forwardRef<
 							aria-orientation="horizontal"
 							className={cn(
 								"flex w-full h-full mx-auto",
-								variant === "xr" ? "gap-0 min-[600px]:gap-1.5" : "max-w-7xl gap-1.5",
+								variant === "xr"
+									? "gap-0 min-[600px]:gap-1.5"
+									: "max-w-7xl gap-1.5",
 							)}
 						>
 							{children}

package/src/ui/navigation-rail.tsx

@@ -1,5 +1,11 @@
 import { cva } from "class-variance-authority";
-import { AnimatePresence, domMax, LazyMotion, m, type Transition } from "motion/react";
+import {
+	AnimatePresence,
+	domMax,
+	LazyMotion,
+	m,
+	type Transition,
+} from "motion/react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/utils";
@@ -66,8 +72,10 @@ const railContainerVariants = cva(
 	{
 		variants: {
 			variant: {
-				collapsed: "items-center h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
-				expanded: "items-start h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
+				collapsed:
+					"items-center h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
+				expanded:
+					"items-start h-full pt-11 pb-4 shadow-none bg-m3-surface rounded-none",
 				modal:
 					"bg-m3-surface shadow-lg rounded-r-[var(--m3-shape-corner-large)] h-full pt-11 pb-4",
 				xr: "h-fit py-5 rounded-[48px] shadow-xl bg-m3-surface border border-white/5",
@@ -459,9 +467,7 @@ const NavigationRailComponent = React.forwardRef<
 			[ref],
 		);
 
-		const navBaseClasses = cn(
-			railContainerVariants({ variant, narrow }),
-		);
+		const navBaseClasses = cn(railContainerVariants({ variant, narrow }));
 		const modalPositioning = isModal ? "fixed left-0 top-0 z-[100]" : "";
 
 		const navHeaderSpacing = (() => {
@@ -563,7 +569,11 @@ const NavigationRailComponent = React.forwardRef<
 
 		const finalNavElement = isSpatial ? spatialWrapper : navElement;
 
-		const contextValue = { variant, labelVisibility, activeIndicatorTransition };
+		const contextValue = {
+			variant,
+			labelVisibility,
+			activeIndicatorTransition,
+		};
 
 		if (isModal) {
 			if (typeof document === "undefined") return null;

package/src/ui/search/search-view-fullscreen.tsx

@@ -22,7 +22,7 @@ import { AnimatePresence, m, useReducedMotion } from "motion/react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../../lib/utils";
-import { IconButton } from "../icon-button";
+import { IconButton } from "../buttons/icon-button";
 import { AnimatedPlaceholder } from "./animated-placeholder";
 import { useSearchViewFocus } from "./hooks/use-search-view-focus";
 import {

package/src/ui/search/search.tokens.ts

@@ -9,7 +9,11 @@
  * @see docs/m3/search/SearchBarTokens.kt
  * @see docs/m3/search/SearchViewTokens.kt
  */
-
+import {
+	DEFAULT_SPATIAL_SPRING,
+	FAST_SPATIAL_SPRING,
+	SLOW_SPATIAL_SPRING,
+} from "../shared/motion-tokens";
 // ─── Dimensional Tokens ───────────────────────────────────────────────────────
 
 /**
@@ -87,48 +91,10 @@ export const SEARCH_TYPOGRAPHY = {
 	bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]",
 } as const;
 
-// ─── Animation Constants ──────────────────────────────────────────────────────
+export const SEARCH_BAR_EXPAND_SPRING = FAST_SPATIAL_SPRING;
 
-/**
- * Spring animation for SearchBar width expand (inactive → active).
- * Matches MD3 FastSpatial motion scheme.
- */
-export const SEARCH_BAR_EXPAND_SPRING = {
-	type: "spring" as const,
-	stiffness: 380,
-	damping: 38,
-	mass: 1,
-};
-
-/**
- * Spring animation for Docked SearchView dropdown reveal (slide + fade).
- * Offset Y: -8px on enter, opacity 0→1.
- */
-export const SEARCH_DOCKED_REVEAL_SPRING = {
-	type: "spring" as const,
-	stiffness: 400,
-	damping: 35,
-	mass: 0.8,
-};
+export const SEARCH_DOCKED_REVEAL_SPRING = DEFAULT_SPATIAL_SPRING;
 
-/**
- * Spring animation for FullScreen SearchView shape morphing.
- * Lower stiffness + mass gives a smoother pill→fullscreen morph.
- */
-export const SEARCH_FULLSCREEN_SPRING = {
-	type: "spring" as const,
-	stiffness: 300,
-	damping: 30,
-	mass: 0.9,
-};
+export const SEARCH_FULLSCREEN_SPRING = SLOW_SPATIAL_SPRING;
 
-/**
- * Exit transition for SearchBar when mode="popLayout" is used.
- * Fast fade-out so SearchView can claim the layoutId quickly.
- */
-export const SEARCH_BAR_EXIT_SPRING = {
-	type: "spring" as const,
-	stiffness: 500,
-	damping: 40,
-	mass: 0.6,
-};
+export const SEARCH_BAR_EXIT_SPRING = FAST_SPATIAL_SPRING;

package/src/ui/search/trailing-action.tsx

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { IconButton } from "../icon-button";
+import { IconButton } from "../buttons/icon-button";
 import { SEARCH_COLORS } from "./search.tokens";
 
 interface TrailingActionProps {

package/src/ui/shared/constants.ts

@@ -9,57 +9,55 @@
  */
 
 import type { Target, TargetAndTransition, Transition } from "motion/react";
+import {
+	DEFAULT_EFFECTS_SPRING,
+	DEFAULT_SPATIAL_SPRING,
+	FAST_EFFECTS_SPRING,
+} from "./motion-tokens";
+
+export {
+	DEFAULT_EFFECTS_SPRING,
+	DEFAULT_SPATIAL_SPRING,
+	FAST_EFFECTS_SPRING,
+	FAST_SPATIAL_SPRING,
+	getMotionSpring,
+	getMotionTransitionCSS,
+	SLOW_EFFECTS_SPRING,
+	SLOW_SPATIAL_SPRING,
+} from "./motion-tokens";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Spring Transitions
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * Fast critically-damped spring — used for border-radius morphing.
- *
- * - Duration: 200ms
- * - Bounce: 0 (no overshoot → prevents negative radius jitter)
+ * Fast spring — used for border-radius morphing, icon swaps.
+ * Maps to MD3 `fast.effects` (critically damped, stiffness 3800).
  *
  * @example
  * ```tsx
  * <m.button transition={{ borderRadius: SPRING_TRANSITION_FAST }}>...</m.button>
  * ```
  */
-export const SPRING_TRANSITION_FAST: Transition = {
-	type: "spring",
-	bounce: 0,
-	duration: 0.2,
-} as const;
+export const SPRING_TRANSITION_FAST: Transition = FAST_EFFECTS_SPRING;
 
 /**
- * Standard critically-damped spring — used for icon/content scale animations.
- *
- * - Duration: 300ms
- * - Bounce: 0 (no overshoot)
+ * Standard spring — used for icon/content scale animations.
+ * Maps to MD3 `default.effects` (critically damped, stiffness 1600).
  *
  * @example
  * ```tsx
  * <m.span transition={SPRING_TRANSITION}>...</m.span>
  * ```
  */
-export const SPRING_TRANSITION: Transition = {
-	type: "spring",
-	bounce: 0,
-	duration: 0.3,
-} as const;
+export const SPRING_TRANSITION: Transition = DEFAULT_EFFECTS_SPRING;
 
 /**
  * MD3 Expressive spring — active indicator expand/collapse.
- * Higher bounce for the "pop" effect per MD3 Expressive spec.
- *
- * - Duration: 400ms
- * - Bounce: 0.35 (spring overshoot → lò xo)
+ * Maps to MD3 `default.spatial` (dampingRatio: 0.8, stiffness: 380).
+ * Gentle bounce for the "pop" effect per MD3 Expressive spec.
  */
-export const SPRING_TRANSITION_EXPRESSIVE: Transition = {
-	type: "spring",
-	bounce: 0.45,
-	duration: 0.4,
-} as const;
+export const SPRING_TRANSITION_EXPRESSIVE: Transition = DEFAULT_SPATIAL_SPRING;
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Icon Span Motion Variants