@bug-on/m3-expressive 1.3.6 → 1.3.7

package/dist/shapes.d.mts

@@ -1,6 +1,7 @@
 import { M as MD3ShapeName, R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic } from './md3-expressive-shapes-wk_98LJh.mjs';
 export { A as ANGLE_EPSILON, C as CornerFeature, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, d as MD3Shapes, P as Point, f as PointTransformer, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as formatCoordinate, s as getDirection, t as getDistance, u as getDistanceSquared, v as interpolate, w as lerpPoint, x as point, y as positiveModulo, z as radialToCartesian, B as rotate90, G as scalePoint, H as square, I as subtractPoints, J as transformFeature, K as transformPoint } from './md3-expressive-shapes-wk_98LJh.mjs';
 import { ReactNode, CSSProperties } from 'react';
+import { a as MD3ColorToken } from './md3-xBl4wgND.mjs';
 
 /**
  * Material Design 3 Expressive — Shape Pairings & Families.
@@ -512,8 +513,14 @@ interface ShapeIconProps {
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
-    /** Background color. Default: "currentColor". */
-    color?: string;
+    /**
+     * Background color. Default: "currentColor".
+     *
+     * @example
+     * color="var(--md-sys-color-primary-container)"
+     * color="var(--md-sys-color-surface-container-high)"
+     */
+    color?: MD3ColorToken;
     /** ARIA label. */
     "aria-label"?: string;
 }

package/dist/shapes.d.ts

@@ -1,6 +1,7 @@
 import { M as MD3ShapeName, R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic } from './md3-expressive-shapes-wk_98LJh.js';
 export { A as ANGLE_EPSILON, C as CornerFeature, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, d as MD3Shapes, P as Point, f as PointTransformer, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as formatCoordinate, s as getDirection, t as getDistance, u as getDistanceSquared, v as interpolate, w as lerpPoint, x as point, y as positiveModulo, z as radialToCartesian, B as rotate90, G as scalePoint, H as square, I as subtractPoints, J as transformFeature, K as transformPoint } from './md3-expressive-shapes-wk_98LJh.js';
 import { ReactNode, CSSProperties } from 'react';
+import { a as MD3ColorToken } from './md3-xBl4wgND.js';
 
 /**
  * Material Design 3 Expressive — Shape Pairings & Families.
@@ -512,8 +513,14 @@ interface ShapeIconProps {
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
-    /** Background color. Default: "currentColor". */
-    color?: string;
+    /**
+     * Background color. Default: "currentColor".
+     *
+     * @example
+     * color="var(--md-sys-color-primary-container)"
+     * color="var(--md-sys-color-surface-container-high)"
+     */
+    color?: MD3ColorToken;
     /** ARIA label. */
     "aria-label"?: string;
 }

