@bug-on/m3-expressive 1.2.0 → 1.2.2

package/dist/layout.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { m, LazyMotion, domMax, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
 import * as React18 from 'react';
@@ -6,7 +7,6 @@ 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 { Slot } from '@radix-ui/react-slot';
 import { cornerRadius } 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';
@@ -106,7 +106,10 @@ function useRippleState(options = {}) {
       const rect = e.currentTarget.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      const rippleSize = Math.hypot(rect.width, rect.height) * 2;
+      const rippleSize = Math.max(
+        Math.hypot(rect.width, rect.height) * 2.5,
+        320
+      );
       setRipples((prev) => [
         ...prev,
         { id: Date.now(), x, y, size: rippleSize }
@@ -188,6 +191,7 @@ var CardImpl = React18.forwardRef(
       target,
       rel: relProp,
       onClick,
+      asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -198,10 +202,11 @@ var CardImpl = React18.forwardRef(
       "target",
       "rel",
       "onClick",
+      "asChild",
       "children"
     ]);
     const safeVariant = variant;
-    const isInteractive = !!onClick || !!href || interactive;
+    const isInteractive = !!onClick || !!href || interactive || asChild;
     const elevationProps = useCardElevation(safeVariant, disabled);
     const { ripples, onPointerDown, removeRipple } = useRippleState();
     const baseClass = cn(
@@ -222,6 +227,26 @@ var CardImpl = React18.forwardRef(
       // Outlined interactive card: change border color to m3-outline on focus/press/hover
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
+    if (asChild) {
+      const child = React18.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        child.props.children
+      ] });
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(baseClass, interactiveClass),
+          "aria-disabled": disabled ? true : void 0,
+          tabIndex: disabled ? -1 : 0,
+          onPointerDown,
+          onClick
+        }, props), {
+          children: React18.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     if (!isInteractive) {
       return /* @__PURE__ */ jsx(
         "div",
@@ -1466,6 +1491,7 @@ var ButtonComponent = React18.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -1487,6 +1513,7 @@ var ButtonComponent = React18.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -1586,10 +1613,11 @@ var ButtonComponent = React18.forwardRef(
       layout: BUTTON_SHAPE_MORPH_SPRING,
       default: SPRING_TRANSITION
     };
+    const activeIcon = isSelected && selectedIcon ? selectedIcon : icon;
     const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsx(TouchTarget, {}),
       /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: (loading || icon && iconPosition === "leading") && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: (loading || activeIcon && iconPosition === "leading") && /* @__PURE__ */ jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
@@ -1611,8 +1639,9 @@ var ButtonComponent = React18.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsx(
         m.span,
@@ -1623,14 +1652,15 @@ var ButtonComponent = React18.forwardRef(
           children: labelText
         }
       ),
-      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: icon && iconPosition === "trailing" && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !loading && activeIcon && iconPosition === "trailing" && /* @__PURE__ */ jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
           ariaHidden: true,
           transition: sharedTransition,
-          children: icon
-        }
+          children: activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) })
     ] });
     const handleAsChildPointerDown = React18.useCallback(
@@ -4225,6 +4255,7 @@ var ListItem = React18.memo(ListItemImpl);
 var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
   variants: {
     variant: {
+      // Short hyphenated
       "display-lg": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
       "display-md": "text-[45px] leading-[52px] font-normal tracking-[0px]",
       "display-sm": "text-[36px] leading-[44px] font-normal tracking-[0px]",
@@ -4239,7 +4270,39 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
       "label-sm": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
       "body-lg": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
       "body-md": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
-      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
+      "body-sm": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
+      // Full hyphenated aliases
+      "display-large": "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
+      "display-medium": "text-[45px] leading-[52px] font-normal tracking-[0px]",
+      "display-small": "text-[36px] leading-[44px] font-normal tracking-[0px]",
+      "headline-large": "text-[32px] leading-[40px] font-normal tracking-[0px]",
+      "headline-medium": "text-[28px] leading-[36px] font-normal tracking-[0px]",
+      "headline-small": "text-[24px] leading-[32px] font-normal tracking-[0px]",
+      "title-large": "text-[22px] leading-[28px] font-normal tracking-[0px]",
+      "title-medium": "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
+      "title-small": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-large": "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      "label-medium": "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
+      "label-small": "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
+      "body-large": "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
+      "body-medium": "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
+      "body-small": "text-[12px] leading-[16px] font-normal tracking-[0.4px]",
+      // CamelCase aliases
+      displayLarge: "text-[57px] leading-[64px] font-normal tracking-[-0.25px]",
+      displayMedium: "text-[45px] leading-[52px] font-normal tracking-[0px]",
+      displaySmall: "text-[36px] leading-[44px] font-normal tracking-[0px]",
+      headlineLarge: "text-[32px] leading-[40px] font-normal tracking-[0px]",
+      headlineMedium: "text-[28px] leading-[36px] font-normal tracking-[0px]",
+      headlineSmall: "text-[24px] leading-[32px] font-normal tracking-[0px]",
+      titleLarge: "text-[22px] leading-[28px] font-normal tracking-[0px]",
+      titleMedium: "text-[16px] leading-[24px] font-medium tracking-[0.15px]",
+      titleSmall: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      labelLarge: "text-[14px] leading-[20px] font-medium tracking-[0.1px]",
+      labelMedium: "text-[12px] leading-[16px] font-medium tracking-[0.5px]",
+      labelSmall: "text-[11px] leading-[16px] font-medium tracking-[0.5px]",
+      bodyLarge: "text-[16px] leading-[24px] font-normal tracking-[0.5px]",
+      bodyMedium: "text-[14px] leading-[20px] font-normal tracking-[0.25px]",
+      bodySmall: "text-[12px] leading-[16px] font-normal tracking-[0.4px]"
     }
   },
   defaultVariants: {
@@ -4248,19 +4311,21 @@ var typographyVariants = cva("m-0 p-0 text-m3-on-surface", {
 });
 var Text = React18.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant, as: Component } = _b, props = __objRest(_b, ["className", "variant", "as"]);
+    var _b = _a, { className, variant, as: Component, color, weight, style } = _b, props = __objRest(_b, ["className", "variant", "as", "color", "weight", "style"]);
     const defaultComponent = React18.useMemo(() => {
-      if ((variant == null ? void 0 : variant.startsWith("display")) || (variant == null ? void 0 : variant.startsWith("headline")))
-        return "h1";
-      if (variant == null ? void 0 : variant.startsWith("title")) return "h2";
+      const v = variant ? String(variant).toLowerCase() : "";
+      if (v.startsWith("display") || v.startsWith("headline")) return "h1";
+      if (v.startsWith("title")) return "h2";
       return "p";
     }, [variant]);
     const Tag = Component || defaultComponent;
+    const customStyle = __spreadValues(__spreadValues(__spreadValues({}, style), color ? { color } : {}), weight ? { fontWeight: weight } : {});
     return /* @__PURE__ */ jsx(
       Tag,
       __spreadValues({
         ref,
-        className: cn(typographyVariants({ variant, className }))
+        className: cn(typographyVariants({ variant, className })),
+        style: customStyle
       }, props)
     );
   }