@bug-on/m3-expressive 1.2.0 → 1.2.2

package/dist/layout.d.mts

@@ -30,6 +30,12 @@ interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
     /** rel for `<a>` element (automatically adds `noreferrer` when `target="_blank"`). */
     rel?: string;
     children?: React.ReactNode;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
 
@@ -373,10 +379,21 @@ declare function shouldTopAlign(height: number): boolean;
 declare function getExpressiveShape(state: "resting" | "hovered" | "focused" | "pressed" | "selected" | "dragged" | "disabled"): number;
 
 declare const typographyVariants: (props?: ({
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
+    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "label-large" | "label-medium" | "label-small" | "body-large" | "body-medium" | "body-small" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    /**
+     * Custom HTML element tag override.
+     */
     as?: React.ElementType;
+    /**
+     * Text color override (CSS color value or Tailwind color class).
+     */
+    color?: string;
+    /**
+     * Font weight override.
+     */
+    weight?: string | number;
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 

package/dist/layout.d.ts

@@ -30,6 +30,12 @@ interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
     /** rel for `<a>` element (automatically adds `noreferrer` when `target="_blank"`). */
     rel?: string;
     children?: React.ReactNode;
+    /**
+     * Change the component to the underlying child element and merge props/behavior.
+     * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
+     * @default false
+     */
+    asChild?: boolean;
 }
 declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
 
@@ -373,10 +379,21 @@ declare function shouldTopAlign(height: number): boolean;
 declare function getExpressiveShape(state: "resting" | "hovered" | "focused" | "pressed" | "selected" | "dragged" | "disabled"): number;
 
 declare const typographyVariants: (props?: ({
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
+    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "display-large" | "display-medium" | "display-small" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "label-large" | "label-medium" | "label-small" | "body-large" | "body-medium" | "body-small" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    /**
+     * Custom HTML element tag override.
+     */
     as?: React.ElementType;
+    /**
+     * Text color override (CSS color value or Tailwind color class).
+     */
+    color?: string;
+    /**
+     * Font weight override.
+     */
+    weight?: string | number;
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 

package/dist/layout.js

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
+var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var react = require('motion/react');
 var React18 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
 var m3Tokens = require('@bug-on/m3-tokens');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
 var core = require('@dnd-kit/core');
@@ -128,7 +128,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 }
@@ -210,6 +213,7 @@ var CardImpl = React18__namespace.forwardRef(
       target,
       rel: relProp,
       onClick,
+      asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -220,10 +224,11 @@ var CardImpl = React18__namespace.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(
@@ -244,6 +249,26 @@ var CardImpl = React18__namespace.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__namespace.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        child.props.children
+      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          className: cn(baseClass, interactiveClass),
+          "aria-disabled": disabled ? true : void 0,
+          tabIndex: disabled ? -1 : 0,
+          onPointerDown,
+          onClick
+        }, props), {
+          children: React18__namespace.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     if (!isInteractive) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -1488,6 +1513,7 @@ var ButtonComponent = React18__namespace.forwardRef(
       shape = "round",
       selected,
       icon,
+      selectedIcon,
       iconPosition = "leading",
       loading = false,
       loadingVariant = "loading-indicator",
@@ -1509,6 +1535,7 @@ var ButtonComponent = React18__namespace.forwardRef(
       "shape",
       "selected",
       "icon",
+      "selectedIcon",
       "iconPosition",
       "loading",
       "loadingVariant",
@@ -1608,10 +1635,11 @@ var ButtonComponent = React18__namespace.forwardRef(
       layout: BUTTON_SHAPE_MORPH_SPRING,
       default: SPRING_TRANSITION
     };
+    const activeIcon = isSelected && selectedIcon ? selectedIcon : icon;
     const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       needsTouchTarget && /* @__PURE__ */ jsxRuntime.jsx(TouchTarget, {}),
       /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "popLayout", children: (loading || icon && iconPosition === "leading") && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "wait", children: (loading || activeIcon && iconPosition === "leading") && /* @__PURE__ */ jsxRuntime.jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
@@ -1633,8 +1661,9 @@ var ButtonComponent = React18__namespace.forwardRef(
               trackColor: "transparent",
               "aria-label": "Loading"
             }
-          ) : icon
-        }
+          ) : activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) }),
       labelText && /* @__PURE__ */ jsxRuntime.jsx(
         react.m.span,
@@ -1645,14 +1674,15 @@ var ButtonComponent = React18__namespace.forwardRef(
           children: labelText
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "popLayout", children: icon && iconPosition === "trailing" && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, mode: "wait", children: !loading && activeIcon && iconPosition === "trailing" && /* @__PURE__ */ jsxRuntime.jsx(
         AnimatedIconSlot,
         {
           iconSize: sizeTokens.iconSize,
           ariaHidden: true,
           transition: sharedTransition,
-          children: icon
-        }
+          children: activeIcon
+        },
+        isSelected && selectedIcon ? "selected-icon" : "icon"
       ) })
     ] });
     const handleAsChildPointerDown = React18__namespace.useCallback(
@@ -4247,6 +4277,7 @@ var ListItem = React18__namespace.memo(ListItemImpl);
 var typographyVariants = classVarianceAuthority.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]",
@@ -4261,7 +4292,39 @@ var typographyVariants = classVarianceAuthority.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: {
@@ -4270,19 +4333,21 @@ var typographyVariants = classVarianceAuthority.cva("m-0 p-0 text-m3-on-surface"
 });
 var Text = React18__namespace.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__namespace.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__ */ jsxRuntime.jsx(
       Tag,
       __spreadValues({
         ref,
-        className: cn(typographyVariants({ variant, className }))
+        className: cn(typographyVariants({ variant, className })),
+        style: customStyle
       }, props)
     );
   }