@bug-on/m3-expressive 1.3.5 → 1.3.7

package/dist/layout.d.mts

@@ -2,33 +2,16 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React$1 from 'react';
 import React__default, { HTMLAttributes, ReactNode } from 'react';
 import { HTMLMotionProps } from 'motion/react';
+import * as _bug_on_m3_tokens from '@bug-on/m3-tokens';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
 export { S as ScrollArea, a as ScrollAreaOrientation, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.mjs';
-export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.mjs';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask-CX-bwjNU.mjs';
 import { VariantProps } from 'class-variance-authority';
+import { a as MD3ColorToken } from './md3-xBl4wgND.mjs';
 export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-CKTjvlZ4.mjs';
 import '@radix-ui/react-scroll-area';
 
-/**
- * @file card-tokens.ts
- *
- * MD3 Expressive Card Elevation & Motion Tokens.
- *
- * Elevation levels translated from:
- * - ElevatedCardTokens.kt
- * - FilledCardTokens.kt
- * - OutlinedCardTokens.kt
- * - Elevation.kt
- *
- * Elevation Levels:
- * - Level 0: 0dp (Flat - "none")
- * - Level 1: 1dp (Slight elevation - Elevated rest)
- * - Level 2: 3dp (Hover / Focus elevation for Elevated, Hover for Filled/Outlined)
- * - Level 3: 6dp (Dragged state elevation)
- * - Level 4: 8dp (Pickers/Popups elevation)
- * - Level 5: 12dp (Modals/Dialogs elevation)
- */
 declare const SHADOW: {
     readonly level0: "none";
     readonly level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
@@ -114,6 +97,45 @@ declare function useCardElevation({ variant, disabled, draggable, elevation, dis
         };
     };
 };
+/**
+ * Resolves a `MorphRadiusLevel` key or raw number to a pixel CSS string.
+ * When `level === "full"`, optionally caps at `maxPillRadius` (half of element dimension)
+ * to avoid spring animation visual dead-zones caused by the generic 9999px token.
+ */
+declare function resolveCornerRadius(level: MorphRadiusLevel | number | undefined, fallback: number, maxPillRadius?: number): string;
+interface CardMorphRadiusOptions {
+    morphRadius?: boolean | MorphRadiusConfig;
+    disabled?: boolean;
+    isInteractive?: boolean;
+    isForceMotion?: boolean;
+    hoverEffect?: boolean;
+    /**
+     * Measured radius (px) that perfectly forms a pill shape for this container.
+     * Eliminates visual delay when unhovering cards with `full` radius.
+     */
+    maxPillRadius?: number;
+}
+/**
+ * Hook: Card Morphing Border Radius Animation
+ * Calculates spring-animated border-radius states based on interaction flags and MD3 spatial spring physics.
+ */
+declare function useCardMorphRadius({ morphRadius, disabled, isInteractive, isForceMotion, hoverEffect, maxPillRadius, }: CardMorphRadiusOptions): {
+    animate: {
+        borderRadius: string;
+    };
+    whileHover: {
+        borderRadius: string;
+    } | undefined;
+    whileTap: {
+        borderRadius: string;
+    } | undefined;
+    whileFocus: {
+        borderRadius: string;
+    } | undefined;
+    transition: {
+        borderRadius: _bug_on_m3_tokens.FramerSpring;
+    };
+} | null;
 
 /**
  * @file types.ts
@@ -121,6 +143,33 @@ declare function useCardElevation({ variant, disabled, draggable, elevation, dis
  * Types and interfaces for the MD3 Expressive Card system.
  */
 
+/**
+ * Valid corner radius scale levels defined in MD3 Expressive.
+ */
+type MorphRadiusLevel = "none" | "extraSmall" | "small" | "medium" | "large" | "largeIncreased" | "extraLarge" | "extraLargeIncreased" | "extraExtraLarge" | "full";
+/**
+ * Granular configuration for interactive border-radius morphing.
+ */
+interface MorphRadiusConfig {
+    /**
+     * Resting border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default "large" (16px)
+     */
+    rest?: MorphRadiusLevel | number;
+    /**
+     * Hover border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default "extraLarge" (28px)
+     */
+    hover?: MorphRadiusLevel | number;
+    /**
+     * Pressed / tap border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default same as rest
+     */
+    pressed?: MorphRadiusLevel | number;
+}
 type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
 interface CardProps extends MotionDivProps {
     /**
@@ -207,6 +256,22 @@ interface CardProps extends MotionDivProps {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Enables expressive spring-animated border-radius morphing on interaction.
+     * - `true`: Defaults to `large` (16px) at rest morphing to `extraLarge` (28px) on hover.
+     * - `MorphRadiusConfig`: Granular config for `rest`, `hover`, and `pressed` states.
+     *
+     * Note: Active by default only on interactive cards (`onClick`, `href`, `interactive`).
+     * To enable on static cards, also set `forceMotion={true}`.
+     * @default false
+     */
+    morphRadius?: boolean | MorphRadiusConfig;
+    /**
+     * Forces static cards (cards without `onClick` or `href`) to use Framer Motion `<m.div>`,
+     * enabling interactive hover animations like `morphRadius` and custom `whileHover`.
+     * @default false
+     */
+    forceMotion?: boolean;
 }
 interface CardHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Leading avatar or icon node. */
@@ -837,9 +902,13 @@ interface TextProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<ty
      */
     as?: React$1.ElementType;
     /**
-     * Text color override (CSS color value or Tailwind color class).
+     * Text color override (CSS color value, MD3 system color token, or Tailwind color class).
+     *
+     * @example
+     * color="var(--md-sys-color-primary)"
+     * color="var(--md-sys-color-on-surface-variant)"
      */
-    color?: string;
+    color?: MD3ColorToken;
     /**
      * Font weight override.
      */
@@ -1085,4 +1154,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-export { Card, CardContent, type CardContentProps, type CardElevationConfig, type CardElevationOptions, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Carousel, CarouselGrid, CarouselItem, type CarouselItemScope, type CarouselKeyline, type CarouselKeylineResult, type CarouselLayout, type CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, type CodeBlockProps, Divider, type DividerProps, type ElevationLevel, type KeylineType, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, type MotionDivProps, SHADOW, ScrollAreaProps, type ShadowLevel, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext };
+export { Card, CardContent, type CardContentProps, type CardElevationConfig, type CardElevationOptions, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardMorphRadiusOptions, type CardProps, type CardVariant, Carousel, CarouselGrid, CarouselItem, type CarouselItemScope, type CarouselKeyline, type CarouselKeylineResult, type CarouselLayout, type CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, type CodeBlockProps, Divider, type DividerProps, type ElevationLevel, type KeylineType, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, type MorphRadiusConfig, type MorphRadiusLevel, type MotionDivProps, SHADOW, ScrollAreaProps, type ShadowLevel, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveCornerRadius, resolveElevationShadow, shouldTopAlign, typographyVariants, useCardElevation, useCardMorphRadius, useCarouselA11y, useCarouselKeylines, useListContext };

package/dist/layout.d.ts

@@ -2,33 +2,16 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React$1 from 'react';
 import React__default, { HTMLAttributes, ReactNode } from 'react';
 import { HTMLMotionProps } from 'motion/react';
+import * as _bug_on_m3_tokens from '@bug-on/m3-tokens';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 export { S as ScrollArea, a as ScrollAreaOrientation, c as ScrollAreaScrollbar, d as ScrollAreaType } from './scroll-area-CVS6HyLl.js';
-export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask--uZbBKLj.js';
+export { F as FadingBlurDirection, a as FadingBlurMask, b as FadingBlurMaskProps, c as FadingBlurProps } from './fading-blur-mask-D57UMguz.js';
 import { VariantProps } from 'class-variance-authority';
+import { a as MD3ColorToken } from './md3-xBl4wgND.js';
 export { D as DEFAULT_FONT_VARIATION_AXES, F as FontVariationAxes, M as MD3_EXPRESSIVE_FONT_VARIATION, T as TextStyle, a as Typography, b as TypographyContext, c as TypographyKeyTokens, d as TypographyProvider, e as TypographyProviderProps, f as TypographyTokens, g as TypographyTokensOptions, s as serializeFontVariationAxes, u as useTypography } from './typography-CKTjvlZ4.js';
 import '@radix-ui/react-scroll-area';
 
-/**
- * @file card-tokens.ts
- *
- * MD3 Expressive Card Elevation & Motion Tokens.
- *
- * Elevation levels translated from:
- * - ElevatedCardTokens.kt
- * - FilledCardTokens.kt
- * - OutlinedCardTokens.kt
- * - Elevation.kt
- *
- * Elevation Levels:
- * - Level 0: 0dp (Flat - "none")
- * - Level 1: 1dp (Slight elevation - Elevated rest)
- * - Level 2: 3dp (Hover / Focus elevation for Elevated, Hover for Filled/Outlined)
- * - Level 3: 6dp (Dragged state elevation)
- * - Level 4: 8dp (Pickers/Popups elevation)
- * - Level 5: 12dp (Modals/Dialogs elevation)
- */
 declare const SHADOW: {
     readonly level0: "none";
     readonly level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)";
@@ -114,6 +97,45 @@ declare function useCardElevation({ variant, disabled, draggable, elevation, dis
         };
     };
 };
