@bug-on/md3-react 3.0.0 → 3.0.1

package/dist/plugin.d.mts

@@ -0,0 +1 @@
+export { default } from '@bug-on/md3-tailwind';

package/dist/plugin.d.ts

@@ -0,0 +1 @@
+export { default } from '@bug-on/md3-tailwind';

package/dist/plugin.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var md3Tailwind = require('@bug-on/md3-tailwind');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var md3Tailwind__default = /*#__PURE__*/_interopDefault(md3Tailwind);
+
+
+
+module.exports = md3Tailwind__default.default;
+//# sourceMappingURL=plugin.js.map
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"plugin.js","sourcesContent":[]}

package/dist/plugin.mjs

@@ -0,0 +1,3 @@
+export { default } from '@bug-on/md3-tailwind';
+//# sourceMappingURL=plugin.mjs.map
+//# sourceMappingURL=plugin.mjs.map

package/dist/plugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"plugin.mjs","sourcesContent":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/md3-react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug Ổn",
   "license": "MIT",
@@ -42,6 +42,11 @@
     "./material-symbols-self-hosted.css": {
       "types": "./dist/material-symbols-self-hosted.css.d.ts",
       "default": "./dist/material-symbols-self-hosted.css"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.mjs",
+      "require": "./dist/plugin.js"
     }
   },
   "peerDependencies": {
@@ -64,7 +69,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/md3-tokens": "3.0.0"
+    "@bug-on/md3-tokens": "3.0.1",
+    "@bug-on/md3-tailwind": "3.0.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/scripts/copy-assets.js

@@ -26,11 +26,42 @@ if (fs.existsSync(srcCss)) {
 	console.log("✅ Copied typography.css to dist/typography.css");
 }
 
+// Bundle index.css = md3-tokens CSS + react component base styles.
+// This ensures users only need to import @bug-on/md3-react/index.css
+// and get all required design tokens automatically.
+const tokensCssDir = path.join(__dirname, "../../tokens/dist");
+const tokensColorsCss = path.join(tokensCssDir, "colors.css");
+const tokensShapeCss = path.join(tokensCssDir, "shape.css");
+
+const bundleParts = [
+	"/* @bug-on/md3-tokens — MD3 System Color Tokens */",
+];
+
+if (fs.existsSync(tokensColorsCss)) {
+	bundleParts.push(fs.readFileSync(tokensColorsCss, "utf-8"));
+	console.log("✅ Bundled colors.css from md3-tokens into index.css");
+} else {
+	console.warn("⚠️  md3-tokens colors.css not found — build tokens first");
+}
+
+if (fs.existsSync(tokensShapeCss)) {
+	bundleParts.push(fs.readFileSync(tokensShapeCss, "utf-8"));
+	console.log("✅ Bundled shape.css from md3-tokens into index.css");
+} else {
+	console.warn("⚠️  md3-tokens shape.css not found — build tokens first");
+}
+
 if (fs.existsSync(srcIndexCss)) {
-	fs.copyFileSync(srcIndexCss, distIndexCss);
-	console.log("✅ Copied index.css to dist/index.css");
+	bundleParts.push(
+		"\n/* @bug-on/md3-react — Component Base Reset */",
+		fs.readFileSync(srcIndexCss, "utf-8"),
+	);
 }
 
+fs.writeFileSync(distIndexCss, bundleParts.join("\n"));
+console.log("✅ Built bundled index.css (tokens + component base) to dist/index.css");
+
+
 // Copy Material Symbols CSS variants
 const cssVariants = [
 	"material-symbols-cdn.css",
@@ -62,7 +93,9 @@ for (const stub of cssStubs) {
 	console.log(`✅ Generated ${stub}`);
 }
 
-// Prepend "use client" to JS/MJS output files to support React Server Components
+// Prepend "use client" to JS/MJS output files to support React Server Components.
+// NOTE: Using post-build script instead of tsup banner — banner causes esbuild
+// "Module level directives" warnings in library bundling context.
 const distFiles = [
 	path.join(__dirname, "../dist/index.js"),
 	path.join(__dirname, "../dist/index.mjs"),

package/src/index.ts

@@ -5,7 +5,7 @@ export { useRipple as useDOMRipple } from "./hooks/useRipple";
 export { MaterialSymbolsPreconnect } from "./lib/material-symbols-preconnect";
 // Theme — MD3 Dynamic Color
 export type { MD3ColorScheme, ThemeMode } from "./lib/theme-utils";
-export { applyTheme, generateM3Theme } from "./lib/theme-utils";
+export { applyTheme, generateM3Theme, resolveMode } from "./lib/theme-utils";
 // Utils
 export { cn } from "./lib/utils";
 // Types

package/src/lib/theme-utils.ts

@@ -4,7 +4,20 @@ import {
 	themeFromSourceColor,
 } from "@material/material-color-utilities";
 
-export type ThemeMode = "light" | "dark";
+export type ThemeMode = "light" | "dark" | "system";
+
+/**
+ * Resolves the effective color scheme from a ThemeMode.
+ * When mode is "system", reads the OS preference via matchMedia.
+ * Returns "light" as the safe default in SSR environments.
+ */
+export function resolveMode(mode: ThemeMode): "light" | "dark" {
+	if (mode !== "system") return mode;
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches
+		? "dark"
+		: "light";
+}
 
 export interface MD3ColorScheme {
 	primary: string;
@@ -70,7 +83,7 @@ export interface MD3ColorScheme {
  */
 export function generateM3Theme(
 	sourceColorHex: string,
-	mode: ThemeMode = "light",
+	mode: "light" | "dark" = "light",
 ): MD3ColorScheme {
 	const sourceColor = argbFromHex(sourceColorHex);
 	const theme = themeFromSourceColor(sourceColor);
@@ -168,7 +181,8 @@ export function applyTheme(
 	mode: ThemeMode = "light",
 	root: HTMLElement = document.documentElement,
 ): void {
-	const colors = generateM3Theme(sourceColorHex, mode);
+	const resolved = resolveMode(mode);
+	const colors = generateM3Theme(sourceColorHex, resolved);
 
 	for (const [key, value] of Object.entries(colors)) {
 		const kebabKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
@@ -176,5 +190,6 @@ export function applyTheme(
 		root.style.setProperty(`--color-m3-${kebabKey}`, value);
 	}
 
-	root.setAttribute("data-theme", mode);
+	// data-theme is always "light" or "dark" — never "system"
+	root.setAttribute("data-theme", resolved);
 }

package/src/plugin.ts

@@ -0,0 +1,12 @@
+// Re-export the MD3 Tailwind plugin from @bug-on/md3-tailwind.
+// This allows users to reference the plugin directly from @bug-on/md3-react
+// without installing @bug-on/md3-tailwind separately.
+//
+// Usage in CSS (Tailwind v4):
+//   @import "@bug-on/md3-react/index.css";
+//   @plugin "@bug-on/md3-react/plugin";
+//
+// Usage in tailwind.config.ts (Tailwind v3):
+//   import md3Plugin from "@bug-on/md3-react/plugin";
+//   export default { plugins: [md3Plugin] };
+export { default } from "@bug-on/md3-tailwind";

package/src/ui/button.test.tsx

@@ -161,22 +161,20 @@ describe("Button Component", () => {
 		});
 	});
 
-	// ── New: Sentence-case label ───────────────────────────────────────────────
-
-	describe("sentence-case label", () => {
-		it("converts ALL CAPS to sentence-case", () => {
+	describe("label case", () => {
+		it("preserves ALL CAPS", () => {
 			render(<Button>HELLO WORLD</Button>);
-			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+			expect(screen.getByRole("button")).toHaveTextContent("HELLO WORLD");
 		});
 
-		it("converts all-lowercase to sentence-case", () => {
+		it("preserves all-lowercase", () => {
 			render(<Button>hello world</Button>);
-			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+			expect(screen.getByRole("button")).toHaveTextContent("hello world");
 		});
 
-		it("handles mixed case correctly", () => {
+		it("preserves mixed case", () => {
 			render(<Button>hElLo WoRlD</Button>);
-			expect(screen.getByRole("button")).toHaveTextContent("Hello world");
+			expect(screen.getByRole("button")).toHaveTextContent("hElLo WoRlD");
 		});
 	});
 
@@ -215,7 +213,7 @@ describe("Button Component", () => {
 				s.querySelector("[data-testid='test-icon']"),
 			);
 			const labelIndex = spans.findIndex((s) =>
-				s.textContent?.includes("Rtl trailing"),
+				s.textContent?.includes("RTL Trailing"),
 			);
 			// DOM order is still trailing (CSS handles visual flip in RTL via flex)
 			expect(iconIndex).toBeGreaterThan(labelIndex);
@@ -270,6 +268,17 @@ describe("Button Component", () => {
 				"transition-[background-color,color,border-color,box-shadow,opacity,filter]",
 			);
 		});
+
+		it("applies h-full to the label wrapper for vertical alignment", () => {
+			render(
+				<Button asChild>
+					<a href="/test">Aligned Link</a>
+				</Button>,
+			);
+			const link = screen.getByRole("link");
+			const labelWrapper = link.querySelector("span.inline-flex.items-center");
+			expect(labelWrapper).toHaveClass("h-full");
+		});
 	});
 
 	// ── New: loading prop ──────────────────────────────────────────────────────

package/src/ui/button.tsx

@@ -294,10 +294,6 @@ export type ButtonProps = BaseButtonProps &
 
 // ─── Helpers ───────────────────────────────────────────────────────────────────
 
-function toSentenceCase(text: string): string {
-	return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-}
-
 function resolveLabel(
 	children: React.ReactNode,
 	asChild: boolean,
@@ -308,7 +304,7 @@ function resolveLabel(
 		}>;
 		return child.props.children;
 	}
-	return typeof children === "string" ? toSentenceCase(children) : children;
+	return children;
 }
 
 /** Framer Motion-specific props to strip before forwarding to a plain DOM element. */
@@ -550,7 +546,7 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
 				<m.span
 					layout="size"
-					className="inline-flex items-center gap-[inherit]"
+					className="inline-flex items-center h-full gap-[inherit]"
 					transition={SPRING_TRANSITION}
 				>
 					{labelText}

package/src/ui/navigation-rail.tsx

@@ -5,7 +5,10 @@ import { createPortal } from "react-dom";
 import { cn } from "../lib/utils";
 import { Icon } from "./icon";
 import { Ripple, useRippleState } from "./ripple";
-import { SPRING_TRANSITION } from "./shared/constants";
+import {
+	SPRING_TRANSITION,
+	SPRING_TRANSITION_EXPRESSIVE,
+} from "./shared/constants";
 import { TouchTarget } from "./shared/touch-target";
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -137,11 +140,11 @@ function ActivePill({ layoutId, disableInitial = false }: ActivePillProps) {
 		<m.div
 			layoutId={layoutId}
 			className="absolute inset-0 bg-m3-secondary-container pointer-events-none"
-			style={{ borderRadius: 9999, zIndex: 0 }}
-			initial={disableInitial ? false : { opacity: 0 }}
-			animate={{ opacity: 1 }}
-			exit={{ opacity: 0 }}
-			transition={SPRING_TRANSITION}
+			style={{ borderRadius: 9999, zIndex: 0, originX: 0.5, originY: 0.5 }}
+			initial={disableInitial ? false : { opacity: 0, scale: 0.5 }}
+			animate={{ opacity: 1, scale: 1 }}
+			exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.15 } }}
+			transition={SPRING_TRANSITION_EXPRESSIVE}
 		/>
 	);
 }

package/src/ui/shared/constants.ts

@@ -48,6 +48,19 @@ export const SPRING_TRANSITION: Transition = {
 	duration: 0.3,
 } as const;
 
+/**
+ * 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)
+ */
+export const SPRING_TRANSITION_EXPRESSIVE: Transition = {
+	type: "spring",
+	bounce: 0.35,
+	duration: 0.4,
+} as const;
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Icon Span Motion Variants
 // Used for icon/loading indicator swap animation inside FAB and IconButton.

package/src/ui/theme-provider/index.tsx

@@ -9,7 +9,7 @@ import {
 	useMemo,
 	useState,
 } from "react";
-import { applyTheme, type ThemeMode } from "../../lib/theme-utils";
+import { applyTheme, resolveMode, type ThemeMode } from "../../lib/theme-utils";
 import {
 	SnackbarContext,
 	SnackbarHost,
@@ -28,6 +28,8 @@ interface ThemeContextValue {
 	setSourceColor: (color: string) => void;
 	mode: ThemeMode;
 	setMode: (mode: ThemeMode) => void;
+	/** The resolved color scheme actually applied — always "light" or "dark". */
+	effectiveMode: "light" | "dark";
 }
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
@@ -104,7 +106,12 @@ export function MD3ThemeProvider({
 		) as ThemeMode | null;
 
 		if (savedColor) setSourceColor(savedColor);
-		if (savedMode === "light" || savedMode === "dark") setMode(savedMode);
+		if (
+			savedMode === "light" ||
+			savedMode === "dark" ||
+			savedMode === "system"
+		)
+			setMode(savedMode);
 
 		setIsHydrated(true);
 	}, [persistToLocalStorage]);
@@ -120,9 +127,24 @@ export function MD3ThemeProvider({
 		}
 	}, [sourceColor, mode, persistToLocalStorage, isHydrated]);
 
+	// ── System preference subscription ───────────────────────────────────────
+	// When mode is "system", listen for OS-level dark/light changes in real time
+	useEffect(() => {
+		if (mode !== "system" || typeof window === "undefined") return;
+
+		const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		const handleChange = () => applyTheme(sourceColor, "system");
+
+		mediaQuery.addEventListener("change", handleChange);
+		return () => mediaQuery.removeEventListener("change", handleChange);
+	}, [mode, sourceColor]);
+
+	// ── Derived effective mode (no extra state needed) ────────────────────────
+	const effectiveMode = resolveMode(mode);
+
 	const themeValue = useMemo<ThemeContextValue>(
-		() => ({ sourceColor, setSourceColor, mode, setMode }),
-		[sourceColor, mode],
+		() => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
+		[sourceColor, mode, effectiveMode],
 	);
 
 	// ── Typography value ─────────────────────────────────────────────────────
@@ -184,7 +206,10 @@ export function useTheme(): ThemeContextValue {
 	return context;
 }
 
-export function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode"> {
-	const { mode, setMode } = useTheme();
-	return { mode, setMode };
+export function useThemeMode(): Pick<
+	ThemeContextValue,
+	"mode" | "setMode" | "effectiveMode"
+> {
+	const { mode, setMode, effectiveMode } = useTheme();
+	return { mode, setMode, effectiveMode };
 }

package/tsup.config.ts

@@ -2,18 +2,18 @@ import type { Options } from "tsup";
 import { defineConfig } from "tsup";
 
 const config: Options = {
-	entry: ["src/index.ts"],
+	entry: ["src/index.ts", "src/plugin.ts"],
 	format: ["cjs", "esm"],
 	dts: true,
 	clean: false, // Tắt clean để tránh nuke mất typography.css khi Next.js đang khởi động
 	// externalize peer dependencies — user project sẽ cung cấp
-	external: ["react", "react-dom", "motion"],
+	external: ["react", "react-dom", "motion", "tailwindcss"],
 	// Tree-shaking tối đa, không split vì thư viện nhỏ
 	treeshake: true,
 	splitting: false,
 	sourcemap: true,
 	outDir: "dist",
-	// "use client" sẽ được chèn thủ công bằng script phía sau (copy-assets.js)
+	// "use client" được inject sau build bằng copy-assets.js (banner của tsup gây esbuild warning cho library)
 	onSuccess: "node scripts/copy-assets.js",
 };