@bug-on/m3-expressive 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,16 +1,29 @@
 # @bug-on/m3-expressive
 
+## 1.1.0
+
+### Minor Changes
+
+- 72c3aec: Standardize the language, rewrite the instruction manual, and address known minor issues.
+
+### Patch Changes
+
+- Updated dependencies [72c3aec]
+  - @bug-on/m3-tailwind@1.1.0
+  - @bug-on/m3-tokens@1.1.0
+
 ## 1.0.0
 
 ### 🎉 Initial Release
 
-First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressive React component library by Bug Ổn.
+First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressive React component library by Bug On.
 
-> **Note:** This package was previously published as `@bug-on/md3-react`. All functionality has been carried over with a fresh version reset.
+> **Note:** This package was previously published as `@bug-on/m3-expressive`. All functionality has been carried over with a fresh version reset.
 
 #### Components
 
 **Buttons**
+
 - `Button` — Filled, Outlined, Tonal, Elevated, Text variants
 - `IconButton` — Standard, Filled, Tonal, Outlined variants with toggle support
 - `FAB` — Floating Action Button (Small, Medium, Large)
@@ -20,6 +33,7 @@ First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressi
 - `ButtonGroup` — Grouped buttons with shared styling
 
 **Forms & Inputs**
+
 - `TextField` — Filled and Outlined variants with leading/trailing icons
 - `Checkbox` — Standard and TriState checkbox
 - `RadioButton` — Radio button with MD3 styling
@@ -27,12 +41,14 @@ First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressi
 - `Slider` / `RangeSlider` — Single and range slider with discrete/continuous modes
 
 **Navigation**
+
 - `NavigationBar` — Bottom navigation bar with animated icons
 - `NavigationRail` — Side navigation rail
 - `Tabs` / `Tab` / `TabsList` / `TabsContent` — Primary and Secondary tab variants
 - `Drawer` — Navigation drawer (standard, modal)
 
 **Feedback**
+
 - `Dialog` — Alert and full-screen dialog
 - `Snackbar` / `SnackbarProvider` / `useSnackbar` — Toast notifications
 - `ProgressIndicator` — Linear and Circular (determinate, indeterminate, wavy)
@@ -40,6 +56,7 @@ First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressi
 - `Tooltip` — Plain and Rich tooltip with caret
 
 **Layout & Surfaces**
+
 - `Card` — Elevated, Filled, Outlined variants
 - `Divider` — Full-width and inset dividers
 - `List` / `ListItem` / `ListDivider` — Lists with leading/trailing elements
@@ -47,12 +64,14 @@ First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressi
 - `SideSheet` / `BottomSheet` — Sheet overlays
 
 **App Bars & Toolbars**
+
 - `SmallAppBar` / `MediumFlexibleAppBar` / `LargeFlexibleAppBar` — Top app bars
 - `BottomAppBar` — Bottom app bar with FAB integration
 - `SearchAppBar` / `SearchView` — Expandable search
 - `Toolbar` / `FloatingToolbar` / `DockedToolbar` — Contextual toolbars
 
 **Data & Display**
+
 - `Badge` / `BadgedBox` — Notification badges
 - `Chip` — Assist, Filter, Input, Suggestion variants
 - `Icon` — Material Symbols integration with fill/weight/grade/size control
@@ -60,44 +79,52 @@ First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressi
 - `CodeBlock` — Code display with syntax highlighting
 
 **Date & Time Pickers**
+
 - `DatePicker` / `DatePickerDialog` / `DatePickerInput` — Date selection
 - `DateRangePicker` — Date range selection
 - `TimePicker` / `TimePickerDialog` / `TimeInput` — Time selection
 
 **Shapes & Media**
+
 - `ShapeMedia` / `ShapeMediaServer` — MD3 Expressive shape containers
 - `ShapeSvg` / `ShapeIcon` — SVG-based shapes
 - `useShapeMorph` — Shape morphing animation hook
 - MD3 shape catalog with all expressive corner variants
 
 **Search**
