@bug-on/m3-expressive 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,110 @@
+# @bug-on/m3-expressive
+
+## 1.0.0
+
+### 🎉 Initial Release
+
+First stable release of **@bug-on/m3-expressive** — Material Design 3 Expressive React component library by Bug Ổn.
+
+> **Note:** This package was previously published as `@bug-on/md3-react`. 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)
+- `ExtendedFAB` — Extended FAB with label and icon
+- `FABMenu` — FAB with expandable menu actions
+- `SplitButton` — Split button with primary action and dropdown
+- `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
+- `Switch` — Toggle switch with icon support
+- `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)
+- `LoadingIndicator` — Loading spinner
+- `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
+- `ScrollArea` — Custom scrollbar area
+- `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
+- `Text` — Typography component with MD3 type scale
+- `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
+- `@bug-on/m3-expressive/feedback` — Feedback components only
+- `@bug-on/m3-expressive/navigation` — Navigation components only
+- `@bug-on/m3-expressive/overlays` — Dialog/Sheet components only
+- `@bug-on/m3-expressive/layout` — Layout components only
+- `@bug-on/m3-expressive/pickers` — Date/Time pickers only
+- `@bug-on/m3-expressive/shapes` — Shape components only
+- `@bug-on/m3-expressive/plugin` — Tailwind v4 plugin re-export

package/README.md

@@ -0,0 +1,110 @@
+# @bug-on/m3-expressive
+
+> ⚠️ **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.
+
+---
+
+## 📖 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)**
+
+---
+
+## 📦 Cài đặt
+
+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:
+
+```bash
+npm install @bug-on/m3-expressive @bug-on/m3-tailwind @bug-on/m3-tokens
+# hoặc
+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:
+```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...):
+npm install motion
+```
+
+---
+
+## 🛠️ Configuration & Setup (Tailwind CSS v4)
+
+> [!WARNING]
+> The library only supports **Tailwind CSS v4** (peer dependency `tailwindcss: ">=4.0.0"`). **Tailwind CSS v3 is no longer supported**.
+
+This system is designed around the CSS-first architecture of **Tailwind CSS v4**. Setup is extremely simple and requires no JS/TS configuration files. Just import the stylesheets directly into your application's main CSS entry point (e.g., `globals.css` or `index.css`):
+
+```css
+/* 1. Import core Tailwind CSS v4 */
+@import "tailwindcss";
+
+/* 2. Register core Design Tokens + Tailwind Theme + Resets (Zero Config) */
+@import "@bug-on/m3-expressive/index.css";
+
+/* 3. (Optional) Integrate MD3 advanced utility classes (elevations, transitions, icons) */
+@import "@bug-on/m3-tailwind";
+
+/* 4. (Optional) Integrate specialized Typography CSS for React Components */
+@import "@bug-on/m3-expressive/typography.css";
+```
+
+> **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`):
+
+```tsx
+// app/layout.tsx hoặc src/main.tsx
+import '@bug-on/m3-expressive/material-symbols-cdn.css';
+import { MaterialSymbolsPreconnect } from '@bug-on/m3-expressive';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        {/* Hỗ trợ tải trước font giúp hiển thị icon cực nhanh */}
+        <MaterialSymbolsPreconnect />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+Nếu cần hỗ trợ offline hoặc không gửi request font tới CDN, cài package font opt-in:
+
+```bash
+pnpm add @bug-on/m3-fonts
+```
+
+```css
+@import "@bug-on/m3-fonts/material-symbols.css";
+@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.
+
+---
+
+## 🚀 Sử dụng cơ bản
+
+```tsx
+import { Button, Icon } from '@bug-on/m3-expressive';
+
+export default function Page() {
+  return (
+    <div className="p-8 bg-m3-surface min-h-screen flex items-center justify-center">
+      <Button colorStyle="filled" size="md" icon={<Icon name="add" />}>
+        Get Started
+      </Button>
+    </div>
+  );
+}
+```
+
+## ⚖️ Giấy phép
+MIT

package/dist/assets/loading-indicator.svg

@@ -0,0 +1,19 @@
+<svg width="100%" height="100%" viewBox="4 4 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#D0BCFF">
+    <animate attributeName="d" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.14; 0.29; 0.29; 0.43; 0.43; 0.57; 0.57; 0.71; 0.71; 0.86; 0.86; 1" values="M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z;
+M20.3 8.6 21.1 8 22 7.6 23 7.3 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.2 15.5 37.6 16.5 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8 17.6 9.8 18.6 9.6 19.5 9.2Z;
+M18.6 9.6 19.5 9.2 20.3 8.6 21.1 8 22 7.6 23 7.3 24 7.2 25 7.3 25.9 7.5 26.8 8 27.6 8.6 28.4 9.1 29.3 9.6 30.3 9.8 31.3 9.9 32.3 10 33.3 10.2 34.2 10.6 35 11.2 35.7 11.9 36.3 12.7 36.7 13.6 36.9 14.6 37.2 15.5 37.6 16.4 38.2 17.3 38.9 18 39.6 18.7 40.2 19.5 40.6 20.4 40.9 21.3 41 22.3 40.9 23.3 40.6 24.3 40.2 25.2 39.8 26.1 39.5 27 39.4 28 39.5 29 39.6 30 39.5 31 39.3 32 38.9 32.9 38.3 33.7 37.6 34.4 36.8 35 35.9 35.4 35 35.8 34.1 36.3 33.4 37 32.9 37.9 32.3 38.7 31.6 39.4 30.8 40 29.9 40.4 28.9 40.7 27.9 40.8 27 40.7 26 40.4 25 40.1 24 40 23 40.1 22.1 40.4 21.1 40.7 20.1 40.8 19.1 40.7 18.2 40.5 17.3 40 16.4 39.5 15.7 38.8 15.2 37.9 14.6 37.1 13.9 36.4 13.1 35.8 12.2 35.4 11.3 35 10.5 34.4 9.7 33.8 9.1 32.9 8.7 32 8.5 31.1 8.4 30.1 8.5 29.1 8.6 28.1 8.5 27.1 8.3 26.1 7.8 25.2 7.4 24.3 7.1 23.4 7 22.4 7.1 21.4 7.3 20.4 7.8 19.5 8.3 18.7 9.1 18 9.8 17.3 10.4 16.5 10.8 15.6 11 14.6 11.3 13.7 11.7 12.8 12.2 11.9 12.9 11.2 13.8 10.7 14.7 10.2 15.6 10 16.6 9.9 17.6 9.8Z;
+M18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.2 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 33.7 13.1 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.5 30.5 39.5 30 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7.1 21.7 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8 15.4 12.3 16.2 11.7 17 11.1 17.8 10.5Z;
+M15.4 12.3 16.2 11.7 17 11.1 17.8 10.5 18.6 9.9 19.5 9.4 20.3 8.8 21.1 8.3 22 7.8 23 7.6 23.9 7.5 24.9 7.6 25.9 7.8 26.8 8.2 27.6 8.7 28.5 9.3 29.3 9.9 30.1 10.5 30.9 11 31.7 11.6 32.5 12.2 33.3 12.8 34.1 13.3 34.9 13.9 35.7 14.5 36.6 15 37.4 15.6 38.2 16.2 39 16.8 39.7 17.5 40.2 18.3 40.7 19.2 40.9 20.1 41 21.1 40.9 22.1 40.7 23.1 40.3 24 40 24.9 39.7 25.9 39.4 26.8 39 27.8 38.7 28.7 38.4 29.6 38.1 30.6 37.8 31.5 37.5 32.5 37.2 33.4 36.9 34.4 36.6 35.3 36.2 36.2 35.7 37.1 35 37.8 34.3 38.4 33.4 38.9 32.5 39.3 31.5 39.4 30.5 39.5 29.5 39.5 28.5 39.5 27.5 39.5 26.5 39.5 25.5 39.4 24.5 39.4 23.6 39.4 22.6 39.4 21.6 39.5 20.6 39.5 19.6 39.5 18.6 39.5 17.6 39.5 16.6 39.5 15.6 39.3 14.7 39 13.8 38.5 13.1 37.9 12.4 37.2 11.9 36.3 11.5 35.4 11.2 34.5 10.9 33.5 10.6 32.6 10.3 31.6 10 30.7 9.7 29.7 9.3 28.8 9 27.9 8.7 26.9 8.4 26 8 25 7.7 24.1 7.4 23.2 7.1 22.2 7 21.2 7.1 20.2 7.3 19.3 7.7 18.4 8.3 17.5 8.9 16.8 9.7 16.2 10.5 15.6 11.4 15.1 12.2 14.5 13 14 13.8 13.4 14.6 12.8Z;
+M17 12.8 17.7 12.1 18.5 11.5 19.3 10.9 20.1 10.5 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 25 9 26 9 27 9 27.6 9.1 28 9.1 28.9 9.3 29.9 9.6 30.9 9.9 31.8 10.3 32.6 10.8 33.5 11.3 34.3 11.9 34.6 12.2 35 12.6 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.6 18.5 38.6 18.7 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.3 38.2 26.4 37.8 27.3 37.4 28.2 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.8 32.5 33.5 32.8 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.2 37.3 27.9 37.5 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 22.5 39 21.5 39 20.5 38.9 20.4 38.9 19.5 38.8 18.6 38.6 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.4 35.8 13.3 35.8 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.6 30 9.4 29.3 9.3 29 9.1 28 9 27 9 26 9 25 9.2 24 9.4 23 9.6 22.1 9.8 21.7 10 21.1 10.4 20.2 10.9 19.4 11.4 18.5 12.1 17.8 12.7 17 13.4 16.3 14.2 15.6 14.2 15.5 14.9 14.9 15.6 14.2 16.3 13.5Z;
+M33.5 11.3 34.3 11.9 35 12.6 35.3 12.8 35.7 13.3 36.4 14.1 36.9 14.9 37.4 15.8 37.9 16.6 38.3 17.6 38.3 17.7 38.6 18.5 38.8 19.5 38.9 20.5 39 21.5 39 22.5 38.9 23.5 38.9 23.5 38.7 24.5 38.5 25.4 38.2 26.4 37.8 27.3 37.4 28.2 36.9 28.9 36.8 29.1 36.2 29.9 35.6 30.6 34.9 31.3 34.2 32 33.5 32.8 33.1 33.2 32.8 33.5 32.1 34.2 31.4 34.9 30.7 35.6 29.9 36.2 29.1 36.8 28.7 37 28.2 37.3 27.4 37.8 26.4 38.2 25.5 38.5 24.5 38.7 23.5 38.9 23.3 38.9 22.5 39 21.5 39 20.5 38.9 19.5 38.8 18.6 38.6 17.6 38.3 17.6 38.3 16.7 37.9 15.8 37.5 14.9 37 14.1 36.4 13.3 35.8 12.7 35.2 12.6 35.1 12 34.3 11.3 33.5 10.8 32.7 10.3 31.8 9.9 30.9 9.7 30.3 9.6 29.9 9.3 29 9.1 28 9 27 9 26 9 25 9.1 24.5 9.2 24 9.4 23 9.6 22.1 10 21.1 10.4 20.2 10.9 19.4 11.1 19.1 11.5 18.5 12.1 17.7 12.7 17 13.5 16.3 14.2 15.6 14.9 14.9 14.9 14.8 15.6 14.2 16.3 13.5 17 12.8 17.7 12.1 18.5 11.5 19.3 11 19.3 10.9 20.2 10.4 21.1 10 22 9.7 23 9.4 24 9.2 24.7 9.1 25 9 26 9 27 9 28 9.1 28.9 9.3 29.9 9.6 30.4 9.7 30.9 9.9 31.8 10.3 32.6 10.8Z;
+M33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.8 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.6 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7 27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1Z;
+M27.7 9.4 28.5 10 29.3 10.6 30.2 10.9 31.2 11 32.2 11.1 33.2 11.1 34.2 11.2 35.1 11.4 36 11.9 36.6 12.7 36.8 13.7 36.9 14.7 36.9 15.7 37 16.7 37.1 17.7 37.3 18.6 37.9 19.4 38.5 20.2 39.2 20.9 39.8 21.7 40.5 22.4 40.9 23.3 41 24.3 40.7 25.2 40.1 26 39.4 26.8 38.8 27.5 38.1 28.3 37.5 29.1 37.1 30 37 31 37 31.9 36.9 32.9 36.8 33.9 36.7 34.9 36.2 35.8 35.5 36.4 34.5 36.8 33.6 36.9 32.6 36.9 31.6 37 30.6 37.1 29.6 37.2 28.8 37.7 28 38.4 27.3 39 26.5 39.7 25.8 40.3 24.9 40.8 23.9 41 23 40.8 22.1 40.2 21.4 39.6 20.6 38.9 19.9 38.3 19.1 37.6 18.3 37.2 17.3 37 16.3 37 15.3 36.9 14.3 36.8 13.3 36.7 12.4 36.4 11.7 35.7 11.3 34.8 11.2 33.8 11.1 32.8 11 31.8 11 30.8 10.9 29.9 10.4 29 9.8 28.2 9.1 27.5 8.5 26.7 7.8 26 7.3 25.1 7 24.2 7.1 23.2 7.6 22.3 8.2 21.6 8.9 20.8 9.5 20.1 10.2 19.3 10.7 18.5 10.9 17.5 11 16.5 11.1 15.6 11.1 14.6 11.2 13.6 11.5 12.6 12.1 11.9 13 11.4 13.9 11.2 14.9 11.1 15.9 11 16.9 11 17.9 10.9 18.8 10.6 19.6 10 20.4 9.3 21.1 8.6 21.9 8 22.6 7.4 23.6 7 24.6 7.1 25.5 7.5 26.2 8.1 27 8.7Z;
+M27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 34.8 11.3 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.9 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.4 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35 36 35.7 35.3 36.4 34.4 37 34.1 37.2 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.6 10 30.1 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10 16.6 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 20.9 11 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11Z;
+M36 35.7 35.3 36.4 34.4 37 33.6 37.4 32.6 37.8 31.6 37.9 30.6 38 29.7 37.9 28.7 37.7 27.8 37.3 26.8 36.9 25.9 36.6 24.9 36.4 23.9 36.4 22.9 36.4 22 36.6 21 37 20.1 37.4 19.2 37.7 18.2 37.9 17.2 38 16.2 37.9 15.3 37.7 14.3 37.4 13.4 36.9 12.6 36.3 11.9 35.6 11.3 34.9 10.8 34 10.4 33.1 10.1 32.1 10 31.1 10 30.2 10.2 29.2 10.5 28.2 10.9 27.3 11.2 26.4 11.5 25.4 11.6 24.4 11.6 23.4 11.5 22.5 11.2 21.5 10.8 20.6 10.4 19.7 10.2 18.7 10 17.7 10 16.7 10.2 15.7 10.4 14.8 10.8 13.9 11.4 13 12 12.3 12.7 11.6 13.6 11 14.4 10.6 15.4 10.2 16.4 10.1 17.4 10 18.3 10.1 19.3 10.3 20.2 10.7 21.2 11.1 22.1 11.4 23.1 11.6 24.1 11.6 25.1 11.6 26 11.4 27 11 27.9 10.6 28.8 10.3 29.8 10.1 30.8 10 31.8 10.1 32.7 10.3 33.7 10.6 34.6 11.1 35.4 11.7 36.1 12.4 36.7 13.1 37.2 14 37.6 14.9 37.9 15.9 38 16.9 38 17.8 37.8 18.8 37.5 19.8 37.1 20.7 36.8 21.6 36.5 22.6 36.4 23.6 36.4 24.6 36.5 25.5 36.8 26.5 37.2 27.4 37.6 28.3 37.8 29.3 38 30.3 38 31.3 37.8 32.3 37.6 33.2 37.2 34.1 36.6 35Z;
+M32.1 32.1 31.4 32.8 30.7 33.5 29.9 34.1 29.1 34.7 28.3 35.3 27.6 35.8 27.5 35.8 26.6 36.4 25.8 36.8 24.9 37.3 24 37.7 23.1 38 22.1 38.3 21.2 38.6 20.2 38.8 19.2 38.9 18.2 39 17.2 39 16.6 38.9 16.3 38.9 15.3 38.7 14.3 38.4 13.4 38 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10 34.6 9.6 33.7 9.3 32.7 9.1 31.7 9.1 31.4 9 30.8 9 29.8 9.1 28.8 9.2 27.8 9.4 26.8 9.7 25.9 10 24.9 10.3 24 10.7 23.1 11.2 22.2 11.6 21.4 12.2 20.5 12.2 20.4 12.7 19.7 13.3 18.9 13.9 18.1 14.5 17.3 15.2 16.6 15.9 15.9 16.6 15.2 17.3 14.5 18.1 13.9 18.9 13.3 19.7 12.7 20.4 12.2 20.5 12.2 21.4 11.6 22.2 11.2 23.1 10.7 24 10.3 24.9 10 25.9 9.7 26.8 9.4 27.8 9.2 28.8 9.1 29.8 9 30.8 9 31.4 9.1 31.7 9.1 32.7 9.3 33.7 9.6 34.6 10 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 38 13.4 38.4 14.3 38.7 15.3 38.9 16.3 38.9 16.6 39 17.2 39 18.2 38.9 19.2 38.8 20.2 38.6 21.2 38.3 22.1 38 23.1 37.7 24 37.3 24.9 36.8 25.8 36.4 26.6 35.8 27.5 35.8 27.6 35.3 28.3 34.7 29.1 34.1 29.9 33.5 30.7 32.8 31.4Z;
+M24.3 10.2 24.9 10 25.9 9.7 26.8 9.4 27.1 9.4 27.8 9.2 28.8 9.1 29.8 9 29.9 9 30.8 9 31.7 9.1 32.7 9.3 32.8 9.3 33.7 9.6 34.6 10 35.5 10.5 35.5 10.5 36.3 11.1 36.9 11.7 37.5 12.5 37.5 12.5 38 13.4 38.4 14.3 38.7 15.2 38.7 15.3 38.9 16.3 39 17.2 39 18.1 39 18.2 38.9 19.2 38.8 20.2 38.6 20.9 38.6 21.2 38.3 22.1 38 23.1 37.8 23.7 37.7 24 37.3 24.9 36.8 25.8 36.5 26.4 36.4 26.6 35.8 27.5 35.3 28.3 35 28.8 34.7 29.1 34.1 29.9 33.5 30.7 33.1 31.1 32.8 31.4 32.1 32.1 31.4 32.8 31.1 33.1 30.7 33.5 29.9 34.1 29.1 34.7 28.8 35 28.3 35.3 27.5 35.8 26.6 36.4 26.4 36.5 25.8 36.8 24.9 37.3 24 37.7 23.7 37.8 23.1 38 22.1 38.3 21.2 38.6 20.9 38.6 20.2 38.8 19.2 38.9 18.2 39 18.1 39 17.2 39 16.3 38.9 15.3 38.7 15.2 38.7 14.3 38.4 13.4 38 12.5 37.5 12.5 37.5 11.7 36.9 11.1 36.3 10.5 35.5 10.5 35.5 10 34.6 9.6 33.7 9.3 32.8 9.3 32.7 9.1 31.7 9 30.8 9 29.9 9 29.8 9.1 28.8 9.2 27.8 9.4 27.1 9.4 26.8 9.7 25.9 10 24.9 10.2 24.3 10.3 24 10.7 23.1 11.2 22.2 11.5 21.6 11.6 21.4 12.2 20.5 12.7 19.7 13 19.2 13.3 18.9 13.9 18.1 14.5 17.3 14.9 16.9 15.2 16.6 15.9 15.9 16.6 15.2 16.9 14.9 17.3 14.5 18.1 13.9 18.9 13.3 19.2 13 19.7 12.7 20.5 12.2 21.4 11.6 21.6 11.5 22.2 11.2 23.1 10.7 24 10.3Z;
+M22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.3 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.4 38.9 26.2 39.6 27 40.2 27.7 40.5 28.6 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.8 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.6 9.1 21.8 8.4 21 7.8 20.3 7.5 19.4 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.2 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1 20.9 10.4 21.4 9.5 21.9 8.7Z"></animate>
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"></animateTransform>
+  </path>
+</svg>

package/dist/assets/material-symbols-cdn.css

@@ -0,0 +1,65 @@
+/*
+ * Material Symbols — CDN version (Google Fonts)
+ *
+ * USAGE IN APP'S HTML <head>:
+ * Add preconnect hints BEFORE this CSS loads for fastest performance:
+ *
+ *   <link rel="preconnect" href="https://fonts.googleapis.com" />
+ *   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+ *
+ * Then import this CSS:
+ *   import '@bug-on/m3-expressive/material-symbols-cdn.css'
+ *
+ * WHY TWO preconnect?
+ * Google Fonts serves the CSS stylesheet from fonts.googleapis.com
+ * but the actual .woff2 font files come from fonts.gstatic.com (different origin).
+ * The crossorigin attribute is required for font files (CORS request).
+ *
+ * FONT-DISPLAY NOTE for icon fonts:
+ * We use font-display: block (NOT swap) because:
+ * - swap would briefly show raw text like "arrow_forward" before icon loads = jarring layout shift
+ * - block hides text during load period (max 3s), then shows icon = cleaner UX
+ * - optional is NOT suitable: if font misses the load window, icons never appear
+ */
+
+/*
+ * INSTRUCTION:
+ * Use the <MaterialSymbolsPreconnect /> component to load the actual Google Fonts CSS!
+ * 
+ * We NO LONGER use @import url(...) here because CSS bundlers (like Next.js/Webpack)
+ * often merge global CSS files and push @import statements below regular CSS rules.
+ * According to CSS spec, any @import MUST be at the very top, so it breaks randomly.
+ * Loading via `<link rel="stylesheet">` (handled by MaterialSymbolsPreconnect) is fully robust.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * BASE ICON STYLES
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * This class ensures that Material Symbols render correctly as ligatures
+ * across all browsers and prevents common layout issues.
+ */
+.md-icon {
+	font-family: inherit; /* Set dynamically by the Icon component */
+	font-weight: normal;
+	font-style: normal;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	line-height: normal;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+
+	/* Enable ligature rendering support for modern browsers */
+	font-feature-settings: "liga";
+
+	/* Improved rendering quality */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}

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

@@ -0,0 +1,94 @@
+/*
+ * Material Symbols — Self-Hosted version
+ *
+ * SETUP STEPS:
+ *
+ * Step 1 — Download font files
+ * Truy cập: 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)
+ *
+ * Step 2 — Place font files in your app
+ * Recommended location: public/fonts/ hoặc 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
+ *
+ * @deprecated New integrations should install `@bug-on/m3-fonts` and import
+ * `@bug-on/m3-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:
+ *   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
+ *
+ * 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:
+ *   ?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.
+ */
+
+@font-face {
+	font-family: "Material Symbols Outlined";
+	font-style: normal;
+	/* Khai báo full axis range để browser biết đây là 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;
+	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. */
+}
+
+/*
+ * Rounded variants and Sharp variants are not included by default to save space.
+ * You can declare them similarly if you download the respective woff2 files.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────────
+ * BASE ICON STYLES
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * This class ensures that Material Symbols render correctly as ligatures
+ * across all browsers and prevents common layout issues.
+ */
+.md-icon {
+	font-family: inherit; /* Set dynamically by the Icon component */
+	font-weight: normal;
+	font-style: normal;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1em;
+	height: 1em;
+	line-height: normal;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+
+	/* Enable ligature rendering support for modern browsers */
+	font-feature-settings: "liga";
+
+	/* Improved rendering quality */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}

