@hashicorp/mds-react 0.9.0

package/dist/styles/mixins/button.scss

@@ -0,0 +1,284 @@
+$hds-button-border-radius: 5px;
+$hds-button-border-width: 1px;
+$hds-button-focus-border-width: 3px;
+
+@mixin hds-button() {
+	position: relative;
+	display: flex;
+	gap: 0.375rem;
+	align-items: center;
+	justify-content: center;
+	width: auto;
+	// notice: we set the font-weight of the button text to "regular" (on purpose)
+	// because of the antialising of the browser that renders the text quite different
+	// from what it looks like in Figma, so we prefer to have them visually similar
+	// even if they differ in their internal implementation (in Figma the font-weight is medium/500)
+	// for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099
+	font-weight: var(--mds-typography-font-weight-regular);
+	font-family: var(--mds-typography-font-stack-text);
+	text-decoration: underline;
+	text-decoration-color: transparent;
+	border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
+	border-radius: $hds-button-border-radius;
+	outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+	outline-color: transparent; // We need this to be transparent for a11y
+	isolation: isolate;
+	transition: color 0.15s ease-in, background-color 0.15s ease-in,
+		border-color 0.15s ease-in, text-decoration-color 0.15s ease-in;
+}
+
+@mixin hds-button-state-disabled() {
+	color: var(--mds-color-foreground-disabled);
+	background: var(--mds-color-surface-faint);
+	border-color: var(--mds-color-border-primary);
+	box-shadow: none;
+	cursor: not-allowed;
+
+	&::before {
+		border-color: transparent;
+	}
+}
+
+@mixin hds-button-state-focus() {
+	box-shadow: none;
+
+	&::before {
+		// the position absolute of an element is computed from the inside of the border of the container
+		// so we have to take in account the border width of the pseudo-element container itself
+		$shift: $hds-button-border-width + $hds-button-focus-border-width;
+		position: absolute;
+		top: -$shift;
+		right: -$shift;
+		bottom: -$shift;
+		left: -$shift;
+		z-index: -1;
+		border: $hds-button-focus-border-width solid transparent;
+		border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
+		content: '';
+	}
+}
+
+@mixin hds-button-color-primary() {
+	color: var(
+		--mds-accent-button-color-foreground,
+		var(--mds-color-foreground-high-contrast)
+	);
+	background: var(
+		--mds-accent-button-color-background,
+		var(--mds-color-palette-blue-200)
+	);
+	border-color: var(
+		--mds-accent-button-color-border,
+		var(--mds-color-palette-blue-300)
+	);
+	border-width: var(--mds-accent-button-border-width, $hds-button-border-width);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+
+	&:hover {
+		color: var(
+			--mds-accent-button-color-hover-foreground,
+			var(
+				--mds-accent-button-color-foreground,
+				var(--mds-color-foreground-high-contrast)
+			)
+		);
+		background: var(
+			--mds-accent-button-color-hover-background,
+			var(
+				--mds-accent-button-color-background,
+				var(--mds-color-palette-blue-300)
+			)
+		);
+		border-color: var(
+			--mds-accent-button-color-hover-border,
+			var(--mds-accent-button-color-border, var(--mds-color-palette-blue-400))
+		);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(
+			--mds-accent-button-color-focus-foreground,
+			var(
+				--mds-accent-button-color-foreground,
+				var(--mds-color-foreground-high-contrast)
+			)
+		);
+		background: var(
+			--mds-accent-button-color-focus-background,
+			var(
+				--mds-accent-button-color-background,
+				var(--mds-color-palette-blue-200)
+			)
+		);
+		border-color: var(
+			--mds-accent-button-color-focus-border,
+			var(
+				--mds-accent-button-color-border,
+				var(--mds-color-focus-action-internal)
+			)
+		);
+
+		&::before {
+			// the position absolute of an element is computed from the inside of the border of the container
+			// so we have to take in account the border width of the pseudo-element container itself
+			// plus for the primary button we want to have a 2px gap between the button and the focus
+			$shift: $hds-button-border-width + $hds-button-focus-border-width + 2px;
+			top: -$shift;
+			right: -$shift;
+			bottom: -$shift;
+			left: -$shift;
+			border-color: var(--mds-color-focus-action-external);
+			border-radius: $hds-button-border-radius + $hds-button-focus-border-width +
+				2px;
+		}
+	}
+
+	&:active {
+		color: var(
+			--mds-accent-button-color-active-foreground,
+			var(
+				--mds-accent-button-color-foreground,
+				var(--mds-color-foreground-high-contrast)
+			)
+		);
+		background: var(
+			--mds-accent-button-color-active-background,
+			var(
+				--mds-accent-button-color-background,
+				var(--mds-color-palette-blue-400)
+			)
+		);
+		border-color: var(
+			--mds-accent-button-color-active-border,
+			var(--mds-accent-button-color-border, var(--mds-color-palette-blue-400))
+		);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}
+
+@mixin hds-button-color-secondary() {
+	color: var(--mds-color-foreground-primary);
+	background-color: var(--mds-color-surface-faint);
+	border-color: var(--mds-color-border-strong);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+
+	&:hover {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-primary);
+		border-color: var(--mds-color-border-strong);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-faint);
+		border-color: var(--mds-color-focus-action-internal);
+
+		&::before {
+			border-color: var(--mds-color-focus-action-external);
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-interactive-active);
+		border-color: var(--mds-color-border-strong);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}
+
+@mixin hds-button-color-tertiary() {
+	color: var(--mds-color-foreground-action);
+	background-color: transparent;
+	border-color: transparent;
+
+	&:hover {
+		color: var(--mds-color-foreground-action-hover);
+		background-color: var(--mds-color-surface-primary);
+		border-color: var(--mds-color-border-strong);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--mds-color-foreground-action);
+		border-color: var(--mds-color-focus-action-internal);
+
+		&::before {
+			border-color: var(--mds-color-focus-action-external);
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-action-active);
+		background-color: var(--mds-color-surface-interactive-active);
+		border-color: var(--mds-color-border-strong);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+
+	//
+	// IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
+	// the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
+	// but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
+	//
+	&:disabled,
+	&[disabled],
+	&:disabled:focus,
+	&[disabled]:focus,
+	&:disabled:hover,
+	&[disabled]:hover {
+		background-color: transparent;
+		border-color: transparent;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}
+
+@mixin hds-button-color-critical() {
+	color: var(--mds-color-foreground-critical-on-surface);
+	background-color: var(--mds-color-surface-critical);
+	border-color: var(--mds-color-foreground-critical-on-surface);
+	box-shadow: var(--mds-elevation-low-box-shadow);
+
+	&:hover {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-palette-red-300);
+		border-color: var(--mds-color-palette-red-400);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--mds-color-foreground-critical-on-surface);
+		background-color: var(--mds-color-surface-critical);
+		border-color: var(--mds-color-focus-critical-internal);
+
+		&::before {
+			border-color: var(--mds-color-focus-critical-external);
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-palette-red-400);
+		border-color: var(--mds-color-palette-red-400);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}

