@hashicorp/mds-react 0.9.0

package/dist/utils/mds-context/index.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as d, forwardRef as x, useContext as g } from "react";
+const m = (t) => {
+  const {
+    alt: e,
+    src: i,
+    className: o,
+    style: c,
+    loading: l,
+    decoding: s,
+    fetchPriority: u,
+    objectFit: a,
+    objectPosition: f
+    // Next extras are accepted but ignored by the default renderer
+  } = t;
+  return "fill" in t && t.fill ? /* @__PURE__ */ n(
+    "img",
+    {
+      alt: e,
+      src: i,
+      className: o,
+      loading: l,
+      decoding: s,
+      fetchPriority: u,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: a ?? "cover",
+        objectPosition: f,
+        ...c
+      }
+    }
+  ) : /* @__PURE__ */ n(
+    "img",
+    {
+      alt: e,
+      src: i,
+      width: t.width,
+      height: t.height,
+      className: o,
+      loading: l,
+      decoding: s,
+      fetchPriority: u,
+      style: {
+        objectFit: a,
+        objectPosition: f,
+        ...c
+      }
+    }
+  );
+}, h = d(m), r = x(
+  ({ href: t, children: e, ...i }, o) => /* @__PURE__ */ n(
+    "a",
+    {
+      ref: o,
+      href: typeof t == "string" ? t : t.toString(),
+      ...i,
+      children: e
+    }
+  )
+);
+r.displayName = "DefaultLink";
+const v = d(r);
+function P({
+  children: t,
+  imageComponent: e,
+  linkComponent: i
+}) {
+  return /* @__PURE__ */ n(h.Provider, { value: e ?? m, children: /* @__PURE__ */ n(v.Provider, { value: i ?? r, children: t }) });
+}
+function b() {
+  return g(h);
+}
+function j() {
+  return g(v);
+}
+export {
+  P as MDSProvider,
+  b as useMDSImage,
+  j as useMDSLink
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/mds-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/mds-context/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tcreateContext,\n\tuseContext,\n\tforwardRef,\n\ttype CSSProperties,\n\ttype ImgHTMLAttributes,\n\ttype ComponentType,\n} from 'react'\n\n/* ----------------------------- Image ----------------------------- */\n\ntype FillLayout = {\n\tfill: true\n\t/** Strongly recommended when using fill */\n\tsizes?: string\n}\n\ntype FixedLayout = {\n\twidth: number\n\theight: number\n\tfill?: false\n}\n\n/** Next/Image extras we want to allow on adapters (all optional here) */\ntype NextImageExtras = {\n\tpriority?: boolean\n\tplaceholder?: 'blur' | 'empty'\n\tblurDataURL?: string\n\tquality?: number\n\tunoptimized?: boolean\n\tonLoadingComplete?: (img: HTMLImageElement) => void\n}\n\nexport type MDSImageProps =\n\t// Core, DS-neutral props\n\t({\n\t\talt: string\n\t\t/** DS-neutral; Next adapter may also accept StaticImageData at runtime */\n\t\tsrc: string\n\t\tclassName?: string\n\t\tstyle?: CSSProperties\n\t\tloading?: 'eager' | 'lazy'\n\t\tdecoding?: 'sync' | 'async' | 'auto'\n\t\tfetchPriority?: 'high' | 'low' | 'auto'\n\t\tobjectFit?: string\n\t\tobjectPosition?: string\n\t} & (FillLayout | FixedLayout)) &\n\t\t// Allow common <img> props without clobbering the ones we define\n\t\tOmit<\n\t\t\tImgHTMLAttributes<HTMLImageElement>,\n\t\t\t'src' | 'alt' | 'width' | 'height' | 'loading' | 'decoding'\n\t\t> &\n\t\t// Make Next extras available (adapters can use them; default img ignores)\n\t\tNextImageExtras\n\ntype ImageComponent = ComponentType<MDSImageProps>\n\nconst DefaultImg: ImageComponent = (props) => {\n\tconst {\n\t\talt,\n\t\tsrc,\n\t\tclassName,\n\t\tstyle,\n\t\tloading,\n\t\tdecoding,\n\t\tfetchPriority,\n\t\tobjectFit,\n\t\tobjectPosition,\n\t\t// Next extras are accepted but ignored by the default renderer\n\t} = props\n\n\tif ('fill' in props && props.fill) {\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt={alt}\n\t\t\t\tsrc={src}\n\t\t\t\tclassName={className}\n\t\t\t\tloading={loading}\n\t\t\t\tdecoding={decoding}\n\t\t\t\tfetchPriority={fetchPriority}\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tinset: 0,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tobjectFit: (objectFit as CSSProperties['objectFit']) ?? 'cover',\n\t\t\t\t\tobjectPosition,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<img\n\t\t\talt={alt}\n\t\t\tsrc={src}\n\t\t\twidth={props.width}\n\t\t\theight={props.height}\n\t\t\tclassName={className}\n\t\t\tloading={loading}\n\t\t\tdecoding={decoding}\n\t\t\tfetchPriority={fetchPriority}\n\t\t\tstyle={{\n\t\t\t\tobjectFit: objectFit as CSSProperties['objectFit'],\n\t\t\t\tobjectPosition,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst ImageCtx = createContext<ImageComponent>(DefaultImg)\n\n/* ------------------------------ Link ----------------------------- */\n\n/**\n * Start from all standard <a> props, then refine:\n * - force a typed href\n * - keep children required\n * - keep Next-specific props optional so the default <a> can ignore them\n */\nexport type MDSLinkProps = Omit<\n\tReact.AnchorHTMLAttributes<HTMLAnchorElement>,\n\t'href'\n> & {\n\thref: string | URL\n\ttarget?: React.HTMLAttributeAnchorTarget\n\tonClick?: React.MouseEventHandler<HTMLAnchorElement>\n} & {\n\t// Next.js extras (optional; default <a> ignores them)\n\tprefetch?: boolean\n\treplace?: boolean\n\tscroll?: boolean\n\tshallow?: boolean\n\tlocale?: string | false\n}\n\ntype LinkComponent = React.ForwardRefExoticComponent<\n\tMDSLinkProps & React.RefAttributes<HTMLAnchorElement>\n>\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, MDSLinkProps>(\n\t({ href, children, ...rest }, ref) => (\n\t\t<a\n\t\t\tref={ref}\n\t\t\thref={typeof href === 'string' ? href : href.toString()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</a>\n\t)\n)\n\nDefaultLink.displayName = 'DefaultLink'\n\nconst LinkCtx = createContext<LinkComponent>(DefaultLink)\n\n/* ----------------------- Provider + hooks ------------------------ */\n\nexport function MDSProvider({\n\tchildren,\n\timageComponent,\n\tlinkComponent,\n}: {\n\tchildren: React.ReactNode\n\timageComponent?: ImageComponent\n\tlinkComponent?: LinkComponent\n}) {\n\treturn (\n\t\t<ImageCtx.Provider value={imageComponent ?? DefaultImg}>\n\t\t\t<LinkCtx.Provider value={linkComponent ?? DefaultLink}>\n\t\t\t\t{children}\n\t\t\t</LinkCtx.Provider>\n\t\t</ImageCtx.Provider>\n\t)\n}\n\nexport function useMDSImage() {\n\treturn useContext(ImageCtx)\n}\n\nexport function useMDSLink() {\n\treturn useContext(LinkCtx)\n}\n"],"names":["DefaultImg","props","alt","src","className","style","loading","decoding","fetchPriority","objectFit","objectPosition","jsx","ImageCtx","createContext","DefaultLink","href","children","rest","ref","LinkCtx","MDSProvider","imageComponent","linkComponent","useMDSImage","useContext","useMDSLink"],"mappings":";;;AA4DC,MAAAA,IAAM,CAAAC,MAAA;AAAA,QACL;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IAAA,gBAAAC;AAAA;AAAA,EAID,IAAIT;AACH,0BACC,OAAC,gBAAAU;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAT;AAAA,MACA,KAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAE;AAAA,MACA,UAAAC;AAAA,MACA,eAAAC;AAAA,MAAO,OACN;AAAA,QACA,UAAO;AAAA,QACP,OAAO;AAAA,QACP;QACA,QAAA;AAAA,QACA,WAAAC,KAAA;AAAA,QACA,gBAAAC;AAAA,QAAG,GAAAL;AAAA,MACJ;AAAA,IACD;AAAA,EAEF,IAGE,gBAAAM;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAT;AAAA,MACA,KAAAC;AAAA,MACA,SAAQ;AAAA,MACR,QAAAF,EAAA;AAAA,MACA,WAAAG;AAAA,MACA,SAAAE;AAAA,MACA,UAAAC;AAAA,MACA,eAAAC;AAAA,MAAO,OACN;AAAA,QACA,WAAAC;AAAA,QACA,gBAAAC;AAAA,QAAG,GAAAL;AAAA,MACJ;AAAA,IACD;AAAA,EAEF;AAEA,GA8BMO,IAAAC,EAA6Bb,CAAA,GAC/Bc;EACF,CAAA,EAAC,MAAAC,GAAA,UAAAC,GAAA,GAAAC,EAAA,GAAAC,MAAA,gBAAAP;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,KAAAO;AAAA,MACC,MAAG,OAAAH,KAAA,WAAAA,IAAAA,EAAA,SAAA;AAAA,MAEH,GAAAE;AAAA,MAAA,UAAAD;AAAA,IAAA;AAAA,EAGJ;AAEA;AAEAF,EAAM,cAAU;AAIT,MAAAK,MAAqBL,CAAA;AAAA,SAC3BM,EAAA;AAAA,EACA,UAAAJ;AAAA,EACA,gBAAAK;AAAA,EACD,eAAAC;AAKC,GAAA;AAOD,SAAA,gBAAAX,EAAAC,EAAA,UAAA,EAAA,OAAAS,KAAArB,GAAA,UAAA,gBAAAW,EAAAQ,EAAA,UAAA,EAAA,OAAAG,KAAAR,GAAA,UAAAE,EAAA,CAAA,EAAA,CAAA;AAEO;AACN,SAAOO,IAAW;AACnB,SAAAC,EAAAZ,CAAA;AAEO;AACN,SAAOa,IAAW;AACnB,SAAAD,EAAAL,CAAA;;"}

package/package.json

@@ -0,0 +1,113 @@
+{
+	"name": "@hashicorp/mds-react",
+	"version": "0.9.0",
+	"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"
+	},
+	"dependencies": {
+		"@hashicorp/flight-icons": "^3.7.0",
+		"@nivo/pie": "^0.87.0",
+		"@react-spring/web": "^9.7.3",
+		"@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": "*",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@types/react": "^18.2.68",
+		"@types/react-dom": "^18.0.6",
+		"@vitejs/plugin-react": "^4.2.1",
+		"npm-run-all": "^4.1.5",
+		"rimraf": "^5.0.0",
+		"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"
+	}
+}