@bug-on/md3-react 3.0.2 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/.turbo/turbo-build.log +12 -11
  2. package/dist/index.css +107 -0
  3. package/dist/index.d.mts +1426 -1039
  4. package/dist/index.d.ts +1426 -1039
  5. package/dist/index.js +3830 -2820
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +3818 -2822
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +11 -6
  10. package/scripts/copy-assets.js +113 -8
  11. package/src/index.ts +59 -19
  12. package/src/test/button.test.tsx +1 -1
  13. package/src/ui/app-bar/app-bar.tokens.ts +5 -24
  14. package/src/ui/badge.tsx +2 -1
  15. package/src/ui/buttons/button/button-tokens.ts +118 -0
  16. package/src/ui/{button.test.tsx → buttons/button/button.test.tsx} +0 -21
  17. package/src/ui/buttons/button/button.tsx +381 -0
  18. package/src/ui/buttons/button/index.ts +3 -0
  19. package/src/ui/buttons/button/types.ts +90 -0
  20. package/src/ui/buttons/button-group/button-group-defaults.ts +95 -0
  21. package/src/ui/buttons/button-group/button-group-tokens.ts +20 -0
  22. package/src/ui/{button-group.test.tsx → buttons/button-group/button-group.test.tsx} +9 -10
  23. package/src/ui/buttons/button-group/button-group.tsx +699 -0
  24. package/src/ui/buttons/button-group/index.ts +8 -0
  25. package/src/ui/buttons/button-group/types.ts +77 -0
  26. package/src/ui/{fab.tsx → buttons/fabs/fab/fab.tsx} +6 -6
  27. package/src/ui/buttons/fabs/fab/index.ts +1 -0
  28. package/src/ui/{fab-menu.tsx → buttons/fabs/fab-menu/fab-menu.tsx} +7 -4
  29. package/src/ui/buttons/fabs/fab-menu/index.ts +1 -0
  30. package/src/ui/buttons/fabs/index.ts +2 -0
  31. package/src/ui/{icon-button.tsx → buttons/icon-button/icon-button.tsx} +6 -6
  32. package/src/ui/buttons/icon-button/index.ts +1 -0
  33. package/src/ui/buttons/index.ts +4 -0
  34. package/src/ui/code-block.tsx +1 -1
  35. package/src/ui/dialog.tsx +4 -7
  36. package/src/ui/drawer.tsx +4 -7
  37. package/src/ui/menu/menu-animations.ts +14 -20
  38. package/src/ui/menu/menu-tokens.ts +7 -5
  39. package/src/ui/menu/menu.test.tsx +9 -4
  40. package/src/ui/navigation-bar.tsx +20 -4
  41. package/src/ui/navigation-rail.tsx +17 -7
  42. package/src/ui/search/search-view-fullscreen.tsx +1 -1
  43. package/src/ui/search/search.tokens.ts +9 -43
  44. package/src/ui/search/trailing-action.tsx +1 -1
  45. package/src/ui/shared/constants.ts +25 -27
  46. package/src/ui/shared/motion-tokens.ts +238 -0
  47. package/src/ui/snackbar/snackbar.tsx +4 -6
  48. package/src/ui/switch/switch.tsx +12 -18
  49. package/src/ui/text-field/text-field.tokens.ts +12 -12
  50. package/src/ui/text-field/text-field.tsx +31 -19
  51. package/src/ui/theme-provider/index.tsx +1 -5
  52. package/src/ui/toc.tsx +1 -1
  53. package/src/ui/toolbar/__snapshots__/bottom-docked-toolbar.test.tsx.snap +51 -0
  54. package/src/ui/toolbar/__snapshots__/floating-toolbar-with-fab.test.tsx.snap +113 -0
  55. package/src/ui/toolbar/__snapshots__/floating-toolbar.test.tsx.snap +169 -0
  56. package/src/ui/toolbar/bottom-docked-toolbar.test.tsx +114 -0
  57. package/src/ui/toolbar/docked-toolbar.tsx +186 -0
  58. package/src/ui/toolbar/floating-toolbar-with-fab.test.tsx +139 -0
  59. package/src/ui/toolbar/floating-toolbar-with-fab.tsx +199 -0
  60. package/src/ui/toolbar/floating-toolbar.test.tsx +230 -0
  61. package/src/ui/toolbar/floating-toolbar.tsx +344 -0
  62. package/src/ui/toolbar/index.ts +35 -0
  63. package/src/ui/toolbar/toolbar-colors.ts +37 -0
  64. package/src/ui/toolbar/toolbar-context.tsx +13 -0
  65. package/src/ui/toolbar/toolbar-divider.test.tsx +54 -0
  66. package/src/ui/toolbar/toolbar-divider.tsx +73 -0
  67. package/src/ui/toolbar/toolbar-icon-button.test.tsx +68 -0
  68. package/src/ui/toolbar/toolbar-icon-button.tsx +136 -0
  69. package/src/ui/toolbar/toolbar-scroll-behavior.ts +140 -0
  70. package/src/ui/toolbar/toolbar-tokens.ts +51 -0
  71. package/test-clip.html +31 -0
  72. package/test-shadow.html +5 -1
  73. package/test-width.html +34 -0
  74. package/src/ui/button-group.tsx +0 -350
  75. package/src/ui/button.tsx +0 -665
  76. package/test-render.tsx +0 -4
  77. /package/src/ui/{fab.test.tsx → buttons/fabs/fab/fab.test.tsx} +0 -0
  78. /package/src/ui/{fab-menu.test.tsx → buttons/fabs/fab-menu/fab-menu.test.tsx} +0 -0
  79. /package/src/ui/{icon-button.test.tsx → buttons/icon-button/icon-button.test.tsx} +0 -0
  80. /package/src/ui/{Text.tsx → text.tsx} +0 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @bug-on/md3-react@3.0.2 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