package/dist/styles/mixins/focus-ring.scss

@@ -0,0 +1,75 @@
+// For an explanation of the ":focus/:focus-visible" states see:
+// - https://github.com/hashicorp/design-system-components/issues/161
+// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+
+@mixin hds-focus-ring-basic($color: action) {
+	outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+	outline-color: transparent;
+
+	// default focus for browsers that still rely on ":focus"
+	&:focus {
+		box-shadow: var(--mds-focus-ring-#{$color}-box-shadow);
+	}
+	// undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+	&:focus:not(:focus-visible) {
+		box-shadow: none;
+	}
+	// set focus for browsers that support ":focus-visible"
+	&:focus-visible {
+		box-shadow: var(--mds-focus-ring-#{$color}-box-shadow);
+	}
+	// remove the focus ring on "active + focused" state (by design)
+	&:focus:active {
+		box-shadow: none;
+	}
+}
+
+@mixin hds-focus-ring-with-pseudo-element(
+	$top: 0,
+	$right: 0,
+	$bottom: 0,
+	$left: 0,
+	$radius: 5px,
+	$color: action
+) {
+	position: relative;
+	outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+	outline-color: transparent;
+	isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+
+	&::before {
+		position: absolute;
+		top: $top;
+		right: $right;
+		bottom: $bottom;
+		left: $left;
+		z-index: -1;
+		border-radius: $radius;
+		content: '';
+	}
+
+	// default focus for browsers that still rely on ":focus"
+	&:focus {
+		&::before {
+			box-shadow: var(--mds-focus-ring-#{$color}-box-shadow);
+		}
+	}
+	// undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+	&:focus:not(:focus-visible) {
+		&::before {
+			box-shadow: none;
+		}
+	}
+	// set focus for browsers that support ":focus-visible"
+	&:focus-visible {
+		&::before {
+			box-shadow: var(--mds-focus-ring-#{$color}-box-shadow);
+		}
+	}
+	// remove the focus ring on "active + focused" state (by design)
+	&:focus:active {
+		&::before {
+			box-shadow: none;
+		}
+	}
+}

package/dist/utils/get-contrast-yiq.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Calculates the contrast of an RGB color and determines whether to use dark or light text.
+ * @param rgb - An object containing the red (r), green (g), and blue (b) components of the color.
+ * @returns A string indicating whether to use 'dark' or 'light'.
+ */
+export declare const getContrastYIQ: (rgb: {
+    r: number;
+    g: number;
+    b: number;
+}) => string;
+/**
+ * Converts a HEX color string to an RGB object.
+ * @param hex - The HEX color string (e.g., "#ffffff").
+ * @returns An object containing the red (r), green (g), and blue (b) components, and black if the HEX string is invalid.
+ */
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};

package/dist/utils/get-contrast-yiq.js

@@ -0,0 +1,13 @@
+const r = (t) => (t.r * 299 + t.g * 587 + t.b * 114) / 1e3 >= 192 ? "dark" : "light", n = (t) => {
+  const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
+  return e ? {
+    r: parseInt(e[1], 16),
+    g: parseInt(e[2], 16),
+    b: parseInt(e[3], 16)
+  } : { r: 0, g: 0, b: 0 };
+};
+export {
+  r as getContrastYIQ,
+  n as hexToRgb
+};
+//# sourceMappingURL=get-contrast-yiq.js.map

package/dist/utils/get-contrast-yiq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-contrast-yiq.js","sources":["../../src/utils/get-contrast-yiq.ts"],"sourcesContent":["/**\n * Calculates the contrast of an RGB color and determines whether to use dark or light text.\n * @param rgb - An object containing the red (r), green (g), and blue (b) components of the color.\n * @returns A string indicating whether to use 'dark' or 'light'.\n */\nexport const getContrastYIQ = (rgb: {\n\tr: number\n\tg: number\n\tb: number\n}): string => {\n\t// Calculate the YIQ value using the RGB components\n\tconst yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000\n\t// If YIQ is greater than or equal to 192, use 'dark', otherwise use 'light'\n\treturn yiq >= 192 ? 'dark' : 'light'\n}\n\n/**\n * Converts a HEX color string to an RGB object.\n * @param hex - The HEX color string (e.g., \"#ffffff\").\n * @returns An object containing the red (r), green (g), and blue (b) components, and black if the HEX string is invalid.\n */\nexport const hexToRgb = (hex: string): { r: number; g: number; b: number } => {\n\t// Extract the RGB components from the HEX string using a regular expression\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t// If the HEX string is valid, parse the components and return the RGB object\n\treturn result\n\t\t? {\n\t\t\t\tr: parseInt(result[1], 16),\n\t\t\t\tg: parseInt(result[2], 16),\n\t\t\t\tb: parseInt(result[3], 16),\n\t\t  }\n\t\t: { r: 0, g: 0, b: 0 } // Return black if the HEX string is invalid\n}\n"],"names":["getContrastYIQ","rgb","hexToRgb","hex","result"],"mappings":"AAKO,MAAMA,IAAiB,CAACC,OAMjBA,EAAI,IAAI,MAAMA,EAAI,IAAI,MAAMA,EAAI,IAAI,OAAO,OAE1C,MAAM,SAAS,SAQjBC,IAAW,CAACC,MAAqD;AAE7E,QAAMC,IAAS,4CAA4C,KAAKD,CAAG;AAEnE,SAAOC,IACJ;AAAA,IACA,GAAG,SAASA,EAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAASA,EAAO,CAAC,GAAG,EAAE;AAAA,IACzB,GAAG,SAASA,EAAO,CAAC,GAAG,EAAE;AAAA,EAAA,IAEzB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,EAAA;AACrB;"}

package/dist/utils/hooks/use-screen-size.d.ts

@@ -0,0 +1,5 @@
+declare const useSmall: () => boolean;
+declare const useMedium: () => boolean;
+declare const useMediumUp: () => boolean;
+declare const useLarge: () => boolean;
+export { useSmall, useMedium, useMediumUp, useLarge };

package/dist/utils/hooks/use-screen-size.js

@@ -0,0 +1,10 @@
+"use client";
+import { useMediaQuery as e } from "../../hooks/use-media-query/index.js";
+const t = () => e("(max-width: 768px)"), m = () => e("(min-width: 768px) and (max-width: 1119px)"), s = () => e("(min-width: 768px)"), d = () => e("(min-width: 1120px)");
+export {
+  d as useLarge,
+  m as useMedium,
+  s as useMediumUp,
+  t as useSmall
+};
+//# sourceMappingURL=use-screen-size.js.map

package/dist/utils/hooks/use-screen-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-screen-size.js","sources":["../../../src/utils/hooks/use-screen-size.ts"],"sourcesContent":["'use client'\n\nimport { useMediaQuery } from '@web/hooks/use-media-query'\n\n// ref: https://github.com/hashicorp/web/blob/main/packages/mds-tokens/src/custom-media.css\nconst useSmall = () => useMediaQuery('(max-width: 768px)')\nconst useMedium = () =>\n\tuseMediaQuery('(min-width: 768px) and (max-width: 1119px)')\nconst useMediumUp = () => useMediaQuery('(min-width: 768px)')\nconst useLarge = () => useMediaQuery('(min-width: 1120px)')\n\nexport { useSmall, useMedium, useMediumUp, useLarge }\n"],"names":["useSmall","useMediaQuery","useMedium","useMediumUp"],"mappings":";;AAMA,MAAMA,IAAA,MAAYC,EACjB,oBAAc,GACTC,IAAA,MAAcD,EAAM,4CAAkC,GACtDE,IAAW,MAAMF,EAAc,oBAAqB;"}

package/dist/utils/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const localize: (key: "required" | "optional", locale: "id" | "fr" | "en" | "de" | "es" | "ja" | "ko" | "pt", capitalization?: ("title" | "none" | "lower" | "sentence" | "upper") | undefined) => string;

package/dist/utils/i18n/index.js

@@ -0,0 +1,41 @@
+import { createLocalize as o } from "@web/utils/i18n";
+const r = o({
+  de: {
+    optional: "optional",
+    // "optional" is the same in German
+    required: "erforderlich"
+  },
+  en: {
+    optional: "optional",
+    required: "required"
+  },
+  es: {
+    optional: "opcional",
+    required: "obligatorio"
+  },
+  fr: {
+    optional: "facultatif",
+    required: "obligatoire"
+  },
+  id: {
+    // ! TODO Translate text to Indonesian
+    optional: "optional",
+    required: "required"
+  },
+  ja: {
+    optional: "任意",
+    required: "必須"
+  },
+  ko: {
+    optional: "선택 사항",
+    required: "필수"
+  },
+  pt: {
+    optional: "opcional",
+    required: "obrigatório"
+  }
+});
+export {
+  r as localize
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/i18n/index.ts"],"sourcesContent":["import { createLocalize } from '@web/utils/i18n'\n\nexport const localize = createLocalize({\n\tde: {\n\t\toptional: 'optional', // \"optional\" is the same in German\n\t\trequired: 'erforderlich',\n\t},\n\ten: {\n\t\toptional: 'optional',\n\t\trequired: 'required',\n\t},\n\tes: {\n\t\toptional: 'opcional',\n\t\trequired: 'obligatorio',\n\t},\n\tfr: {\n\t\toptional: 'facultatif',\n\t\trequired: 'obligatoire',\n\t},\n\tid: {\n\t\t// ! TODO Translate text to Indonesian\n\t\toptional: 'optional',\n\t\trequired: 'required',\n\t},\n\tja: {\n\t\toptional: '任意',\n\t\trequired: '必須',\n\t},\n\tko: {\n\t\toptional: '선택 사항',\n\t\trequired: '필수',\n\t},\n\tpt: {\n\t\toptional: 'opcional',\n\t\trequired: 'obrigatório',\n\t},\n})\n"],"names":["localize","createLocalize"],"mappings":";AAEO,MAAMA,IAAWC,EAAe;AAAA,EACtC,IAAI;AAAA,IACH,UAAU;AAAA;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA;AAAA,IAEH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAAA,EAEX,IAAI;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEZ,CAAC;"}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { useLarge, useMedium, useMediumUp, useSmall, } from './hooks/use-screen-size';
+export { MDSProvider } from './mds-context';
+export type { MDSLinkProps, MDSImageProps } from './mds-context';

package/dist/utils/index.js

@@ -0,0 +1,10 @@
+import { useLarge as u, useMedium as m, useMediumUp as o, useSmall as s } from "./hooks/use-screen-size.js";
+import { MDSProvider as i } from "./mds-context/index.js";
+export {
+  i as MDSProvider,
+  u as useLarge,
+  m as useMedium,
+  o as useMediumUp,
+  s as useSmall
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

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

package/dist/utils/make-normalizer/index.d.ts

@@ -0,0 +1,30 @@
+export type NormalizerOpts<TOut extends string> = {
+    aliases?: Record<string, TOut>;
+    fallback?: TOut;
+    transform?: (raw: string) => string;
+};
+export type Normalizer<TOut extends string> = {
+    (input: unknown, opts?: NormalizerOpts<TOut>): TOut;
+    with(bound: NormalizerOpts<TOut>): Normalizer<TOut>;
+};
+export declare function makeNormalizer<TAllowed extends readonly string[], TOut extends TAllowed[number]>(allowed: TAllowed, defaults: {
+    fallback: TOut;
+    aliases?: Record<string, TOut>;
+    transform?: (raw: string) => string;
+}): Normalizer<TOut>;
+/**
+ * Group helper: normalize a whole props object in one call.
+ * - `all.transform` applies to every normalizer in the set (safe cross-type).
+ * - `each[key]` lets you override per-key opts (aliases/fallback/transform).
+ */
+export declare function makeNormalizerSet<TOuts extends Record<string, string>>(map: {
+    [K in keyof TOuts]: Normalizer<TOuts[K]>;
+}): ((input: { [K in keyof TOuts]?: unknown; }, opts?: {
+    all?: Pick<NormalizerOpts<string>, "transform"> | undefined;
+    each?: { [K_1 in keyof TOuts]?: NormalizerOpts<TOuts[K_1]> | undefined; } | undefined;
+} | undefined) => { [K_2 in keyof TOuts]: TOuts[K_2]; }) & {
+    with(all: Pick<NormalizerOpts<string>, "transform">): (input: { [K in keyof TOuts]?: unknown; }, opts?: {
+        all?: Pick<NormalizerOpts<string>, "transform"> | undefined;
+        each?: { [K_1 in keyof TOuts]?: NormalizerOpts<TOuts[K_1]> | undefined; } | undefined;
+    } | undefined) => { [K_2 in keyof TOuts]: TOuts[K_2]; };
+};

package/dist/utils/make-normalizer/index.js

@@ -0,0 +1,34 @@
+function h(o, s) {
+  const a = o, r = s.aliases ?? Object.fromEntries(a.map((t) => [t, t])), c = s.transform ?? ((t) => t.trim().toLowerCase()), n = (t, e) => {
+    const i = { ...r, ...e?.aliases ?? {} }, l = e?.fallback ?? s.fallback, k = e?.transform ?? c;
+    if (typeof t != "string") return l;
+    const f = k(t), u = i[f] ?? f;
+    return a.includes(u) ? u : l;
+  };
+  return n.with = (t) => (e, i) => n(e, { ...t, ...i ?? {} }), n;
+}
+function b(o) {
+  const s = (a, r) => {
+    const c = {};
+    for (const n in o) {
+      if (!Object.prototype.hasOwnProperty.call(o, n)) continue;
+      const t = n, e = o[t], i = r?.all ? e.with(r.all) : e;
+      c[t] = i(a?.[t], r?.each?.[t]);
+    }
+    return c;
+  };
+  return s.with = (a) => {
+    const r = {};
+    for (const c in o) {
+      if (!Object.prototype.hasOwnProperty.call(o, c)) continue;
+      const n = c;
+      r[n] = o[n].with(a);
+    }
+    return b(r);
+  }, s;
+}
+export {
+  h as makeNormalizer,
+  b as makeNormalizerSet
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/make-normalizer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/make-normalizer/index.tsx"],"sourcesContent":["export type NormalizerOpts<TOut extends string> = {\n\taliases?: Record<string, TOut>\n\tfallback?: TOut\n\ttransform?: (raw: string) => string\n}\n\nexport type Normalizer<TOut extends string> = {\n\t(input: unknown, opts?: NormalizerOpts<TOut>): TOut\n\twith(bound: NormalizerOpts<TOut>): Normalizer<TOut>\n}\n\nexport function makeNormalizer<\n\tTAllowed extends readonly string[],\n\tTOut extends TAllowed[number]\n>(\n\tallowed: TAllowed,\n\tdefaults: {\n\t\tfallback: TOut\n\t\taliases?: Record<string, TOut>\n\t\ttransform?: (raw: string) => string\n\t}\n): Normalizer<TOut> {\n\tconst list = allowed as readonly string[]\n\n\tconst defaultAliases: Record<string, TOut> =\n\t\tdefaults.aliases ??\n\t\t(Object.fromEntries(list.map((v) => [v, v])) as Record<string, TOut>)\n\n\tconst defaultTransform =\n\t\tdefaults.transform ?? ((s: string) => s.trim().toLowerCase())\n\n\tconst core = ((input: unknown, opts?: NormalizerOpts<TOut>): TOut => {\n\t\tconst aliases = { ...defaultAliases, ...(opts?.aliases ?? {}) }\n\t\tconst fallback = opts?.fallback ?? defaults.fallback\n\t\tconst transform = opts?.transform ?? defaultTransform\n\n\t\tif (typeof input !== 'string') return fallback\n\n\t\tconst s = transform(input)\n\t\tconst candidate = (aliases[s] ?? s) as string\n\t\treturn list.includes(candidate) ? (candidate as TOut) : fallback\n\t}) as Normalizer<TOut>\n\n\tcore.with = (bound: NormalizerOpts<TOut>) =>\n\t\t((input: unknown, opts?: NormalizerOpts<TOut>) =>\n\t\t\tcore(input, { ...bound, ...(opts ?? {}) })) as Normalizer<TOut>\n\n\treturn core\n}\n\n/**\n * Group helper: normalize a whole props object in one call.\n * - `all.transform` applies to every normalizer in the set (safe cross-type).\n * - `each[key]` lets you override per-key opts (aliases/fallback/transform).\n */\nexport function makeNormalizerSet<TOuts extends Record<string, string>>(map: {\n\t[K in keyof TOuts]: Normalizer<TOuts[K]>\n}) {\n\ttype In = { [K in keyof TOuts]?: unknown | null }\n\ttype Out = { [K in keyof TOuts]: TOuts[K] }\n\ttype All = Pick<NormalizerOpts<string>, 'transform'> // safe cross-prop\n\ttype Each = { [K in keyof TOuts]?: NormalizerOpts<TOuts[K]> }\n\ttype Call = (input: In, opts?: { all?: All; each?: Each }) => Out\n\n\tconst call = ((input: In, opts?: { all?: All; each?: Each }) => {\n\t\tconst out = {} as Out\n\t\tfor (const k in map) {\n\t\t\tif (!Object.prototype.hasOwnProperty.call(map, k)) continue\n\t\t\tconst key = k as keyof TOuts\n\t\t\tconst n = map[key]\n\t\t\tconst base = opts?.all ? n.with(opts.all as any) : n\n\t\t\tout[key] = base(input?.[key], opts?.each?.[key]) as TOuts[typeof key]\n\t\t}\n\t\treturn out\n\t}) as Call & { with(all: All): Call }\n\n\tcall.with = (all: All) => {\n\t\tconst bound = {} as { [K in keyof TOuts]: Normalizer<TOuts[K]> }\n\t\tfor (const k in map) {\n\t\t\tif (!Object.prototype.hasOwnProperty.call(map, k)) continue\n\t\t\tconst key = k as keyof TOuts\n\t\t\tbound[key] = map[key].with(all as any)\n\t\t}\n\t\treturn makeNormalizerSet(bound)\n\t}\n\n\treturn call\n}\n"],"names":["makeNormalizer","allowed","defaults","list","defaultAliases","v","defaultTransform","s","core","input","opts","aliases","fallback","transform","candidate","bound","makeNormalizerSet","map","call","out","k","key","n","base","all"],"mappings":"AAWO,SAASA,EAIfC,GACAC,GAKmB;AACnB,QAAMC,IAAOF,GAEPG,IACLF,EAAS,WACR,OAAO,YAAYC,EAAK,IAAI,CAACE,MAAM,CAACA,GAAGA,CAAC,CAAC,CAAC,GAEtCC,IACLJ,EAAS,cAAc,CAACK,MAAcA,EAAE,OAAO,gBAE1CC,IAAQ,CAACC,GAAgBC,MAAsC;AACpE,UAAMC,IAAU,EAAE,GAAGP,GAAgB,GAAIM,GAAM,WAAW,GAAC,GACrDE,IAAWF,GAAM,YAAYR,EAAS,UACtCW,IAAYH,GAAM,aAAaJ;AAErC,QAAI,OAAOG,KAAU,SAAU,QAAOG;AAEtC,UAAML,IAAIM,EAAUJ,CAAK,GACnBK,IAAaH,EAAQJ,CAAC,KAAKA;AACjC,WAAOJ,EAAK,SAASW,CAAS,IAAKA,IAAqBF;AAAA,EACzD;AAEA,SAAAJ,EAAK,OAAO,CAACO,MACX,CAACN,GAAgBC,MACjBF,EAAKC,GAAO,EAAE,GAAGM,GAAO,GAAIL,KAAQ,CAAA,GAAK,GAEpCF;AACR;AAOO,SAASQ,EAAwDC,GAErE;AAOF,QAAMC,IAAQ,CAACT,GAAWC,MAAsC;AAC/D,UAAMS,IAAM,CAAA;AACZ,eAAWC,KAAKH,GAAK;AACpB,UAAI,CAAC,OAAO,UAAU,eAAe,KAAKA,GAAKG,CAAC,EAAG;AACnD,YAAMC,IAAMD,GACNE,IAAIL,EAAII,CAAG,GACXE,IAAOb,GAAM,MAAMY,EAAE,KAAKZ,EAAK,GAAU,IAAIY;AACnD,MAAAH,EAAIE,CAAG,IAAIE,EAAKd,IAAQY,CAAG,GAAGX,GAAM,OAAOW,CAAG,CAAC;AAAA,IAChD;AACA,WAAOF;AAAA,EACR;AAEA,SAAAD,EAAK,OAAO,CAACM,MAAa;AACzB,UAAMT,IAAQ,CAAA;AACd,eAAWK,KAAKH,GAAK;AACpB,UAAI,CAAC,OAAO,UAAU,eAAe,KAAKA,GAAKG,CAAC,EAAG;AACnD,YAAMC,IAAMD;AACZ,MAAAL,EAAMM,CAAG,IAAIJ,EAAII,CAAG,EAAE,KAAKG,CAAU;AAAA,IACtC;AACA,WAAOR,EAAkBD,CAAK;AAAA,EAC/B,GAEOG;AACR;"}

package/dist/utils/mds-context/index.d.ts

@@ -0,0 +1,59 @@
+import { CSSProperties, ImgHTMLAttributes, ComponentType } from 'react';
+type FillLayout = {
+    fill: true;
+    /** Strongly recommended when using fill */
+    sizes?: string;
+};
+type FixedLayout = {
+    width: number;
+    height: number;
+    fill?: false;
+};
+/** Next/Image extras we want to allow on adapters (all optional here) */
+type NextImageExtras = {
+    priority?: boolean;
+    placeholder?: 'blur' | 'empty';
+    blurDataURL?: string;
+    quality?: number;
+    unoptimized?: boolean;
+    onLoadingComplete?: (img: HTMLImageElement) => void;
+};
+export type MDSImageProps = ({
+    alt: string;
+    /** DS-neutral; Next adapter may also accept StaticImageData at runtime */
+    src: string;
+    className?: string;
+    style?: CSSProperties;
+    loading?: 'eager' | 'lazy';
+    decoding?: 'sync' | 'async' | 'auto';
+    fetchPriority?: 'high' | 'low' | 'auto';
+    objectFit?: string;
+    objectPosition?: string;
+} & (FillLayout | FixedLayout)) & Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height' | 'loading' | 'decoding'> & NextImageExtras;
+type ImageComponent = ComponentType<MDSImageProps>;
+/**
+ * Start from all standard <a> props, then refine:
+ * - force a typed href
+ * - keep children required
+ * - keep Next-specific props optional so the default <a> can ignore them
+ */
+export type MDSLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string | URL;
+    target?: React.HTMLAttributeAnchorTarget;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+} & {
+    prefetch?: boolean;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    locale?: string | false;
+};
+type LinkComponent = React.ForwardRefExoticComponent<MDSLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare function MDSProvider({ children, imageComponent, linkComponent, }: {
+    children: React.ReactNode;
+    imageComponent?: ImageComponent;
+    linkComponent?: LinkComponent;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMDSImage(): ImageComponent;
+export declare function useMDSLink(): LinkComponent;
+export {};