package/dist/{side-sheet-modal-Cw4vemKx.d.ts → side-sheet-modal-BfdgYjd3.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
-import { B as BaseIconButtonProps } from './icon-button-Di8VX6ou.js';
+import { B as BaseIconButtonProps } from './icon-button-DFXp9hze.js';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 

package/dist/{side-sheet-modal-BycxrabB.d.mts → side-sheet-modal-kLfHINFZ.d.mts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
-import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs';
+import { B as BaseIconButtonProps } from './icon-button-BpX9_fwZ.mjs';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
 

package/dist/{split-button-trailing-uncheckable-CGzk7KcG.d.ts → split-button-trailing-uncheckable-BpyIlOdn.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.js';
+import { M as MD3ColorStyle, d as MD3Size, c as MD3Shape } from './md3-xBl4wgND.js';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -583,7 +583,10 @@ interface FABMenuProps {
     /** Custom CSS className for root component. */
     className?: string;
     /**
-     * When `true`, clicking backdrop overlay closes menu.
+     * When `true`, clicking or tapping anywhere outside the FABMenu container closes the menu.
+     * Implemented via document-level pointer listeners (`mousedown` and `touchstart`)
+     * without rendering a blocking full-screen overlay, preserving hover and scroll
+     * interactions on background elements.
      * @default true
      */
     closeOnBackdropClick?: boolean;
@@ -695,10 +698,12 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  * Floating Action Button expansion menu. Toggling trigger button reveals vertically stacked action items.
  *
  * Full MD3 Accessibility implementation:
+ *  - `role="group"` assigned to outer container with non-blocking click-outside detection
  *  - `role="menu"` assigned to container
  *  - `role="menuitem"` assigned to child action items
  *  - Focus lifecycle management: Open -> Focus first/last menu item; Close -> Restore focus to ToggleFAB
  *  - Keyboard navigation: Escape key closes menu, ArrowUp/Down navigates items, Tab moves focus.
+ *  - Click outside: Automatically closes the menu when clicking or tapping outside without blocking background interactions.
  *
  * @example
  * ```tsx
@@ -716,7 +721,6 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  *   aria-label="Quick actions"
  *   alignment="center"
  *   colorVariant="tertiary"
-
  *   items={items}
  * />
  * ```

package/dist/{split-button-trailing-uncheckable-gAz6OAIi.d.mts → split-button-trailing-uncheckable-CpT8iPpr.d.mts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.mjs';
+import { M as MD3ColorStyle, d as MD3Size, c as MD3Shape } from './md3-xBl4wgND.mjs';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -583,7 +583,10 @@ interface FABMenuProps {
     /** Custom CSS className for root component. */
     className?: string;
     /**
-     * When `true`, clicking backdrop overlay closes menu.
+     * When `true`, clicking or tapping anywhere outside the FABMenu container closes the menu.
+     * Implemented via document-level pointer listeners (`mousedown` and `touchstart`)
+     * without rendering a blocking full-screen overlay, preserving hover and scroll
+     * interactions on background elements.
      * @default true
      */
     closeOnBackdropClick?: boolean;
@@ -695,10 +698,12 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  * Floating Action Button expansion menu. Toggling trigger button reveals vertically stacked action items.
  *
  * Full MD3 Accessibility implementation:
+ *  - `role="group"` assigned to outer container with non-blocking click-outside detection
  *  - `role="menu"` assigned to container
  *  - `role="menuitem"` assigned to child action items
  *  - Focus lifecycle management: Open -> Focus first/last menu item; Close -> Restore focus to ToggleFAB
  *  - Keyboard navigation: Escape key closes menu, ArrowUp/Down navigates items, Tab moves focus.
+ *  - Click outside: Automatically closes the menu when clicking or tapping outside without blocking background interactions.
  *
  * @example
  * ```tsx
@@ -716,7 +721,6 @@ declare function FABMenuItem({ icon, label, onClick, disabled, colorVariant, cla
  *   aria-label="Quick actions"
  *   alignment="center"
  *   colorVariant="tertiary"
-
  *   items={items}
  * />
  * ```

package/dist/{text-field-C0VQLp8Y.d.ts → text-field-Ct-LT_2T.d.ts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.js';
-import { b as MD3Size } from './md3-BQhRygSi.js';
+import { d as MD3Size } from './md3-xBl4wgND.js';
 
 /**
  * @file checkbox.tsx

package/dist/{text-field-B1fLh5Sh.d.mts → text-field-D5xiGn-q.d.mts}

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
-import { b as MD3Size } from './md3-BQhRygSi.mjs';
+import { d as MD3Size } from './md3-xBl4wgND.mjs';
 
 /**
  * @file checkbox.tsx

package/llms-full.txt

@@ -132,7 +132,12 @@ Complex components use a structured compound pattern:
 - **SplitButton**: `SplitButtonLayout`, `SplitButtonLeading`, `SplitButtonTrailing` (or `SplitButtonTrailingUncheckable`).
 - **ButtonDistribute**: `ButtonDistribute` (`mode="dynamic" | "fixed" | "mixed"`), spring-animated button layout container for responsive action bars.
 - **Menu Family**: `Menu`, `MenuTrigger`, `MenuContent`, `MenuGroup`, `MenuItem`, `MenuDivider`, `SubMenu`. Features shape morphing (`12dp` standalone corners), `variant="expressive" | "baseline"`, `colorVariant="standard" | "vibrant"`, and `matchTriggerWidth`. Includes `ContextMenu` and static `VerticalMenu`.
-- **Select**: `Select` (Exposed Dropdown Menu & Autocomplete). Wraps `TextField` + `Menu`. Supports `searchable` (real-time filtering), controlled/uncontrolled state, and `onChange={(value, option) => void}`.
+- **TextField**: Supports `filled` (default) and `outlined` variants, floating animated labels, `prefixText`/`suffixText`, `leadingIcon`, `trailingIconMode` (`"none" | "clear" | "password-toggle" | "custom"`), and `type="textarea"` with `autoResize`.
+  - **CRITICAL `onChange` Signature**: `onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void`.
+  - The 1st argument is always the extracted `value: string` (e.g. `onChange={(val) => setValue(val)}`).
+  - The 2nd argument is the native `event` (optional, for accessing event metadata).
+  - ❌ NEVER write `onChange={e => setValue(e.target.value)}` — because `e` is already the `string`, accessing `e.target` causes `TypeError: Cannot read properties of undefined (reading 'value')`.
+- **Select**: `Select` (Exposed Dropdown Menu & Autocomplete). Wraps `TextField` + `Menu`. Supports `searchable` (real-time filtering), controlled/uncontrolled state, and `onChange={(value: string, option?: SelectOption) => void}`.
 
 ### 7.2 Navigation Customization
 - **NavigationBar & NavigationRail**: Support customizable `itemShape` (`"pill" | "circle" | "rounded-rectangle"`), `labelVisibility` (`"labeled" | "auto" | "unlabeled"`), and `fabAlignment` (`"left" | "center"`).
@@ -163,6 +168,14 @@ const state = useDatePickerState({ initialSelectedDateMs: Date.now() });
 <DatePicker state={state} />
 ```
 
+### 7.5 Card Component & Morphing Border Radius
+`Card` (`@bug-on/m3-expressive/layout`) supports static (`<div>`), link (`<m.a>`), and button (`<m.button>`) modes with ripple and elevation physics.
+- **Morphing Border Radius (`morphRadius`)**: Dynamically animates `borderRadius` on hover/press using MD3 spatial spring physics (`framerSprings.fast.spatial`).
+  - `morphRadius={true}`: Default rest `large` (16px) -> hover `extraLarge` (28px).
+  - `morphRadius={{ rest: "medium", hover: "full", pressed: "small" }}`: Granular configuration with preset levels (`MorphRadiusLevel`) or raw numbers (px).
+  - Only active on interactive cards by default (`onClick`, `href`, `interactive`).
+  - Static cards can opt-in by setting `forceMotion={true}` alongside `morphRadius`.
+
 ---
 
 # PART 2: Styling & Design Tokens
@@ -249,8 +262,8 @@ import {
 | `<Button variant="toggle">` (without `selected`) | Must pass both `variant="toggle"` and `selected={boolean}` |
 | `<IconButton>` (without `aria-label`) | `aria-label` is required on icon buttons for accessibility |
 | Manually writing flex math for responsive action bars | Use `<ButtonDistribute mode="dynamic">` for spring-animated responsive width distribution |
-| `onChange={e => setValue(e.target.value)}` on TextField | `onChange={(value) => setValue(value)}` (first argument is a string) |
-| `Select` `onChange` assuming standard React `SyntheticEvent` | Signature is `onChange={(value: string, option?: SelectOption) => void}` |
+| `onChange={e => setValue(e.target.value)}` on TextField | `onChange={(value) => setValue(value)}` — 1st arg is pre-extracted `string`, 2nd arg is optional `event`. Accessing `e.target.value` throws TypeError! |
+| `Select` `onChange` assuming standard React `SyntheticEvent` | Signature is `onChange={(value: string, option?: SelectOption) => void}` (1st arg is `value: string`) |
 | `<TabsList>` (without `variant`) | `variant` prop is required on `TabsList` (`"primary"` or `"secondary"`) |
 | Using `useSnackbar()` outside `MD3ThemeProvider` or `SnackbarProvider` | Ensure provider wraps the tree with `enableSnackbar` |
 | `<DatePicker />` or `<TimePicker />` without `state` prop | Always create state via `useDatePickerState()` or `useTimePickerState()` |
@@ -264,3 +277,5 @@ import {
 | `<DialogContent>` needing full custom close button | Use `closeButton={<YourNode />}` — library auto-wraps in `DialogClose asChild`. When provided, `hideCloseButton` and `closeButtonProps` are ignored |
 | `<DialogFullScreenContent>` action/close disabled during submit | Use `actionButtonProps={{ disabled: isSubmitting }}` and `closeButtonProps={{ disabled: isSubmitting }}` |
 | Building a custom header with `DialogContent` just to control close button style | Use `closeButtonProps={{ colorStyle: "standard" }}` (default) or `"filled"` to override. Only use `hideCloseButton` + custom header when layout positioning is the actual requirement |
+| Expecting `morphRadius` to animate on static `<Card>` without interaction | Static cards render a plain `<div>`. Pass `forceMotion={true}` to promote it to `<m.div>` and enable morph radius animation |
+

package/llms.txt

@@ -77,10 +77,13 @@ function Root({ children }: { children: React.ReactNode }) {
 - **Physics Springs**: Powered by `motion/react` (Framer Motion ≥12). Uses spatial (`FAST_SPATIAL_SPRING`, `DEFAULT_SPATIAL_SPRING`) and effects (`FAST_EFFECTS_SPRING`) springs.
 - **Polymorphism (`asChild`)**: Supported across buttons, cards, drawers, and dialog triggers for custom routing links.
 - **Hoisted State**: `DatePicker` and `TimePicker` are stateless and require `useDatePickerState()` / `useTimePickerState()`.
-- **TextField & Select onChange**: Parameter signature receives `(value: string)` — NOT a raw React SyntheticEvent. `Select` returns `(value: string, option?: SelectOption)`.
+- **TextField & Select onChange**: Parameter signature receives `(value: string)` as the 1st argument — NOT a raw React SyntheticEvent!
+  - `TextField`: `onChange?: (value: string, event: React.ChangeEvent<...>) => void` (write `onChange={(val) => ...}`, NEVER `e.target.value` which throws `TypeError`).
+  - `Select`: `onChange?: (value: string, option?: SelectOption) => void`.
 - **Select & Exposed Dropdowns**: `Select` supports standard dropdown and `searchable` autocomplete mode with real-time option filtering and `matchTriggerWidth` (default `true`).
 - **Menu Family & Morphing**: `Menu`, `ContextMenu`, and `VerticalMenu` feature container shape morphing (`12dp` standalone corners). `MenuContent` `matchTriggerWidth` matches popover width to trigger.
 - **ProgressIndicator & Wavy Motion**: Supports `"linear"` and `"circular"` variants with dynamic `"wavy"` shapes (`shape="wavy"`, `trackShape`, `amplitude`, `wavelength`). `aria-label` is strictly **required**. Indeterminate mode is triggered by omitting the `value` prop (do not use `max` prop). Supports co-elastic animations (`determinateAnimation`, `indeterminateAnimation`) and track stop dots (`showStopIndicator`).
+- **Card & Morphing Border Radius**: Interactive cards support spring-animated border radius morphing on hover/tap via `morphRadius` (default: `16px` rest -> `28px` hover). Static cards can opt-in using `forceMotion={true}`. Configurable via preset tokens (`"large"`, `"extraLarge"`, etc.) or custom numeric px.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",

package/dist/md3-BQhRygSi.d.mts

@@ -1,31 +0,0 @@
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
-
-/** MD3 button color variants */
-type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
-/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
- | "tertiary"
-/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
- | "primary-fixed"
-/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
- | "tertiary-fixed";
-/** MD3 Expressive button sizes */
-type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * MD3 Expressive slot width ratio.
- * Used for icon buttons where width is independent from the size scale.
- * - `"narrow"` – compressed width for dense toolbars.
- * - `"default"` – 1:1 square/round aspect ratio.
- * - `"wide"` – extended width.
- */
-type MD3SlotWidth = "narrow" | "default" | "wide";
-/** MD3 shape families */
-type MD3Shape = "round" | "square";
-/** Helper: PolyMorphic component ref */
-type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
-/** Helper: Props cho polymorphic components */
-type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
-    as?: C;
-    children?: ReactNode;
-};
-
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c, MD3SlotWidth as d };

package/dist/md3-BQhRygSi.d.ts

@@ -1,31 +0,0 @@
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentPropsWithRef } from 'react';
-
-/** MD3 button color variants */
-type MD3ColorStyle = "elevated" | "filled" | "tonal" | "outlined" | "text"
-/** High-chroma tertiary tone — for hero accents, CTAs, expressive moments. */
- | "tertiary"
-/** Brand-stable primary fixed — same hue across light/dark, for badges/pills. */
- | "primary-fixed"
-/** Brand-stable tertiary fixed — same hue across light/dark, for special states. */
- | "tertiary-fixed";
-/** MD3 Expressive button sizes */
-type MD3Size = "xs" | "sm" | "md" | "lg" | "xl";
-/**
- * MD3 Expressive slot width ratio.
- * Used for icon buttons where width is independent from the size scale.
- * - `"narrow"` – compressed width for dense toolbars.
- * - `"default"` – 1:1 square/round aspect ratio.
- * - `"wide"` – extended width.
- */
-type MD3SlotWidth = "narrow" | "default" | "wide";
-/** MD3 shape families */
-type MD3Shape = "round" | "square";
-/** Helper: PolyMorphic component ref */
-type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
-/** Helper: Props cho polymorphic components */
-type PolymorphicProps<C extends ElementType, Props = object> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props> & {
-    as?: C;
-    children?: ReactNode;
-};
-
-export type { MD3ColorStyle as M, PolymorphicProps as P, MD3Shape as a, MD3Size as b, PolymorphicRef as c, MD3SlotWidth as d };