@bug-on/m3-expressive 1.1.0 → 1.2.1

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';
@@ -188,6 +188,7 @@ var CardImpl = React18.forwardRef(
       target,
       rel: relProp,
       onClick,
+      asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -198,10 +199,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 +224,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",
@@ -1374,6 +1396,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [
@@ -4196,6 +4247,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]",
@@ -4210,7 +4262,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: {
@@ -4219,19 +4303,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)
     );
   }