@hashicorp/mds-react 0.9.0

package/dist/components/badge/index.js

@@ -0,0 +1,50 @@
+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/dist/components/badge/index.js.map

@@ -0,0 +1 @@
+{"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/dist/components/badge/style.module.scss

@@ -0,0 +1,130 @@
+$colors: ('highlight', 'success', 'warning', 'critical');
+$sizes: ('small', 'medium', 'large');
+$border-width: 1px;
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	max-width: 100%;
+	vertical-align: middle;
+	border: $border-width solid transparent;
+	border-radius: 5px;
+}
+
+.text {
+	flex: 1 0 0;
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+	'small': (
+		'font-size': 0.8125rem,
+		// 13px
+		'gap': 0.25rem,
+		'height': 1.25rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.125rem,
+		'padding-horizontal': 0.375rem,
+	),
+	'medium': (
+		'font-size': 0.8125rem,
+		// 13px
+		'gap': 0.25rem,
+		'height': 1.5rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.5rem,
+	),
+	'large': (
+		'font-size': 1rem,
+		// 16px
+		'gap': 0.375rem,
+		'height': 2rem,
+		'line-height': 1.5,
+		// 24px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.5rem,
+	),
+);
+
+@each $size in $sizes {
+	.size-#{$size} {
+		gap: map-get($size-props, $size, 'gap');
+		min-height: map-get($size-props, $size, 'height');
+		padding: calc(
+				#{map-get($size-props, $size, 'padding-vertical')} - #{$border-width}
+			)
+			calc(
+				#{map-get($size-props, $size, 'padding-horizontal')} - #{$border-width}
+			);
+
+		.text {
+			font-size: map-get($size-props, $size, 'font-size');
+			line-height: map-get($size-props, $size, 'line-height');
+		}
+	}
+}
+
+// COLOR + TYPE COMBINATIONS
+
+.color-neutral {
+	&.type-filled {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-strong);
+	}
+
+	&.type-inverted {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-foreground-faint);
+	}
+
+	&.type-outlined {
+		color: var(--mds-color-foreground-primary);
+		background-color: transparent;
+		border-color: var(--mds-color-foreground-faint);
+	}
+}
+
+.color-neutral-dark-mode {
+	&.type-filled {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-foreground-faint);
+	}
+
+	&.type-inverted {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-faint);
+	}
+
+	&.type-outlined {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: transparent;
+		border-color: var(--mds-color-palette-neutral-100);
+	}
+}
+
+@each $color in $colors {
+	.color-#{$color} {
+		&.type-filled {
+			color: var(--mds-color-foreground-#{$color}-on-surface);
+			background-color: var(--mds-color-surface-#{$color});
+		}
+
+		&.type-inverted {
+			color: var(--mds-color-foreground-high-contrast);
+			background-color: var(--mds-color-foreground-#{$color});
+		}
+
+		&.type-outlined {
+			color: var(--mds-color-foreground-#{$color});
+			background-color: transparent;
+			border-color: currentColor;
+		}
+	}
+}

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

@@ -0,0 +1,22 @@
+const e = "badge__zns82", l = "text__WoM4W", o = {
+  badge: e,
+  text: l,
+  "size-small": "size-small__8xHdE",
+  "size-medium": "size-medium__xqCpO",
+  "size-large": "size-large__Pviip",
+  "color-neutral": "color-neutral__6Csf4",
+  "type-filled": "type-filled__ZaWsu",
+  "type-inverted": "type-inverted__A3554",
+  "type-outlined": "type-outlined__l0zjH",
+  "color-neutral-dark-mode": "color-neutral-dark-mode__C1TO4",
+  "color-highlight": "color-highlight__eWwJ5",
+  "color-success": "color-success__EuxKz",
+  "color-warning": "color-warning__gCbUY",
+  "color-critical": "color-critical__hV-l-"
+};
+export {
+  e as badge,
+  o as default,
+  l as text
+};
+//# sourceMappingURL=style.module.scss.js.map

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

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

package/dist/components/badge-count/index.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+interface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 'small' | 'medium' | 'large';
+    type?: 'filled' | 'inverted' | 'outlined';
+    color?: 'neutral' | 'neutral-dark-mode';
+    /**
+     * Text value that renders in the Badge Count.
+     */
+    text: string;
+}
+declare const BadgeCount: {
+    ({ text, size, type, color, className, ...rest }: BadgeCountProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { BadgeCountProps };
+export { BadgeCount };

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

@@ -0,0 +1,29 @@
+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/dist/components/badge-count/index.js.map

@@ -0,0 +1 @@
+{"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/dist/components/badge-count/style.module.scss

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// BADGE-COUNT COMPONENT
+//
+
+@use 'sass:math';
+
+$sizes: ('small', 'medium', 'large');
+$border-width: 1px;
+
+.badge-count {
+	display: inline-flex;
+	align-items: center;
+	max-width: 100%;
+	font-weight: var(--mds-typography-font-weight-medium);
+	font-family: var(--mds-typography-font-stack-text);
+	border: $border-width solid transparent;
+}
+
+// SIZE
+
+// these values later may come from the design tokens
+$size-props: (
+	'small': (
+		'font-size': 0.8125rem,
+		// 13px
+		'height': 1.25rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.125rem,
+		'padding-horizontal': 0.5rem,
+	),
+	'medium': (
+		'font-size': 0.8125rem,
+		// 13px
+		'height': 1.5rem,
+		'line-height': 1.2308,
+		// 16px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.75rem,
+	),
+	'large': (
+		'font-size': 1rem,
+		// 16px
+		'height': 2rem,
+		'line-height': 1.5,
+		// 24px
+		'padding-vertical': 0.25rem,
+		'padding-horizontal': 0.875rem,
+	),
+);
+
+@each $size in $sizes {
+	.size-#{$size} {
+		min-height: map-get($size-props, $size, 'height');
+		padding: calc(
+				#{map-get($size-props, $size, 'padding-vertical')} - #{$border-width}
+			)
+			calc(
+				#{map-get($size-props, $size, 'padding-horizontal')} - #{$border-width}
+			);
+		font-size: map-get($size-props, $size, 'font-size');
+		line-height: map-get($size-props, $size, 'line-height');
+		border-radius: math.div(map-get($size-props, $size, 'height'), 2);
+	}
+}
+
+// COLOR + TYPE COMBINATIONS
+
+.color-neutral {
+	&.type-filled {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-strong);
+	}
+
+	&.type-inverted {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-foreground-faint);
+	}
+
+	&.type-outlined {
+		color: var(--mds-color-foreground-primary);
+		background-color: transparent;
+		border-color: var(--mds-color-foreground-faint);
+	}
+}
+
+.color-neutral-dark-mode {
+	&.type-filled {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: var(--mds-color-foreground-faint);
+	}
+
+	&.type-inverted {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-faint);
+	}
+
+	&.type-outlined {
+		color: var(--mds-color-foreground-high-contrast);
+		background-color: transparent;
+		border-color: var(--mds-color-palette-neutral-100);
+	}
+}

package/dist/components/badge-count/style.module.scss.js

@@ -0,0 +1,15 @@
+const e = {
+  "badge-count": "badge-count__9xA6z",
+  "size-small": "size-small__LxiPj",
+  "size-medium": "size-medium__emKOI",
+  "size-large": "size-large__M7RFP",
+  "color-neutral": "color-neutral__j2CVd",
+  "type-filled": "type-filled__tb7Yx",
+  "type-inverted": "type-inverted__Oc-mV",
+  "type-outlined": "type-outlined__V714E",
+  "color-neutral-dark-mode": "color-neutral-dark-mode__LLW-g"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=style.module.scss.js.map

package/dist/components/badge-count/style.module.scss.js.map

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

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,7 @@
+import { BreadcrumbProps, BreadcrumbTruncationProps } from './types';
+declare const Breadcrumbs: {
+    Root: ({ itemsCanWrap, ariaLabel, children, className, ...rest }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ maxWidth, current, icon, text, url, ...rest }: import('./types').BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+    Truncation: ({ ariaLabel, children, ...rest }: BreadcrumbTruncationProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Breadcrumbs };

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,38 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import s from "classnames";
+import { Provider as m, Toggle as l, Content as u } from "../menu-primitive/index.js";
+import { Item as d } from "./item/index.js";
+import { TruncationButton as b } from "./truncation-button/index.js";
+import t from "./style.module.scss.js";
+const p = ({
+  itemsCanWrap: e = !0,
+  ariaLabel: o = "breadcrumbs",
+  children: a,
+  className: n,
+  ...i
+}) => /* @__PURE__ */ r(
+  "nav",
+  {
+    className: s(
+      t.breadcrumbs,
+      {
+        [t["items-can-wrap"]]: e
+      },
+      n
+    ),
+    "aria-label": o,
+    ...i,
+    children: /* @__PURE__ */ r("ol", { className: t.list, children: a })
+  }
+), f = ({
+  ariaLabel: e,
+  children: o,
+  ...a
+}) => /* @__PURE__ */ r("li", { className: s(t.item, t.truncation), ...a, children: /* @__PURE__ */ c(m, { children: [
+  /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(b, {}) }),
+  /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r("div", { className: t["truncation-content"], children: /* @__PURE__ */ r("ol", { className: t.sublist, children: o }) }) })
+] }) }), j = { Root: p, Item: d, Truncation: f };
+export {
+  j as Breadcrumbs
+};
+//# sourceMappingURL=index.js.map

