@bug-on/md3-react 3.0.1 → 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 (86) hide show
  1. package/.turbo/turbo-build.log +42 -42
  2. package/CHANGELOG.md +10 -0
  3. package/dist/index.css +107 -0
  4. package/dist/index.d.mts +1491 -1053
  5. package/dist/index.d.ts +1491 -1053
  6. package/dist/index.js +4457 -3156
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +4394 -3109
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +11 -6
  11. package/scripts/copy-assets.js +113 -8
  12. package/src/index.ts +66 -18
  13. package/src/test/button.test.tsx +1 -1
  14. package/src/ui/app-bar/app-bar.tokens.ts +5 -24
  15. package/src/ui/badge.tsx +2 -1
  16. package/src/ui/buttons/button/button-tokens.ts +118 -0
  17. package/src/ui/{button.test.tsx → buttons/button/button.test.tsx} +0 -21
  18. package/src/ui/buttons/button/button.tsx +381 -0
  19. package/src/ui/buttons/button/index.ts +3 -0
  20. package/src/ui/buttons/button/types.ts +90 -0
  21. package/src/ui/buttons/button-group/button-group-defaults.ts +95 -0
  22. package/src/ui/buttons/button-group/button-group-tokens.ts +20 -0
  23. package/src/ui/{button-group.test.tsx → buttons/button-group/button-group.test.tsx} +9 -10
  24. package/src/ui/buttons/button-group/button-group.tsx +699 -0
  25. package/src/ui/buttons/button-group/index.ts +8 -0
  26. package/src/ui/buttons/button-group/types.ts +77 -0
  27. package/src/ui/{fab.tsx → buttons/fabs/fab/fab.tsx} +6 -6
  28. package/src/ui/buttons/fabs/fab/index.ts +1 -0
  29. package/src/ui/{fab-menu.tsx → buttons/fabs/fab-menu/fab-menu.tsx} +7 -4
  30. package/src/ui/buttons/fabs/fab-menu/index.ts +1 -0
  31. package/src/ui/buttons/fabs/index.ts +2 -0
  32. package/src/ui/{icon-button.tsx → buttons/icon-button/icon-button.tsx} +6 -6
  33. package/src/ui/buttons/icon-button/index.ts +1 -0
  34. package/src/ui/buttons/index.ts +4 -0
  35. package/src/ui/code-block.tsx +1 -1
  36. package/src/ui/dialog.tsx +4 -7
  37. package/src/ui/drawer.tsx +4 -7
  38. package/src/ui/menu/menu-animations.ts +14 -20
  39. package/src/ui/menu/menu-tokens.ts +7 -5
  40. package/src/ui/menu/menu.test.tsx +9 -4
  41. package/src/ui/navigation-bar.test.tsx +111 -0
  42. package/src/ui/navigation-bar.tsx +464 -0
  43. package/src/ui/navigation-rail.test.tsx +5 -4
  44. package/src/ui/navigation-rail.tsx +32 -23
  45. package/src/ui/scroll-area.tsx +4 -0
  46. package/src/ui/search/search-view-fullscreen.tsx +1 -1
  47. package/src/ui/search/search.tokens.ts +9 -43
  48. package/src/ui/search/trailing-action.tsx +1 -1
  49. package/src/ui/shared/constants.ts +25 -27
  50. package/src/ui/shared/motion-tokens.ts +238 -0
  51. package/src/ui/snackbar/snackbar.tsx +4 -6
  52. package/src/ui/switch/switch.tsx +12 -18
  53. package/src/ui/text-field/text-field.tokens.ts +12 -12
  54. package/src/ui/text-field/text-field.tsx +31 -19
  55. package/src/ui/theme-provider/index.tsx +1 -5
  56. package/src/ui/toc.tsx +1 -1
  57. package/src/ui/toolbar/__snapshots__/bottom-docked-toolbar.test.tsx.snap +51 -0
  58. package/src/ui/toolbar/__snapshots__/floating-toolbar-with-fab.test.tsx.snap +113 -0
  59. package/src/ui/toolbar/__snapshots__/floating-toolbar.test.tsx.snap +169 -0
  60. package/src/ui/toolbar/bottom-docked-toolbar.test.tsx +114 -0
  61. package/src/ui/toolbar/docked-toolbar.tsx +186 -0
  62. package/src/ui/toolbar/floating-toolbar-with-fab.test.tsx +139 -0
  63. package/src/ui/toolbar/floating-toolbar-with-fab.tsx +199 -0
  64. package/src/ui/toolbar/floating-toolbar.test.tsx +230 -0
  65. package/src/ui/toolbar/floating-toolbar.tsx +344 -0
  66. package/src/ui/toolbar/index.ts +35 -0
  67. package/src/ui/toolbar/toolbar-colors.ts +37 -0
  68. package/src/ui/toolbar/toolbar-context.tsx +13 -0
  69. package/src/ui/toolbar/toolbar-divider.test.tsx +54 -0
  70. package/src/ui/toolbar/toolbar-divider.tsx +73 -0
  71. package/src/ui/toolbar/toolbar-icon-button.test.tsx +68 -0
  72. package/src/ui/toolbar/toolbar-icon-button.tsx +136 -0
  73. package/src/ui/toolbar/toolbar-scroll-behavior.ts +140 -0
  74. package/src/ui/toolbar/toolbar-tokens.ts +51 -0
  75. package/test-clip.html +31 -0
  76. package/test-shadow.html +5 -1
  77. package/test-width.html +34 -0
  78. package/src/ui/button-group.tsx +0 -350
  79. package/src/ui/button.tsx +0 -665
  80. package/test-render.tsx +0 -4
  81. package/test_output.txt +0 -164
  82. package/test_output_v2.txt +0 -5
  83. /package/src/ui/{fab.test.tsx → buttons/fabs/fab/fab.test.tsx} +0 -0
  84. /package/src/ui/{fab-menu.test.tsx → buttons/fabs/fab-menu/fab-menu.test.tsx} +0 -0
  85. /package/src/ui/{icon-button.test.tsx → buttons/icon-button/icon-button.test.tsx} +0 -0
  86. /package/src/ui/{Text.tsx → text.tsx} +0 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,42 +1,42 @@
