@bug-on/md3-react 2.0.3 → 3.0.1

package/dist/material-symbols-cdn.css.d.ts

@@ -0,0 +1,2 @@
+// CSS module — no runtime types
+export {};

package/dist/material-symbols-self-hosted.css.d.ts

@@ -0,0 +1,2 @@
+// CSS module — no runtime types
+export {};

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/dist/typography.css.d.ts

@@ -0,0 +1,2 @@
+// CSS module — no runtime types
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/md3-react",
-  "version": "2.0.3",
+  "version": "3.0.1",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug Ổn",
   "license": "MIT",
@@ -27,23 +27,32 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./typography.css": "./dist/typography.css",
-    "./index.css": "./dist/index.css",
-    "./material-symbols-cdn.css": "./dist/material-symbols-cdn.css",
-    "./material-symbols-self-hosted.css": "./dist/material-symbols-self-hosted.css"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
+    "./typography.css": {
+      "types": "./dist/typography.css.d.ts",
+      "default": "./dist/typography.css"
+    },
+    "./index.css": {
+      "types": "./dist/index.css.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./material-symbols-cdn.css": {
+      "types": "./dist/material-symbols-cdn.css.d.ts",
+      "default": "./dist/material-symbols-cdn.css"
+    },
+    "./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": {
-    "motion": ">=12.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "motion": ">=12.0.0"
   },
   "peerDependenciesMeta": {
     "motion": {
@@ -52,6 +61,7 @@
   },
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -59,7 +69,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/md3-tokens": "2.0.0"
+    "@bug-on/md3-tokens": "3.0.1",
+    "@bug-on/md3-tailwind": "3.0.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -75,10 +86,8 @@
     "vitest": "^4.1.0"
   },
   "scripts": {
-    "build": "tsup && tsc -p tsconfig.build.json",
+    "build": "tsup",
     "dev": "tsup --watch",
-    "test": "vitest run",
-    "lint": "tsc --noEmit",
     "clean": "rm -rf dist"
   }
 }

package/scripts/copy-assets.js

@@ -0,0 +1,115 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const srcAssets = path.join(__dirname, "../src/assets");
+const distAssets = path.join(__dirname, "../dist/assets");
+const srcCss = path.join(__dirname, "../src/ui/typography/typography.css");
+const distCss = path.join(__dirname, "../dist/typography.css");
+const srcIndexCss = path.join(__dirname, "../src/index.css");
+const distIndexCss = path.join(__dirname, "../dist/index.css");
+
+console.log("Copying assets to dist...");
+
+if (fs.existsSync(srcAssets)) {
+	fs.cpSync(srcAssets, distAssets, { recursive: true });
+	console.log("✅ Copied src/assets to dist/assets");
+}
+
+if (fs.existsSync(srcCss)) {
+	let cssContent = fs.readFileSync(srcCss, "utf-8");
+	// Update font URL to be relative to the dist root
+	cssContent = cssContent.replace(
+		/url\(['"']?\.\.\/\.\.\/assets\/fonts\/GoogleSansFlex-VariableFont\.woff2['"']?\)/g,
+		"url('./assets/fonts/GoogleSansFlex-VariableFont.woff2')",
+	);
+	fs.writeFileSync(distCss, cssContent);
+	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)) {
+	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",
+	"material-symbols-self-hosted.css",
+];
+
+for (const file of cssVariants) {
+	const srcPath = path.join(__dirname, `../src/assets/${file}`);
+	const distPath = path.join(__dirname, `../dist/${file}`);
+	if (fs.existsSync(srcPath)) {
+		fs.copyFileSync(srcPath, distPath);
+		console.log(`✅ Copied ${file} to dist/${file}`);
+	}
+}
+
+// Generate .d.ts stubs for each CSS sub-path export
+// Satisfies the `types` field in exports — prevents "Cannot find module"
+// errors in TypeScript strict mode projects.
+const cssStubs = [
+	"index.css.d.ts",
+	"typography.css.d.ts",
+	"material-symbols-cdn.css.d.ts",
+	"material-symbols-self-hosted.css.d.ts",
+];
+
+for (const stub of cssStubs) {
+	const distPath = path.join(__dirname, `../dist/${stub}`);
+	fs.writeFileSync(distPath, "// CSS module — no runtime types\nexport {};\n");
+	console.log(`✅ Generated ${stub}`);
+}
+
+// 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"),
+];
+
+for (const file of distFiles) {
+	if (fs.existsSync(file)) {
+		const content = fs.readFileSync(file, "utf-8");
+		if (
+			!content.startsWith('"use client";') &&
+			!content.startsWith("'use client';")
+		) {
+			fs.writeFileSync(file, `"use client";\n${content}`);
+			console.log(`✅ Prepended "use client" to ${path.basename(file)}`);
+		}
+	}
+}