2
+ > @bug-on/md3-react@3.0.3 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
3
3
  > tsup
4
4
 
5
5
  CLI Building entry: src/index.ts, src/plugin.ts
@@ -11,21 +11,22 @@
11
11
  ESM Build start
12
12
  DTS Build start
13
13
  CJS dist/plugin.js 337.00 B
14
- CJS dist/index.js 511.81 KB
14
+ CJS dist/index.js 549.29 KB
15
15
  CJS dist/plugin.js.map 90.00 B
16
- CJS dist/index.js.map 1.13 MB
17
- CJS ⚡️ Build success in 1702ms
16
+ CJS dist/index.js.map 1.21 MB
17
+ CJS ⚡️ Build success in 1802ms
18
18
  ESM dist/plugin.mjs 119.00 B
19
- ESM dist/index.mjs 492.39 KB
19
+ ESM dist/index.mjs 528.28 KB
20
20
  ESM dist/plugin.mjs.map 91.00 B
21
- ESM dist/index.mjs.map 1.13 MB
22
- ESM ⚡️ Build success in 1703ms
21
+ ESM dist/index.mjs.map 1.21 MB
22
+ ESM ⚡️ Build success in 1802ms
23
23
  Copying assets to dist...
24
24
  ✅ Copied src/assets to dist/assets
25
25
  ✅ Copied typography.css to dist/typography.css
26
26
  ✅ Bundled colors.css from md3-tokens into index.css
27
27
  ✅ Bundled shape.css from md3-tokens into index.css
28
- ✅ Built bundled index.css (tokens + component base) to dist/index.css
28
+ ✅ Built bundled index.css (tokens + @theme + component base) to dist/index.css
29
+ ✅ Tailwind v4 @theme block injected — bg-m3-primary etc. work without manual mapping
29
30
  ✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
30
31
  ✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
31
32
  ✅ Generated index.css.d.ts
@@ -34,8 +35,8 @@ Copying assets to dist...
34
35
  ✅ Generated material-symbols-self-hosted.css.d.ts
35
36
  ✅ Prepended "use client" to index.js
