@hashicorp/mds-react 0.9.13 → 0.9.15

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+interface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 'small' | 'medium' | 'large';
+    type?: 'filled' | 'inverted' | 'outlined';
+    /**
+     * 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 };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge-count/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,UAAU,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAA;IACzC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACZ;AAED,QAAA,MAAM,UAAU;sDAOb,eAAe;;CAejB,CAAA;AAID,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,UAAU,EAAE,CAAA"}

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\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-neutral`],\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":";;;AAaA,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,eAAe;AAAA,MACjBJ;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,86 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// BADGE-COUNT COMPONENT
+//
+
+@use 'sass:math';
+@use 'sass:map';
+
+$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);
+	}
+}

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

@@ -0,0 +1,8 @@
+import type { 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 };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumbs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAgDzE,QAAA,MAAM,WAAW;sEAvCd,eAAe;;mDAsBf,yBAAyB;CAiBkB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,CAAA"}

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,3 @@
+import type { BreadcrumbItemProps } from '../types';
+export declare const Item: ({ maxWidth, current, icon, text, url, ...rest }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAqBnD,eAAO,MAAM,IAAI,GAAI,iDAOlB,mBAAmB,4CAsBrB,CAAA"}

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);
+}

package/dist/components/breadcrumbs/truncation-button/index.d.ts

@@ -0,0 +1,4 @@
+export declare const TruncationButton: ({ ariaLabel, }: {
+    ariaLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumbs/truncation-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/truncation-button/index.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,GAAI,gBAE9B;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB,4CAcA,CAAA"}

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

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * This controls if the Breadcrumb Items can wrap if they don’t fit within the container.
+     * @default true
+     */
+    itemsCanWrap?: boolean;
+    /**
+     * Accepts a localized string.
+     * @default 'breadcrumbs'
+     */
+    ariaLabel?: string;
+    /**
+     * Array of Breadcrumb.Item and/or Breadcrumb.Truncation components.
+     */
+    children: ReactNode;
+}
+export interface BreadcrumbItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    /**
+     * The URL to link to.
+     */
+    url: string;
+    /**
+     * The text displayed within the item.
+     */
+    text: string;
+    /**
+     * Use to show an flight icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Determines if an item is the last item in the Breadcrumb, in which case it doesn’t generate a link.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * A parameter that can be applied to an "item" to limit its max-width
+     */
+    maxWidth?: `${number}px` | `${number}em`;
+}
+export interface BreadcrumbTruncationProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * Set on the truncation toggle button. Accepts a localized string.
+     * @default 'show more'
+     */
+    ariaLabel?: string;
+    /**
+     * Array of Breadcrumb.Item components.
+     */
+    children: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExE,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,aAAa,CAAC;IAC3E;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,CAAA;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC/E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACnB"}

package/dist/components/button/button-primitive.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonPrimitiveProps } from '.';
+declare const LEGACY_COLORS: readonly ["primary", "secondary", "tertiary", "critical", "custom"];
+export type LegacyButtonColor = (typeof LEGACY_COLORS)[number];
+export declare const ButtonPrimitive: import("react").ForwardRefExoticComponent<ButtonPrimitiveProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=button-primitive.d.ts.map

package/dist/components/button/button-primitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-primitive.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-primitive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAO7C,QAAA,MAAM,aAAa,qEAMT,CAAA;AACV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAQ9D,eAAO,MAAM,eAAe,oHA2D3B,CAAA"}

