@bug-on/md3-react 2.0.3 → 3.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,42 @@
+
+
+> @bug-on/md3-react@3.0.1 build /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react
+> tsup
+
+CLI Building entry: src/index.ts, src/plugin.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react/tsup.config.ts
+CLI Target: es2017
+CJS Build start
+ESM Build start
+DTS Build start
+ESM dist/plugin.mjs     119.00 B
+ESM dist/plugin.mjs.map 91.00 B
+ESM dist/index.mjs      481.27 KB
+ESM dist/index.mjs.map  1.11 MB
+ESM ⚡️ Build success in 1434ms
+CJS dist/plugin.js     337.00 B
+CJS dist/plugin.js.map 90.00 B
+CJS dist/index.js      500.12 KB
+CJS dist/index.js.map  1.11 MB
+CJS ⚡️ Build success in 1434ms
+Copying assets to dist...
+✅ Copied src/assets to dist/assets
+✅ Copied typography.css to dist/typography.css
+✅ Bundled colors.css from md3-tokens into index.css
+✅ Bundled shape.css from md3-tokens into index.css
+✅ Built bundled index.css (tokens + component base) to dist/index.css
+✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
+✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
+✅ Generated index.css.d.ts
+✅ Generated typography.css.d.ts
+✅ Generated material-symbols-cdn.css.d.ts
+✅ Generated material-symbols-self-hosted.css.d.ts
+✅ Prepended "use client" to index.js
+✅ Prepended "use client" to index.mjs
+DTS ⚡️ Build success in 5446ms
+DTS dist/plugin.d.ts  48.00 B
+DTS dist/index.d.ts   234.14 KB
+DTS dist/plugin.d.mts 48.00 B
+DTS dist/index.d.mts  234.14 KB

package/CHANGELOG.md

@@ -0,0 +1,69 @@
+# @bug-on/md3-react
+
+## 3.0.1
+
+### Patch Changes
+
+- - **React**: Automatically bundle CSS tokens into `index.css` for easier setup.
+  - **React**: Re-export Tailwind plugin via `@bug-on/md3-react/plugin`.
+  - **React**: Add `@bug-on/md3-tailwind` and `@bug-on/md3-tokens` as direct dependencies.
+  - **Tokens**: Fix build warning when `index.css` is missing in src.
+  - **Tailwind**: Improved compatibility for Tailwind v3 and v4.
+  - **Build**: Optimized build process using native tsup features.
+- Updated dependencies
+  - @bug-on/md3-tailwind@3.0.1
+  - @bug-on/md3-tokens@3.0.1
+
+## 3.0.0
+
+### Major Changes
+
+- e170496: Fix types tokens, tailwind, add menu component ver 1
+
+### Patch Changes
+
+- Fix Menu component to correctly handle and pass the variant and menuVariant props to MenuProvider, ensuring expressive features like shape morphing work as intended.
+- Updated dependencies [e170496]
+  - @bug-on/md3-tokens@3.0.0
+
+## 2.0.3
+
+### Patch Changes
+
+- 86381df: Add Search UI, demo
+
+## 2.0.2
+
+### Patch Changes
+
+- c5ad43d: Added App Bars.
+
+## 2.0.1
+
+### Patch Changes
+
+- 1b6bb5c: Implement Material Design 3 Expressive Sliders and update all documentation to English.
+
+## 2.0.0
+
+### Major Changes
+
+- 039d035: Update docs, readme, optimize lints
+
+### Patch Changes
+
+- Updated dependencies [039d035]
+  - @bug-on/md3-tokens@2.0.0
+
+## 1.0.0
+
+### Major Changes
+
+- 0845e7b: update READMEs with English instructions for3 packages
+
+### Patch Changes
+
+- 4901a01: update READMEs with English instructions.
+- Updated dependencies [4901a01]
+- Updated dependencies [0845e7b]
+  - @bug-on/md3-tokens@1.0.0

package/dist/index.css