36
37
  ✅ Prepended "use client" to index.mjs
37
- DTS ⚡️ Build success in 5006ms
38
+ DTS ⚡️ Build success in 5184ms
38
39
  DTS dist/plugin.d.ts 48.00 B
39
- DTS dist/index.d.ts 236.31 KB
40
+ DTS dist/index.d.ts 252.63 KB
40
41
  DTS dist/plugin.d.mts 48.00 B
41
- DTS dist/index.d.mts 236.31 KB
42
+ DTS dist/index.d.mts 252.63 KB
package/dist/index.css CHANGED
@@ -165,12 +165,21 @@
165
165
  }
166
166
 
167
167
  :root {
168
+ /* ── MD3 Expressive Corner Radius Scale (10 levels) ─────────────────────── */
169
+ /* Source: https://m3.material.io/styles/shape/corner-radius-scale */
170
+
168
171
  --md-sys-shape-corner-none: 0px;
169
172
  --md-sys-shape-corner-extra-small: 4px;
170
173
  --md-sys-shape-corner-small: 8px;
171
174
  --md-sys-shape-corner-medium: 12px;
172
175
  --md-sys-shape-corner-large: 16px;
176
+ /* New in M3 Expressive (May 2025) */
177
+ --md-sys-shape-corner-large-increased: 20px;
173
178
  --md-sys-shape-corner-extra-large: 28px;
179
+ /* New in M3 Expressive (May 2025) */
180
+ --md-sys-shape-corner-extra-large-increased: 32px;
181
+ /* New in M3 Expressive (May 2025) */
182
+ --md-sys-shape-corner-extra-extra-large: 48px;
174
183
  --md-sys-shape-corner-full: 9999px;
175
184
  }
176
185
 
@@ -199,3 +208,101 @@ input::-ms-reveal {
199
208
  width: 0;
200
209
  height: 0;
201
210
  }
