@bug-on/m3-expressive 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bug-on/m3-expressive
 
+## 1.3.4
+
+### Patch Changes
+
+- 2190cac: Remove `cn` utility from public exports (`.` and `./core`).
+
+  `cn` is an internal helper for component implementation and is not part of the Material Design 3 Expressive public API. If you need `cn` in your application, please install `clsx` and `tailwind-merge` directly in your project.
+
+## 1.3.3
+
+### Patch Changes
+
+- 719c20f: Add AI docs and TOC hierarchy
+
 ## 1.3.2
 
 ### Patch Changes

package/README.md

@@ -221,6 +221,31 @@ export default function App() {
 
 ---
 
+## 🤖 AI Agent Integration
+
+This package ships with machine-readable LLM documentation (`llms.txt` and `llms-full.txt`) adhering to the [llmstxt.org](https://llmstxt.org/) standard. When installed in your project, AI coding assistants (Cursor, GitHub Copilot, Claude Code, ChatGPT Codex) can read the bundled specification directly to understand APIs and avoid hallucinating props.
+
+### 📚 Locating LLM Documentation
+
+- **Local (in your project after install)**:
+  - `node_modules/@bug-on/m3-expressive/llms-full.txt` *(Full API & Gotchas reference - Recommended)*
+  - `node_modules/@bug-on/m3-expressive/llms.txt` *(Quick overview)*
+- **Remote CDN**:
+  - `https://unpkg.com/@bug-on/m3-expressive/llms-full.txt`
+  - `https://cdn.jsdelivr.net/npm/@bug-on/m3-expressive/llms-full.txt`
+  - `https://raw.githubusercontent.com/nguyentruongton/bug-on-md3-expressive/main/llms-full.txt`
+
+### 💡 Suggested Prompt for your AI Assistant
+Add this instruction to your project's `CLAUDE.md`, `.cursorrules`, or system prompt:
+
+```markdown
+Before generating or modifying UI components using @bug-on/m3-expressive, read:
+- Local: node_modules/@bug-on/m3-expressive/llms-full.txt
+- CDN: https://unpkg.com/@bug-on/m3-expressive/llms-full.txt
+```
+
+---
+
 ## ⚖️ License
 
 [MIT](./LICENSE)

package/dist/{core-DyEy8H9Z.d.ts → core-COvZHQ_k.d.ts}

@@ -1,7 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ClassValue } from 'clsx';
 import './md3-BQhRygSi.js';
 import { a as Typography, F as FontVariationAxes } from './typography-339RV6v7.js';
 
@@ -212,8 +211,6 @@ interface MaterialSymbolsPreconnectProps {
 }
 declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): react_jsx_runtime.JSX.Element;
 
