@hashicorp/mds-react 0.9.11 → 0.9.12

package/components/text/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType } from 'react';
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 declare const TEXT_COLORS: readonly ["primary", "strong", "faint", "disabled", "high-contrast", "action", "action-hover", "action-active", "highlight", "highlight-on-surface", "highlight-high-contrast", "success", "success-on-surface", "success-high-contrast", "warning", "warning-on-surface", "warning-high-contrast", "critical", "critical-on-surface", "critical-high-contrast"];
 declare const TEXT_GROUPS: readonly ["hds-body", "code", "body", "display-expressive", "label"];
 declare const TEXT_SIZES: readonly ["100", "200", "300", "400", "500", "600", "700", "800"];
@@ -10,35 +10,60 @@ type TextSize = (typeof TEXT_SIZES)[number];
 type HexColor = string & {
     hexish?: unknown;
 };
-interface BaseTextProps<T extends ElementType> extends React.PropsWithChildren {
-    tag?: T;
+interface BaseTextProps {
     size?: TextSize;
     weight?: TextWeight;
     align?: 'left' | 'center' | 'right';
     color?: TextColor | HexColor;
     className?: string;
+    children?: ReactNode;
 }
-interface TextImplProps<T extends ElementType> extends BaseTextProps<T> {
+type PolymorphicTextProps<TTag extends ElementType, OwnProps extends object> = OwnProps & {
+    tag?: TTag;
+} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps | 'tag'>;
+interface TextImplInternalProps extends BaseTextProps {
     group: TextGroup;
+    tag?: ElementType;
+    [key: string]: unknown;
 }
-interface BodyProps<T extends ElementType> extends BaseTextProps<T> {
+/** ------------------------------------------------------------------
+ * Body
+ * ------------------------------------------------------------------ */
+interface BodyOwnProps extends BaseTextProps {
     size?: '200' | '300' | '400';
 }
-interface DisplayExpressiveProps<T extends ElementType> extends BaseTextProps<T> {
+export type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, BodyOwnProps>;
+/** ------------------------------------------------------------------
+ * DisplayExpressive
+ * ------------------------------------------------------------------ */
+interface DisplayExpressiveOwnProps extends BaseTextProps {
     size?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800';
 }
-type LabelProps<T extends ElementType> = Omit<BaseTextProps<T>, 'size'>;
-interface HDSBodyProps<T extends ElementType> extends BaseTextProps<T> {
+export type DisplayExpressiveProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, DisplayExpressiveOwnProps>;
+/** ------------------------------------------------------------------
+ * Label
+ * ------------------------------------------------------------------ */
+type LabelOwnProps = Omit<BaseTextProps, 'size'>;
+export type LabelProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, LabelOwnProps>;
+/** ------------------------------------------------------------------
+ * HDSBody
+ * ------------------------------------------------------------------ */
+interface HDSBodyOwnProps extends BaseTextProps {
     size?: '100' | '200' | '300';
 }
-interface CodeProps<T extends ElementType> extends BaseTextProps<T> {
+export type HDSBodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, HDSBodyOwnProps>;
+/** ------------------------------------------------------------------
+ * Code
+ * ------------------------------------------------------------------ */
+interface CodeOwnProps extends BaseTextProps {
     size?: '100' | '200' | '300';
 }
+export type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, CodeOwnProps>;
 declare const Text: {
-    Body: <T extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, ...rest }: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
-    DisplayExpressive: <T_2 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, ...rest }: DisplayExpressiveProps<T_2> & Omit<ComponentPropsWithRef<T_2>, keyof DisplayExpressiveProps<T_2>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
-    Label: <T_3 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>(props: LabelProps<T_3> & Omit<ComponentPropsWithRef<T_3>, "children" | "className" | "color" | "tag" | "weight" | "align">) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
-    HDSBody: <T_4 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, weight, ...rest }: HDSBodyProps<T_4> & Omit<ComponentPropsWithRef<T_4>, keyof HDSBodyProps<T_4>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
-    Code: <T_5 extends ElementType<any, keyof import("react").JSX.IntrinsicElements>>({ size, weight, ...rest }: CodeProps<T_5> & Omit<ComponentPropsWithRef<T_5>, keyof CodeProps<T_5>>) => import('react').FunctionComponentElement<TextImplProps<ElementType<any, keyof import("react").JSX.IntrinsicElements>> & Omit<any, keyof TextImplProps<T_1>>>;
+    Body: <TTag extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: BodyProps<TTag>) => import('react').FunctionComponentElement<TextImplInternalProps>;
+    DisplayExpressive: <TTag_1 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: DisplayExpressiveProps<TTag_1>) => import('react').FunctionComponentElement<TextImplInternalProps>;
+    Label: <TTag_2 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: LabelProps<TTag_2>) => import('react').FunctionComponentElement<TextImplInternalProps>;
+    HDSBody: <TTag_3 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: HDSBodyProps<TTag_3>) => import('react').FunctionComponentElement<TextImplInternalProps>;
+    Code: <TTag_4 extends ElementType<any, keyof import("react").JSX.IntrinsicElements> = "span">(props: CodeProps<TTag_4>) => import('react').FunctionComponentElement<TextImplInternalProps>;
 };
 export { Text, TEXT_COLORS, TEXT_WEIGHTS };