211
+
212
+
213
+ /* @bug-on/md3-react — Tailwind v4 Theme Registration */
214
+ /* Registers MD3 tokens as Tailwind utilities. No manual @theme mapping needed. */
215
+ @theme {
216
+ /* ── Colors: Primary ── */
217
+ --color-m3-primary: var(--md-sys-color-primary);
218
+ --color-m3-on-primary: var(--md-sys-color-on-primary);
219
+ --color-m3-primary-container: var(--md-sys-color-primary-container);
220
+ --color-m3-on-primary-container: var(--md-sys-color-on-primary-container);
221
+ --color-m3-primary-fixed: var(--md-sys-color-primary-fixed);
222
+ --color-m3-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
223
+ --color-m3-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
224
+ --color-m3-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant);
225
+
226
+ /* ── Colors: Secondary ── */
227
+ --color-m3-secondary: var(--md-sys-color-secondary);
228
+ --color-m3-on-secondary: var(--md-sys-color-on-secondary);
229
+ --color-m3-secondary-container: var(--md-sys-color-secondary-container);
230
+ --color-m3-on-secondary-container: var(--md-sys-color-on-secondary-container);
231
+ --color-m3-secondary-fixed: var(--md-sys-color-secondary-fixed);
232
+ --color-m3-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
233
+ --color-m3-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
234
+ --color-m3-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant);
235
+
236
+ /* ── Colors: Tertiary ── */
237
+ --color-m3-tertiary: var(--md-sys-color-tertiary);
238
+ --color-m3-on-tertiary: var(--md-sys-color-on-tertiary);
239
+ --color-m3-tertiary-container: var(--md-sys-color-tertiary-container);
240
+ --color-m3-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
241
+ --color-m3-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
242
+ --color-m3-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
243
+ --color-m3-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
244
+ --color-m3-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant);
245
+
246
+ /* ── Colors: Error ── */
247
+ --color-m3-error: var(--md-sys-color-error);
248
+ --color-m3-on-error: var(--md-sys-color-on-error);
249
+ --color-m3-error-container: var(--md-sys-color-error-container);
250
+ --color-m3-on-error-container: var(--md-sys-color-on-error-container);
251
+
252
+ /* ── Colors: Surface ── */
253
+ --color-m3-surface: var(--md-sys-color-surface);
254
+ --color-m3-surface-dim: var(--md-sys-color-surface-dim);
255
+ --color-m3-surface-bright: var(--md-sys-color-surface-bright);
256
+ --color-m3-on-surface: var(--md-sys-color-on-surface);
257
+ --color-m3-surface-variant: var(--md-sys-color-surface-variant);
258
+ --color-m3-on-surface-variant: var(--md-sys-color-on-surface-variant);
259
+ --color-m3-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
260
+ --color-m3-surface-container-low: var(--md-sys-color-surface-container-low);
261
+ --color-m3-surface-container: var(--md-sys-color-surface-container);
262
+ --color-m3-surface-container-high: var(--md-sys-color-surface-container-high);
263
+ --color-m3-surface-container-highest: var(--md-sys-color-surface-container-highest);
264
+
265
+ /* ── Colors: Inverse ── */
266
+ --color-m3-inverse-surface: var(--md-sys-color-inverse-surface);
267
+ --color-m3-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
268
+ --color-m3-inverse-primary: var(--md-sys-color-inverse-primary);
269
+
270
+ /* ── Colors: Outline / Shadow / Scrim ── */
271
+ --color-m3-outline: var(--md-sys-color-outline);
272
+ --color-m3-outline-variant: var(--md-sys-color-outline-variant);
273
+ --color-m3-shadow: var(--md-sys-color-shadow);
274
+ --color-m3-scrim: var(--md-sys-color-scrim);
275
+ --color-m3-surface-tint: var(--md-sys-color-surface-tint);
276
+
277
+ /* ── Colors: Background ── */
278
+ --color-m3-background: var(--md-sys-color-background);
279
+ --color-m3-on-background: var(--md-sys-color-on-background);
280
+
281
+ /* ── Colors: Navigation Indicator ── */
282
+ --color-m3-indicator-active: var(--md-sys-color-indicator-active);
283
+ --color-m3-indicator-container: var(--md-sys-color-indicator-container);
284
+ --color-m3-indicator-contained-active: var(--md-sys-color-indicator-contained-active);
285
+ --color-m3-indicator-contained-container: var(--md-sys-color-indicator-contained-container);
286
+ --color-m3-indicator-track: var(--md-sys-color-indicator-track);
287
+ --color-m3-indicator-stop: var(--md-sys-color-indicator-stop);
288
+
289
+ /* ── Shape: Corner Radius Scale (10 levels, M3 Expressive) ── */
290
+ --radius-m3-none: var(--md-sys-shape-corner-none, 0px);
291
+ --radius-m3-xs: var(--md-sys-shape-corner-extra-small, 4px);
292
+ --radius-m3-sm: var(--md-sys-shape-corner-small, 8px);
293
+ --radius-m3-md: var(--md-sys-shape-corner-medium, 12px);
294
+ --radius-m3-lg: var(--md-sys-shape-corner-large, 16px);
295
+ --radius-m3-lg-inc: var(--md-sys-shape-corner-large-increased, 20px);
296
+ --radius-m3-xl: var(--md-sys-shape-corner-extra-large, 28px);
297
+ --radius-m3-xl-inc: var(--md-sys-shape-corner-extra-large-increased, 32px);
298
+ --radius-m3-xxl: var(--md-sys-shape-corner-extra-extra-large, 48px);
299
+ --radius-m3-full: var(--md-sys-shape-corner-full, 9999px);
300
+
301
+ /* ── Motion Easing ── */
302
+ --ease-m3-emphasized: cubic-bezier(0.2, 0, 0, 1);
303
+ --ease-m3-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
304
+ --ease-m3-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
305
+ --ease-m3-standard: cubic-bezier(0.2, 0, 0, 1);
306
+ --ease-m3-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
307
+ --ease-m3-standard-decelerate: cubic-bezier(0, 0, 0, 1);
308
+ }