@m4l/base 1.6.0 → 1.7.0

package/extended/mui/Typography/constants.d.ts

@@ -13,6 +13,7 @@ export declare const TYPOGRAPHY_CLASSES: Record<"root" | "skeleton", string>;
 export declare const TYPOGRAPHY_FONTS: {
     readonly Inter: "Inter";
     readonly Jura: "Jura";
+    readonly IBMPlexMono: "IBM Plex Mono";
 };
 /**
  * Shared fallback stack used when the primary design-system font is unavailable.

package/extended/mui/Typography/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/constants.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,wBAAwB,kBAAkB,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,6BAA6B,2BAA2B,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,kBAAkB,qCAG9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,+BAA+B,oEACiB,CAAC;AAE9D;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,UAKzD"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/constants.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,wBAAwB,kBAAkB,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,6BAA6B,2BAA2B,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,kBAAkB,qCAG9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,+BAA+B,oEACiB,CAAC;AAE9D;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,UASzD"}

package/extended/mui/Typography/constants.js

@@ -1,20 +1,21 @@
-import { getComponentClasses as t } from "../../../utils/getComponentSlotRoot.js";
+import { getComponentClasses as n } from "../../../utils/getComponentSlotRoot.js";
 import { TypographySlots as r } from "./slots/typographyEnum.js";
-const s = "M4LTypography", P = "M4lclassCssSpecificity", A = t(
+const s = "M4LTypography", M = "M4lclassCssSpecificity", Y = n(
   s,
   r
 ), e = {
   Inter: "Inter",
-  Jura: "Jura"
-}, n = '"Segoe UI",Roboto,"Helvetica Neue","Open Sans",sans-serif';
-function S(o) {
-  return o === e.Inter || o === e.Jura ? `${o},${n}` : o;
+  Jura: "Jura",
+  IBMPlexMono: "IBM Plex Mono"
+}, t = '"Segoe UI",Roboto,"Helvetica Neue","Open Sans",sans-serif';
+function c(o) {
+  return o === e.IBMPlexMono ? '"IBM Plex Mono",monospace' : o === e.Inter || o === e.Jura ? `${o},${t}` : o;
 }
 export {
-  A as TYPOGRAPHY_CLASSES,
-  P as TYPOGRAPHY_CLASS_NAME_SPECIFY,
+  Y as TYPOGRAPHY_CLASSES,
+  M as TYPOGRAPHY_CLASS_NAME_SPECIFY,
   e as TYPOGRAPHY_FONTS,
-  n as TYPOGRAPHY_FONT_FAMILY_FALLBACK,
+  t as TYPOGRAPHY_FONT_FAMILY_FALLBACK,
   s as TYPOGRAPHY_KEY_COMPONENT,
-  S as getTypographyFontFamily
+  c as getTypographyFontFamily
 };

package/extended/mui/Typography/types.d.ts

@@ -8,7 +8,7 @@ import { DeepKeyOf } from '../../../utils/types';
  * Typography color options supported by the component.
  */
 export type TypographyColors = 'text.primary' | 'text.secondary' | 'text.disabled' | string;
-export type TypographyFontsFamily = 'Inter' | 'Jura';
+export type TypographyFontsFamily = 'Inter' | 'Jura' | 'IBM Plex Mono';
 /**
  * Typography props built on top of MUI Typography.
  */

package/extended/mui/Typography/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/types.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,MAAM,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1G,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC;IACrD,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,0DAA0D;IAC1D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAED;;;;GAIG;AACH,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,mBAAmB,EAAE,OAAO,wBAAwB,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/types.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,MAAM,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1G,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC;IACrD,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C,0DAA0D;IAC1D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAED;;;;GAIG;AACH,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,eAAe,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,mBAAmB,EAAE,OAAO,wBAAwB,EAAE,KAAK,CAAC,CAAC"}