+
 - `Search` / `SearchBar` — Inline search
 - `SearchViewDocked` / `SearchViewFullscreen` — Expanded search views
 
 **Menu**
+
 - `Menu` / `MenuItem` / `MenuDivider` / `MenuGroup` — Dropdown menus
 - `SubMenu` — Nested submenus
 - `ContextMenu` — Right-click context menu
 - `VerticalMenu` — Vertical navigation menu
 
 **Theme & Providers**
+
 - `MD3ThemeProvider` — Dynamic color theming (Material You)
 - `useTheme` / `useThemeMode` — Theme hooks
 - `MaterialSymbolsPreconnect` — Font preconnect helper
 
 **Utilities**
+
 - `Ripple` — Touch ripple effect
 - `StateLayer` — Hover/focus/press state layer
 - `TouchTarget` — Accessible touch target sizing
 - `useAppBarScroll` — Scroll-aware app bar behavior
 
 #### CSS Exports
+
 - `@bug-on/m3-expressive/index.css` — MD3 tokens + Tailwind `@theme` + resets
 - `@bug-on/m3-expressive/typography.css` — Google Sans Flex font-face
 - `@bug-on/m3-expressive/material-symbols-cdn.css` — Material Symbols via CDN
 - `@bug-on/m3-expressive/material-symbols-self-hosted.css` — Self-hosted icons
 
 #### Sub-path Exports
+
 - `@bug-on/m3-expressive/core` — Theme providers and hooks only
 - `@bug-on/m3-expressive/buttons` — Button components only
 - `@bug-on/m3-expressive/forms` — Form components only

package/README.md

@@ -2,31 +2,31 @@
 
 > ⚠️ **Work in progress** — Material Design 3 Expressive React Component Library.
 
