@bug-on/m3-expressive 1.3.6 → 1.3.7

package/dist/layout.mjs

@@ -7,7 +7,7 @@ import { createContext, useState, useCallback, useMemo, useEffect, useContext, c
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cornerRadius } from '@bug-on/m3-tokens';
+import { cornerRadius, framerSprings } from '@bug-on/m3-tokens';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
@@ -122,8 +122,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)",
@@ -226,6 +224,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 cornerRadius) {
+    return `${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,
+    cornerRadius.large,
+    maxPillRadius
+  );
+  const hoverRadius = hoverEffect ? resolveCornerRadius(config.hover, cornerRadius.extraLarge, maxPillRadius) : restRadius;
+  const pressedRadius = config.pressed !== void 0 ? resolveCornerRadius(config.pressed, 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: framerSprings.fast.spatial
+    }
+  };
+}
 var cardVariants = cva(
   "rounded-m3-lg flex flex-col relative overflow-hidden transition-all duration-200",
   {
@@ -269,6 +306,8 @@ var CardImpl = React23.forwardRef(
       whileDrag,
       transition,
       asChild = false,
+      morphRadius = false,
+      forceMotion = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -295,6 +334,8 @@ var CardImpl = React23.forwardRef(
       "whileDrag",
       "transition",
       "asChild",
+      "morphRadius",
+      "forceMotion",
       "children"
     ]);
     const safeVariant = variant || "elevated";
@@ -302,6 +343,39 @@ var CardImpl = React23.forwardRef(
     const isHoverEnabled = hoverEffect !== false && !disableHoverEffect;
     const isRippleEnabled = ripple !== false && !disableRipple && isInteractive && !disabled;
     const isStateLayerEnabled = stateLayer !== false && !disableStateLayer && isInteractive && !disabled;
+    const containerRef = React23.useRef(null);
+    const setRefs = React23.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.useState(
+      void 0
+    );
+    React23.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,
@@ -310,6 +384,14 @@ var CardImpl = React23.forwardRef(
       disableElevation,
       hoverEffect: isHoverEnabled
     });
+    const morphRadiusProps = useCardMorphRadius({
+      morphRadius,
+      disabled,
+      isInteractive,
+      isForceMotion: forceMotion,
+      hoverEffect: isHoverEnabled,
+      maxPillRadius: pillRadius
+    });
     const {
       ripples,
       onPointerDown: rippleOnPointerDown,
@@ -323,8 +405,10 @@ var CardImpl = React23.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
@@ -344,11 +428,12 @@ var CardImpl = React23.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.Children.only(children);
       const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -358,7 +443,7 @@ var CardImpl = React23.forwardRef(
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
         Slot,
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           className: cn(baseClass, interactiveClass),
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
@@ -370,10 +455,28 @@ var CardImpl = React23.forwardRef(
       ) });
     }
     if (!isInteractive) {
+      if (forceMotion && morphRadiusProps) {
+        return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+          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__ */ jsx(
         "div",
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           className: baseClass,
           style: __spreadValues({
             boxShadow: elevationProps.animate.boxShadow
@@ -389,7 +492,7 @@ var CardImpl = React23.forwardRef(
       return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
         m.a,
         __spreadProps(__spreadValues({
-          ref,
+          ref: setRefs,
           href: disabled ? void 0 : href,
           target,
           rel: safeRel,
@@ -397,7 +500,7 @@ var CardImpl = React23.forwardRef(
           "aria-disabled": disabled ? true : void 0,
           tabIndex: disabled ? -1 : 0,
           onPointerDown: handlePointerDown,
-          animate: elevationProps.animate,
+          animate: mergedAnimate,
           whileHover: mergedWhileHover,
           whileTap: mergedWhileTap,
           whileFocus: mergedWhileFocus,
@@ -414,7 +517,7 @@ var CardImpl = React23.forwardRef(
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       m.button,
       __spreadProps(__spreadValues({
-        ref,
+        ref: setRefs,
         type: "button",
         disabled,
         onClick,
@@ -422,7 +525,7 @@ var CardImpl = React23.forwardRef(
         "aria-disabled": disabled ? true : void 0,
         tabIndex: disabled ? -1 : 0,
         onPointerDown: handlePointerDown,
-        animate: elevationProps.animate,
+        animate: mergedAnimate,
         whileHover: mergedWhileHover,
         whileTap: mergedWhileTap,
         whileFocus: mergedWhileFocus,
@@ -6732,6 +6835,6 @@ function TypographyProvider({
   return /* @__PURE__ */ jsx(TypographyContext.Provider, { value, children });
 }
 
-export { Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, FadingBlurMask, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, SHADOW, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveElevationShadow, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useCardElevation, useCarouselA11y, useCarouselKeylines, useListContext, useTypography };
+export { Card, CardContent, CardFooter, CardHeader, CardMedia, Carousel, CarouselGrid, CarouselItem, CarouselScrollClient, CarouselTokens, CodeBlock, DEFAULT_FONT_VARIATION_AXES, Divider, FadingBlurMask, LIST_TOKENS, List, ListContext, ListDivider, ListItem, MD3_EXPRESSIVE_FONT_VARIATION, SHADOW, ScrollArea, ScrollAreaScrollbar, TableOfContents, Text, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, VARIANT_ELEVATION, buildWavePath, cardVariants, getExpressiveShape, getListItemHeight, resolveCornerRadius, resolveElevationShadow, serializeFontVariationAxes, shouldTopAlign, typographyVariants, useCardElevation, useCardMorphRadius, useCarouselA11y, useCarouselKeylines, useListContext, useTypography };
 //# sourceMappingURL=layout.mjs.map
 //# sourceMappingURL=layout.mjs.map