@hashicorp/mds-react 0.9.7 → 0.9.8

package/package.json

@@ -1,77 +1,123 @@
 {
-  "name": "@hashicorp/mds-react",
-  "version": "0.9.7",
-  "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"
-  }
+	"name": "@hashicorp/mds-react",
+	"version": "0.9.8",
+	"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",
+		"publish": "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"
+	}
 }

package/components/badge/index.d.ts

@@ -1,30 +0,0 @@
-import { FlightIconName } from '../flight-icon';
-declare const BADGE_SIZES: readonly ["small", "medium", "large"];
-type BadgeSize = (typeof BADGE_SIZES)[number];
-declare const BADGE_TYPES: readonly ["filled", "inverted", "outlined"];
-type BadgeType = (typeof BADGE_TYPES)[number];
-declare const BADGE_COLORS: readonly ["neutral", "neutral-dark-mode", "highlight", "success", "warning", "critical"];
-type BadgeColor = (typeof BADGE_COLORS)[number];
-interface BadgeProps {
-    /** Use this parameter to show an icon. */
-    icon?: FlightIconName;
-    /**
-     * The `iconColor` prop can be used to change the icon color. It works by setting
-     * the value of the icon SVG’s fill property.
-     */
-    iconColor?: string;
-    /** This indicates if the button will only contain an icon. An internal check is in place to ensure that accessible text is still applied to the component. */
-    iconOnly?: boolean;
-    /** The text of the Badge or value of the screen-reader only element if isIconOnly is set to true. If no text value is defined an error will be thrown. */
-    text: string;
-    size?: BadgeSize;
-    type?: BadgeType;
-    color?: BadgeColor;
-    className?: string;
-}
-declare const Badge: {
-    ({ icon, iconColor, iconOnly, text, size, type, color, className, ...rest }: BadgeProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export type { BadgeProps, BadgeColor, BadgeSize, BadgeType };
-export { Badge, BADGE_COLORS, BADGE_SIZES, BADGE_TYPES };

package/components/badge/index.js

@@ -1,50 +0,0 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import g from "classnames";
-import { FlightIcon as u } from "../flight-icon/index.js";
-import e from "./style.module.scss.js";
-const S = ["small", "medium", "large"], _ = ["filled", "inverted", "outlined"], A = [
-  "neutral",
-  "neutral-dark-mode",
-  "highlight",
-  "success",
-  "warning",
-  "critical"
-], p = {
-  small: 12,
-  medium: 16,
-  large: 16
-}, h = ({
-  icon: l,
-  iconColor: m,
-  iconOnly: i,
-  text: r,
-  size: a = "medium",
-  type: o = "filled",
-  color: t = "neutral",
-  className: d,
-  ...n
-}) => /* @__PURE__ */ c(
-  "div",
-  {
-    className: g(
-      e.badge,
-      e[`size-${a}`],
-      e[`type-${o}`],
-      e[`color-${t}`],
-      d
-    ),
-    ...n,
-    children: [
-      l && /* @__PURE__ */ s(u, { name: l, color: m, size: p[a] }),
-      i && l ? /* @__PURE__ */ s("span", { className: "sr-only", children: r }) : /* @__PURE__ */ s("div", { className: e.text, children: r })
-    ]
-  }
-);
-h.displayName = "Badge";
-export {
-  A as BADGE_COLORS,
-  S as BADGE_SIZES,
-  _ as BADGE_TYPES,
-  h as Badge
-};
-//# sourceMappingURL=index.js.map

package/components/badge/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { FlightIconName, FlightIconSize } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './style.module.scss'\n\nconst BADGE_SIZES = ['small', 'medium', 'large'] as const\ntype BadgeSize = (typeof BADGE_SIZES)[number]\n\nconst BADGE_TYPES = ['filled', 'inverted', 'outlined'] as const\ntype BadgeType = (typeof BADGE_TYPES)[number]\n\nconst BADGE_COLORS = [\n\t'neutral',\n\t'neutral-dark-mode',\n\t'highlight',\n\t'success',\n\t'warning',\n\t'critical',\n] as const\ntype BadgeColor = (typeof BADGE_COLORS)[number]\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 16,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\ninterface BadgeProps {\n\t/** Use this parameter to show an icon. */\n\ticon?: FlightIconName\n\n\t/**\n\t * The `iconColor` prop can be used to change the icon color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t */\n\ticonColor?: string\n\n\t/** This indicates if the button will only contain an icon. An internal check is in place to ensure that accessible text is still applied to the component. */\n\ticonOnly?: boolean\n\n\t/** The text of the Badge or value of the screen-reader only element if isIconOnly is set to true. If no text value is defined an error will be thrown. */\n\ttext: string\n\n\tsize?: BadgeSize\n\ttype?: BadgeType\n\tcolor?: BadgeColor\n\tclassName?: string\n}\n\nconst Badge = ({\n\ticon,\n\ticonColor,\n\ticonOnly,\n\ttext,\n\tsize = 'medium',\n\ttype = 'filled',\n\tcolor = 'neutral',\n\tclassName,\n\t...rest\n}: BadgeProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts.badge,\n\t\t\t\ts[`size-${size}`],\n\t\t\t\ts[`type-${type}`],\n\t\t\t\ts[`color-${color}`],\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{icon && (\n\t\t\t\t<FlightIcon name={icon} color={iconColor} size={ICON_SIZE_MAP[size]} />\n\t\t\t)}\n\t\t\t{iconOnly && icon ? (\n\t\t\t\t<span className=\"sr-only\">{text}</span>\n\t\t\t) : (\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nBadge.displayName = 'Badge'\n\nexport type { BadgeProps, BadgeColor, BadgeSize, BadgeType }\nexport { Badge, BADGE_COLORS, BADGE_SIZES, BADGE_TYPES }\n"],"names":["BADGE_SIZES","BADGE_TYPES","BADGE_COLORS","ICON_SIZE_MAP","Badge","icon","iconColor","iconOnly","text","size","type","color","className","rest","jsxs","classNames","s","jsx","FlightIcon"],"mappings":";;;;AAKA,MAAMA,IAAc,CAAC,SAAS,UAAU,OAAO,GAGzCC,IAAc,CAAC,UAAU,YAAY,UAAU,GAG/CC,IAAe;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAGMC,IAAgB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAwBMC,IAAQ,CAAC;AAAA,EACd,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,QAAQP,CAAI,EAAE;AAAA,MAChBO,EAAE,QAAQN,CAAI,EAAE;AAAA,MAChBM,EAAE,SAASL,CAAK,EAAE;AAAA,MAClBC;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAR,KACA,gBAAAY,EAACC,KAAW,MAAMb,GAAM,OAAOC,GAAW,MAAMH,EAAcM,CAAI,EAAA,CAAG;AAAA,MAErEF,KAAYF,IACZ,gBAAAY,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAT,EAAA,CAAK,IAEhC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAE,MAAO,UAAAR,EAAA,CAAK;AAAA,IAAA;AAAA,EAAA;AAAA;AAMlCJ,EAAM,cAAc;"}

package/components/badge/style.module.scss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/components/badge-count/index.js

@@ -1,29 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import d from "classnames";
-import e from "./style.module.scss.js";
-const l = ({
-  text: o,
-  size: r = "medium",
-  type: m = "filled",
-  color: t = "neutral",
-  className: a,
-  ...s
-}) => /* @__PURE__ */ i(
-  "div",
-  {
-    className: d(
-      e["badge-count"],
-      e[`size-${r}`],
-      e[`type-${m}`],
-      e[`color-${t}`],
-      a
-    ),
-    ...s,
-    children: o
-  }
-);
-l.displayName = "BadgeCount";
-export {
-  l as BadgeCount
-};
-//# sourceMappingURL=index.js.map

package/components/badge-count/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/badge-count/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLAttributes } from 'react'\nimport s from './style.module.scss'\n\ninterface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {\n\tsize?: 'small' | 'medium' | 'large'\n\ttype?: 'filled' | 'inverted' | 'outlined'\n\tcolor?: 'neutral' | 'neutral-dark-mode'\n\t/**\n\t * Text value that renders in the Badge Count.\n\t */\n\ttext: string\n}\n\nconst BadgeCount = ({\n\ttext,\n\tsize = 'medium',\n\ttype = 'filled',\n\tcolor = 'neutral',\n\tclassName,\n\t...rest\n}: BadgeCountProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts['badge-count'],\n\t\t\t\ts[`size-${size}`],\n\t\t\t\ts[`type-${type}`],\n\t\t\t\ts[`color-${color}`],\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{text}\n\t\t</div>\n\t)\n}\n\nBadgeCount.displayName = 'BadgeCount'\n\nexport type { BadgeCountProps }\nexport { BadgeCount }\n"],"names":["BadgeCount","text","size","type","color","className","rest","jsx","classNames","s"],"mappings":";;;AAcA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE,aAAa;AAAA,MACfA,EAAE,QAAQP,CAAI,EAAE;AAAA,MAChBO,EAAE,QAAQN,CAAI,EAAE;AAAA,MAChBM,EAAE,SAASL,CAAK,EAAE;AAAA,MAClBC;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;AAKJD,EAAW,cAAc;"}

package/patterns/product-logo/index.d.ts

@@ -1,48 +0,0 @@
-export declare const PRODUCT_LOGO_SIZES: readonly ["small", "medium", "large"];
-export declare const PRODUCT_LOGO_COLORS: readonly ["primary", "strong"];
-export declare const PRODUCT_LOGO_PRODUCTS: readonly ["hcp", "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vault-dedicated", "vault-enterprise", "vault-radar", "vault-secrets", "vagrant", "waypoint"];
-export type ProductLogoSize = (typeof PRODUCT_LOGO_SIZES)[number];
-export type ProductLogoColor = (typeof PRODUCT_LOGO_COLORS)[number];
-export type ProductLogoProduct = (typeof PRODUCT_LOGO_PRODUCTS)[number];
-export declare const normalizeProductLogoProps: ((input: {
-    size?: unknown;
-    color?: unknown;
-    product?: unknown;
-}, opts?: {
-    all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
-    each?: {
-        size?: import("../../utils/make-normalizer").NormalizerOpts<"medium" | "small" | "large"> | undefined;
-        color?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "strong"> | undefined;
-        product?: import("../../utils/make-normalizer").NormalizerOpts<"boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise"> | undefined;
-    } | undefined;
-} | undefined) => {
-    size: "medium" | "small" | "large";
-    color: "primary" | "strong";
-    product: "boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise";
-}) & {
-    with(all: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">): (input: {
-        size?: unknown;
-        color?: unknown;
-        product?: unknown;
-    }, opts?: {
-        all?: Pick<import("../../utils/make-normalizer").NormalizerOpts<string>, "transform">;
-        each?: {
-            size?: import("../../utils/make-normalizer").NormalizerOpts<"medium" | "small" | "large"> | undefined;
-            color?: import("../../utils/make-normalizer").NormalizerOpts<"primary" | "strong"> | undefined;
-            product?: import("../../utils/make-normalizer").NormalizerOpts<"boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise"> | undefined;
-        } | undefined;
-    } | undefined) => {
-        size: "medium" | "small" | "large";
-        color: "primary" | "strong";
-        product: "boundary" | "consul" | "nomad" | "packer" | "terraform" | "vagrant" | "vault" | "vault-radar" | "vault-secrets" | "waypoint" | "hashicorp" | "hcp" | "vault-dedicated" | "vault-enterprise";
-    };
-};
-export interface ProductLogoProps {
-    size?: ProductLogoSize;
-    color?: ProductLogoColor;
-    product: ProductLogoProduct;
-}
-export declare const ProductLogo: {
-    ({ size, color, product, }: ProductLogoProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};