package/extended/mui/Typography/typography.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/typography.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAOtE,eAAO,MAAM,gBAAgB,EAAE,gBA8C9B,CAAC"}
+{"version":3,"file":"typography.styles.d.ts","sourceRoot":"","sources":["../../../../../../../packages/base/src/extended/mui/Typography/typography.styles.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAwB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAOtE,eAAO,MAAM,gBAAgB,EAAE,gBAmD9B,CAAC"}

package/extended/mui/Typography/typography.styles.js

@@ -1,7 +1,7 @@
-import { getPropertyByString as o } from "@m4l/core";
-import { getSizeStyles as e } from "../../../utils/getSizeStyles/getSizeStyles.js";
-import { getTypographyStyles as r } from "../../../utils/getTypographyStyles.js";
-import { getTypographyFontFamily as s, TYPOGRAPHY_FONTS as t } from "./constants.js";
+import { getPropertyByString as r } from "@m4l/core";
+import { getSizeStyles as s } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { getTypographyFamilyStyles as t } from "../../../utils/getTypographyStyles.js";
+import { getTypographyFontFamily as e, TYPOGRAPHY_FONTS as o } from "./constants.js";
 const d = {
   /**
    * Root slot styles for the Typography primitive.
@@ -17,19 +17,21 @@ const d = {
       ...i?.disabled || i?.color === "text.disabled" ? {
         color: l.vars.palette.text.disabled
       } : {
-        color: o(
+        color: r(
           l.vars.palette,
           i?.color || "text.primary",
           "text.primary"
         )
       },
-      fontFamily: s(
-        i?.fontFamily ?? t.Inter
+      fontFamily: e(
+        // Figma's Inter/Title/Title resolves to IBM Plex Mono Bold.
+        (!i?.fontFamily || i.fontFamily === o.Inter) && i?.variant === "titleStandard" ? o.IBMPlexMono : i?.fontFamily ?? o.Inter
       ),
-      ...r(
+      ...t(
         l.generalSettings.isMobile,
         i?.size || "medium",
-        i?.variant || "bodyStandard"
+        i?.variant || "bodyStandard",
+        i?.fontFamily ?? o.Inter
       ),
       ...i?.ellipsis && {
         overflow: "hidden",
@@ -43,7 +45,7 @@ const d = {
    * Skeleton slot styles for the Typography primitive.
    */
   skeleton: ({ theme: i, ownerState: l }) => ({
-    ...e(i, l?.size || "medium", "base")
+    ...s(i, l?.size || "medium", "base")
   })
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/base",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },

package/utils/getTypographyStyles.d.ts

@@ -1,4 +1,4 @@
-import { FontProperties, Sizes, TypographyVariantProp } from '@m4l/styles';
+import { FontProperties, Sizes, TYPOGRAPHY_SIZES_BY_FAMILY, TypographyVariantProp } from '@m4l/styles';
 /**
  * Returns typography token styles for use in component CSS.
  * @param variant - Typography variant to apply (design-system or legacy name; unknown keys fall back to `bodyStandard`).
@@ -6,4 +6,6 @@ import { FontProperties, Sizes, TypographyVariantProp } from '@m4l/styles';
  * @param size - `small` or `medium` from the component or `AppearanceComponentProvider`.
  */
 export declare const getTypographyStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variant: TypographyVariantProp) => FontProperties;
+/** Resolve family-specific typography while preserving semantic aliases and the body fallback. */
+export declare const getTypographyFamilyStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variant: TypographyVariantProp, fontFamily: keyof typeof TYPOGRAPHY_SIZES_BY_FAMILY) => FontProperties;
 //# sourceMappingURL=getTypographyStyles.d.ts.map

package/utils/getTypographyStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getTypographyStyles.d.ts","sourceRoot":"","sources":["../../../../../packages/base/src/utils/getTypographyStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,KAAK,EAGL,qBAAqB,EAEtB,MAAM,aAAa,CAAC;AAsBrB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAC9B,UAAU,OAAO,EACjB,MAAM,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,EACxC,SAAS,qBAAqB,KAC7B,cAUF,CAAC"}
+{"version":3,"file":"getTypographyStyles.d.ts","sourceRoot":"","sources":["../../../../../packages/base/src/utils/getTypographyStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAEd,KAAK,EACL,0BAA0B,EAC1B,qBAAqB,EAEtB,MAAM,aAAa,CAAC;AAsBrB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAC9B,UAAU,OAAO,EACjB,MAAM,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,EACxC,SAAS,qBAAqB,KAC7B,cAEF,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,yBAAyB,GACpC,UAAU,OAAO,EACjB,MAAM,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,EACxC,SAAS,qBAAqB,EAC9B,YAAY,MAAM,OAAO,0BAA0B,KAClD,cAUF,CAAC"}

package/utils/getTypographyStyles.js

@@ -1,14 +1,15 @@
-import { TYPOGRAPHY_SIZES_MOBILE as d, TYPOGRAPHY_SIZES_DESKTOP as e } from "@m4l/styles";
-const S = "bodyStandard", o = {
+import { TYPOGRAPHY_SIZES_BY_FAMILY as y } from "@m4l/styles";
+const d = "bodyStandard", e = {
   subtitle: "subtitleStandard",
   paragraph: "paragraphStandard",
   body: "bodyStandard",
   action: "bodyStandard",
   caption: "captionStandard"
-}, y = (t) => Object.prototype.hasOwnProperty.call(o, t) ? o[t] : t, i = (t, n, p) => {
-  const r = (t ? d : e)[n], a = y(p);
-  return a in r ? r[a] : r[S];
+}, c = (t) => Object.prototype.hasOwnProperty.call(e, t) ? e[t] : t, A = (t, r, o) => s(t, r, o, "Inter"), s = (t, r, o, p) => {
+  const a = y[p][t ? "mobile" : "desktop"][r], n = c(o);
+  return Object.prototype.hasOwnProperty.call(a, n) ? a[n] : a[d];
 };
 export {
-  i as getTypographyStyles
+  s as getTypographyFamilyStyles,
+  A as getTypographyStyles
 };