@@ -1,3 +1,181 @@
+/* @bug-on/md3-tokens — MD3 System Color Tokens */
+/* MD3 System Color Tokens — Light Theme (Baseline Scheme)
+ *
+ * Mapping: PaletteTokens → ColorLightTokens → CSS variable
+ * Reference: ColorLightTokens.kt, ColorDarkTokens.kt, PaletteTokens.kt
+ */
+:root {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #6750a4; /* Primary40  */
+	--md-sys-color-on-primary: #ffffff; /* Primary100 */
+	--md-sys-color-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-on-primary-container: #21005d; /* Primary10  */
+	--md-sys-color-inverse-primary: #d0bcff; /* Primary80  */
+
+	/* ── Primary Fixed (stable across light/dark) ────────────────────────── */
+	--md-sys-color-primary-fixed: #eaddff; /* Primary90 */
+	--md-sys-color-primary-fixed-dim: #d0bcff; /* Primary80 */
+	--md-sys-color-on-primary-fixed: #21005d; /* Primary10 */
+	--md-sys-color-on-primary-fixed-variant: #4f378b; /* Primary30 */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #625b71; /* Secondary40  */
+	--md-sys-color-on-secondary: #ffffff; /* Secondary100 */
+	--md-sys-color-secondary-container: #e8def8; /* Secondary90  */
+	--md-sys-color-on-secondary-container: #1d192b; /* Secondary10  */
+
+	/* ── Secondary Fixed (stable across light/dark) ──────────────────────── */
+	--md-sys-color-secondary-fixed: #e8def8; /* Secondary90 */
+	--md-sys-color-secondary-fixed-dim: #ccc2dc; /* Secondary80 */
+	--md-sys-color-on-secondary-fixed: #1d192b; /* Secondary10 */
+	--md-sys-color-on-secondary-fixed-variant: #4a4458; /* Secondary30 */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #7d5260; /* Tertiary40  */
+	--md-sys-color-on-tertiary: #ffffff; /* Tertiary100 */
+	--md-sys-color-tertiary-container: #ffd8e4; /* Tertiary90  */
+	--md-sys-color-on-tertiary-container: #31111d; /* Tertiary10  */
+
+	/* ── Tertiary Fixed (stable across light/dark) ───────────────────────── */
+	--md-sys-color-tertiary-fixed: #ffd8e4; /* Tertiary90 */
+	--md-sys-color-tertiary-fixed-dim: #efb8c8; /* Tertiary80 */
+	--md-sys-color-on-tertiary-fixed: #31111d; /* Tertiary10 */
+	--md-sys-color-on-tertiary-fixed-variant: #633b48; /* Tertiary30 */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #b3261e; /* Error40  */
+	--md-sys-color-on-error: #ffffff; /* Error100 */
+	--md-sys-color-error-container: #f9dedc; /* Error90  */
+	--md-sys-color-on-error-container: #410e0b; /* Error10  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #fef7ff; /* Neutral98 */
+	--md-sys-color-on-surface: #1c1b1f; /* Neutral10 */
+	--md-sys-color-surface-variant: #e7e0eb; /* NeutralVariant90 */
+	--md-sys-color-on-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-surface-dim: #ded8e1; /* Neutral87 */
+	--md-sys-color-surface-bright: #fef7ff; /* Neutral98 */
+	--md-sys-color-surface-tint: #6750a4; /* = primary */
+	--md-sys-color-surface-container-lowest: #ffffff; /* Neutral100 */
+	--md-sys-color-surface-container-low: #f7f2fa; /* Neutral96  */
+	--md-sys-color-surface-container: #f3edf7; /* Neutral94  */
+	--md-sys-color-surface-container-high: #ece6f0; /* Neutral92  */
+	--md-sys-color-surface-container-highest: #e6e0e9; /* Neutral90  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #313033; /* Neutral20 */
+	--md-sys-color-inverse-on-surface: #f4eff4; /* Neutral95 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #fef7ff; /* Neutral98 — same as surface */
+	--md-sys-color-on-background: #1c1b1f; /* Neutral10  */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #79747e; /* NeutralVariant50 */
+	--md-sys-color-outline-variant: #cac4d0; /* NeutralVariant80 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000; /* Neutral0 */
+	--md-sys-color-shadow: #000000; /* Neutral0 */
+
+	/* ── Indicator tokens — Loading & Progress ───────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+/* Dark Theme overrides
+ * Mapping: PaletteTokens → ColorDarkTokens → CSS variable
+ */
+[data-theme="dark"],
+.dark {
+	/* ── Primary ─────────────────────────────────────────────────────────── */
+	--md-sys-color-primary: #d0bcff; /* Primary80  */
+	--md-sys-color-on-primary: #381e72; /* Primary20  */
+	--md-sys-color-primary-container: #4f378b; /* Primary30  */
+	--md-sys-color-on-primary-container: #eaddff; /* Primary90  */
+	--md-sys-color-inverse-primary: #6750a4; /* Primary40  */
+
+	/* ── Secondary ───────────────────────────────────────────────────────── */
+	--md-sys-color-secondary: #ccc2dc; /* Secondary80  */
+	--md-sys-color-on-secondary: #332d41; /* Secondary20  */
+	--md-sys-color-secondary-container: #4a4458; /* Secondary30  */
+	--md-sys-color-on-secondary-container: #e8def8; /* Secondary90  */
+
+	/* ── Tertiary ────────────────────────────────────────────────────────── */
+	--md-sys-color-tertiary: #efb8c8; /* Tertiary80  */
+	--md-sys-color-on-tertiary: #492532; /* Tertiary20  */
+	--md-sys-color-tertiary-container: #633b48; /* Tertiary30  */
+	--md-sys-color-on-tertiary-container: #ffd8e4; /* Tertiary90  */
+
+	/* ── Error ───────────────────────────────────────────────────────────── */
+	--md-sys-color-error: #f2b8b5; /* Error80  */
+	--md-sys-color-on-error: #601410; /* Error20  */
+	--md-sys-color-error-container: #8c1d18; /* Error30  */
+	--md-sys-color-on-error-container: #f9dedc; /* Error90  */
+
+	/* ── Surface ─────────────────────────────────────────────────────────── */
+	--md-sys-color-surface: #141218; /* Neutral6   */
+	--md-sys-color-on-surface: #e6e1e5; /* Neutral90  */
+	--md-sys-color-surface-variant: #49454f; /* NeutralVariant30 */
+	--md-sys-color-on-surface-variant: #cac4d0; /* NeutralVariant80 */
+	--md-sys-color-surface-dim: #141218; /* Neutral6  */
+	--md-sys-color-surface-bright: #3b383e; /* Neutral24 */
+	--md-sys-color-surface-tint: #d0bcff; /* = primary (dark) */
+	--md-sys-color-surface-container-lowest: #0f0d13; /* Neutral4   */
+	--md-sys-color-surface-container-low: #1d1b20; /* Neutral10  */
+	--md-sys-color-surface-container: #211f26; /* Neutral12  */
+	--md-sys-color-surface-container-high: #2b2930; /* Neutral17  */
+	--md-sys-color-surface-container-highest: #36343b; /* Neutral22  */
+
+	/* ── Inverse Surface ─────────────────────────────────────────────────── */
+	--md-sys-color-inverse-surface: #e6e1e5; /* Neutral90 */
+	--md-sys-color-inverse-on-surface: #313033; /* Neutral20 */
+
+	/* ── Background ──────────────────────────────────────────────────────── */
+	--md-sys-color-background: #141218; /* Neutral6 — same as dark surface */
+	--md-sys-color-on-background: #e6e1e5; /* Neutral90 */
+
+	/* ── Outline ─────────────────────────────────────────────────────────── */
+	--md-sys-color-outline: #938f99; /* NeutralVariant60 */
+	--md-sys-color-outline-variant: #49454f; /* NeutralVariant30 */
+
+	/* ── Utility ─────────────────────────────────────────────────────────── */
+	--md-sys-color-scrim: #000000;
+	--md-sys-color-shadow: #000000;
+
+	/* ── Indicator tokens — Dark ─────────────────────────────────────────── */
+	--md-sys-color-indicator-active: var(--md-sys-color-primary);
+	--md-sys-color-indicator-container: var(--md-sys-color-secondary-container);
+	--md-sys-color-indicator-contained-active: var(
+		--md-sys-color-on-primary-container
+	);
+	--md-sys-color-indicator-contained-container: var(
+		--md-sys-color-primary-container
+	);
+	--md-sys-color-indicator-track: var(--md-sys-color-surface-variant);
+	--md-sys-color-indicator-stop: var(--md-sys-color-primary);
+}
+
+:root {
+	--md-sys-shape-corner-none: 0px;
+	--md-sys-shape-corner-extra-small: 4px;
+	--md-sys-shape-corner-small: 8px;
+	--md-sys-shape-corner-medium: 12px;
+	--md-sys-shape-corner-large: 16px;
+	--md-sys-shape-corner-extra-large: 28px;
+	--md-sys-shape-corner-full: 9999px;
+}
+
+
+/* @bug-on/md3-react — Component Base Reset */
 /* @bug-on/md3-react - Base Reset Styles */
 
 /**

package/dist/index.css.d.ts

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