package/src/assets/loading-indicator.svg

@@ -0,0 +1,19 @@
+<svg width="100%" height="100%" viewBox="4 4 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#D0BCFF">
+    <animate attributeName="d" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1" values="M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z;
+M20.3 8.6 21.1 8 22 7.6 23 7.3 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.2 15.5 37.6 16.5 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8 17.6 9.8 18.6 9.6 19.5 9.2Z;
+M18.6 9.6 19.5 9.2 20.3 8.6 21.1 8 22 7.6 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.6 16.4 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8Z;
+M18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.2 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 33.7 13.1 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.5 30.5 39.5 30 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7.1 21.7 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8 15.4 12.3 16.2 11.7 17 11.1 17.8 10.5Z;
+M15.4 12.3 16.2 11.7 17 11.1 17.8 10.5 18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.3 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.4 30.5 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8Z;
+M17 12.8 17.7 12.1 18.5 11.5 19.3 10.9 20.1 10.5 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 25 9 26 9 27 9 27.6 9.1 28 9.1 28.9 9.3 29.9 9.6 30.9 9.9 31.8 10.3 32.6 10.8 33.5 11.3 34.3 11.9 34.6 12.2 35 12.6 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.6 18.5 38.6 18.7 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.3 38.2 26.4 37.8 27.3 37.4 28.2 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.8 32.5 33.5 32.8 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.2 37.3 27.9 37.5 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 22.5 39 21.5 39 20.5 38.9 20.4 38.9 19.5 38.8 18.6 38.6 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.4 35.8 13.3 35.8 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.6 30 9.4 29.3 9.3 29 9.1 28 9 27 9 26 9 25 9.2 24 9.4 23 9.6 22.1 9.8 21.7 10 21.1 10.4 20.2 10.9 19.4 11.4 18.5 12.1 17.8 12.7 17 13.4 16.3 14.2 15.6 14.2 15.5 14.9 14.9 15.6 14.2 16.3 13.5Z;
+M33.5 11.3 34.3 11.9 35 12.6 35.3 12.8 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.3 17.7 38.6 18.5 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.4 37.8 27.3 37.4 28.2 36.9 28.9 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.5 32.8 33.1 33.2 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.7 37 28.2 37.3 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 23.3 38.9 22.5 39 21.5 39 20.5 38.9 19.5 38.8 18.6 38.6 17.6 38.3 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.3 35.8 12.7 35.2 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.7 30.3 9.6 29.9 9.3 29 9.1 28 9 27 9 26 9 25 9.1 24.5 9.2 24 9.4 23 9.6 22.1 10 21.1 10.4 20.2 10.9 19.4 11.1 19.1 11.5 18.5 12.1 17.7 12.7 17 13.5 16.3 14.2 15.6 14.9 14.9 14.9 14.8 15.6 14.2 16.3 13.5 17 12.8 17.7 12.1 18.5 11.5 19.3 11 19.3 10.9 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 24.7 9.1 25 9 26 9 27 9 28 9.1 28.9 9.3 29.9 9.6 30.4 9.7 30.9 9.9 31.8 10.3 32.6 10.8Z;
+M33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.8 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.6 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7 27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1Z;
+M27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1 33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.9 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.5 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7Z;
+M27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 34.8 11.3 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.9 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.4 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35 36 35.7 35.3 36.4 34.4 37 34.1 37.2 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.6 10 30.1 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10 16.6 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 20.9 11 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11Z;
+M36 35.7 35.3 36.4 34.4 37 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.2 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11 27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.8 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35Z;
+M32.1 32.1 31.4 32.8 30.7 33.5 29.9 34.1 29.1 34.7 28.3 35.3 27.6 35.8 27.5 35.8 26.6 36.4 25.8 36.8 24.9 37.3 24 37.7 23.1 38 22.1 38.3 21.2 38.6 20.2 38.8 19.2 38.9 18.2 39 17.2 39 16.6 38.9 16.3 38.9 15.3 38.7 14.3 38.4 13.4 38 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10 34.6 9.6 33.7 9.3 32.7 9.1 31.7 9.1 31.4 9 30.8 9 29.8 9.1 28.8 9.2 27.8 9.4 26.8 9.7 25.9 10 24.9 10.3 24 10.7 23.1 11.2 22.2 11.6 21.4 12.2 20.5 12.2 20.4 12.7 19.7 13.3 18.9 13.9 18.1 14.5 17.3 15.2 16.6 15.9 15.9 16.6 15.2 17.3 14.5 18.1 13.9 18.9 13.3 19.7 12.7 20.4 12.2 20.5 12.2 21.4 11.6 22.2 11.2 23.1 10.7 24 10.3 24.9 10 25.9 9.7 26.8 9.4 27.8 9.2 28.8 9.1 29.8 9 30.8 9 31.4 9.1 31.7 9.1 32.7 9.3 33.7 9.6 34.6 10 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 38 13.4 38.4 14.3 38.7 15.3 38.9 16.3 38.9 16.6 39 17.2 39 18.2 38.9 19.2 38.8 20.2 38.6 21.2 38.3 22.1 38 23.1 37.7 24 37.3 24.9 36.8 25.8 36.4 26.6 35.8 27.5 35.8 27.6 35.3 28.3 34.7 29.1 34.1 29.9 33.5 30.7 32.8 31.4Z;
+M24.3 10.2 24.9 10 25.9 9.7 26.8 9.4 27.1 9.4 27.8 9.2 28.8 9.1 29.8 9 29.9 9 30.8 9 31.7 9.1 32.7 9.3 32.8 9.3 33.7 9.6 34.6 10 35.5 10.5 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 37.5 12.5 38 13.4 38.4 14.3 38.7 15.2 38.7 15.3 38.9 16.3 39 17.2 39 18.1 39 18.2 38.9 19.2 38.8 20.2 38.6 20.9 38.6 21.2 38.3 22.1 38 23.1 37.8 23.7 37.7 24 37.3 24.9 36.8 25.8 36.5 26.4 36.4 26.6 35.8 27.5 35.3 28.3 35 28.8 34.7 29.1 34.1 29.9 33.5 30.7 33.1 31.1 32.8 31.4 32.1 32.1 31.4 32.8 31.1 33.1 30.7 33.5 29.9 34.1 29.1 34.7 28.8 35 28.3 35.3 27.5 35.8 26.6 36.4 26.4 36.5 25.8 36.8 24.9 37.3 24 37.7 23.7 37.8 23.1 38 22.1 38.3 21.2 38.6 20.9 38.6 20.2 38.8 19.2 38.9 18.2 39 18.1 39 17.2 39 16.3 38.9 15.3 38.7 15.2 38.7 14.3 38.4 13.4 38 12.5 37.5 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10.5 35.5 10 34.6 9.6 33.7 9.3 32.8 9.3 32.7 9.1 31.7 9 30.8 9 29.9 9 29.8 9.1 28.8 9.2 27.8 9.4 27.1 9.4 26.8 9.7 25.9 10 24.9 10.2 24.3 10.3 24 10.7 23.1 11.2 22.2 11.5 21.6 11.6 21.4 12.2 20.5 12.7 19.7 13 19.2 13.3 18.9 13.9 18.1 14.5 17.3 14.9 16.9 15.2 16.6 15.9 15.9 16.6 15.2 16.9 14.9 17.3 14.5 18.1 13.9 18.9 13.3 19.2 13 19.7 12.7 20.5 12.2 21.4 11.6 21.6 11.5 22.2 11.2 23.1 10.7 24 10.3Z;
+M22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.3 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.4 38.9 26.2 39.6 27 40.2 27.7 40.5 28.6 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.8 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.6 9.1 21.8 8.4 21 7.8 20.3 7.5 19.4 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.2 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1 20.9 10.4 21.4 9.5 21.9 8.7Z"></animate>
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"></animateTransform>
+  </path>
+</svg>