package/dist/components/breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/breadcrumbs/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport * as MenuPrimitive from '../menu-primitive'\nimport { Item } from './item'\nimport { TruncationButton } from './truncation-button'\nimport type { BreadcrumbProps, BreadcrumbTruncationProps } from './types'\nimport s from './style.module.scss'\n\nconst Root = ({\n\titemsCanWrap = true,\n\tariaLabel = 'breadcrumbs',\n\tchildren,\n\tclassName,\n\t...rest\n}: BreadcrumbProps) => {\n\treturn (\n\t\t<nav\n\t\t\tclassName={classNames(\n\t\t\t\ts.breadcrumbs,\n\t\t\t\t{\n\t\t\t\t\t[s['items-can-wrap']]: itemsCanWrap,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-label={ariaLabel}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<ol className={s.list}>{children}</ol>\n\t\t</nav>\n\t)\n}\n\nconst Truncation = ({\n\tariaLabel,\n\tchildren,\n\t...rest\n}: BreadcrumbTruncationProps) => {\n\treturn (\n\t\t<li className={classNames(s.item, s.truncation)} {...rest}>\n\t\t\t<MenuPrimitive.Provider>\n\t\t\t\t<MenuPrimitive.Toggle>\n\t\t\t\t\t<TruncationButton />\n\t\t\t\t</MenuPrimitive.Toggle>\n\t\t\t\t<MenuPrimitive.Content>\n\t\t\t\t\t<div className={s['truncation-content']}>\n\t\t\t\t\t\t<ol className={s.sublist}>{children}</ol>\n\t\t\t\t\t</div>\n\t\t\t\t</MenuPrimitive.Content>\n\t\t\t</MenuPrimitive.Provider>\n\t\t</li>\n\t)\n}\n\nconst Breadcrumbs = { Root, Item, Truncation }\n\nexport { Breadcrumbs }\n"],"names":["Root","itemsCanWrap","ariaLabel","children","className","rest","jsx","classNames","s","Truncation","jsxs","MenuPrimitive.Provider","MenuPrimitive.Toggle","TruncationButton","MenuPrimitive.Content","Breadcrumbs","Item"],"mappings":";;;;;;AAOA,MAAMA,IAAO,CAAC;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACF;AAAA,QACC,CAACA,EAAE,gBAAgB,CAAC,GAAGP;AAAA,MAAA;AAAA,MAExBG;AAAA,IAAA;AAAA,IAED,cAAYF;AAAA,IACX,GAAGG;AAAA,IAEJ,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAWE,EAAE,MAAO,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA,GAK9BM,IAAa,CAAC;AAAA,EACnB,WAAAP;AAAA,EACA,UAAAC;AAAA,EACA,GAAGE;AACJ,MAEE,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,MAAMA,EAAE,UAAU,GAAI,GAAGH,GACpD,UAAA,gBAAAK,EAACC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAL,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACO,KAAiB,GACnB;AAAA,oBACCC,GAAA,EACA,UAAA,gBAAAR,EAAC,SAAI,WAAWE,EAAE,oBAAoB,GACrC,4BAAC,MAAA,EAAG,WAAWA,EAAE,SAAU,UAAAL,GAAS,GACrC,EAAA,CACD;AAAA,EAAA,CACD,EAAA,CACD,GAIIY,IAAc,EAAE,MAAAf,GAAM,MAAAgB,GAAM,YAAAP,EAAA;"}

package/dist/components/breadcrumbs/item/index.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbItemProps } from '../types';
+export declare const Item: ({ maxWidth, current, icon, text, url, ...rest }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumbs/item/index.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as e, jsxs as o, Fragment as d } from "react/jsx-runtime";
+import { useMDSLink as h } from "../../../utils/mds-context/index.js";
+import s from "../style.module.scss.js";
+const i = ({ icon: r, text: n }) => /* @__PURE__ */ o(d, { children: [
+  r && /* @__PURE__ */ e("div", { className: s.icon, children: r }),
+  /* @__PURE__ */ e("span", { className: s.text, children: n })
+] }), f = ({
+  maxWidth: r,
+  current: n,
+  icon: t,
+  text: c,
+  url: l,
+  ...m
+}) => {
+  const a = h();
+  return /* @__PURE__ */ e(
+    "li",
+    {
+      className: s.item,
+      style: {
+        ...r && { maxWidth: r }
+      },
+      ...m,
+      children: n ? /* @__PURE__ */ e("div", { className: s.current, children: /* @__PURE__ */ e(i, { icon: t, text: c }) }) : /* @__PURE__ */ e(a, { className: s.link, href: l, children: /* @__PURE__ */ e(i, { icon: t, text: c }) })
+    }
+  );
+};
+export {
+  f as Item
+};
+//# sourceMappingURL=index.js.map

package/dist/components/breadcrumbs/item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/breadcrumbs/item/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMDSLink } from '../../../utils/mds-context'\nimport type { BreadcrumbItemProps } from '../types'\nimport s from '../style.module.scss'\n\ninterface ItemContentProps {\n\ttext: string\n\t/**\n\t * Use to show an flight icon.\n\t */\n\ticon?: React.ReactNode\n}\n\nconst ItemContent = ({ icon, text }: ItemContentProps) => {\n\treturn (\n\t\t<>\n\t\t\t{icon && <div className={s.icon}>{icon}</div>}\n\n\t\t\t<span className={s.text}>{text}</span>\n\t\t</>\n\t)\n}\n\nexport const Item = ({\n\tmaxWidth,\n\tcurrent,\n\ticon,\n\ttext,\n\turl,\n\t...rest\n}: BreadcrumbItemProps) => {\n\tconst Link = useMDSLink()\n\n\treturn (\n\t\t<li\n\t\t\tclassName={s.item}\n\t\t\tstyle={{\n\t\t\t\t...(maxWidth && { maxWidth }),\n\t\t\t}}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{current ? (\n\t\t\t\t<div className={s.current}>\n\t\t\t\t\t<ItemContent icon={icon} text={text} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<Link className={s.link} href={url}>\n\t\t\t\t\t<ItemContent icon={icon} text={text} />\n\t\t\t\t</Link>\n\t\t\t)}\n\t\t</li>\n\t)\n}\n"],"names":["text","jsxs","Fragment","icon","jsx","Item","maxWidth","current","url","rest","ItemContent","Link"],"mappings":";;;;AAeC,sBACC,MAAAA,QACE,gBAAAC,EAAQC,GAAC,EAAI,UAAW;AAAA,EAAcC,KAEtC,gBAAAC,EAAA,OAAK,EAAA,aAAoB,MAAA,UAAKD,EAAA,CAAA;AAAA,EAChC,gBAAAC,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,UAAAJ,EAAA,CAAA;AAEF,EAAA,CAAA,GAGCK,IAAA,CAAA;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAJ;AAAA,EACA,MAAAH;AAAA,EACA,KAAAQ;AAAA,EACD,GAAAC;AACC,MAAA;AAEA,cACC;AAAA,SAAC,gBAAAL;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,WAAO,EAAA;AAAA,MAAA,OACF;AAAA,QACL,GAAAE,KAAA,EAAA,UAAAA,EAAA;AAAA,MACC;AAAA,MAEA,GAAAG;AAAA,MAOA,UAAAF,IAAA,gBAAAH,EAAA,OAAA,EAAA,WAAA,EAAA,SAAA,UAAA,gBAAAA,EAAAM,GAAA,EAAA,MAAAP,GAAA,MAAAH,EAAA,CAAA,EAAA,CAAA,IAAA,gBAAAI,EAAAO,GAAA,EAAA,WAAA,EAAA,MAAA,MAAAH,GAAA,UAAA,gBAAAJ,EAAAM,GAAA,EAAA,MAAAP,GAAA,MAAAH,EAAA,CAAA,EAAA,CAAA;AAAA,IAEF;AAAA,EAEF;;"}

package/dist/components/breadcrumbs/style.module.scss

@@ -0,0 +1,183 @@
+@use 'styles/mixins/focus-ring' as *;
+
+$item-height: 28px;
+$item-border-radius: 5px;
+$item-visual-horizontal-padding: 4px;
+
+// MAIN CONTAINER (NAV)
+.breadcrumbs {
+	position: relative;
+}
+
+// LIST (OL)
+
+.list {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	.items-can-wrap & {
+		flex-wrap: wrap;
+	}
+}
+
+.sublist {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+// ITEM (LI)
+
+.item {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-width: 0;
+
+	.list > & {
+		&:not(:last-child)::after {
+			padding: 0 8px;
+			color: var(--mds-color-palette-neutral-300);
+			content: '/';
+		}
+	}
+
+	.sublist > & + & {
+		margin-top: 4px;
+	}
+}
+
+.truncation {
+	flex: none; // needed to avoid that the "flex" parent collapses the truncation element (it happens with very long strings and no-wrapping)
+}
+
+// LINK (A)
+
+.link {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-width: 0;
+	margin: 0 (-$item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+	padding: 0 $item-visual-horizontal-padding;
+	color: var(--mds-color-foreground-faint);
+	border-radius: $item-border-radius;
+	// notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
+	text-decoration-color: transparent;
+
+	&:hover {
+		color: var(--mds-color-palette-neutral-600);
+
+		& > .text {
+			text-decoration-color: currentColor;
+		}
+	}
+
+	// we apply the focus directly to the element, without using a pseudo-element
+	@include hds-focus-ring-basic();
+
+	&:active {
+		& > .text {
+			text-decoration-color: currentColor;
+		}
+	}
+}
+
+// CURRENT
+
+.current {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-width: 0;
+	margin: 0 (-$item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+	padding: 0 $item-visual-horizontal-padding;
+	color: var(--mds-color-foreground-strong);
+}
+
+// SUB-ELEMENTS
+
+.icon {
+	flex: none;
+	width: 13px;
+	height: 13px;
+	margin-right: 6px;
+
+	& svg {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.text {
+	// we use the extra vertical padding to force the height of the parent item to be exactly $item-height
+	padding: calc((#{$item-height} - 1rem) / 2) 0;
+	overflow: hidden;
+	font-size: 0.8125rem; // 13px
+	font-family: var(--mds-typography-font-stack-text);
+	line-height: 1rem; // 16px
+	white-space: nowrap;
+	text-decoration: underline;
+	text-overflow: ellipsis;
+	text-decoration-color: transparent;
+
+	.sublist & {
+		white-space: normal;
+	}
+}
+
+// TRUNCATION
+
+.truncation-button {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: $item-height;
+	height: $item-height;
+	margin: 0 (-$item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
+	padding: 0;
+	color: var(--mds-color-foreground-faint);
+	background-color: transparent;
+	border: 1px solid transparent; // We need this to be transparent for a11y
+	border-radius: $item-border-radius;
+	outline: none; // TODO check with @melanie
+	cursor: pointer;
+
+	&:hover {
+		color: var(--mds-color-foreground-faint);
+		border-color: var(--mds-color-border-strong);
+	}
+
+	// we apply the focus directly to the element, without using a pseudo-element
+	@include hds-focus-ring-basic();
+
+	&:focus {
+		background-color: transparent;
+		border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
+	}
+
+	&:active {
+		color: var(--mds-color-foreground-primary);
+		background-color: var(--mds-color-surface-interactive-active);
+		border-color: var(--mds-color-border-strong);
+	}
+}
+
+.truncation-content {
+	position: absolute;
+	top: 100%;
+	left: -$item-visual-horizontal-padding;
+	z-index: 300; // this is the z-index used in Structure for this kind of things, I am reusing the same value
+	width: max-content;
+	max-width: 200px; // by design
+	margin-top: 4px;
+	padding: 6px 12px;
+	background-color: var(--mds-color-surface-primary);
+	border-radius: 6px;
+	box-shadow: var(--mds-surface-high-box-shadow);
+}