+/**
+ * Resolves a `MorphRadiusLevel` key or raw number to a pixel CSS string.
+ * When `level === "full"`, optionally caps at `maxPillRadius` (half of element dimension)
+ * to avoid spring animation visual dead-zones caused by the generic 9999px token.
+ */
+declare function resolveCornerRadius(level: MorphRadiusLevel | number | undefined, fallback: number, maxPillRadius?: number): string;
+interface CardMorphRadiusOptions {
+    morphRadius?: boolean | MorphRadiusConfig;
+    disabled?: boolean;
+    isInteractive?: boolean;
+    isForceMotion?: boolean;
+    hoverEffect?: boolean;
+    /**
+     * Measured radius (px) that perfectly forms a pill shape for this container.
+     * Eliminates visual delay when unhovering cards with `full` radius.
+     */
+    maxPillRadius?: number;
+}
+/**
+ * Hook: Card Morphing Border Radius Animation
+ * Calculates spring-animated border-radius states based on interaction flags and MD3 spatial spring physics.
+ */
+declare function useCardMorphRadius({ morphRadius, disabled, isInteractive, isForceMotion, hoverEffect, maxPillRadius, }: CardMorphRadiusOptions): {
+    animate: {
+        borderRadius: string;
+    };
+    whileHover: {
+        borderRadius: string;
+    } | undefined;
+    whileTap: {
+        borderRadius: string;
+    } | undefined;
+    whileFocus: {
+        borderRadius: string;
+    } | undefined;
+    transition: {
+        borderRadius: _bug_on_m3_tokens.FramerSpring;
+    };
+} | null;
 
 /**
  * @file types.ts
@@ -121,6 +143,33 @@ declare function useCardElevation({ variant, disabled, draggable, elevation, dis
  * Types and interfaces for the MD3 Expressive Card system.
  */
 