package/src/assets/material-symbols-cdn.css

@@ -0,0 +1,65 @@
+/*
+ * Material Symbols — CDN version (Google Fonts)
+ *
+ * USAGE IN APP'S HTML <head>:
+ * Add preconnect hints BEFORE this CSS loads for fastest performance:
+ *
+ *   <link rel="preconnect" href="https://fonts.googleapis.com" />
+ *   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+ *
+ * Then import this CSS:
+ *   import '@bug-on/md3-react/material-symbols-cdn.css'
+ *
+ * WHY TWO preconnect?
+ * Google Fonts serves the CSS stylesheet from fonts.googleapis.com
+ * but the actual .woff2 font files come from fonts.gstatic.com (different origin).
+ * The crossorigin attribute is required for font files (CORS request).
+ *
+ * FONT-DISPLAY NOTE for icon fonts:
+ * We use font-display: block (NOT swap) because:
+ * - swap would briefly show raw text like "arrow_forward" before icon loads = jarring layout shift
+ * - block hides text during load period (max 3s), then shows icon = cleaner UX
+ * - optional is NOT suitable: if font misses the load window, icons never appear
+ */
+
+/*
+ * INSTRUCTION:
+ * Use the <MaterialSymbolsPreconnect /> component to load the actual Google Fonts CSS!
+ * 
+ * We NO LONGER use @import url(...) here because CSS bundlers (like Next.js/Webpack)
+ * often merge global CSS files and push @import statements below regular CSS rules.
+ * According to CSS spec, any @import MUST be at the very top, so it breaks randomly.
+ * Loading via `<link rel="stylesheet">` (handled by MaterialSymbolsPreconnect) is fully robust.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * BASE ICON STYLES
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * This class ensures that Material Symbols render correctly as ligatures
+ * across all browsers and prevents common layout issues.
+ */
+.md-icon {
+	font-family: inherit; /* Set dynamically by the Icon component */
+	font-weight: normal;
+	font-style: normal;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	line-height: normal;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+
+	/* Enable ligature rendering support for modern browsers */
+	font-feature-settings: "liga";
+
+	/* Improved rendering quality */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}

