@hashicorp/mds-react 0.9.10 → 0.9.12

package/components/text/index.d.ts

@@ -0,0 +1,69 @@
+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"];
+declare const TEXT_WEIGHTS: readonly ["regular", "medium", "semibold", "bold"];
+type TextColor = (typeof TEXT_COLORS)[number];
+type TextWeight = (typeof TEXT_WEIGHTS)[number];
+type TextGroup = (typeof TEXT_GROUPS)[number];
+type TextSize = (typeof TEXT_SIZES)[number];
+type HexColor = string & {
+    hexish?: unknown;
+};
+interface BaseTextProps {
+    size?: TextSize;
+    weight?: TextWeight;
+    align?: 'left' | 'center' | 'right';
+    color?: TextColor | HexColor;
+    className?: string;
+    children?: ReactNode;
+}
+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;
+}
+/** ------------------------------------------------------------------
+ * Body
+ * ------------------------------------------------------------------ */
+interface BodyOwnProps extends BaseTextProps {
+    size?: '200' | '300' | '400';
+}
+export type BodyProps<TTag extends ElementType = 'span'> = PolymorphicTextProps<TTag, BodyOwnProps>;
+/** ------------------------------------------------------------------
+ * DisplayExpressive
+ * ------------------------------------------------------------------ */
+interface DisplayExpressiveOwnProps extends BaseTextProps {
+    size?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800';
+}
+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';
+}
+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: <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

@@ -0,0 +1,118 @@
+import { jsx as y } from "react/jsx-runtime";
+import m from "classnames";
+import { createElement as n } from "react";
+import b from "./style.module.scss.js";
+const f = [
+  "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"
+], z = ["regular", "medium", "semibold", "bold"];
+function T(s, t) {
+  return {
+    "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-${t}`
+  }[s];
+}
+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: m(
+        u,
+        {
+          [b[`align-${i}`]]: i,
+          [`mds-typography-font-weight-${e}`]: e,
+          [`mds-foreground-${a}`]: a && g
+        },
+        l
+      ),
+      style: a && !g ? { color: a } : {},
+      ...d,
+      children: p
+    }
+  );
+}, 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 {
+  f as TEXT_COLORS,
+  z as TEXT_WEIGHTS,
+  B as Text
+};
+//# sourceMappingURL=index.js.map

package/components/text/index.js.map