package/dist/buttons.d.mts

@@ -0,0 +1,180 @@
+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';
+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';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import 'react';
+import 'react/jsx-runtime';
+
+interface Corners {
+    tl: number;
+    tr: number;
+    br: number;
+    bl: number;
+}
+interface ShapeSet {
+    default: Corners;
+    pressed: Corners;
+    checked: Corners;
+}
+declare const ButtonGroupDefaults: {
+    expandedRatio: number;
+    connectedLeadingButtonShapes: (size: MD3Size) => ShapeSet;
+    connectedMiddleButtonShapes: (size: MD3Size) => ShapeSet;
+    connectedTrailingButtonShapes: (size: MD3Size) => ShapeSet;
+    /** For orientation="vertical". */
+    connectedTopButtonShapes: (size: MD3Size) => ShapeSet;
+    connectedBottomButtonShapes: (size: MD3Size) => ShapeSet;
+};
+
+/**
+ * MD3 Expressive Button Group Tokens
+ * Ported from ButtonGroupSmallTokens.kt and ConnectedButtonGroupSmallTokens.kt
+ */
+declare const BUTTON_GROUP_TOKENS: {
+    readonly standard: {
+        readonly betweenSpace: 12;
+        readonly containerHeight: 40;
+    };
+    readonly connected: {
+        readonly betweenSpace: 2;
+        readonly containerHeight: 40;
+        readonly containerShape: 9999;
+        readonly innerCorner: 8;
+        readonly pressedInnerCorner: 4;
+        readonly selectedCornerPercent: 50;
+    };
+};
+
+declare const SPLIT_BUTTON_CHEVRON_SPRING: Transition;
+declare const SPLIT_BUTTON_RADIUS_SPRING: Transition;
+/**
+ * Split Button Tokens (Expressive)
+ * Source: SplitButtonXSmallTokens.kt, SplitButtonSmallTokens.kt,
+ *         SplitButtonMediumTokens.kt, SplitButtonLargeTokens.kt,
+ *         SplitButtonXLargeTokens.kt (Android/Compose reference)
+ */
+declare const SPLIT_BUTTON_TOKENS: {
+    readonly xs: {
+        readonly containerHeight: 32;
+        readonly betweenSpace: 2;
+        readonly innerCorner: {
+            readonly default: 4;
+            readonly hovered: 8;
+            readonly pressed: 8;
+        };
+        readonly outerCornerPercent: 50;
+        readonly leadingPadding: {
+            readonly start: 12;
+            readonly end: 10;
+        };
+        readonly trailingPadding: {
+            readonly start: 13;
+            readonly end: 13;
+        };
+        readonly trailingIconSize: 22;
+        readonly opticalCenterOffset: -1;
+    };
+    readonly sm: {
+        readonly containerHeight: 40;
+        readonly betweenSpace: 2;
+        readonly innerCorner: {
+            readonly default: 4;
+            readonly hovered: 12;
+            readonly pressed: 12;
+        };
+        readonly outerCornerPercent: 50;
+        readonly leadingPadding: {
+            readonly start: 16;
+            readonly end: 12;
+        };
+        readonly trailingPadding: {
+            readonly start: 13;
+            readonly end: 13;
+        };
+        readonly trailingIconSize: 22;
+        readonly opticalCenterOffset: -1;
+    };
+    readonly md: {
+        readonly containerHeight: 56;
+        readonly betweenSpace: 2;
+        readonly innerCorner: {
+            readonly default: 4;
+            readonly hovered: 12;
+            readonly pressed: 12;
+        };
+        readonly outerCornerPercent: 50;
+        readonly leadingPadding: {
+            readonly start: 24;
+            readonly end: 24;
+        };
+        readonly trailingPadding: {
+            readonly start: 15;
+            readonly end: 15;
+        };
+        readonly trailingIconSize: 26;
+        readonly opticalCenterOffset: -2;
+    };
+    readonly lg: {
+        readonly containerHeight: 96;
+        readonly betweenSpace: 2;
+        readonly innerCorner: {
+            readonly default: 8;
+            readonly hovered: 28;
+            readonly pressed: 28;
+        };
+        readonly outerCornerPercent: 50;
+        readonly leadingPadding: {
+            readonly start: 48;
+            readonly end: 48;
+        };
+        readonly trailingPadding: {
+            readonly start: 29;
+            readonly end: 29;
+        };
+        readonly trailingIconSize: 38;
+        readonly opticalCenterOffset: -3;
+    };
+    readonly xl: {
+        readonly containerHeight: 136;
+        readonly betweenSpace: 2;
+        readonly innerCorner: {
+            readonly default: 12;
+            readonly hovered: 28;
+            readonly pressed: 28;
+        };
+        readonly outerCornerPercent: 50;
+        readonly leadingPadding: {
+            readonly start: 64;
+            readonly end: 64;
+        };
+        readonly trailingPadding: {
+            readonly start: 43;
+            readonly end: 43;
+        };
+        readonly trailingIconSize: 50;
+        readonly opticalCenterOffset: -6;
+    };
+};
+/**
+ * Leading icon size per size variant.
+ * From Compose ButtonDefaults.iconSizeFor logic.
+ */
+declare const LEADING_ICON_SIZE_FOR_SIZE: {
+    readonly xs: 18;
+    readonly sm: 20;
+    readonly md: 24;
+    readonly lg: 32;
+    readonly xl: 40;
+};
+
+/**
+ * Color variants for the Split Button components using CVA.
+ */
+declare const splitButtonVariants: (props?: ({
+    variant?: "outlined" | "elevated" | "filled" | "tonal" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { BUTTON_GROUP_TOKENS, ButtonGroupDefaults, LEADING_ICON_SIZE_FOR_SIZE, SPLIT_BUTTON_CHEVRON_SPRING, SPLIT_BUTTON_RADIUS_SPRING, SPLIT_BUTTON_TOKENS, splitButtonVariants };