-declare function cn(...inputs: ClassValue[]): string;
-
 /**
  * Props cho component {@link Icon}.
  *
@@ -494,4 +491,4 @@ declare function MD3ThemeProvider({ children, sourceColor: initialSourceColor, d
 declare function useTheme(): ThemeContextValue;
 declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode" | "effectiveMode">;
 
-export { type ContrastLevel as C, type GenerateM3ThemeOptions as G, Icon as I, type MD3ColorScheme as M, Ripple as R, type SchemeVariant as S, type ThemeMode as T, type UseRippleStateOptions as U, type IconProps as a, MD3ThemeProvider as b, type MD3ThemeProviderProps as c, MaterialSymbolsPreconnect as d, type RippleOrigin as e, type RippleProps as f, applyTheme as g, cn as h, generateM3Theme as i, useMediaQuery as j, useRipple as k, useRippleState as l, useTheme as m, useThemeMode as n, resolveMode as r, useRipple$1 as u };
+export { type ContrastLevel as C, type GenerateM3ThemeOptions as G, Icon as I, type MD3ColorScheme as M, Ripple as R, type SchemeVariant as S, type ThemeMode as T, type UseRippleStateOptions as U, type IconProps as a, MD3ThemeProvider as b, type MD3ThemeProviderProps as c, MaterialSymbolsPreconnect as d, type RippleOrigin as e, type RippleProps as f, applyTheme as g, generateM3Theme as h, useMediaQuery as i, useRipple as j, useRippleState as k, useTheme as l, useThemeMode as m, resolveMode as r, useRipple$1 as u };

package/dist/{core-D8FdHY6I.d.mts → core-CRkixy1y.d.mts}

@@ -1,7 +1,6 @@
 import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ClassValue } from 'clsx';
 import './md3-BQhRygSi.mjs';
 import { a as Typography, F as FontVariationAxes } from './typography-339RV6v7.mjs';
 
@@ -212,8 +211,6 @@ interface MaterialSymbolsPreconnectProps {
 }
 declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): react_jsx_runtime.JSX.Element;
 
-declare function cn(...inputs: ClassValue[]): string;
-
 /**
  * Props cho component {@link Icon}.
  *
@@ -494,4 +491,4 @@ declare function MD3ThemeProvider({ children, sourceColor: initialSourceColor, d
 declare function useTheme(): ThemeContextValue;
 declare function useThemeMode(): Pick<ThemeContextValue, "mode" | "setMode" | "effectiveMode">;
 
-export { type ContrastLevel as C, type GenerateM3ThemeOptions as G, Icon as I, type MD3ColorScheme as M, Ripple as R, type SchemeVariant as S, type ThemeMode as T, type UseRippleStateOptions as U, type IconProps as a, MD3ThemeProvider as b, type MD3ThemeProviderProps as c, MaterialSymbolsPreconnect as d, type RippleOrigin as e, type RippleProps as f, applyTheme as g, cn as h, generateM3Theme as i, useMediaQuery as j, useRipple as k, useRippleState as l, useTheme as m, useThemeMode as n, resolveMode as r, useRipple$1 as u };
+export { type ContrastLevel as C, type GenerateM3ThemeOptions as G, Icon as I, type MD3ColorScheme as M, Ripple as R, type SchemeVariant as S, type ThemeMode as T, type UseRippleStateOptions as U, type IconProps as a, MD3ThemeProvider as b, type MD3ThemeProviderProps as c, MaterialSymbolsPreconnect as d, type RippleOrigin as e, type RippleProps as f, applyTheme as g, generateM3Theme as h, useMediaQuery as i, useRipple as j, useRippleState as k, useTheme as l, useThemeMode as m, resolveMode as r, useRipple$1 as u };

package/dist/core.d.mts

@@ -1,6 +1,5 @@
-export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-D8FdHY6I.mjs';
+export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as generateM3Theme, r as resolveMode, u as useDOMRipple, i as useMediaQuery, j as useRipple, k as useRippleState, l as useTheme, m as useThemeMode } from './core-CRkixy1y.mjs';
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.mjs';
 import 'react';
 import 'react/jsx-runtime';
-import 'clsx';
 import './typography-339RV6v7.mjs';

package/dist/core.d.ts

@@ -1,6 +1,5 @@
-export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as cn, i as generateM3Theme, r as resolveMode, u as useDOMRipple, j as useMediaQuery, k as useRipple, l as useRippleState, m as useTheme, n as useThemeMode } from './core-DyEy8H9Z.js';
+export { I as Icon, a as IconProps, M as MD3ColorScheme, b as MD3ThemeProvider, c as MD3ThemeProviderProps, d as MaterialSymbolsPreconnect, R as Ripple, e as RippleOrigin, f as RippleProps, T as ThemeMode, U as UseRippleStateOptions, g as applyTheme, h as generateM3Theme, r as resolveMode, u as useDOMRipple, i as useMediaQuery, j as useRipple, k as useRippleState, l as useTheme, m as useThemeMode } from './core-COvZHQ_k.js';
 export { M as MD3ColorStyle, a as MD3Shape, b as MD3Size, P as PolymorphicProps, c as PolymorphicRef } from './md3-BQhRygSi.js';
 import 'react';
 import 'react/jsx-runtime';
-import 'clsx';
 import './typography-339RV6v7.js';

package/dist/core.js

@@ -4,9 +4,9 @@
 var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var materialColorUtilities = require('@material/material-color-utilities');
+var react = require('motion/react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var react = require('motion/react');
 var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
@@ -2150,11 +2150,13 @@ var Snackbar = React4__namespace.memo(function Snackbar2({
                   type: "button",
                   onClick: handleAction,
                   className: cn(
-                    "text-sm font-medium",
-                    "px-2 py-1 rounded-sm",
-                    "focus-visible:outline-none focus-visible:ring-2",
-                    "transition-colors whitespace-nowrap",
-                    "text-m3-inverse-primary"
+                    "inline-flex items-center justify-center",
+                    "h-10 px-3 py-2.5 rounded-sm",
+                    "text-sm font-medium leading-5 whitespace-nowrap",
+                    "text-m3-inverse-primary",
+                    "hover:bg-m3-inverse-primary/8 focus-visible:bg-m3-inverse-primary/12 active:bg-m3-inverse-primary/12",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-m3-inverse-primary",
+                    "transition-colors select-none cursor-pointer"
                   ),
                   children: actionLabel
                 }
@@ -2163,10 +2165,10 @@ var Snackbar = React4__namespace.memo(function Snackbar2({
                 IconButton,
                 {
                   size: "sm",
-                  colorStyle: "filled",
+                  colorStyle: "standard",
                   "aria-label": "Dismiss notification",
                   onClick: handleDismiss,
-                  className: "text-m3-inverse-on-surface bg-m3-inverse-surface",
+                  className: "text-m3-inverse-on-surface hover:bg-m3-inverse-on-surface/8 active:bg-m3-inverse-on-surface/12 focus-visible:ring-m3-inverse-primary",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", "aria-hidden": "true" })
                 }
               )
@@ -2994,7 +2996,6 @@ exports.MD3ThemeProvider = MD3ThemeProvider;
 exports.MaterialSymbolsPreconnect = MaterialSymbolsPreconnect;
 exports.Ripple = Ripple;
 exports.applyTheme = applyTheme;
-exports.cn = cn;
 exports.generateM3Theme = generateM3Theme;
 exports.resolveMode = resolveMode;
 exports.useDOMRipple = useRipple;