package/dist/components/button/button-primitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-primitive.js","sources":["../../../src/components/button/button-primitive.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonPrimitiveProps } from '.'\nimport { FlightIcon, type FlightIconSize } from '../flight-icon'\nimport { Interactive } from '../interactive'\nimport classNames from 'classnames'\nimport s from './styles.module.scss'\n\n// These are the only “real” colors our legacy button knows about\nconst LEGACY_COLORS = [\n\t'primary',\n\t'secondary',\n\t'tertiary',\n\t'critical',\n\t'custom',\n] as const\nexport type LegacyButtonColor = (typeof LEGACY_COLORS)[number]\n\nconst ICON_SIZE_MAP = {\n\tsmall: 12,\n\tmedium: 16,\n\tlarge: 24,\n} as const satisfies Record<'small' | 'medium' | 'large', FlightIconSize>\n\nexport const ButtonPrimitive = forwardRef<\n\tHTMLButtonElement,\n\tButtonPrimitiveProps\n>(\n\t(\n\t\t{\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\tisFullWidth,\n\t\t\tisIconOnly,\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\ttext,\n\t\t\thref,\n\t\t\tisHrefExternal,\n\t\t\tclassName,\n\t\t\tlocale,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst hasIcon = Boolean(icon)\n\t\tconst showIconOnly = isIconOnly && hasIcon\n\n\t\tconst iconElement = icon && (\n\t\t\t<FlightIcon name={icon} size={ICON_SIZE_MAP[size]} />\n\t\t)\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts.button,\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t\t[s['icon-only']]: showIconOnly,\n\t\t\t\t\t},\n\t\t\t\t\tcolor !== 'custom' && s[`color-${color}`],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\thref={rest.disabled ? '' : href}\n\t\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t\taria-label={showIconOnly ? text : undefined}\n\t\t\t\tlocale={locale}\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{showIconOnly && icon ? (\n\t\t\t\t\ticonElement\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && iconPosition === 'leading' && iconElement}\n\t\t\t\t\t\t{text ? <div className={s.text}>{text}</div> : null}\n\t\t\t\t\t\t{icon && iconPosition === 'trailing' && iconElement}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Interactive>\n\t\t)\n\t},\n)\nButtonPrimitive.displayName = 'ButtonPrimitive'\n"],"names":["ICON_SIZE_MAP","ButtonPrimitive","forwardRef","size","color","isFullWidth","isIconOnly","icon","iconPosition","text","href","isHrefExternal","className","locale","rest","ref","showIconOnly","iconElement","jsx","FlightIcon","Interactive","classNames","s","jsxs","Fragment"],"mappings":";;;;;;AAiBA,MAAMA,IAAgB;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEaC,IAAkBC;AAAA,EAI9B,CACC;AAAA,IACC,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AAEJ,UAAMC,IAAeV,KADL,EAAQC,GAGlBU,IAAcV,KACnB,gBAAAW,EAACC,GAAA,EAAW,MAAMZ,GAAM,MAAMP,EAAcG,CAAI,EAAA,CAAG;AAGpD,WACC,gBAAAe;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,WAAWC;AAAA,UACVC,EAAE;AAAA,UACFA,EAAE,QAAQnB,CAAI,EAAE;AAAA,UAChB;AAAA,YACC,CAACmB,EAAE,YAAY,CAAC,GAAGjB;AAAA,YACnB,CAACiB,EAAE,WAAW,CAAC,GAAGN;AAAA,UAAA;AAAA,UAEnBZ,MAAU,YAAYkB,EAAE,SAASlB,CAAK,EAAE;AAAA,UACxCQ;AAAA,QAAA;AAAA,QAED,MAAME,EAAK,WAAW,KAAKJ;AAAA,QAC3B,gBAAAC;AAAA,QACA,cAAYK,IAAeP,IAAO;AAAA,QAClC,QAAAI;AAAA,QACC,GAAGC;AAAA,QACJ,KAAAC;AAAA,QAEC,UAAAC,KAAgBT,IAChBU,IAEA,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,UAAAjB,KAAQC,MAAiB,aAAaS;AAAA,UACtCR,IAAO,gBAAAS,EAAC,OAAA,EAAI,WAAWI,EAAE,MAAO,aAAK,IAAS;AAAA,UAC9Cf,KAAQC,MAAiB,cAAcS;AAAA,QAAA,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIJ;AACD;AACAhB,EAAgB,cAAc;"}

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

