@bug-on/md3-react 2.0.3 → 3.0.0

package/test_output.txt

@@ -0,0 +1,164 @@
+
+> @bug-on/md3-react@2.0.3 test
+> vitest run src/ui/menu/menu.test.tsx
+
+
+ RUN  v4.1.0 /Users/stark/Documents/GitHub/bug-on-md3-expressive/packages/react
+
+ ❯ src/ui/menu/menu.test.tsx (28 tests | 8 failed) 16014ms
+     ✓ renders children when open 277ms
+     × MenuItem applies correct shape class for each itemPosition 82ms
+     ✓ MenuItem shows check icon when selected 83ms
+     ✓ MenuItem applies disabled state — opacity class and aria-disabled 66ms
+     × MenuGroup auto-injects correct itemPosition based on child index 56ms
+     × MenuDivider renders with correct role and classes 51ms
+     × Standard variant applies surface-container-low on MenuGroup 49ms
+     × Vibrant variant applies tertiary-container on MenuGroup 49ms
+     ✓ Keyboard ArrowDown: menu opens via click 91ms
+     ✓ Keyboard Escape closes menu 77ms
+     ✓ renders children directly without a trigger 4ms
+     ✓ gap separatorStyle renders no divider elements between groups 3ms
+     ✓ divider separatorStyle inserts an hr between each pair of groups 5ms
+     ✓ VerticalMenuDivider renders as hr with correct classes 2ms
+     ✓ auto-injects index and count props into group children for shape morphing 3ms
+     ✓ standard colorVariant gap: root is transparent, MenuGroup has surface-container-low 3ms
+     ✓ vibrant colorVariant gap: root is transparent, MenuGroup has tertiary-container 2ms
+     ✓ standard colorVariant divider: VerticalMenuContent has surface-container-low 2ms
+     ✓ VerticalMenu root has role=menu and aria-orientation=vertical 2ms
+     ✓ ArrowDown key moves focus to next menuitem 14ms
+     ✓ ArrowUp from first item wraps to last item 9ms
+     ✓ MenuItem inside VerticalMenu shows check icon when selected=true 4ms
+     ✓ renders trigger item correctly 35ms
+     × opens after hoverOpenDelay (default 200ms) 5009ms
+     × closes after hoverCloseDelay (default 300ms) 5008ms
+     ✓ useMenuContext returns default values when used outside Provider 4ms
+     × MenuGroup updates state on hover for shape morphing 5003ms
+     ✓ FAST_SPATIAL_SPRING has correct spring parameters 0ms
+
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 8 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu > MenuItem applies correct shape class for each itemPosition
+AssertionError: expected 'relative flex w-full cursor-pointer s…' to contain 'rounded-t-[12px]'
+
+Expected: "rounded-t-[12px]"
+Received: "relative flex w-full cursor-pointer select-none items-center outline-none min-h-12 min-w-28 max-w-70 px-3 rounded-none transition-[border-radius,background-color] duration-150 ease-in text-m3-on-surface hover:bg-m3-on-surface/8 focus:bg-m3-on-surface/12 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary"
+
+ ❯ src/ui/menu/menu.test.tsx:90:29
+     88|
+     89|   // Shape classes based on ITEM_SHAPE_CLASSES token
+     90|   expect(leading.className).toContain("rounded-t-[12px]");
+       |                             ^
+     91|   expect(leading.className).toContain("rounded-b-[4px]");
+     92|   expect(middle.className).toContain("rounded-[4px]");
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu > MenuGroup auto-injects correct itemPosition based on child index
+AssertionError: expected 'relative flex w-full cursor-pointer s…' to contain 'rounded-t-[12px]'
+
+Expected: "rounded-t-[12px]"
+Received: "relative flex w-full cursor-pointer select-none items-center outline-none min-h-12 min-w-28 max-w-70 px-3 rounded-none transition-[border-radius,background-color] duration-150 ease-in text-m3-on-surface hover:bg-m3-on-surface/8 focus:bg-m3-on-surface/12 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-m3-primary"
+
+ ❯ src/ui/menu/menu.test.tsx:146:27
+    144|
+    145|   // First item should be "leading" shape: rounded-t-[12px] rounded-b-…
+    146|   expect(first.className).toContain("rounded-t-[12px]");
+       |                           ^
+    147|   // Last item should be "trailing" shape: rounded-t-[4px] rounded-b-[…
+    148|   expect(last.className).toContain("rounded-b-[12px]");
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu > MenuDivider renders with correct role and classes
+AssertionError: expected 'my-2 mx-0 h-px border-0 bg-m3-outline…' to contain 'mx-3'
+
+Expected: "mx-3"
+Received: "my-2 mx-0 h-px border-0 bg-m3-outline-variant"
+
+ ❯ src/ui/menu/menu.test.tsx:167:29
+    165|   const divider = screen.getByTestId("divider");
+    166|   expect(divider.getAttribute("role")).toBe("separator");
+    167|   expect(divider.className).toContain("mx-3");
+       |                             ^
+    168|   expect(divider.className).toContain("bg-m3-outline-variant");
+    169|  });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu > Standard variant applies surface-container-low on MenuGroup
+AssertionError: expected 'relative overflow-hidden py-1 bg-tran…' to contain 'bg-m3-surface-container-low'
+
+Expected: "bg-m3-surface-container-low"
+Received: "relative overflow-hidden py-1 bg-transparent"
+
+ ❯ src/ui/menu/menu.test.tsx:186:27
+    184|   );
+    185|   const group = screen.getByTestId("group-standard");
+    186|   expect(group.className).toContain("bg-m3-surface-container-low");
+       |                           ^
+    187|  });
+    188|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu > Vibrant variant applies tertiary-container on MenuGroup
+AssertionError: expected 'relative overflow-hidden py-1 bg-tran…' to contain 'bg-m3-tertiary-container'
+
+Expected: "bg-m3-tertiary-container"
+Received: "relative overflow-hidden py-1 bg-transparent"
+
+ ❯ src/ui/menu/menu.test.tsx:204:27
+    202|   );
+    203|   const group = screen.getByTestId("group-vibrant");
+    204|   expect(group.className).toContain("bg-m3-tertiary-container");
+       |                           ^
+    205|  });
+    206|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[5/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > SubMenu > opens after hoverOpenDelay (default 200ms)
+Error: Test timed out in 5000ms.
+If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
+ ❯ src/ui/menu/menu.test.tsx:513:2
+    511|
+    512|  // 2. SubMenu opens after hover delay
+    513|  it("opens after hoverOpenDelay (default 200ms)", async () => {
+       |  ^
+    514|   vi.useFakeTimers();
+    515|   const user = userEvent.setup({ delay: null });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[6/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > SubMenu > closes after hoverCloseDelay (default 300ms)
+Error: Test timed out in 5000ms.
+If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
+ ❯ src/ui/menu/menu.test.tsx:553:2
+    551|
+    552|  // 3. SubMenu closes after hover close delay
+    553|  it("closes after hoverCloseDelay (default 300ms)", async () => {
+       |  ^
+    554|   vi.useFakeTimers();
+    555|   const user = userEvent.setup({ delay: null });
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[7/8]⎯
+
+ FAIL  src/ui/menu/menu.test.tsx > Menu Internals > MenuGroup updates state on hover for shape morphing
+Error: Test timed out in 5000ms.
+If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
+ ❯ src/ui/menu/menu.test.tsx:616:2
+    614|
+    615|  // 2. MenuGroup shape morphing triggers on hover
+    616|  it("MenuGroup updates state on hover for shape morphing", async () =>…
+       |  ^
+    617|   const user = userEvent.setup();
+    618|   render(
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[8/8]⎯
+
+
+ Test Files  1 failed (1)
+      Tests  8 failed | 20 passed (28)
+   Start at  09:33:33
+   Duration  17.69s (transform 152ms, setup 97ms, import 567ms, tests 16.01s, environment 805ms)
+

package/test_output_v2.txt

@@ -0,0 +1,5 @@
+npm error Missing script: "test"
+npm error
+npm error To see a list of scripts, run:
+npm error   npm run
+npm error A complete log of this run can be found in: /Users/stark/.npm/_logs/2026-04-20T02_34_50_686Z-debug-0.log

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"emitDeclarationOnly": true,
+		"declaration": true,
+		"outDir": "dist"
+	},
+	"exclude": ["src/test", "**/*.test.ts", "**/*.test.tsx"]
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2017",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": false,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx"],
+	"exclude": ["node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,20 @@
+import type { Options } from "tsup";
+import { defineConfig } from "tsup";
+
+const config: Options = {
+	entry: ["src/index.ts"],
+	format: ["cjs", "esm"],
+	dts: true,
+	clean: false, // Tắt clean để tránh nuke mất typography.css khi Next.js đang khởi động
+	// externalize peer dependencies — user project sẽ cung cấp
+	external: ["react", "react-dom", "motion"],
+	// Tree-shaking tối đa, không split vì thư viện nhỏ
+	treeshake: true,
+	splitting: false,
+	sourcemap: true,
+	outDir: "dist",
+	// "use client" sẽ được chèn thủ công bằng script phía sau (copy-assets.js)
+	onSuccess: "node scripts/copy-assets.js",
+};
+
+export default defineConfig(config);

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		environment: "jsdom",
+		globals: true,
+		setupFiles: ["./src/test/setup.ts"],
+	},
+});

package/dist/hooks/useClickOutside.d.ts

@@ -1,8 +0,0 @@
-/**
- * Hook to detect clicks outside of a specified element.
- *
- * @param handler - Callback function to execute when a click outside occurs.
- * @param enabled - Whether the listener is active.
- * @returns A RefObject to be attached to the target element.
- */
-export declare function useClickOutside<T extends HTMLElement>(handler: () => void, enabled?: boolean): import("react").RefObject<T | null>;

package/dist/hooks/useMediaQuery.d.ts

@@ -1,11 +0,0 @@
-/**
- * useMediaQuery — Responsive hook chuẩn SSR-safe
- *
- * Tránh hydration mismatch bằng cách khởi tạo với `false`.
- *
- * @example
- * ```tsx
- * const isMobile = useMediaQuery('(max-width: 768px)');
- * ```
- */
-export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/useRipple.d.ts

@@ -1,26 +0,0 @@
-export interface RippleOptions {
-    /** Thời gian hiệu ứng ripple (ms). Mặc định: 600 */
-    duration?: number;
-    /** Màu ripple. Mặc định: 'currentColor' */
-    color?: string;
-    /** Opacity. Mặc định: 0.12 (chuẩn MD3) */
-    opacity?: number;
-    /** Tắt ripple (ví dụ khi disabled) */
-    disabled?: boolean;
-}
-/**
- * useRipple — Material Design 3 Expressive Ripple Effect
- *
- * Hook thuần DOM, không phụ thuộc thư viện animation ngoài.
- * Chú ý: Yêu cầu element có `position: relative` và `overflow: hidden`.
- *
- * @example
- * ```tsx
- * const { rippleRef, onPointerDown } = useRipple();
- * <button ref={rippleRef} onPointerDown={onPointerDown}>Click me</button>
- * ```
- */
-export declare function useRipple<T extends HTMLElement = HTMLElement>(options?: RippleOptions): {
-    rippleRef: import("react").RefObject<T | null>;
-    onPointerDown: (event: React.PointerEvent<T>) => void;
-};

package/dist/lib/material-symbols-preconnect.d.ts

@@ -1,42 +0,0 @@
-/**
- * MaterialSymbolsPreconnect
- *
- * Inject preconnect resource hints cho Google Fonts CDN và <head>.
- * Đặt component này CÀNG SỚM CÀNG TỐT trong app tree, lý tưởng là
- * ngay trong <head> hoặc root layout.
- *
- * WHY THIS MATTERS:
- * Nếu @import url() nằm trong CSS file, browser phải:
- * 1. Parse HTML -> download JS bundle -> execute CSS -> gặp @import -> mới bắt đầu connect Google Fonts
- * Preconnect hints cho phép browser bắt đầu TCP handshake + TLS ngay từ bước 1,
- * tiết kiệm 100-500ms connection time tùy network.
- *
- * USAGE:
- * ```tsx
- * // app/layout.tsx (Next.js) hoặc index.html equivalent
- * import { MaterialSymbolsPreconnect } from '@bug-on/md3-react';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <head>
- *         <MaterialSymbolsPreconnect />
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * }
- * ```
- *
- * NOTE: Chỉ dùng component này với CDN mode.
- * Với self-hosted fonts thì không cần preconnect đến external origin.
- */
-export interface MaterialSymbolsPreconnectProps {
-    /**
-     * Mảng các biến thể font Material Symbols cần tải.
-     * Chỉ nên chọn các biến thể mà ứng dụng thực sự sử dụng để tiết kiệm băng thông.
-     * @default ["outlined"]
-     */
-    variants?: Array<"outlined" | "rounded" | "sharp">;
-}
-export declare function MaterialSymbolsPreconnect({ variants, }: MaterialSymbolsPreconnectProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/theme-utils.d.ts

@@ -1,63 +0,0 @@
-export type ThemeMode = "light" | "dark";
-export interface MD3ColorScheme {
-    primary: string;
-    onPrimary: string;
-    primaryContainer: string;
-    onPrimaryContainer: string;
-    inversePrimary: string;
-    primaryFixed: string;
-    primaryFixedDim: string;
-    onPrimaryFixed: string;
-    onPrimaryFixedVariant: string;
-    secondary: string;
-    onSecondary: string;
-    secondaryContainer: string;
-    onSecondaryContainer: string;
-    secondaryFixed: string;
-    secondaryFixedDim: string;
-    onSecondaryFixed: string;
-    onSecondaryFixedVariant: string;
-    tertiary: string;
-    onTertiary: string;
-    tertiaryContainer: string;
-    onTertiaryContainer: string;
-    tertiaryFixed: string;
-    tertiaryFixedDim: string;
-    onTertiaryFixed: string;
-    onTertiaryFixedVariant: string;
-    error: string;
-    onError: string;
-    errorContainer: string;
-    onErrorContainer: string;
-    surface: string;
-    onSurface: string;
-    surfaceVariant: string;
-    onSurfaceVariant: string;
-    surfaceTint: string;
-    surfaceContainerLowest: string;
-    surfaceContainerLow: string;
-    surfaceContainer: string;
-    surfaceContainerHigh: string;
-    surfaceContainerHighest: string;
-    inverseSurface: string;
-    inverseOnSurface: string;
-    background: string;
-    onBackground: string;
-    outline: string;
-    outlineVariant: string;
-    shadow: string;
-    scrim: string;
-}
-/**
- * Generate a complete MD3 color scheme from a source color hex string.
- * Uses the HCT color space algorithm — same as Material You on Android.
- */
-export declare function generateM3Theme(sourceColorHex: string, mode?: ThemeMode): MD3ColorScheme;
-/**
- * Apply an MD3 dynamic color scheme to the document root as CSS custom properties.
- * Sets both `--md-sys-color-*` tokens (used by components) and
- * `--color-m3-*` tokens (used by Tailwind arbitrary values in apps).
- *
- * Also sets `data-theme` attribute for dark mode CSS selectors.
- */
-export declare function applyTheme(sourceColorHex: string, mode?: ThemeMode, root?: HTMLElement): void;

package/dist/lib/utils.d.ts

@@ -1,2 +0,0 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export type { MD3ColorStyle, MD3Shape, MD3Size, PolymorphicProps, PolymorphicRef, } from "./md3";

package/dist/types/md3.d.ts

@@ -1,14 +0,0 @@
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactNode } from "react";
-/** MD3 button color variants */
-export type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text";
-/** MD3 Expressive button sizes */
-export type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
-/** MD3 shape families */
-export type MD3Shape = "round" | "square";
-/** Helper: PolyMorphic component ref */
-export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
-/** Helper: Props cho polymorphic components */
-export type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
-    as?: C;
-    children?: ReactNode;
-};

package/dist/ui/app-bar/app-bar-column.d.ts

@@ -1,28 +0,0 @@
-/**
- * @file app-bar-column.tsx
- * MD3 Expressive App Bar Column DSL.
- *
- * Displays App Bar action items in a vertical column.
- * Overflow items collapse into a dropdown menu.
- *
- * @see docs/m3/app-bars/AppBarColumn.kt
- */
-import type { AppBarColumnProps } from "./app-bar.types";
-/**
- * MD3 Expressive App Bar Column.
- *
- * Renders action items in a vertical column. Commonly used in
- * side navigation or rail-style App Bars.
- *
- * @example
- * ```tsx
- * <AppBarColumn
- *   maxItemCount={3}
- *   items={[
- *     { type: 'clickable', icon: <Icon>edit</Icon>, label: 'Edit', onClick: handleEdit },
- *     { type: 'clickable', icon: <Icon>delete</Icon>, label: 'Delete', onClick: handleDelete },
- *   ]}
- * />
- * ```
- */
-export declare function AppBarColumn({ items, maxItemCount, className, }: AppBarColumnProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/app-bar/app-bar-item-button.d.ts

@@ -1,16 +0,0 @@
-/**
- * @file app-bar-item-button.tsx
- * Shared icon button renderer for AppBarRow and AppBarColumn items.
- *
- * Extracted from duplicate RowItem/ColumnItem implementations.
- */
-import type { AppBarItem } from "./app-bar.types";
-interface AppBarItemButtonProps {
-    item: AppBarItem;
-}
-/**
- * Renders a single App Bar action item as an icon button.
- * Handles clickable, toggleable, and custom item types.
- */
-export declare function AppBarItemButton({ item }: AppBarItemButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ui/app-bar/app-bar-overflow-indicator.d.ts

@@ -1,18 +0,0 @@
-/**
- * @file app-bar-overflow-indicator.tsx
- * MD3 Expressive App Bar Overflow Indicator.
- *
- * Renders a "More" (more_vert) icon button that opens a Radix UI
- * DropdownMenu containing overflow App Bar items.
- *
- * Used internally by <AppBarRow> and <AppBarColumn> when items exceed
- * the visible count.
- */
-import type { AppBarOverflowIndicatorProps } from "./app-bar.types";
-/**
- * MD3 App Bar Overflow Indicator.
- *
- * Renders a "more_vert" button that opens a dropdown menu
- * with overflow action items.
- */
-export declare function AppBarOverflowIndicator({ items, className, }: AppBarOverflowIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/app-bar/app-bar-row.d.ts

@@ -1,36 +0,0 @@
-/**
- * @file app-bar-row.tsx
- * MD3 Expressive App Bar Row DSL.
- *
- * Displays App Bar action items in a horizontal row.
- * Items that exceed `maxItemCount` or available width collapse into a
- * dropdown menu via <AppBarOverflowIndicator>.
- *
- * Translated from OverflowMeasurePolicy / AppBarRow.kt in Jetpack Compose M3.
- *
- * @see docs/m3/app-bars/AppBarRow.kt
- */
-import type { AppBarRowProps } from "./app-bar.types";
-/**
- * MD3 Expressive App Bar Row.
- *
- * Renders action items in a row. Compatible with the `actions` prop of any App Bar.
- *
- * @example
- * ```tsx
- * <SmallAppBar
- *   title="Messages"
- *   actions={
- *     <AppBarRow
- *       maxItemCount={2}
- *       items={[
- *         { type: 'clickable', icon: <Icon>search</Icon>, label: 'Search', onClick: handleSearch },
- *         { type: 'clickable', icon: <Icon>bookmark</Icon>, label: 'Bookmarks', onClick: handleBookmark },
- *         { type: 'clickable', icon: <Icon>settings</Icon>, label: 'Settings', onClick: handleSettings },
- *       ]}
- *     />
- *   }
- * />
- * ```
- */
-export declare function AppBarRow({ items, maxItemCount, className }: AppBarRowProps): import("react/jsx-runtime").JSX.Element;