@bug-on/m3-expressive 1.1.0 → 1.2.1

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');
@@ -210,6 +210,7 @@ var CardImpl = React18__namespace.forwardRef(
       target,
       rel: relProp,
       onClick,
+      asChild = false,
       children
     } = _b, props = __objRest(_b, [
       "className",
@@ -220,10 +221,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 +246,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",
@@ -1396,6 +1418,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 = [
@@ -4218,6 +4269,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]",
@@ -4232,7 +4284,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: {
@@ -4241,19 +4325,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)
     );
   }