-Thư viện UI component hiệu năng cao cho React được thiết kế theo ngôn ngữ thiết kế [Material Design 3 Expressive](https://m3.material.io/). Mang đến hiệu ứng mượt mà, khả năng hỗ trợ tiếp cận (a11y) mạnh mẽ và tương thích hoàn hảo với SSR / Next.js App Router.
+High-performance React component library designed following the [Material Design 3 Expressive](https://m3.material.io/) design system. Featuring smooth motion, robust accessibility (a11y) support, and seamless compatibility with SSR and Next.js App Router.
 
 ---
 
-## 📖 Tài liệu hướng dẫn & Demo
-Để xem hướng dẫn chi tiết về API của từng Component, các thuộc tính chỉnh sửa cũng như xem demo tương tác trực quan nhất, vui lòng truy cập:
-👉 **[Tài liệu & Demo chính thức (GitHub Repository)](https://github.com/nguyentruongton/bug-on-md3-expressive)**
+## 📖 Documentation & Demos
+For component API guides, customization options, and interactive component previews, please visit:  
+👉 **[Official Documentation & Demos (GitHub Repository)](https://github.com/nguyentruongton/bug-on-md3-expressive)**
 
 ---
 
-## 📦 Cài đặt
+## 📦 Installation
 
-Cài đặt gói React component cùng với các package cốt lõi đi kèm trong hệ sinh thái:
+Install the React component package alongside core ecosystem packages:
 
 ```bash
 npm install @bug-on/m3-expressive @bug-on/m3-tailwind @bug-on/m3-tokens
-# hoặc
+# or
 pnpm add @bug-on/m3-expressive @bug-on/m3-tailwind @bug-on/m3-tokens
 ```
 
-### Peer Dependencies thiết yếu
-Đảm bảo bạn đã cài đặt đầy đủ các peer dependencies sau trong dự án:
+### Essential Peer Dependencies
+Ensure the following peer dependencies are installed in your project:
 ```bash
 npm install react react-dom
-# Yêu cầu cài đặt thêm thư viện motion cho các component có hiệu ứng động (Fab, Tabs, Dialog...):
+# Required for animated components (Fab, Tabs, Dialog, etc.):
 npm install motion
 ```
 
@@ -55,11 +55,11 @@ This system is designed around the CSS-first architecture of **Tailwind CSS v4**
 
 > **Zero Config:** Once `@bug-on/m3-expressive/index.css` is imported, basic MD3 utility classes (`bg-m3-primary`, `text-m3-on-surface`, `rounded-m3-xl`, etc.) work immediately. For the full set of utilities like depth shadows (`elevation-3`), icon axis control (`icon-fill-1`), or physics-based transitions (`transition-m3-fast-spatial`), import `@bug-on/m3-tailwind` as well. Do NOT use JS plugins in Tailwind v4.
 
-### Cấu hình Icons (Material Symbols)
-Thư viện tích hợp sẵn component `<Icon />` sử dụng font `Material Symbols Outlined`. Bạn cần import stylesheet của icon tại root của ứng dụng (ví dụ `layout.tsx` hoặc `main.tsx`):
+### Icons Configuration (Material Symbols)
+The library includes a built-in `<Icon />` component using the `Material Symbols Outlined` font. Import the icon stylesheet at your application root (e.g., `layout.tsx` or `main.tsx`):
 
 ```tsx
-// app/layout.tsx hoặc src/main.tsx
+// app/layout.tsx or src/main.tsx
 import '@bug-on/m3-expressive/material-symbols-cdn.css';
 import { MaterialSymbolsPreconnect } from '@bug-on/m3-expressive';
 
@@ -67,7 +67,7 @@ export default function RootLayout({ children }) {
   return (
     <html>
       <head>
-        {/* Hỗ trợ tải trước font giúp hiển thị icon cực nhanh */}
+        {/* Preconnect helper to accelerate font loading */}
         <MaterialSymbolsPreconnect />
       </head>
       <body>{children}</body>
@@ -75,7 +75,8 @@ export default function RootLayout({ children }) {
   );
 }
 ```
-Nếu cần hỗ trợ offline hoặc không gửi request font tới CDN, cài package font opt-in:
+
+For offline support or self-hosted font deployments:
 
 ```bash
 pnpm add @bug-on/m3-fonts
@@ -86,11 +87,11 @@ pnpm add @bug-on/m3-fonts
 @import "@bug-on/m3-fonts/typography.css";
 ```
 
-`@bug-on/m3-expressive/material-symbols-self-hosted.css` vẫn hoạt động để tương thích ngược, nhưng đã deprecated và sẽ bị xoá ở major version tiếp theo.
+`@bug-on/m3-expressive/material-symbols-self-hosted.css` remains active for backward compatibility, but is deprecated and will be removed in the next major version.
 
 ---
 
-## 🚀 Sử dụng cơ bản
+## 🚀 Basic Usage
 
 ```tsx
 import { Button, Icon } from '@bug-on/m3-expressive';
@@ -106,5 +107,6 @@ export default function Page() {
 }
 ```
 
-## ⚖️ Giấy phép
+## ⚖️ License
 MIT
+

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

@@ -4,56 +4,57 @@
  * SETUP STEPS:
  *
  * Step 1 — Download font files
- * Truy cập: https://github.com/google/material-design-icons/tree/master/variablefont
+ * Visit: 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)
+ * (and Rounded / Sharp if needed)
  *
  * Step 2 — Place font files in your app
- * Recommended location: public/fonts/ hoặc src/assets/fonts/
+ * Recommended location: public/fonts/ or 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 3 — Copy and adjust @font-face block below
+ * Change src url() to point to the correct path in your project
  *
- * @deprecated New integrations should install `@bug-on/m3-fonts` and import
- * `@bug-on/m3-fonts/material-symbols.css`. This legacy export remains only
+ * @deprecated New integrations should install `@bug-on/md3-fonts` and import
+ * `@bug-on/md3-fonts/material-symbols.css`. This legacy export remains only
  * for backwards compatibility and will be removed in the next major version.
  *
- * Step 4 — Import file này:
+ * Step 4 — Import this file:
  *   import '@bug-on/m3-expressive/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
+ * - Self-hosting is better than CDN when using HTTP/2 CDN for static assets
+ * - Without a CDN, Google Fonts CDN may be faster due to cache sharing
+ * - Use font-display: block for icon fonts (see reasons in CDN file)
+ * - WOFF2 is the only format needed (100% modern browser support, Brotli compression)
+ * - WOFF fallback is no longer required
  *
- * 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:
+
+ * SUBSETTING (IMPORTANT for reducing file size):
+ * Full variable font ~295 KB. After subsetting ~1-2 KB for a few dozen icons.
+ * Use tool: https://everythingfonts.com/subsetter
+ * Or use Google Fonts text parameter to subset on 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.
+ * Self-hosting eliminates sending user IP addresses to Google servers,
+ * resolving GDPR compliance requirements.
  */
 
 @font-face {
 	font-family: "Material Symbols Outlined";
 	font-style: normal;
-	/* Khai báo full axis range để browser biết đây là variable font */
+	/* Declare full axis range so browser recognizes 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 is required for icon fonts:
+   * - Prevents rendering raw text "arrow_forward" instead of icon
+   * - Max 3s block, then icon appears
+   * Reference: 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. */
+	/* unicode-range: loads font only when page contains characters in range.
+   * Material Symbols uses PUA (Private Use Area) for ligatures. */
 }
 
 /*

package/dist/buttons.d.mts

@@ -1,4 +1,4 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, Q as SplitButtonSizeTokens, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-MXj_kyNt.mjs';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, Q as SplitButtonSizeTokens, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-BRPuTqi1.mjs';
 import { b as MD3Size } from './md3-DFhj-NZj.mjs';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-D-gs0gfj.mjs';
 import { Transition } from 'motion/react';

package/dist/buttons.d.ts

@@ -1,4 +1,4 @@
-export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, Q as SplitButtonSizeTokens, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-C5CLCIKP.js';
+export { B as BUTTON_COLOR_TOKENS, a as BUTTON_SIZE_TOKENS, b as BaseButtonProps, c as Button, d as ButtonGroup, e as ButtonGroupOrientation, f as ButtonGroupProps, g as ButtonGroupVariant, h as ButtonProps, E as ElevatedSplitButtonLeading, i as ElevatedSplitButtonTrailing, j as ElevatedSplitButtonTrailingUncheckable, k as ExtendedFAB, l as ExtendedFABProps, F as FAB, m as FABMenu, n as FABMenuItem, o as FABMenuItemData, p as FABMenuItemProps, q as FABMenuProps, r as FABPosition, s as FABPositionProps, t as FABProps, u as FilledSplitButtonLeading, v as FilledSplitButtonTrailing, w as FilledSplitButtonTrailingUncheckable, O as OutlinedSplitButtonLeading, x as OutlinedSplitButtonTrailing, y as OutlinedSplitButtonTrailingUncheckable, S as SplitButtonLayout, z as SplitButtonLayoutProps, A as SplitButtonLeading, C as SplitButtonLeadingProps, D as SplitButtonSize, Q as SplitButtonSizeTokens, G as SplitButtonTrailing, H as SplitButtonTrailingProps, I as SplitButtonTrailingUncheckable, J as SplitButtonTrailingUncheckableProps, K as SplitButtonVariant, T as ToggleFAB, L as ToggleFABProps, M as TonalSplitButtonLeading, N as TonalSplitButtonTrailing, P as TonalSplitButtonTrailingUncheckable } from './split-button-trailing-uncheckable-CjOFCoyW.js';
 import { b as MD3Size } from './md3-DFhj-NZj.js';
 export { B as BaseIconButtonProps, I as IconButton, a as IconButtonProps } from './icon-button-D-gs0gfj.js';
 import { Transition } from 'motion/react';