@bug-on/m3-expressive 1.0.0

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 (98) hide show
  1. package/CHANGELOG.md +110 -0
  2. package/README.md +110 -0
  3. package/dist/assets/fonts/GoogleSansFlex-VariableFont.woff2 +0 -0
  4. package/dist/assets/fonts/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf +0 -0
  5. package/dist/assets/fonts/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf +0 -0
  6. package/dist/assets/fonts/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf +0 -0
  7. package/dist/assets/loading-indicator.svg +19 -0
  8. package/dist/assets/material-symbols-cdn.css +65 -0
  9. package/dist/assets/material-symbols-self-hosted.css +94 -0
  10. package/dist/buttons.d.mts +180 -0
  11. package/dist/buttons.d.ts +180 -0
  12. package/dist/buttons.js +4282 -0
  13. package/dist/buttons.js.map +1 -0
  14. package/dist/buttons.mjs +4227 -0
  15. package/dist/buttons.mjs.map +1 -0
  16. package/dist/core.d.mts +422 -0
  17. package/dist/core.d.ts +422 -0
  18. package/dist/core.js +2581 -0
  19. package/dist/core.js.map +1 -0
  20. package/dist/core.mjs +2547 -0
  21. package/dist/core.mjs.map +1 -0
  22. package/dist/feedback.d.mts +600 -0
  23. package/dist/feedback.d.ts +600 -0
  24. package/dist/feedback.js +2357 -0
  25. package/dist/feedback.js.map +1 -0
  26. package/dist/feedback.mjs +2321 -0
  27. package/dist/feedback.mjs.map +1 -0
  28. package/dist/forms.d.mts +40 -0
  29. package/dist/forms.d.ts +40 -0
  30. package/dist/forms.js +4263 -0
  31. package/dist/forms.js.map +1 -0
  32. package/dist/forms.mjs +4228 -0
  33. package/dist/forms.mjs.map +1 -0
  34. package/dist/icon-button-D-gs0gfj.d.mts +136 -0
  35. package/dist/icon-button-D-gs0gfj.d.ts +136 -0
  36. package/dist/index.css +309 -0
  37. package/dist/index.css.d.ts +2 -0
  38. package/dist/index.d.mts +24 -0
  39. package/dist/index.d.ts +24 -0
  40. package/dist/index.js +23972 -0
  41. package/dist/index.js.map +1 -0
  42. package/dist/index.mjs +23668 -0
  43. package/dist/index.mjs.map +1 -0
  44. package/dist/layout.d.mts +610 -0
  45. package/dist/layout.d.ts +610 -0
  46. package/dist/layout.js +5091 -0
  47. package/dist/layout.js.map +1 -0
  48. package/dist/layout.mjs +5042 -0
  49. package/dist/layout.mjs.map +1 -0
  50. package/dist/material-symbols-cdn.css +65 -0
  51. package/dist/material-symbols-cdn.css.d.ts +2 -0
  52. package/dist/material-symbols-self-hosted.css +94 -0
  53. package/dist/material-symbols-self-hosted.css.d.ts +2 -0
  54. package/dist/md3-DFhj-NZj.d.mts +17 -0
  55. package/dist/md3-DFhj-NZj.d.ts +17 -0
  56. package/dist/navigation.d.mts +2766 -0
  57. package/dist/navigation.d.ts +2766 -0
  58. package/dist/navigation.js +6684 -0
  59. package/dist/navigation.js.map +1 -0
  60. package/dist/navigation.mjs +6573 -0
  61. package/dist/navigation.mjs.map +1 -0
  62. package/dist/overlays.d.mts +161 -0
  63. package/dist/overlays.d.ts +161 -0
  64. package/dist/overlays.js +3298 -0
  65. package/dist/overlays.js.map +1 -0
  66. package/dist/overlays.mjs +3244 -0
  67. package/dist/overlays.mjs.map +1 -0
  68. package/dist/pickers.d.mts +1074 -0
  69. package/dist/pickers.d.ts +1074 -0
  70. package/dist/pickers.js +4240 -0
  71. package/dist/pickers.js.map +1 -0
  72. package/dist/pickers.mjs +4200 -0
  73. package/dist/pickers.mjs.map +1 -0
  74. package/dist/plugin.d.mts +1 -0
  75. package/dist/plugin.d.ts +1 -0
  76. package/dist/plugin.js +13 -0
  77. package/dist/plugin.js.map +1 -0
  78. package/dist/plugin.mjs +3 -0
  79. package/dist/plugin.mjs.map +1 -0
  80. package/dist/scroll-area-CVS6HyLl.d.mts +33 -0
  81. package/dist/scroll-area-CVS6HyLl.d.ts +33 -0
  82. package/dist/shapes.d.mts +1119 -0
  83. package/dist/shapes.d.ts +1119 -0
  84. package/dist/shapes.js +2941 -0
  85. package/dist/shapes.js.map +1 -0
  86. package/dist/shapes.mjs +2889 -0
  87. package/dist/shapes.mjs.map +1 -0
  88. package/dist/side-sheet-modal-BY6VCC8p.d.mts +553 -0
  89. package/dist/side-sheet-modal-CglP6KYA.d.ts +553 -0
  90. package/dist/split-button-trailing-uncheckable-C5CLCIKP.d.ts +731 -0
  91. package/dist/split-button-trailing-uncheckable-MXj_kyNt.d.mts +731 -0
  92. package/dist/text-field-eAIpz9z1.d.mts +1038 -0
  93. package/dist/text-field-eAIpz9z1.d.ts +1038 -0
  94. package/dist/typography-339RV6v7.d.mts +486 -0
  95. package/dist/typography-339RV6v7.d.ts +486 -0
  96. package/dist/typography.css +22 -0
  97. package/dist/typography.css.d.ts +2 -0
  98. package/package.json +207 -0
