@bug-on/md3-react 3.0.0 → 3.0.2

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.2",
   "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
@@ -196,6 +196,14 @@ export {
 	VerticalMenuGroup,
 	VIBRANT_COLORS,
 } from "./ui/menu";
+// Navigation Bar
+export type {
+	NavigationBarItemProps,
+	NavigationBarItemLayout,
+	NavigationBarProps,
+	NavigationBarVariant,
+} from "./ui/navigation-bar";
+export { NavigationBar, NavigationBarItem } from "./ui/navigation-bar";
 // Navigation Rail
 export type {
 	NavigationRailItemProps,

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-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]");
+	});
+});