package/components/text/index.js

@@ -1,8 +1,8 @@
 import { jsx as y } from "react/jsx-runtime";
-import l from "classnames";
-import { createElement as e } from "react";
-import m from "./style.module.scss.js";
-const b = [
+import m from "classnames";
+import { createElement as n } from "react";
+import b from "./style.module.scss.js";
+const f = [
   "primary",
   "strong",
   "faint",
@@ -23,90 +23,96 @@ const b = [
   "critical",
   "critical-on-surface",
   "critical-high-contrast"
-], B = ["regular", "medium", "semibold", "bold"];
-function f(r, o) {
+], z = ["regular", "medium", "semibold", "bold"];
+function T(s, t) {
   return {
-    "hds-body": `mds-typography-legacy-body-${o}`,
-    code: `mds-typography-code-${o}`,
-    "display-expressive": `mds-typography-display-expressive-${o}`,
+    "hds-body": `mds-typography-legacy-body-${t}`,
+    code: `mds-typography-code-${t}`,
+    "display-expressive": `mds-typography-display-expressive-${t}`,
     label: "mds-typography-label",
-    body: `mds-typography-body-${o}`
-  }[r];
+    body: `mds-typography-body-${t}`
+  }[s];
 }
-const n = ({
-  tag: r,
-  group: o,
-  size: s = "200",
-  weight: a,
-  align: c,
-  color: t,
-  children: p,
-  className: g,
-  ...d
-}) => {
-  const h = r ?? "span", u = f(o, s), i = b.includes(t);
+const c = (s) => {
+  const {
+    tag: t,
+    group: o,
+    size: r = "200",
+    weight: e,
+    align: i,
+    color: a,
+    children: p,
+    className: l,
+    ...d
+  } = s, h = t ?? "span", u = T(o, r), g = f.includes(a);
   return /* @__PURE__ */ y(
     h,
     {
-      className: l(
+      className: m(
         u,
         {
-          [m[`align-${c}`]]: c,
-          [`mds-typography-font-weight-${a}`]: a,
-          [`mds-foreground-${t}`]: t && i
+          [b[`align-${i}`]]: i,
+          [`mds-typography-font-weight-${e}`]: e,
+          [`mds-foreground-${a}`]: a && g
         },
-        g
+        l
       ),
-      style: t && !i ? { color: t } : {},
+      style: a && !g ? { color: a } : {},
       ...d,
       children: p
     }
   );
-}, T = ({
-  size: r = "300",
-  ...o
-}) => e(n, {
-  ...o,
-  size: r,
-  group: "body"
-}), x = ({
-  size: r = "200",
-  ...o
-}) => e(n, {
-  ...o,
-  size: r,
-  group: "display-expressive"
-}), v = (r) => e(n, {
-  ...r,
-  group: "label"
-}), $ = ({
-  size: r = "200",
-  weight: o = "regular",
-  ...s
-}) => e(n, {
-  ...s,
-  size: r,
-  weight: o,
-  group: "hds-body"
-}), E = ({
-  size: r = "200",
-  weight: o = "regular",
-  ...s
-}) => e(n, {
-  ...s,
-  size: r,
-  weight: o,
-  group: "code"
-}), D = {
-  Body: T,
-  DisplayExpressive: x,
-  Label: v,
+}, x = (s) => {
+  const { tag: t, size: o = "300", ...r } = s;
+  return n(c, {
+    ...r,
+    tag: t ?? "span",
+    size: o,
+    group: "body"
+  });
+}, v = (s) => {
+  const { tag: t, size: o = "200", ...r } = s;
+  return n(c, {
+    ...r,
+    tag: t ?? "span",
+    size: o,
+    group: "display-expressive"
+  });
+}, w = (s) => {
+  const { tag: t, ...o } = s;
+  return n(c, {
+    ...o,
+    tag: t ?? "span",
+    group: "label"
+  });
+}, $ = (s) => {
+  const { tag: t, size: o = "200", weight: r = "regular", ...e } = s;
+  return n(c, {
+    ...e,
+    tag: t ?? "span",
+    size: o,
+    weight: r,
+    group: "hds-body"
+  });
+}, E = (s) => {
+  const { tag: t, size: o = "200", weight: r = "regular", ...e } = s;
+  return n(c, {
+    ...e,
+    tag: t ?? "span",
+    size: o,
+    weight: r,
+    group: "code"
+  });
+}, B = {
+  Body: x,
+  DisplayExpressive: v,
+  Label: w,
   HDSBody: $,
   Code: E
 };
 export {
-  b as TEXT_COLORS,
-  B as TEXT_WEIGHTS,
-  D as Text
+  f as TEXT_COLORS,
+  z as TEXT_WEIGHTS,
+  B as Text
 };
 //# sourceMappingURL=index.js.map

package/components/text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps<T extends ElementType> extends React.PropsWithChildren {\n\ttag?: T\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n}\n\ninterface TextImplProps<T extends ElementType> extends BaseTextProps<T> {\n\tgroup: TextGroup\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = <T extends ElementType = 'span'>({\n\ttag,\n\tgroup,\n\tsize = '200',\n\tweight,\n\talign,\n\tcolor,\n\tchildren,\n\tclassName,\n\t...rest\n}: TextImplProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof TextImplProps<T>>) => {\n\tconst Component = tag ?? 'span'\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\ninterface BodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '200' | '300' | '400'\n}\n\nconst Body = <T extends ElementType>({\n\tsize = '300',\n\t...rest\n}: BodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof BodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'body',\n\t})\n}\n\ninterface DisplayExpressiveProps<T extends ElementType>\n\textends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nconst DisplayExpressive = <T extends ElementType>({\n\tsize = '200',\n\t...rest\n}: DisplayExpressiveProps<T> &\n\tOmit<ComponentPropsWithRef<T>, keyof DisplayExpressiveProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tgroup: 'display-expressive',\n\t})\n}\n\ntype LabelProps<T extends ElementType> = Omit<BaseTextProps<T>, 'size'>\n\nconst Label = <T extends ElementType>(\n\tprops: LabelProps<T> & Omit<ComponentPropsWithRef<T>, keyof LabelProps<T>>\n) => {\n\treturn createElement(TextImpl, {\n\t\t...props,\n\t\tgroup: 'label',\n\t})\n}\n\ninterface HDSBodyProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst HDSBody = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: HDSBodyProps<T> & Omit<ComponentPropsWithRef<T>, keyof HDSBodyProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body',\n\t})\n}\n\ninterface CodeProps<T extends ElementType> extends BaseTextProps<T> {\n\tsize?: '100' | '200' | '300'\n}\n\nconst Code = <T extends ElementType>({\n\tsize = '200',\n\tweight = 'regular',\n\t...rest\n}: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>) => {\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code',\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","props","HDSBody","Code","Text"],"mappings":";;;;AAQA,MAAMA,IAAc;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAqBMC,IAAe,CAAC,WAAW,UAAU,YAAY,MAAM;AAuB7D,SAASC,EAAmBC,GAAkBC,GAAwB;AASrE,SARmD;AAAA,IAClD,YAAY,8BAA8BA,CAAI;AAAA,IAC9C,MAAM,uBAAuBA,CAAI;AAAA,IACjC,sBAAsB,qCAAqCA,CAAI;AAAA,IAC/D,OAAO;AAAA,IACP,MAAM,uBAAuBA,CAAI;AAAA,EAAA,EAGXD,CAAK;AAC7B;AAEA,MAAME,IAAW,CAAiC;AAAA,EACjD,KAAAC;AAAA,EACA,OAAAH;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAG;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAC4D;AAC3D,QAAMC,IAAYP,KAAO,QACnBQ,IAAUZ,EAAmBC,GAAOC,CAAI,GAExCW,IAAsBf,EAAY,SAASS,CAAkB;AAEnE,SACC,gBAAAO;AAAA,IAACH;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVH;AAAA,QACA;AAAA,UACC,CAACI,EAAE,SAASV,CAAK,EAAE,CAAC,GAAGA;AAAA,UACvB,CAAC,8BAA8BD,CAAM,EAAE,GAAGA;AAAA,UAC1C,CAAC,kBAAkBE,CAAK,EAAE,GAAGA,KAASM;AAAA,QAAA;AAAA,QAEvCJ;AAAA,MAAA;AAAA,MAED,OAAOF,KAAS,CAACM,IAAsB,EAAE,OAAAN,EAAA,IAAU,CAAA;AAAA,MAClD,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGJ,GAMMS,IAAO,CAAwB;AAAA,EACpC,MAAAf,IAAO;AAAA,EACP,GAAGQ;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAQIiB,IAAoB,CAAwB;AAAA,EACjD,MAAAjB,IAAO;AAAA,EACP,GAAGQ;AACJ,MAEQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,OAAO;AAAA,CACP,GAKIkB,IAAQ,CACbC,MAEOH,EAAcf,GAAU;AAAA,EAC9B,GAAGkB;AAAA,EACH,OAAO;AAAA,CACP,GAOIC,IAAU,CAAwB;AAAA,EACvC,MAAApB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAOIkB,IAAO,CAAwB;AAAA,EACpC,MAAArB,IAAO;AAAA,EACP,QAAAG,IAAS;AAAA,EACT,GAAGK;AACJ,MACQQ,EAAcf,GAAU;AAAA,EAC9B,GAAGO;AAAA,EACH,MAAAR;AAAA,EACA,QAAAG;AAAA,EACA,OAAO;AAAA,CACP,GAGImB,IAAO;AAAA,EACZ,MAAAP;AAAA,EACA,mBAAAE;AAAA,EACA,OAAAC;AAAA,EACA,SAAAE;AAAA,EACA,MAAAC;AACD;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport {\n\tcreateElement,\n\ttype ComponentPropsWithRef,\n\ttype ElementType,\n\ttype ReactNode,\n} from 'react'\nimport s from './style.module.scss'\n\nconst TEXT_COLORS = [\n\t'primary',\n\t'strong',\n\t'faint',\n\t'disabled',\n\t'high-contrast',\n\t'action',\n\t'action-hover',\n\t'action-active',\n\t'highlight',\n\t'highlight-on-surface',\n\t'highlight-high-contrast',\n\t'success',\n\t'success-on-surface',\n\t'success-high-contrast',\n\t'warning',\n\t'warning-on-surface',\n\t'warning-high-contrast',\n\t'critical',\n\t'critical-on-surface',\n\t'critical-high-contrast',\n] as const\n\nconst TEXT_GROUPS = [\n\t'hds-body',\n\t'code',\n\t'body',\n\t'display-expressive',\n\t'label',\n] as const\n\nconst TEXT_SIZES = [\n\t'100',\n\t'200',\n\t'300',\n\t'400',\n\t'500',\n\t'600',\n\t'700',\n\t'800',\n] as const\n\nconst TEXT_WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const\n\ntype TextColor = (typeof TEXT_COLORS)[number]\ntype TextWeight = (typeof TEXT_WEIGHTS)[number]\ntype TextGroup = (typeof TEXT_GROUPS)[number]\ntype TextSize = (typeof TEXT_SIZES)[number]\n\n// small typescript hack to support autocomplete and arbitrary strings\ntype HexColor = string & { hexish?: unknown }\n\ninterface BaseTextProps {\n\tsize?: TextSize\n\tweight?: TextWeight\n\talign?: 'left' | 'center' | 'right'\n\tcolor?: TextColor | HexColor\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\ntype PolymorphicTextProps<\n\tTTag extends ElementType,\n\tOwnProps extends object\n> = OwnProps & {\n\ttag?: TTag\n} & Omit<ComponentPropsWithRef<TTag>, keyof OwnProps | 'tag'>\n\ninterface TextImplInternalProps extends BaseTextProps {\n\tgroup: TextGroup\n\ttag?: ElementType\n\t// allow any other intrinsic props to pass through\n\t[key: string]: unknown\n}\n\nfunction getTypographyToken(group: TextGroup, size: TextSize): string {\n\tconst groupToTokenMap: Record<TextGroup, string> = {\n\t\t'hds-body': `mds-typography-legacy-body-${size}`,\n\t\tcode: `mds-typography-code-${size}`,\n\t\t'display-expressive': `mds-typography-display-expressive-${size}`,\n\t\tlabel: `mds-typography-label`,\n\t\tbody: `mds-typography-body-${size}`,\n\t}\n\n\treturn groupToTokenMap[group]\n}\n\nconst TextImpl = (props: TextImplInternalProps) => {\n\tconst {\n\t\ttag,\n\t\tgroup,\n\t\tsize = '200',\n\t\tweight,\n\t\talign,\n\t\tcolor,\n\t\tchildren,\n\t\tclassName,\n\t\t...rest\n\t} = props\n\n\tconst Component = (tag ?? 'span') as ElementType\n\tconst variant = getTypographyToken(group, size)\n\n\tconst usesPredefinedColor = TEXT_COLORS.includes(color as TextColor)\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classNames(\n\t\t\t\tvariant,\n\t\t\t\t{\n\t\t\t\t\t[s[`align-${align}`]]: align,\n\t\t\t\t\t[`mds-typography-font-weight-${weight}`]: weight,\n\t\t\t\t\t[`mds-foreground-${color}`]: color && usesPredefinedColor,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={color && !usesPredefinedColor ? { color } : {}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t)\n}\n\n/** ------------------------------------------------------------------\n * Body\n * ------------------------------------------------------------------ */\n\ninterface BodyOwnProps extends BaseTextProps {\n\tsize?: '200' | '300' | '400'\n}\n\nexport type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tBodyOwnProps\n>\n\nconst Body = <TTag extends ElementType = 'span'>(props: BodyProps<TTag>) => {\n\tconst { tag, size = '300', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'body' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * DisplayExpressive\n * ------------------------------------------------------------------ */\n\ninterface DisplayExpressiveOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800'\n}\n\nexport type DisplayExpressiveProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, DisplayExpressiveOwnProps>\n\nconst DisplayExpressive = <TTag extends ElementType = 'span'>(\n\tprops: DisplayExpressiveProps<TTag>\n) => {\n\tconst { tag, size = '200', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tgroup: 'display-expressive' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * Label\n * ------------------------------------------------------------------ */\n\ntype LabelOwnProps = Omit<BaseTextProps, 'size'>\n\nexport type LabelProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, LabelOwnProps>\n\nconst Label = <TTag extends ElementType = 'span'>(props: LabelProps<TTag>) => {\n\tconst { tag, ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tgroup: 'label' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * HDSBody\n * ------------------------------------------------------------------ */\n\ninterface HDSBodyOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300'\n}\n\nexport type HDSBodyProps<TTag extends ElementType = 'span'> =\n\tPolymorphicTextProps<TTag, HDSBodyOwnProps>\n\nconst HDSBody = <TTag extends ElementType = 'span'>(\n\tprops: HDSBodyProps<TTag>\n) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'hds-body' as const,\n\t})\n}\n\n/** ------------------------------------------------------------------\n * Code\n * ------------------------------------------------------------------ */\n\ninterface CodeOwnProps extends BaseTextProps {\n\tsize?: '100' | '200' | '300'\n}\n\nexport type CodeProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<\n\tTTag,\n\tCodeOwnProps\n>\n\nconst Code = <TTag extends ElementType = 'span'>(props: CodeProps<TTag>) => {\n\tconst { tag, size = '200', weight = 'regular', ...rest } = props\n\n\treturn createElement(TextImpl, {\n\t\t...rest,\n\t\ttag: (tag ?? 'span') as ElementType,\n\t\tsize,\n\t\tweight,\n\t\tgroup: 'code' as const,\n\t})\n}\n\nconst Text = {\n\tBody,\n\tDisplayExpressive,\n\tLabel,\n\tHDSBody,\n\tCode,\n}\n\nexport { Text, TEXT_COLORS, TEXT_WEIGHTS }\n"],"names":["TEXT_COLORS","TEXT_WEIGHTS","getTypographyToken","group","size","TextImpl","props","tag","weight","align","color","children","className","rest","Component","variant","usesPredefinedColor","jsx","classNames","s","Body","createElement","DisplayExpressive","Label","HDSBody","Code","Text"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/mds-react",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "Materia Design System React components",
   "author": "HashiCorp",
   "license": "MPL-2.0",