@@ -0,0 +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\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,123 +1,77 @@
 {
-	"name": "@hashicorp/mds-react",
-	"version": "0.9.10",
-	"description": "Materia Design System React components",
-	"author": "HashiCorp",
-	"license": "MPL-2.0",
-	"type": "module",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/hashicorp/web.git",
-		"directory": "packages/mds-react"
-	},
-	"homepage": "https://github.com/hashicorp/web/tree/main/packages/mds-react#readme",
-	"bugs": {
-		"url": "https://github.com/hashicorp/web/issues"
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"dist",
-		"README.md",
-		"LICENSE",
-		"package.json"
-	],
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		},
-		"./components": {
-			"types": "./dist/components/index.d.ts",
-			"import": "./dist/components/index.js"
-		},
-		"./patterns": {
-			"types": "./dist/patterns/index.d.ts",
-			"import": "./dist/patterns/index.js"
-		},
-		"./utils": {
-			"types": "./dist/utils/index.d.ts",
-			"import": "./dist/utils/index.js"
-		},
-		"./style.css": "./dist/style.css",
-		"./package.json": "./package.json",
-		"./*": null
-	},
-	"typesVersions": {
-		"*": {
-			"components": [
-				"dist/components/index.d.ts"
-			],
-			"patterns": [
-				"dist/patterns/index.d.ts"
-			],
-			"utils": [
-				"dist/utils/index.d.ts"
-			]
-		}
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"clean": "rimraf dist",
-		"dev:js": "vite build --watch",
-		"dev:types": "tsc -p tsconfig.build.json --watch",
-		"dev:assets": "cpx \"src/**/*.{css,scss,svg,png,jpg,jpeg,woff,woff2}\" dist -w",
-		"dev": "npm-run-all -p dev:js dev:types dev:assets",
-		"build:js": "vite build",
-		"build:types": "tsc -p tsconfig.build.json",
-		"build:assets": "cpx \"src/**/*.{css,scss,svg,png,jpg,jpeg,woff,woff2}\" dist",
-		"build": "npm run clean && npm-run-all -s build:js build:types build:assets",
-		"prepack": "npm run build",
-		"typecheck": "tsc --noEmit",
-		"lint": "eslint",
-		"test": "vitest run",
-		"test:watch": "vitest watch",
-		"release": "npm publish --access public ./dist",
-		"prebuild-storybook": "cd ../mds-tokens && npm run build && cd ../mds-react",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "npm run prebuild-storybook && storybook build"
-	},
-	"dependencies": {
-		"@hashicorp/flight-icons": "^3.7.0",
-		"@nivo/pie": "^0.87.0",
-		"@react-spring/web": "^9.7.3",
-		"@web/hooks": "*",
-		"@web/utils": "*",
-		"classnames": "^2.3.2",
-		"react-focus-lock": "^2.13.6",
-		"react-wrap-balancer": "^0.4.0",
-		"use-resize-observer": "^9.1.0"
-	},
-	"peerDependencies": {
-		"@tippyjs/react": "^4.2.6",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"tippy.js": "^6.3.1"
-	},
-	"devDependencies": {
-		"@hashicorp/mds-postcss-config": "*",
-		"@storybook/addon-docs": "9.1.10",
-		"@storybook/addon-themes": "^9.1.10",
-		"@storybook/react-vite": "9.1.10",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@types/react": "^18.2.68",
-		"@types/react-dom": "^18.0.6",
-		"@vitejs/plugin-react": "^4.2.1",
-		"eslint-plugin-storybook": "9.1.10",
-		"npm-run-all": "^4.1.5",
-		"rimraf": "^5.0.0",
-		"storybook": "9.1.10",
-		"typescript": "^5.4.5",
-		"vite-plugin-dts": "^4.5.4",
-		"vite-plugin-externalize-deps": "^0.9.0",
-		"vitest": "^1.4.0"
-	},
-	"engines": {
-		"node": ">=18.17"
-	}
+  "name": "@hashicorp/mds-react",
+  "version": "0.9.12",
+  "description": "Materia Design System React components",
+  "author": "HashiCorp",
+  "license": "MPL-2.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashicorp/web.git",
+    "directory": "packages/mds-react"
+  },
+  "homepage": "https://github.com/hashicorp/web/tree/main/packages/mds-react#readme",
+  "bugs": {
+    "url": "https://github.com/hashicorp/web/issues"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./components": {
+      "types": "./components/index.d.ts",
+      "import": "./components/index.js"
+    },
+    "./patterns": {
+      "types": "./patterns/index.d.ts",
+      "import": "./patterns/index.js"
+    },
+    "./utils": {
+      "types": "./utils/index.d.ts",
+      "import": "./utils/index.js"
+    },
+    "./style.css": "./style.css",
+    "./package.json": "./package.json",
+    "./*": null
+  },
+  "typesVersions": {
+    "*": {
+      "components": [
+        "components/index.d.ts"
+      ],
+      "patterns": [
+        "patterns/index.d.ts"
+      ],
+      "utils": [
+        "utils/index.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@hashicorp/flight-icons": "^3.7.0",
+    "@nivo/pie": "^0.87.0",
+    "@react-spring/web": "^9.7.3",
+    "classnames": "^2.3.2",
+    "react-focus-lock": "^2.13.6",
+    "react-wrap-balancer": "^0.4.0",
+    "use-resize-observer": "^9.1.0"
+  },
+  "peerDependencies": {
+    "@tippyjs/react": "^4.2.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tippy.js": "^6.3.1"
+  }
 }