@@ -0,0 +1,31 @@
+import type { ForwardRefExoticComponent } from 'react';
+import { type LegacyButtonColor } from './button-primitive';
+import type { FlightIconName } from '../flight-icon';
+export declare const BUTTON_SIZES: readonly ["small", "medium", "large"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+export declare const BUTTON_ICON_POSITIONS: readonly ["leading", "trailing"];
+export type ButtonIconPosition = (typeof BUTTON_ICON_POSITIONS)[number];
+export declare const BUTTON_COLORS: readonly ["primary", "primary-black", "primary-white", "secondary", "secondary-high-contrast", "secondary-white", "secondary-black", "tertiary", "critical", "boundary", "consul", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint", "hashicorp"];
+export type ButtonColor = (typeof BUTTON_COLORS)[number];
+export interface ButtonPrimitiveProps {
+    size?: ButtonSize;
+    color?: LegacyButtonColor;
+    isFullWidth?: boolean;
+    isIconOnly?: boolean;
+    icon?: FlightIconName;
+    iconPosition?: ButtonIconPosition;
+    text?: string;
+    href?: string;
+    isHrefExternal?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    locale?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {
+    color?: ButtonColor;
+}
+export declare const Button: ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAE5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAEpD,eAAO,MAAM,YAAY,uCAAwC,CAAA;AACjE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,qBAAqB,kCAAmC,CAAA;AACrE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvE,eAAO,MAAM,aAAa,iQAmBhB,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,MAAM,WAAW,oBAAoB;IACpC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAwBD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACvE,KAAK,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,eAAO,MAAM,MAAM,+GAwBjB,CAAA"}

package/dist/components/button/styles.module.scss

@@ -0,0 +1,217 @@
+@use 'styles/mixins/button' as *;
+
+$button-border-width: 1px;
+$button-focus-border-width: 3px;
+$button-border-radius: 5px;
+
+.button {
+	@include hds-button;
+
+	// the <a> element behaves differently than a <button>
+	@at-root a#{&} {
+		width: fit-content;
+
+		// for more background on the use of underlining as defined below read the following document: https://docs.google.com/document/d/1acLxdRqmy92vQ8ArShPxoBFmAV0StsbZrqEic6MVt20
+		&:hover,
+		&:focus,
+		&:active {
+			text-decoration: underline;
+		}
+	}
+
+	// This covers all of the browsers and focus scenarios (due to the custom focus design).
+	//
+	// 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 {
+		@include hds-button-state-disabled;
+	}
+
+	&.width-full {
+		width: 100%;
+		max-width: 100%;
+
+		.text {
+			flex: 0 0 auto;
+		}
+	}
+
+	&:focus {
+		@include hds-button-state-focus;
+	}
+}
+
+.text {
+	flex: 1 0 0;
+}
+
+.color-primary {
+	@include hds-button-color-primary;
+}
+
+.color-secondary {
+	@include hds-button-color-secondary;
+}
+
+.color-tertiary {
+	@include hds-button-color-tertiary;
+}
+
+.color-critical {
+	@include hds-button-color-critical;
+}
+
+@mixin mds-button-color-product($product) {
+	color: var(--mds-color-#{$product}-button-foreground);
+	background-color: var(--mds-color-#{$product}-button-background);
+	border-color: var(--mds-color-#{$product}-button-border, var(--mds-color-border-primary));
+	box-shadow: var(--mds-elevation-low-box-shadow);
+
+	&:hover {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-hover);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-focus);
+
+		&::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: $button-border-width + $button-focus-border-width + 2px;
+			top: -$shift;
+			right: -$shift;
+			bottom: -$shift;
+			left: -$shift;
+			border-color: var(--mds-color-focus-action-external);
+			border-radius: $button-border-radius + $button-focus-border-width + 2px;
+		}
+	}
+
+	&:active {
+		color: var(--mds-color-#{$product}-button-foreground);
+		background-color: var(--mds-color-#{$product}-button-background-active);
+		box-shadow: none;
+
+		&::before {
+			border-color: transparent;
+		}
+	}
+}
+
+.color-primary-white {
+	@include mds-button-color-product('primary-white');
+}
+
+.color-primary-black {
+	@include mds-button-color-product('primary-black');
+}
+
+.color-secondary-white {
+	@include mds-button-color-product('secondary-white');
+}
+
+.color-secondary-black {
+	@include mds-button-color-product('secondary-black');
+}
+
+:global(.mds-dark-mode),
+:global([data-theme='dark']) {
+	& .color-secondary-high-contrast {
+		@include mds-button-color-product('secondary-white');
+	}
+}
+
+.color-secondary-high-contrast {
+	@include mds-button-color-product('secondary-black');
+}
+
+.color-boundary {
+	@include mds-button-color-product('boundary');
+}
+
+.color-consul {
+	@include mds-button-color-product('consul');
+}
+
+.color-nomad {
+	@include mds-button-color-product('nomad');
+}
+
+.color-packer {
+	@include mds-button-color-product('packer');
+}
+
+.color-terraform {
+	@include mds-button-color-product('terraform');
+}
+
+.color-vagrant {
+	@include mds-button-color-product('vagrant');
+}
+
+.color-vault {
+	@include mds-button-color-product('vault');
+}
+
+.color-waypoint {
+	@include mds-button-color-product('waypoint');
+}
+
+.size-small {
+	min-height: 1.75rem;
+	padding: 0.375rem 0.6875rem;
+
+	& .text {
+		font-size: 0.8125rem;
+		line-height: 0.875rem;
+	}
+
+	&.icon-only {
+		min-width: 1.75rem;
+		padding-right: 0.375rem;
+		padding-left: 0.375rem;
+	}
+}
+
+.size-medium {
+	min-height: 2.25rem;
+	padding: 0.5625rem 0.9375rem;
+
+	& .text {
+		font-size: 0.875rem;
+		line-height: 1rem;
+	}
+
+	&.icon-only {
+		min-width: 2.25rem;
+		padding-right: 0.5625rem;
+		padding-left: 0.5625rem;
+	}
+}
+
+.size-large {
+	min-height: 3rem;
+	padding: 0.6875rem 1.1875rem;
+
+	& .text {
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	&.icon-only {
+		min-width: 3rem;
+		padding-right: 0.6875rem;
+		padding-left: 0.6875rem;
+	}
+}

package/dist/components/card/card-thumbnail/index.d.ts

@@ -0,0 +1,3 @@
+import type { CardThumbnailProps } from '../types';
+export declare const CardThumbnail: ({ alt, aspectRatio, src, }: CardThumbnailProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/card-thumbnail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card-thumbnail/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,eAAO,MAAM,aAAa,GAAI,4BAI3B,kBAAkB,mDAUpB,CAAA"}