+/**
+ * Valid corner radius scale levels defined in MD3 Expressive.
+ */
+type MorphRadiusLevel = "none" | "extraSmall" | "small" | "medium" | "large" | "largeIncreased" | "extraLarge" | "extraLargeIncreased" | "extraExtraLarge" | "full";
+/**
+ * Granular configuration for interactive border-radius morphing.
+ */
+interface MorphRadiusConfig {
+    /**
+     * Resting border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default "large" (16px)
+     */
+    rest?: MorphRadiusLevel | number;
+    /**
+     * Hover border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default "extraLarge" (28px)
+     */
+    hover?: MorphRadiusLevel | number;
+    /**
+     * Pressed / tap border radius.
+     * Can be a preset `MorphRadiusLevel` key or a raw pixel number.
+     * @default same as rest
+     */
+    pressed?: MorphRadiusLevel | number;
+}
 type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
 interface CardProps extends MotionDivProps {
     /**
@@ -207,6 +256,22 @@ interface CardProps extends MotionDivProps {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Enables expressive spring-animated border-radius morphing on interaction.
+     * - `true`: Defaults to `large` (16px) at rest morphing to `extraLarge` (28px) on hover.
+     * - `MorphRadiusConfig`: Granular config for `rest`, `hover`, and `pressed` states.
+     *
+     * Note: Active by default only on interactive cards (`onClick`, `href`, `interactive`).
+     * To enable on static cards, also set `forceMotion={true}`.
+     * @default false
+     */
+    morphRadius?: boolean | MorphRadiusConfig;
+    /**
+     * Forces static cards (cards without `onClick` or `href`) to use Framer Motion `<m.div>`,
+     * enabling interactive hover animations like `morphRadius` and custom `whileHover`.
+     * @default false
+     */
+    forceMotion?: boolean;
 }
 interface CardHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Leading avatar or icon node. */
@@ -837,9 +902,13 @@ interface TextProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<ty
      */
     as?: React$1.ElementType;
     /**
-     * Text color override (CSS color value or Tailwind color class).
+     * Text color override (CSS color value, MD3 system color token, or Tailwind color class).
+     *
+     * @example
+     * color="var(--md-sys-color-primary)"
+     * color="var(--md-sys-color-on-surface-variant)"
      */