package/dist/material-symbols-cdn.css ADDED
@@ -0,0 +1,65 @@
1
+ /*
2
+ * Material Symbols — CDN version (Google Fonts)
3
+ *
4
+ * USAGE IN APP'S HTML <head>:
5
+ * Add preconnect hints BEFORE this CSS loads for fastest performance:
6
+ *
7
+ * <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ * <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
9
+ *
10
+ * Then import this CSS:
11
+ * import '@bug-on/m3-expressive/material-symbols-cdn.css'
12
+ *
13
+ * WHY TWO preconnect?
14
+ * Google Fonts serves the CSS stylesheet from fonts.googleapis.com
15
+ * but the actual .woff2 font files come from fonts.gstatic.com (different origin).
16
+ * The crossorigin attribute is required for font files (CORS request).
17
+ *
18
+ * FONT-DISPLAY NOTE for icon fonts:
19
+ * We use font-display: block (NOT swap) because:
20
+ * - swap would briefly show raw text like "arrow_forward" before icon loads = jarring layout shift
21
+ * - block hides text during load period (max 3s), then shows icon = cleaner UX
22
+ * - optional is NOT suitable: if font misses the load window, icons never appear
23
+ */
24
+
25
+ /*
26
+ * INSTRUCTION:
27
+ * Use the <MaterialSymbolsPreconnect /> component to load the actual Google Fonts CSS!
28
+ *
29
+ * We NO LONGER use @import url(...) here because CSS bundlers (like Next.js/Webpack)
30
+ * often merge global CSS files and push @import statements below regular CSS rules.
31
+ * According to CSS spec, any @import MUST be at the very top, so it breaks randomly.
32
+ * Loading via `<link rel="stylesheet">` (handled by MaterialSymbolsPreconnect) is fully robust.
33
+ */
34
+
35
+ /* ─────────────────────────────────────────────────────────────────────────────
36
+ * BASE ICON STYLES
37
+ * ─────────────────────────────────────────────────────────────────────────────
38
+ *
39
+ * This class ensures that Material Symbols render correctly as ligatures
40
+ * across all browsers and prevents common layout issues.
41
+ */
42
+ .md-icon {
43
+ font-family: inherit; /* Set dynamically by the Icon component */
44
+ font-weight: normal;
45
+ font-style: normal;
46
+ display: inline-flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ width: 1em;
50
+ height: 1em;
51
+ line-height: normal;
52
+ text-transform: none;
53
+ letter-spacing: normal;
54
+ word-wrap: normal;
55
+ white-space: nowrap;
56
+ direction: ltr;
57
+
58
+ /* Enable ligature rendering support for modern browsers */
59
+ font-feature-settings: "liga";
60
+
61
+ /* Improved rendering quality */
62
+ -webkit-font-smoothing: antialiased;
63
+ -moz-osx-font-smoothing: grayscale;
64
+ text-rendering: optimizeLegibility;
65
+ }
package/dist/material-symbols-cdn.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS module — no runtime types
2
+ export {};
package/dist/material-symbols-self-hosted.css ADDED
@@ -0,0 +1,94 @@
1
+ /*
2
+ * Material Symbols — Self-Hosted version
3
+ *
4
+ * SETUP STEPS:
5
+ *
6
+ * Step 1 — Download font files
7
+ * Truy cập: https://github.com/google/material-design-icons/tree/master/variablefont
8
+ * Download file: MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
9
+ * (và Rounded / Sharp nếu cần)
10
+ *
11
+ * Step 2 — Place font files in your app
12
+ * Recommended location: public/fonts/ hoặc src/assets/fonts/
13
+ * Example: public/fonts/MaterialSymbolsOutlined.woff2
14
+ *
15
+ * Step 3 — Copy và điều chỉnh @font-face block bên dưới
16
+ * Thay đổi src url() để trỏ đúng đường dẫn trong project của bạn
17
+ *
18
+ * @deprecated New integrations should install `@bug-on/m3-fonts` and import
19
+ * `@bug-on/m3-fonts/material-symbols.css`. This legacy export remains only
20
+ * for backwards compatibility and will be removed in the next major version.
21
+ *
22
+ * Step 4 — Import file này:
23
+ * import '@bug-on/m3-expressive/material-symbols-self-hosted.css'
24
+ *
25
+ * PERFORMANCE NOTES:
26
+ * - Self-hosting tốt hơn CDN khi bạn dùng CDN + HTTP/2 cho static assets
27
+ * - Nếu không có CDN, Google Fonts CDN có thể nhanh hơn do cache sharing
28
+ * - Dùng font-display: block cho icon fonts (xem lý do ở file CDN)
29
+ * - WOFF2 là format duy nhất cần thiết (100% modern browser support, Brotli compression)
30
+ * - Không cần WOFF fallback nữa
31
+ *
32
+ * SUBSETTING (QUAN TRỌNG để giảm file size):
33
+ * Full variable font ~295 KB. Sau khi subset còn ~1-2 KB cho vài chục icons.
34
+ * Dùng tool: https://everythingfonts.com/subsetter
35
+ * Hoặc dùng Google Fonts text parameter để subset trên CDN:
36
+ * ?family=Material+Symbols+Outlined&text=home%20search%20settings
37
+ *
38
+ * GDPR NOTE:
39
+ * Self-hosting loại bỏ việc gửi user IP đến Google servers,
40
+ * giải quyết GDPR compliance requirement.
41
+ */
42
+
43
+ @font-face {
44
+ font-family: "Material Symbols Outlined";
45
+ font-style: normal;
46
+ /* Khai báo full axis range để browser biết đây là variable font */
47
+ font-weight: 100 700;
48
+ /* font-display: block là bắt buộc cho icon fonts:
49
+ * - Tránh render text thô "arrow_forward" thay vì icon
50
+ * - Max 3s block, sau đó icon xuất hiện
51
+ * Tham khảo: https://web.dev/articles/font-best-practices#icon_fonts */
52
+ font-display: block;
53
+ src: url("/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
54
+ format("woff2");
55
+ /* unicode-range: chỉ load font khi page chứa ký tự trong range này.
56
+ * Material Symbols dùng PUA (Private Use Area) cho ligatures. */
57
+ }
58
+
59
+ /*
60
+ * Rounded variants and Sharp variants are not included by default to save space.
61
+ * You can declare them similarly if you download the respective woff2 files.
62
+ */
63
+
64
+ /* ─────────────────────────────────────────────────────────────────────────────
65
+ * BASE ICON STYLES
66
+ * ─────────────────────────────────────────────────────────────────────────────
67
+ *
68
+ * This class ensures that Material Symbols render correctly as ligatures
69
+ * across all browsers and prevents common layout issues.
70
+ */
71
+ .md-icon {
72
+ font-family: inherit; /* Set dynamically by the Icon component */
73
+ font-weight: normal;
74
+ font-style: normal;
75
+ display: inline-flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ width: 1em;
79
+ height: 1em;
80
+ line-height: normal;
81
+ text-transform: none;
82
+ letter-spacing: normal;
83
+ word-wrap: normal;
84
+ white-space: nowrap;
85
+ direction: ltr;
86
+
87
+ /* Enable ligature rendering support for modern browsers */
88
+ font-feature-settings: "liga";
89
+
90
+ /* Improved rendering quality */
91
+ -webkit-font-smoothing: antialiased;
92
+ -moz-osx-font-smoothing: grayscale;
93
+ text-rendering: optimizeLegibility;
94
+ }
package/dist/material-symbols-self-hosted.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ // CSS module — no runtime types
2
+ export {};
package/dist/md3-DFhj-NZj.d.mts ADDED
@@ -0,0 +1,17 @@
1
+ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
2
+
3
+ /** MD3 button color variants */
4
+ type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text";
5
+ /** MD3 Expressive button sizes */
6
+ type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
7
+ /** MD3 shape families */
8
+ type MD3Shape = "round" | "square";
9
+ /** Helper: PolyMorphic component ref */
10
+ type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
11
+ /** Helper: Props cho polymorphic components */
12
+ type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
13
+ as?: C;
14
+ children?: ReactNode;
15
+ };
16
+
17
+ export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c };
package/dist/md3-DFhj-NZj.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
2
+
3
+ /** MD3 button color variants */
4
+ type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text";
5
+ /** MD3 Expressive button sizes */
6
+ type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
7
+ /** MD3 shape families */
8
+ type MD3Shape = "round" | "square";
9
+ /** Helper: PolyMorphic component ref */
10
+ type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
11
+ /** Helper: Props cho polymorphic components */
12
+ type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
13
+ as?: C;
14
+ children?: ReactNode;
15
+ };
16
+
17
+ export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c };