package/src/assets/material-symbols-self-hosted.css

@@ -0,0 +1,90 @@
+/*
+ * Material Symbols — Self-Hosted version
+ *
+ * SETUP STEPS:
+ *
+ * Step 1 — Download font files
+ * Truy cập: https://github.com/google/material-design-icons/tree/master/variablefont
+ * Download file: MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
+ * (và Rounded / Sharp nếu cần)
+ *
+ * Step 2 — Place font files in your app
+ * Recommended location: public/fonts/ hoặc src/assets/fonts/
+ * Example: public/fonts/MaterialSymbolsOutlined.woff2
+ *
+ * Step 3 — Copy và điều chỉnh @font-face block bên dưới
+ * Thay đổi src url() để trỏ đúng đường dẫn trong project của bạn
+ *
+ * Step 4 — Import file này:
+ *   import '@bug-on/md3-react/material-symbols-self-hosted.css'
+ *
+ * PERFORMANCE NOTES:
+ * - Self-hosting tốt hơn CDN khi bạn dùng CDN + HTTP/2 cho static assets
+ * - Nếu không có CDN, Google Fonts CDN có thể nhanh hơn do cache sharing
+ * - Dùng font-display: block cho icon fonts (xem lý do ở file CDN)
+ * - WOFF2 là format duy nhất cần thiết (100% modern browser support, Brotli compression)
+ * - Không cần WOFF fallback nữa
+ *
+ * SUBSETTING (QUAN TRỌNG để giảm file size):
+ * Full variable font ~295 KB. Sau khi subset còn ~1-2 KB cho vài chục icons.
+ * Dùng tool: https://everythingfonts.com/subsetter
+ * Hoặc dùng Google Fonts text parameter để subset trên CDN:
+ *   ?family=Material+Symbols+Outlined&text=home%20search%20settings
+ *
+ * GDPR NOTE:
+ * Self-hosting loại bỏ việc gửi user IP đến Google servers,
+ * giải quyết GDPR compliance requirement.
+ */
+
+@font-face {
+	font-family: "Material Symbols Outlined";
+	font-style: normal;
+	/* Khai báo full axis range để browser biết đây là variable font */
+	font-weight: 100 700;
+	/* font-display: block là bắt buộc cho icon fonts:
+   * - Tránh render text thô "arrow_forward" thay vì icon
+   * - Max 3s block, sau đó icon xuất hiện
+   * Tham khảo: https://web.dev/articles/font-best-practices#icon_fonts */
+	font-display: block;
+	src: url("/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
+		format("woff2");
+	/* unicode-range: chỉ load font khi page chứa ký tự trong range này.
+   * Material Symbols dùng PUA (Private Use Area) cho ligatures. */
+}
+
+/*
+ * Rounded variants and Sharp variants are not included by default to save space.
+ * You can declare them similarly if you download the respective woff2 files.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * BASE ICON STYLES
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * This class ensures that Material Symbols render correctly as ligatures
+ * across all browsers and prevents common layout issues.
+ */
+.md-icon {
+	font-family: inherit; /* Set dynamically by the Icon component */
+	font-weight: normal;
+	font-style: normal;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	line-height: normal;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+
+	/* Enable ligature rendering support for modern browsers */
+	font-feature-settings: "liga";
+
+	/* Improved rendering quality */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}

package/src/css.d.ts

@@ -0,0 +1,20 @@
+// CSS module type declarations for @bug-on/md3-react sub-path imports
+declare module "@bug-on/md3-react/index.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-react/typography.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-react/material-symbols-cdn.css" {
+	const styles: string;
+	export default styles;
+}
+
+declare module "@bug-on/md3-react/material-symbols-self-hosted.css" {
+	const styles: string;
+	export default styles;
+}

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Hook to detect clicks outside of a specified element.
+ *
+ * @param handler - Callback function to execute when a click outside occurs.
+ * @param enabled - Whether the listener is active.
+ * @returns A RefObject to be attached to the target element.
+ */
+export function useClickOutside<T extends HTMLElement>(
+	handler: () => void,
+	enabled = true,
+) {
+	const ref = useRef<T>(null);
+
+	useEffect(() => {
+		if (!enabled) return;
+
+		const listener = (event: MouseEvent | TouchEvent) => {
+			const el = ref.current;
+			if (!el || el.contains(event.target as Node)) {
+				return;
+			}
+			handler();
+		};
+
+		document.addEventListener("mousedown", listener);
+		document.addEventListener("touchstart", listener);
+
+		return () => {
+			document.removeEventListener("mousedown", listener);
+			document.removeEventListener("touchstart", listener);
+		};
+	}, [handler, enabled]);
+
+	return ref;
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * useMediaQuery — Responsive hook chuẩn SSR-safe
+ *
+ * Tránh hydration mismatch bằng cách khởi tạo với `false`.
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery('(max-width: 768px)');
+ * ```
+ */
+export function useMediaQuery(query: string): boolean {
+	const [matches, setMatches] = useState(false);
+
+	useEffect(() => {
+		const mql = window.matchMedia(query);
+		const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+		setMatches(mql.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, [query]);
+
+	return matches;
+}

package/src/hooks/useRipple.ts

@@ -0,0 +1,88 @@
+import { useCallback, useRef } from "react";
+
+export interface RippleOptions {
+	/** Thời gian hiệu ứng ripple (ms). Mặc định: 600 */
+	duration?: number;
+	/** Màu ripple. Mặc định: 'currentColor' */
+	color?: string;
+	/** Opacity. Mặc định: 0.12 (chuẩn MD3) */
+	opacity?: number;
+	/** Tắt ripple (ví dụ khi disabled) */
+	disabled?: boolean;
+}
+
+/**
+ * useRipple — Material Design 3 Expressive Ripple Effect
+ *
+ * Hook thuần DOM, không phụ thuộc thư viện animation ngoài.
+ * Chú ý: Yêu cầu element có `position: relative` và `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * const { rippleRef, onPointerDown } = useRipple();
+ * <button ref={rippleRef} onPointerDown={onPointerDown}>Click me</button>
+ * ```
+ */
+export function useRipple<T extends HTMLElement = HTMLElement>(
+	options: RippleOptions = {},
+) {
+	const {
+		duration = 600,
+		color = "currentColor",
+		opacity = 0.12,
+		disabled = false,
+	} = options;
+	const ref = useRef<T>(null);
+
+	const onPointerDown = useCallback(
+		(event: React.PointerEvent<T>) => {
+			if (disabled || !ref.current) return;
+
+			const el = ref.current;
+			const rect = el.getBoundingClientRect();
+
+			const size = Math.max(rect.width, rect.height) * 2;
+			const x = event.clientX - rect.left - size / 2;
+			const y = event.clientY - rect.top - size / 2;
+
+			const ripple = document.createElement("span");
+			ripple.setAttribute("aria-hidden", "true");
+
+			Object.assign(ripple.style, {
+				position: "absolute",
+				borderRadius: "50%",
+				pointerEvents: "none",
+				width: `${size}px`,
+				height: `${size}px`,
+				left: `${x}px`,
+				top: `${y}px`,
+				background: color,
+				opacity: String(opacity),
+				transform: "scale(0)",
+				transition: `transform ${duration}ms cubic-bezier(0.2, 0, 0, 1), opacity ${duration * 0.6}ms ease-out`,
+			});
+
+			el.appendChild(ripple);
+
+			// Frame sau để trigger animation
+			requestAnimationFrame(() => {
+				ripple.style.transform = "scale(1)";
+			});
+
+			const cleanup = () => {
+				ripple.style.opacity = "0";
+				setTimeout(() => {
+					if (el.contains(ripple)) el.removeChild(ripple);
+				}, duration * 0.6);
+				el.removeEventListener("pointerup", cleanup);
+				el.removeEventListener("pointerleave", cleanup);
+			};
+
+			el.addEventListener("pointerup", cleanup, { once: true });
+			el.addEventListener("pointerleave", cleanup, { once: true });
+		},
+		[disabled, duration, color, opacity],
+	);
+
+	return { rippleRef: ref, onPointerDown };
+}

package/src/index.css

@@ -0,0 +1,23 @@
+/* @bug-on/md3-react - Base Reset Styles */
+
+/**
+ * Hide default browser UI elements that conflict with MD3 custom UI.
+ * - Hide search clear/decoration buttons in WebKit/Blink (Chrome, Safari, Edge).
+ * - Hide IE/Edge specific clear and reveal (password) buttons.
+ */
+
+/* Hide default search clear button and related decorations */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+	-webkit-appearance: none;
+}
+
+/* Hide IE/Edge clear and reveal (password toggle) buttons */
+input::-ms-clear,
+input::-ms-reveal {
+	display: none;
+	width: 0;
+	height: 0;
+}