-    color?: string;
+    color?: MD3ColorToken;
     /**
      * Font weight override.
      */
@@ -1085,4 +1154,4 @@ declare const TypeScaleTokens: {
 };
 type TypeScaleTokensType = typeof TypeScaleTokens;
 
-export { Card, CardContent, type CardContentProps, type CardElevationConfig, type CardElevationOptions, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, type CardVariant, Carousel, CarouselGrid, CarouselItem, type CarouselItemScope, type CarouselKeyline, type CarouselKeylineResult, type CarouselLayout, type CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, type CodeBlockProps, Divider, type DividerProps, type ElevationLevel, type KeylineType, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, type MotionDivProps, SHADOW, ScrollAreaProps, type ShadowLevel, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext };
+export { Card, CardContent, type CardContentProps, type CardElevationConfig, type CardElevationOptions, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardMorphRadiusOptions, type CardProps, type CardVariant, Carousel, CarouselGrid, CarouselItem, type CarouselItemScope, type CarouselKeyline, type CarouselKeylineResult, type CarouselLayout, type CarouselProps, CarouselScrollClient, CarouselTokens, CodeBlock, type CodeBlockProps, Divider, type DividerProps, type ElevationLevel, type KeylineType, LIST_TOKENS, List, ListContext, ListDivider, type ListDividerProps, ListItem, type ListItemLeadingType, type ListItemProps, type ListItemTrailingType, type ListProps, type ListSelectionMode, type ListStyle, type ListVariant, type MorphRadiusConfig, type MorphRadiusLevel, type MotionDivProps, SHADOW, ScrollAreaProps, type ShadowLevel, TableOfContents, type TableOfContentsProps, Text, type TextProps, type ToCItem, TypeScaleTokens, type TypeScaleTokensType, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveCornerRadius, resolveElevationShadow, shouldTopAlign, typographyVariants, useCardElevation, useCardMorphRadius, useCarouselA11y, useCarouselKeylines, useListContext };

package/dist/layout.js

@@ -144,8 +144,6 @@ function useRippleState(options = {}) {
   }, []);
   return { ripples, onPointerDown, removeRipple };
 }
-
-// src/ui/cards/card/card-tokens.ts
 var SHADOW = {
   level0: "none",
   level1: "0px 1px 2px 0px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15)",
@@ -248,6 +246,45 @@ function useCardElevation({
     }
   };
 }