1
-
2
- 
3
- > @bug-on/md3-react@3.0.1 build /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react
4
- > tsup
5
-
6
- CLI Building entry: src/index.ts, src/plugin.ts
7
- CLI Using tsconfig: tsconfig.json
8
- CLI tsup v8.5.1
9
- CLI Using tsup config: /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react/tsup.config.ts
10
- CLI Target: es2017
11
- CJS Build start
12
- ESM Build start
13
- DTS Build start
14
- ESM dist/plugin.mjs 119.00 B
15
- ESM dist/plugin.mjs.map 91.00 B
16
- ESM dist/index.mjs 481.27 KB
17
- ESM dist/index.mjs.map 1.11 MB
18
- ESM ⚡️ Build success in 1434ms
19
- CJS dist/plugin.js 337.00 B
20
- CJS dist/plugin.js.map 90.00 B
21
- CJS dist/index.js 500.12 KB
22
- CJS dist/index.js.map 1.11 MB
23
- CJS ⚡️ Build success in 1434ms
24
- Copying assets to dist...
25
- ✅ Copied src/assets to dist/assets
26
- ✅ Copied typography.css to dist/typography.css
27
- ✅ Bundled colors.css from md3-tokens into index.css
28
- ✅ Bundled shape.css from md3-tokens into index.css
29
- ✅ Built bundled index.css (tokens + component base) to dist/index.css
30
- ✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
31
- ✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
32
- ✅ Generated index.css.d.ts
33
- ✅ Generated typography.css.d.ts
34
- ✅ Generated material-symbols-cdn.css.d.ts
35
- ✅ Generated material-symbols-self-hosted.css.d.ts
36
- ✅ Prepended "use client" to index.js
37
- ✅ Prepended "use client" to index.mjs
38
- DTS ⚡️ Build success in 5446ms
39
- DTS dist/plugin.d.ts 48.00 B
40
- DTS dist/index.d.ts 234.14 KB
41
- DTS dist/plugin.d.mts 48.00 B
42
- DTS dist/index.d.mts 234.14 KB
1
+
2
+ > @bug-on/md3-react@3.0.3 build /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react
3
+ > tsup
4
+
5
+ CLI Building entry: src/index.ts, src/plugin.ts
6
+ CLI Using tsconfig: tsconfig.json
7
+ CLI tsup v8.5.1
8
+ CLI Using tsup config: /home/runner/work/bug-on-md3-expressive/bug-on-md3-expressive/packages/react/tsup.config.ts
9
+ CLI Target: es2017
10
+ CJS Build start
11
+ ESM Build start
12
+ DTS Build start
13
+ CJS dist/plugin.js 337.00 B
14
+ CJS dist/index.js 549.29 KB
15
+ CJS dist/plugin.js.map 90.00 B
16
+ CJS dist/index.js.map 1.21 MB
17
+ CJS ⚡️ Build success in 1802ms
18
+ ESM dist/plugin.mjs 119.00 B
19
+ ESM dist/index.mjs 528.28 KB
20
+ ESM dist/plugin.mjs.map 91.00 B
21
+ ESM dist/index.mjs.map 1.21 MB
22
+ ESM ⚡️ Build success in 1802ms
23
+ Copying assets to dist...
24
+ ✅ Copied src/assets to dist/assets
25
+ ✅ Copied typography.css to dist/typography.css
26
+ ✅ Bundled colors.css from md3-tokens into index.css
27
+ ✅ Bundled shape.css from md3-tokens into 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
30
+ ✅ Copied material-symbols-cdn.css to dist/material-symbols-cdn.css
31
+ ✅ Copied material-symbols-self-hosted.css to dist/material-symbols-self-hosted.css
32
+ ✅ Generated index.css.d.ts
33
+ ✅ Generated typography.css.d.ts
34
+ ✅ Generated material-symbols-cdn.css.d.ts
35
+ ✅ Generated material-symbols-self-hosted.css.d.ts
36
+ ✅ Prepended "use client" to index.js
37
+ ✅ Prepended "use client" to index.mjs
38
+ DTS ⚡️ Build success in 5184ms
39
+ DTS dist/plugin.d.ts 48.00 B
40
+ DTS dist/index.d.ts 252.63 KB
41
+ DTS dist/plugin.d.mts 48.00 B
42
+ DTS dist/index.d.mts 252.63 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @bug-on/md3-react
2
2
 
3
+ ## 3.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - **Motion**: Improved `SPRING_TRANSITION_EXPRESSIVE` with a stronger bounce (0.35 → 0.45) to match MD3 Expressive standards.
8
+ - **Navigation**: Added `activeIndicatorTransition` prop to `NavigationBar` and `NavigationRail` for custom spring configuration.
9
+ - **Navigation**: Enhanced active indicator pill with a stronger "pop" scale animation.
10
+ - **Documentation**: Added custom animation examples for Navigation components and updated API references.
11
+ - **AI Context**: Updated `llms.txt` and `llms-full.txt` with the latest motion specs and Navigation Bar reference.
12
+
3
13
  ## 3.0.1
4
14
 
5
15
  ### Patch Changes
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
+ }