+function resolveCornerRadius(level, fallback, maxPillRadius) {
+  if (level === void 0) return `${fallback}px`;
+  if (typeof level === "number") return `${level}px`;
+  if (level === "full" && maxPillRadius !== void 0 && maxPillRadius > 0) {
+    return `${maxPillRadius}px`;
+  }
+  if (level in m3Tokens.cornerRadius) {
+    return `${m3Tokens.cornerRadius[level]}px`;
+  }
+  return `${fallback}px`;
+}
+function useCardMorphRadius({
+  morphRadius,
+  disabled = false,
+  isInteractive = false,
+  isForceMotion = false,
+  hoverEffect = true,
+  maxPillRadius
+}) {
+  if (!morphRadius) return null;
+  if (!isInteractive && !isForceMotion) return null;
+  const config = typeof morphRadius === "object" ? morphRadius : {};
+  const restRadius = resolveCornerRadius(
+    config.rest,
+    m3Tokens.cornerRadius.large,
+    maxPillRadius
+  );
+  const hoverRadius = hoverEffect ? resolveCornerRadius(config.hover, m3Tokens.cornerRadius.extraLarge, maxPillRadius) : restRadius;
+  const pressedRadius = config.pressed !== void 0 ? resolveCornerRadius(config.pressed, m3Tokens.cornerRadius.large, maxPillRadius) : restRadius;
+  return {
+    animate: { borderRadius: restRadius },
+    whileHover: disabled || !hoverEffect ? void 0 : { borderRadius: hoverRadius },
+    whileTap: disabled ? void 0 : { borderRadius: pressedRadius },
+    whileFocus: disabled || !hoverEffect ? void 0 : { borderRadius: hoverRadius },
+    transition: {
+      borderRadius: m3Tokens.framerSprings.fast.spatial
+    }
+  };
+}
 var cardVariants = classVarianceAuthority.cva(
   "rounded-m3-lg flex flex-col relative overflow-hidden transition-all duration-200",
   {
@@ -291,6 +328,8 @@ var CardImpl = React23__namespace.forwardRef(
       whileDrag,
       transition,
       asChild = false,
+      morphRadius = false,
+      forceMotion = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -317,6 +356,8 @@ var CardImpl = React23__namespace.forwardRef(
       "whileDrag",
       "transition",
       "asChild",
+      "morphRadius",
+      "forceMotion",
       "children"
     ]);
     const safeVariant = variant || "elevated";
@@ -324,6 +365,39 @@ var CardImpl = React23__namespace.forwardRef(
     const isHoverEnabled = hoverEffect !== false && !disableHoverEffect;
     const isRippleEnabled = ripple !== false && !disableRipple && isInteractive && !disabled;
     const isStateLayerEnabled = stateLayer !== false && !disableStateLayer && isInteractive && !disabled;
+    const containerRef = React23__namespace.useRef(null);
+    const setRefs = React23__namespace.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const hasFullRadius = typeof morphRadius === "object" && (morphRadius.rest === "full" || morphRadius.hover === "full" || morphRadius.pressed === "full");
+    const [pillRadius, setPillRadius] = React23__namespace.useState(
+      void 0
+    );
+    React23__namespace.useEffect(() => {
+      if (!hasFullRadius || !containerRef.current) return;
+      const el = containerRef.current;
+      const updateRadius = () => {
+        const h = el.offsetHeight;
+        const w = el.offsetWidth;
+        if (h > 0 && w > 0) {
+          setPillRadius(Math.ceil(Math.min(h, w) / 2));
+        }
+      };
+      updateRadius();
+      if (typeof ResizeObserver !== "undefined") {
+        const ro = new ResizeObserver(updateRadius);
+        ro.observe(el);
+        return () => ro.disconnect();
+      }
+    }, [hasFullRadius]);
     const elevationProps = useCardElevation({
       variant: safeVariant,
       disabled,
@@ -332,6 +406,14 @@ var CardImpl = React23__namespace.forwardRef(
       disableElevation,
       hoverEffect: isHoverEnabled
     });
+    const morphRadiusProps = useCardMorphRadius({
+      morphRadius,
+      disabled,
+      isInteractive,
+      isForceMotion: forceMotion,
+      hoverEffect: isHoverEnabled,
+      maxPillRadius: pillRadius
+    });
     const {
       ripples,
       onPointerDown: rippleOnPointerDown,
@@ -345,8 +427,10 @@ var CardImpl = React23__namespace.forwardRef(
         event
       );
     };
+    const rawVariants = cardVariants({ variant: safeVariant });
+    const variantClass = morphRadiusProps ? rawVariants.replace("rounded-m3-lg", "").replace("transition-all", "") : rawVariants;
     const baseClass = cn(
-      cardVariants({ variant: safeVariant }),
+      variantClass,
       // Disabled state:
       // - pointer-events-none → disable interactions completely
       // - opacity-[0.38] → MD3 DisabledContainerOpacity
@@ -366,11 +450,12 @@ var CardImpl = React23__namespace.forwardRef(
       // Outlined interactive card: smooth transition of border color to m3-outline on hover/focus/press
       safeVariant === "outlined" && "transition-colors duration-200 hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
-    const mergedWhileHover = elevationProps.whileHover || whileHover ? __spreadValues(__spreadValues({}, elevationProps.whileHover), typeof whileHover === "object" ? whileHover : {}) : void 0;
-    const mergedWhileTap = elevationProps.whileTap || whileTap ? __spreadValues(__spreadValues({}, elevationProps.whileTap), typeof whileTap === "object" ? whileTap : {}) : void 0;
-    const mergedWhileFocus = elevationProps.whileFocus || whileFocus ? __spreadValues(__spreadValues({}, elevationProps.whileFocus), typeof whileFocus === "object" ? whileFocus : {}) : void 0;
+    const mergedAnimate = __spreadValues(__spreadValues({}, elevationProps.animate), (morphRadiusProps == null ? void 0 : morphRadiusProps.animate) || {});
+    const mergedWhileHover = elevationProps.whileHover || (morphRadiusProps == null ? void 0 : morphRadiusProps.whileHover) || whileHover ? __spreadValues(__spreadValues(__spreadValues({}, elevationProps.whileHover), morphRadiusProps == null ? void 0 : morphRadiusProps.whileHover), typeof whileHover === "object" ? whileHover : {}) : void 0;
+    const mergedWhileTap = elevationProps.whileTap || (morphRadiusProps == null ? void 0 : morphRadiusProps.whileTap) || whileTap ? __spreadValues(__spreadValues(__spreadValues({}, elevationProps.whileTap), morphRadiusProps == null ? void 0 : morphRadiusProps.whileTap), typeof whileTap === "object" ? whileTap : {}) : void 0;
+    const mergedWhileFocus = elevationProps.whileFocus || (morphRadiusProps == null ? void 0 : morphRadiusProps.whileFocus) || whileFocus ? __spreadValues(__spreadValues(__spreadValues({}, elevationProps.whileFocus), morphRadiusProps == null ? void 0 : morphRadiusProps.whileFocus), typeof whileFocus === "object" ? whileFocus : {}) : void 0;
     const mergedWhileDrag = elevationProps.whileDrag || whileDrag ? __spreadValues(__spreadValues({}, elevationProps.whileDrag), typeof whileDrag === "object" ? whileDrag : {}) : void 0;
-    const mergedTransition = elevationProps.transition || transition ? __spreadValues(__spreadValues({}, elevationProps.transition), typeof transition === "object" ? transition : {}) : void 0;
+    const mergedTransition = elevationProps.transition || (morphRadiusProps == null ? void 0 : morphRadiusProps.transition) || transition ? __spreadValues(__spreadValues(__spreadValues({}, elevationProps.transition), morphRadiusProps == null ? void 0 : morphRadiusProps.transition), typeof transition === "object" ? transition : {}) : void 0;
     if (asChild) {
       const child = React23__namespace.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -380,7 +465,7 @@ var CardImpl = React23__namespace.forwardRef(
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         reactSlot.Slot,
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           className: cn(baseClass, interactiveClass),
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
@@ -392,10 +477,28 @@ var CardImpl = React23__namespace.forwardRef(
       ) });
     }
     if (!isInteractive) {
+      if (forceMotion && morphRadiusProps) {
+        return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          __spreadProps(__spreadValues({
+            ref: setRefs,
+            className: baseClass,
+            "aria-disabled": disabled ? true : void 0,
+            animate: mergedAnimate,
+            whileHover: mergedWhileHover,
+            whileTap: mergedWhileTap,
+            whileFocus: mergedWhileFocus,
+            whileDrag: mergedWhileDrag,
+            transition: mergedTransition
+          }, props), {
+            children
+          })
+        ) });
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           className: baseClass,
           style: __spreadValues({
             boxShadow: elevationProps.animate.boxShadow
@@ -411,7 +514,7 @@ var CardImpl = React23__namespace.forwardRef(
       return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         react.m.a,
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           href: disabled ? void 0 : href,
           target,
           rel: safeRel,
@@ -419,7 +522,7 @@ var CardImpl = React23__namespace.forwardRef(
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
           onPointerDown: handlePointerDown,
-          animate: elevationProps.animate,
+          animate: mergedAnimate,
           whileHover: mergedWhileHover,
           whileTap: mergedWhileTap,
           whileFocus: mergedWhileFocus,
@@ -436,7 +539,7 @@ var CardImpl = React23__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.m.button,
       __spreadProps(__spreadValues({
-        ref,
+        ref: setRefs,
         type: "button",
         disabled,
         onClick,
@@ -444,7 +547,7 @@ var CardImpl = React23__namespace.forwardRef(
         "aria-disabled": disabled ? true : void 0,
         tabIndex: disabled ? -1 : 0,
         onPointerDown: handlePointerDown,
-        animate: elevationProps.animate,
+        animate: mergedAnimate,
         whileHover: mergedWhileHover,
         whileTap: mergedWhileTap,
         whileFocus: mergedWhileFocus,
@@ -6790,11 +6893,13 @@ exports.buildWavePath = buildWavePath;
 exports.cardVariants = cardVariants;
 exports.getExpressiveShape = getExpressiveShape;
 exports.getListItemHeight = getListItemHeight;
+exports.resolveCornerRadius = resolveCornerRadius;
 exports.resolveElevationShadow = resolveElevationShadow;
 exports.serializeFontVariationAxes = serializeFontVariationAxes;
 exports.shouldTopAlign = shouldTopAlign;
 exports.typographyVariants = typographyVariants;
 exports.useCardElevation = useCardElevation;
+exports.useCardMorphRadius = useCardMorphRadius;
 exports.useCarouselA11y = useCarouselA11y;
 exports.useCarouselKeylines = useCarouselKeylines;
 exports.useListContext = useListContext;