@hashicorp/mds-react 0.9.13 → 0.9.15

package/dist/components/dropdown/list-item/interactive.d.ts

@@ -0,0 +1,30 @@
+import { type InteractiveProps } from '../../interactive';
+interface ListItemInteractiveProps extends Omit<InteractiveProps, 'children'> {
+    /**
+     * Text to be used in the item. If no text value is defined, an error will be thrown.
+     */
+    text: string;
+    /**
+     * Color applied to the text and (optional) icons.
+     */
+    color?: 'action' | 'critical';
+    /**
+     * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    icon?: string;
+    /**
+     * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.
+     */
+    trailingIcon?: string;
+    /**
+     * Controls if the item is in “loading” state. When in this state, the item is not actually interactive, but you can pass the other expected arguments for the item (they’re simply ignored).
+     */
+    isLoading?: boolean;
+}
+declare const ListItemInteractive: {
+    ({ text, color, icon, isLoading, trailingIcon, ...rest }: ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemInteractiveProps };
+export { ListItemInteractive };
+//# sourceMappingURL=interactive.d.ts.map

package/dist/components/dropdown/list-item/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/list-item/interactive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAGtE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC5E;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,mBAAmB;8DAOtB,wBAAwB;;CAoC1B,CAAA;AAID,YAAY,EAAE,wBAAwB,EAAE,CAAA;AACxC,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/dropdown/list-item/separator.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+type ListItemSeparatorProps = Omit<HTMLAttributes<HTMLLIElement>, 'className' | 'aria-hidden' | 'role'>;
+declare const ListItemSeparator: {
+    (props: ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemSeparatorProps };
+export { ListItemSeparator };
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/dropdown/list-item/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/list-item/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,KAAK,sBAAsB,GAAG,IAAI,CACjC,cAAc,CAAC,aAAa,CAAC,EAC7B,WAAW,GAAG,aAAa,GAAG,MAAM,CACpC,CAAA;AAED,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;CASvD,CAAA;AAID,YAAY,EAAE,sBAAsB,EAAE,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/dropdown/list-item/styles.module.css

@@ -0,0 +1,218 @@
+.list-item[disabled],
+.list-item[disabled]:hover {
+	color: var(--mds-color-foreground-disabled);
+	cursor: not-allowed;
+}
+
+.interactive {
+	position: relative;
+	min-height: 36px;
+	isolation: isolate; /* used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container) */
+
+	/* need to reset a few extra things to make the button visually appear the same as the link */
+	& button {
+		width: 100%;
+		background-color: transparent;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+
+	/* shared styles for links and buttons */
+	& a,
+	& button {
+		display: flex;
+		align-items: flex-start;
+		padding: 7px 9px 7px 15px; /* notice: we're subtracting 1px because of the transparent border */
+		text-decoration: none;
+		border: 1px solid transparent; /* because a border for the button is needed for a11y, we apply it to both the button and the link so they have the same height */
+		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;
+
+		/* this is used for the left "hover" indicator */
+		&::before {
+			position: absolute;
+			top: 6px;
+			bottom: 6px;
+			left: 4px;
+			z-index: -1;
+			width: 2px;
+			border-radius: 1px;
+			content: '';
+		}
+
+		/* Notice: this is used for the active/focus states which have very specific positions
+		and also has a background color, so we can't use the existing focus-ring mixins */
+		&::after {
+			position: absolute;
+			top: 0;
+			right: 4px;
+			bottom: 0;
+			left: 10px;
+			z-index: -1;
+			border-radius: 5px;
+			content: '';
+		}
+
+		/* Notice: to avoid too much duplication we define two local CSS variables
+	  and define their values in the color variants below */
+
+		&:hover {
+			color: var(--current-color-hover);
+
+			&::before {
+				background-color: currentColor;
+			}
+		}
+
+		/* default focus for browsers that still rely on ":focus" */
+		&:focus {
+			color: var(--current-color-focus);
+
+			&::after {
+				left: 4px;
+				box-shadow: var(--current-focus-ring-box-shadow);
+			}
+		}
+
+		/* undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles */
+		&:focus:not(:focus-visible) {
+			&::after {
+				background-color: transparent;
+				box-shadow: none;
+			}
+		}
+
+		/* set focus for browsers that support ":focus-visible" */
+		&:focus-visible {
+			color: var(--current-color-focus);
+
+			&::after {
+				left: 4px;
+				box-shadow: var(--current-focus-ring-box-shadow);
+			}
+		}
+
+		/* remove the focus ring on "active + focused" state (by design) */
+		&:focus:active,
+		&:focus-visible:active {
+			&::after {
+				left: 10px;
+				background-color: var(--current-background-color);
+				box-shadow: none;
+			}
+		}
+
+		&:active {
+			color: var(--current-color-active);
+
+			&::before {
+				background-color: currentColor;
+			}
+		}
+	}
+}
+
+.color-action {
+	& a,
+	& button {
+		color: var(--mds-color-foreground-primary);
+
+		/* assign the values to the local CSS variables used above */
+		--current-color-hover: var(--mds-color-foreground-action-hover);
+		--current-color-focus: var(--mds-color-foreground-action-active);
+		--current-color-active: var(--mds-color-foreground-action-active);
+
+		&::after {
+			--current-focus-ring-box-shadow: var(--mds-focus-ring-action-box-shadow);
+		}
+	}
+}
+
+.color-critical {
+	& a,
+	& button {
+		color: var(--mds-color-foreground-critical);
+
+		/* assign the values to the local CSS variables used above */
+		--current-color-hover: var(--mds-color-palette-red-300);
+		--current-color-focus: var(--mds-color-palette-red-400);
+		--current-color-active: var(--mds-color-palette-red-400);
+
+		&::after {
+			--current-background-color: var(--mds-color-surface-critical);
+			--current-focus-ring-box-shadow: var(--mds-focus-ring-critical-box-shadow);
+		}
+	}
+}
+
+.custom {
+	display: flex;
+	align-items: flex-start;
+	padding: 7px 9px 7px 15px;
+}
+
+.interactive-icon {
+	display: block;
+	margin-top: 2px;
+
+	&.leading {
+		margin-right: 8px;
+	}
+
+	&.trailing {
+		margin-left: 8px;
+	}
+}
+
+.interactive-text {
+	flex: 1;
+	text-align: left;
+}
+
+.loading-wrapper {
+	display: flex;
+	align-items: center;
+	padding: 8px 10px 8px 16px;
+
+	& .interactive-text {
+		color: var(--mds-color-foreground-faint);
+	}
+
+	& .interactive-icon {
+		color: var(--mds-color-foreground-primary);
+	}
+}
+
+.text-regular {
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-regular from global;
+}
+
+.text-large {
+	composes: mds-typography-legacy-body-200 from global;
+	composes: mds-typography-font-weight-medium from global;
+}
+
+.separator {
+	position: relative;
+	width: 100%;
+	height: 4px;
+
+	&::before {
+		position: absolute;
+		right: 6px;
+		bottom: 0;
+		left: 6px;
+		border-bottom: 1px solid var(--mds-color-border-primary);
+		content: '';
+	}
+}
+
+.title {
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-semibold from global;
+	padding: 10px 16px 4px;
+	color: var(--mds-color-foreground-strong);
+}

package/dist/components/dropdown/list-item/title.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+interface ListItemTitleProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
+    text: string;
+}
+declare const ListItemTitle: {
+    ({ text, ...rest }: ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ListItemTitleProps };
+export { ListItemTitle };
+//# sourceMappingURL=title.d.ts.map

package/dist/components/dropdown/list-item/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,UAAU,kBAAmB,SAAQ,IAAI,CACxC,cAAc,CAAC,aAAa,CAAC,EAC7B,WAAW,CACX;IACA,IAAI,EAAE,MAAM,CAAA;CACZ;AAED,QAAA,MAAM,aAAa;wBAAuB,kBAAkB;;CAM3D,CAAA;AAID,YAAY,EAAE,kBAAkB,EAAE,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/dropdown/list-item/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../src/components/dropdown/list-item/title.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport s from './styles.module.css'\n\ninterface ListItemTitleProps extends Omit<\n\tHTMLAttributes<HTMLLIElement>,\n\t'className'\n> {\n\ttext: string\n}\n\nconst ListItemTitle = ({ text, ...rest }: ListItemTitleProps) => {\n\treturn (\n\t\t<li className={classNames(s['list-item'], s.title)} {...rest}>\n\t\t\t{text}\n\t\t</li>\n\t)\n}\n\nListItemTitle.displayName = 'Dropdown.ListItem.Title'\n\nexport type { ListItemTitleProps }\nexport { ListItemTitle }\n"],"names":["ListItemTitle","text","rest","jsx","classNames","s"],"mappings":";;;AAWA,MAAMA,IAAgB,CAAC,EAAE,MAAAC,GAAM,GAAGC,QAEhC,gBAAAC,EAAC,MAAA,EAAG,WAAWC,EAAWC,EAAE,WAAW,GAAGA,EAAE,KAAK,GAAI,GAAGH,GACtD,UAAAD,EAAA,CACF;AAIFD,EAAc,cAAc;"}

package/dist/components/dropdown/toggle-button/index.d.ts

@@ -0,0 +1,31 @@
+import type { FlightIconName } from '../../flight-icon';
+import type { ButtonHTMLAttributes } from 'react';
+interface DropdownToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text of the ToggleButton. If no text value is defined, an error will be thrown.
+     */
+    text: string;
+    color?: 'primary' | 'secondary';
+    size?: 'small' | 'medium';
+    icon?: string;
+    isFullWidth?: boolean;
+    /**
+     * Displays an optional count indicator using the Badge Count component.
+     */
+    count?: string;
+    /**
+     * Displays an optional badge indicator using the Badge component.
+     */
+    badge?: string;
+    /**
+     * Appends an icon to the optional badge indicator.
+     */
+    badgeIcon?: FlightIconName;
+}
+declare const ToggleButton: {
+    ({ text, color, size, icon, isFullWidth, count, badge, badgeIcon, disabled, ...rest }: DropdownToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { DropdownToggleButtonProps };
+export { ToggleButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown/toggle-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAGjD,UAAU,yBAA0B,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;CAC1B;AAED,QAAA,MAAM,YAAY;2FAWf,yBAAyB;;CAgC3B,CAAA;AAQD,YAAY,EAAE,yBAAyB,EAAE,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/dropdown/toggle-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/dropdown/toggle-button/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { Badge } from '../../badge'\nimport { BadgeCount } from '../../badge-count'\nimport { Toggle } from '../../menu-primitive'\nimport { useMenuPrimitive } from '../../menu-primitive/use-menu-primitive'\nimport type { FlightIconName } from '../../flight-icon'\nimport { FlightIcon } from '../../flight-icon'\nimport type { ButtonHTMLAttributes } from 'react'\nimport s from './styles.module.scss'\n\ninterface DropdownToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\t/**\n\t * Text of the ToggleButton. If no text value is defined, an error will be thrown.\n\t */\n\ttext: string\n\tcolor?: 'primary' | 'secondary'\n\tsize?: 'small' | 'medium'\n\ticon?: string\n\tisFullWidth?: boolean\n\t/**\n\t * Displays an optional count indicator using the Badge Count component.\n\t */\n\tcount?: string\n\t/**\n\t * Displays an optional badge indicator using the Badge component.\n\t */\n\tbadge?: string\n\t/**\n\t * Appends an icon to the optional badge indicator.\n\t */\n\tbadgeIcon?: FlightIconName\n}\n\nconst ToggleButton = ({\n\ttext,\n\tcolor = 'primary',\n\tsize = 'medium',\n\ticon,\n\tisFullWidth,\n\tcount,\n\tbadge,\n\tbadgeIcon,\n\tdisabled,\n\t...rest\n}: DropdownToggleButtonProps) => {\n\tconst { isOpen, onClickToggle } = useMenuPrimitive()\n\tconst badgeType = color === 'primary' || disabled ? 'filled' : 'inverted'\n\tconst iconSize = size === 'small' ? 12 : 16\n\n\treturn (\n\t\t<Toggle>\n\t\t\t<button\n\t\t\t\taria-expanded={isOpen}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['toggle-button'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\t{\n\t\t\t\t\t\t[s['width-full']]: isFullWidth,\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\tonClick={onClickToggle}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={iconSize} />}\n\t\t\t\t<div className={s.text}>{text}</div>\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" type={badgeType} />}\n\t\t\t\t{badge && (\n\t\t\t\t\t<Badge text={badge} icon={badgeIcon} size=\"small\" type={badgeType} />\n\t\t\t\t)}\n\t\t\t\t<Chevron />\n\t\t\t</button>\n\t\t</Toggle>\n\t)\n}\n\nToggleButton.displayName = 'Dropdown.ToggleButton'\n\nconst Chevron = () => {\n\treturn <FlightIcon name=\"chevron-down\" isInlineBlock={false} />\n}\n\nexport type { DropdownToggleButtonProps }\nexport { ToggleButton }\n"],"names":["ToggleButton","text","color","size","icon","isFullWidth","count","badge","badgeIcon","disabled","rest","isOpen","onClickToggle","useMenuPrimitive","badgeType","iconSize","jsx","Toggle","jsxs","classNames","s","BadgeCount","Badge","Chevron","FlightIcon"],"mappings":";;;;;;;;;AAmCsB,MACrBA,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAM,EAAA,QAAAC,GAAA,eAAAC,EAAsB,IAAAC,EAAa,GACnCC,IAAWZ,MAAS,aAAeO,IAAA,WAAA,YAEzCM,IAAAZ,gBACE,KACA;AAAA,SAAC,gBAAAa,EAAAC,GAAA,EAAA,UAAA,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEA,iBAAKP;AAAA,MACL,MAAA;AAAA,MAAW,WACRQ;AAAA,QACFC,EAAE,eAAc;AAAA,QAChBA,EAAE,SAAS,EAAK;AAAA,QAChBA,EAAA,SAAAlB,CAAA,EAAA;AAAA,QAAA;AAAA,UACoB,CAAAkB,EAAA,YAAA,CAAA,GAAAf;AAAA,QAErB;AAAA,MACA;AAAA,MACA,SAAAO;AAAA,MACC,UAAAH;AAAA,MAEA;MAAA,UAAA;AAAA,QAAgDL,KAChD,gBAAAY,KAAe,EAAE,MAAOZ,GAAA,MAAAW,EAAK,CAAA;AAAA,QAC7B,gBAAAC,EAAA,SAAU,WAAAI,QAAW,UAAanB,EAAK,CAAA;AAAA,QACvCK,KACA,gBAAAU,EAACK,GAAM,EAAA,MAAMf,SAAa,SAAW,MAAKQ,EAAQ,CAAA;AAAA,QAAiBP,KAEnE,gBAAAS,EAAAM,GAAQ,EAAA,MAAAf,GAAA,MAAAC,GAAA,MAAA,SAAA,MAAAM,EAAA,CAAA;AAAA,QAAA,gBAAAE,EAAAO,GAAA,CAAA,CAAA;AAAA,MAAA;AAAA;EAIb,EAAA,CAAA;AAEA;AAEAvB,gBAAsB;AACrB,MAAAuB,IAAA,MACD,gBAAAP,EAAAQ,GAAA,EAAA,MAAA,gBAAA,eAAA,GAAA,CAAA;"}

package/dist/components/dropdown/toggle-button/styles.module.scss

@@ -0,0 +1,54 @@
+@use 'styles/mixins/button' as *;
+
+.toggle-button {
+	@include hds-button;
+
+	&:focus {
+		@include hds-button-state-focus;
+	}
+
+	&:disabled,
+	&:disabled:focus,
+	&:disabled:hover {
+		@include hds-button-state-disabled;
+	}
+}
+
+.color-primary {
+	@include hds-button-color-primary;
+}
+
+.color-secondary {
+	@include hds-button-color-secondary;
+}
+
+.width-full {
+	justify-content: space-between;
+	width: 100%;
+	max-width: 100%;
+}
+
+.text {
+	text-align: left;
+	white-space: nowrap;
+}
+
+.size-small {
+	min-height: 1.75rem;
+	padding: 0.375rem 0.375rem 0.375rem 0.6875rem;
+
+	& .text {
+		font-size: 0.8125rem;
+		line-height: 0.875rem;
+	}
+}
+
+.size-medium {
+	min-height: 2.25rem;
+	padding: 0.5625rem 0.5625rem 0.5625rem 0.9375rem;
+
+	& .text {
+		font-size: 0.875rem;
+		line-height: 1rem;
+	}
+}

package/dist/components/flight-icon/index.d.ts

@@ -0,0 +1,45 @@
+import { type SVGProps } from 'react';
+import type { IconName } from '@hashicorp/flight-icons/svg';
+declare const FLIGHT_ICON_SIZES: readonly [12, 16, 24, 32];
+type FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number];
+type FlightIconName = IconName | (string & Record<never, never>);
+interface FlightIconProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The name of the icon you wish to use. Search for existing icon
+     * names in the Icon library.
+     */
+    name: FlightIconName;
+    /**
+     * The `color` prop can be used to change the color. It works by setting
+     * the value of the icon SVG’s fill property.
+     */
+    color?: string;
+    /**
+     * The `size` prop can be used to change the size.
+     */
+    size?: FlightIconSize;
+    /**
+     * Determines whether the icon will stretch to fill the parent container.
+     * Setting it to `true` will make the icon have a height and width of 100%
+     * and a display of `block`.
+     */
+    stretched?: boolean;
+    /**
+     * Sets the `display` style for the icon. Setting it to `false` will make
+     * the icon have a display of `block`.
+     */
+    isInlineBlock?: boolean;
+    /**
+     * Use to add accessible text to standalone icons. This will also change
+     * the `aria-hidden` value to `false` instead of the default value of `true`.
+     */
+    title?: string;
+    className?: string;
+}
+declare const FlightIcon: {
+    ({ name, color, size, stretched, isInlineBlock, title, className, ...rest }: FlightIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { FlightIconProps, FlightIconSize, FlightIconName };
+export { FlightIcon, FLIGHT_ICON_SIZES };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/flight-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/flight-icon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAG3D,QAAA,MAAM,iBAAiB,2BAA4B,CAAA;AACnD,KAAK,cAAc,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AASxD,KAAK,cAAc,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;AAEhE,UAAU,eAAgB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IACxD;;;OAGG;IACH,IAAI,EAAE,cAAc,CAAA;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAQD,QAAA,MAAM,UAAU;iFASb,eAAe;;CAyCjB,CAAA;AAID,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/flight-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/flight-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport svgSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite.svg'\nimport classNames from 'classnames'\nimport { useId, type SVGProps } from 'react'\nimport type { IconName } from '@hashicorp/flight-icons/svg'\nimport s from './flight-icon.module.css'\n\nconst FLIGHT_ICON_SIZES = [12, 16, 24, 32] as const\ntype FlightIconSize = (typeof FLIGHT_ICON_SIZES)[number]\n\nconst SPRITE_SIZE_MAP = {\n\t12: 16,\n\t16: 16,\n\t24: 24,\n\t32: 24,\n} as const\n\ntype FlightIconName = IconName | (string & Record<never, never>)\n\ninterface FlightIconProps extends SVGProps<SVGSVGElement> {\n\t/**\n\t * The name of the icon you wish to use. Search for existing icon\n\t * names in the Icon library.\n\t */\n\tname: FlightIconName\n\n\t/**\n\t * The `color` prop can be used to change the color. It works by setting\n\t * the value of the icon SVG’s fill property.\n\t */\n\tcolor?: string\n\n\t/**\n\t * The `size` prop can be used to change the size.\n\t */\n\tsize?: FlightIconSize\n\n\t/**\n\t * Determines whether the icon will stretch to fill the parent container.\n\t * Setting it to `true` will make the icon have a height and width of 100%\n\t * and a display of `block`.\n\t */\n\tstretched?: boolean\n\n\t/**\n\t * Sets the `display` style for the icon. Setting it to `false` will make\n\t * the icon have a display of `block`.\n\t */\n\tisInlineBlock?: boolean\n\n\t/**\n\t * Use to add accessible text to standalone icons. This will also change\n\t * the `aria-hidden` value to `false` instead of the default value of `true`.\n\t */\n\ttitle?: string\n\tclassName?: string\n}\n\n// When an SVG file is imported in Next.js, it is an object with a `src`\n// property. However, tools like Webpack and Vite default to returning a URL.\n// This runtime check allows the component to work in all of these cases.\nconst svgSpriteSrc =\n\ttypeof svgSprite === 'string' ? svgSprite : (svgSprite as { src: string }).src\n\nconst FlightIcon = ({\n\tname,\n\tcolor = 'currentColor',\n\tsize = 16,\n\tstretched = false,\n\tisInlineBlock = true,\n\ttitle,\n\tclassName,\n\t...rest\n}: FlightIconProps) => {\n\tconst iconId = useId()\n\tconst titleId = useId()\n\n\tconst spriteSize = SPRITE_SIZE_MAP[size]\n\n\treturn (\n\t\t<svg\n\t\t\tclassName={classNames(\n\t\t\t\ts['flight-icon'],\n\t\t\t\t`flight-icon-${name}`,\n\t\t\t\t{\n\t\t\t\t\t[s['display-inline']]: isInlineBlock && !stretched,\n\t\t\t\t\t[s['loading']]: name === 'loading',\n\t\t\t\t\t[s['running']]: name === 'running',\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\taria-hidden={title ? 'false' : 'true'}\n\t\t\taria-labelledby={title ? titleId : undefined}\n\t\t\tfill={color}\n\t\t\tid={iconId}\n\t\t\trole={title ? 'img' : undefined}\n\t\t\twidth={stretched ? '100%' : size}\n\t\t\theight={stretched ? '100%' : size}\n\t\t\tviewBox={`0 0 ${spriteSize} ${spriteSize}`}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<>\n\t\t\t\t\t<title id={titleId}>{title}</title>\n\t\t\t\t\t<g role=\"presentation\">\n\t\t\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t\t\t</g>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<use href={`${svgSpriteSrc}#flight-${name}-${spriteSize}`}></use>\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n\nFlightIcon.displayName = 'FlightIcon'\n\nexport type { FlightIconProps, FlightIconSize, FlightIconName }\nexport { FlightIcon, FLIGHT_ICON_SIZES }\n"],"names":["FLIGHT_ICON_SIZES","SPRITE_SIZE_MAP","svgSpriteSrc","svgSprite","FlightIcon","name","color","size","stretched","isInlineBlock","title","className","rest","iconId","titleId","useId","jsx","classNames","spriteSize","jsxs","Fragment"],"mappings":";;;;;;AAWA,MAAMA,IAAkB,CAAA,IAAA,IAAA,IAAA,EAAA,GACnBC,IAAA;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACL,IAAA;AA8CA,GAGMC,IAAc,OAAAC,KAAA,WAAAA,IAAAA,EAAA,KACnBC,IAAA,CAAA;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAO;AAAA,EACP,MAAAC,IAAA;AAAA,EACA,WAAAC,IAAA;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACD,GAAAC;AACC,MAAA;AACA,QAAMC,MAAU,GAEVC,IAAAC,EAAa,SAGlBR,CAAA;AAAA,SAAC,gBAAAS;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACF,eAAe;AAAA,QACf,eAAAZ,CAAA;AAAA,QAAA;AAAA,UAEC,CAAC,EAAE,gBAAa,CAAA,QAAS,CAAAG;AAAA,UACzB,CAAC,EAAE,OAAU,GAAGH,MAAS;AAAA,UAC1B,CAAA,EAAA,OAAA,GAAAA,MAAA;AAAA,QACA;AAAA,QACDM;AAAA,MACC;AAAA,MACD;MACA,mBAAiB,UAAQ;AAAA,MACzB,mBAAMD,IAAAI,IAAA;AAAA,MACN,MAAIR;AAAA,MACJ,IAAAO;AAAA,MACA,MAAAH,IAAO,QAAY;AAAA,MACnB,OAAAF;MACA,QAAAA,IAAgB,SAAUD;AAAA,MAC1B,SAAM,OAAAW,CAAA,IAAAA,CAAA;AAAA,MAEL,OAAA;AAAA,MAEC,UAAAR,IAAO,gBAAAS,EAAIC,GAAU,EAAA,UAAA;AAAA,QACrB,gBAAAJ,EAAC,SAAE,EAAA,IAAKF,GAAA,UACPJ;QAEF,gBAAAM,EAAA,KAEC,EAAA,MAAA,gBAAa,UAA+B,gBAAAA,EAAA,OAAU,EAAI,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,MAAA,EAAA,CAAA,IAAA,gBAAAF,EAAA,OAAA,EAAA,MAAA,GAAAd,CAAA,WAAAG,CAAA,IAAAa,CAAA,GAAA,CAAA;AAAA,IAE7D;AAAA,EAEF;AAEA;;"}

package/dist/components/form/checkbox/form-checkbox.module.css

@@ -0,0 +1,81 @@
+.checkbox {
+	width: var(--mds-form-checkbox-size);
+	height: var(--mds-form-checkbox-size);
+	margin: 0;
+	padding: 0;
+	background-position: center center;
+	background-size: var(--mds-form-checkbox-background-image-size) var(--mds-form-checkbox-background-image-size);
+	border-style: solid;
+	border-width: var(--mds-form-checkbox-border-width);
+	border-radius: var(--mds-form-checkbox-border-radius);
+	cursor: pointer;
+	appearance: none;
+
+	/* STATUS */
+
+	/* base (default) */
+
+	&:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-base-surface-color-default);
+		border-color: var(--mds-form-control-base-border-color-default);
+		box-shadow: var(--mds-elevation-inset-box-shadow);
+	}
+
+	&:checked {
+		background-color: var(--mds-form-control-checked-surface-color-default);
+		background-image: var(--mds-form-checkbox-background-image-data-url);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	&:indeterminate {
+		background-color: var(--mds-form-control-checked-surface-color-default);
+		background-image: var(--mds-form-checkbox-background-image-data-url-indeterminate);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	/* hover */
+
+	&:hover:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-base-surface-color-hover);
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	&:hover:checked,
+	&:hover:indeterminate {
+		background-color: var(--mds-form-control-checked-border-color-default);
+		border-color: var(--mds-form-control-checked-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 1px;
+	}
+
+	/* DISABLED */
+
+	&:disabled:not(:checked, :indeterminate) {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	&:disabled:checked {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(--mds-form-checkbox-background-image-data-url-disabled);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	&:disabled:indeterminate {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(--mds-form-checkbox-background-image-data-url-indeterminate-disabled);
+		background-repeat: no-repeat;
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+}

package/dist/components/form/checkbox/index.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps, type HTMLProps, type ReactNode } from 'react';
+import { Fieldset } from '../fieldset';
+interface CheckboxBaseProps {
+    id?: string;
+    required?: boolean;
+    field: HTMLProps<HTMLInputElement>;
+    testingKey?: string;
+    error?: ReactNode;
+}
+declare const CheckboxBase: {
+    ({ id, required, field, testingKey, error, }: CheckboxBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface CheckboxFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+    disabled?: boolean;
+}
+declare const CheckboxField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface CheckboxGroupRootProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+}
+declare const CheckboxGroup: {
+    Root: {
+        ({ layout, legend, helperText, error, isOptional, isRequired, children, }: CheckboxGroupRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Inner: {
+        (props: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { CheckboxGroup, CheckboxBase, CheckboxField };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGtC,UAAU,iBAAiB;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,QAAA,MAAM,YAAY;kDAMf,iBAAiB;;CAenB,CAAA;AAID,UAAU,kBAAkB;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,aAAa;4HAahB,kBAAkB;;CAyBpB,CAAA;AAID,UAAU,sBAAuB,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC;IACvE,QAAQ,EAAE,SAAS,CAAA;CACnB;AAuCD,QAAA,MAAM,aAAa;;mFA7BhB,sBAAsB;;;;gBAiBU,kBAAkB;;;CAepD,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/form/error/index.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+interface ErrorMessageProps {
+    children: ReactNode;
+}
+declare const ErrorMessage: ({ children, ...rest }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
+interface ErrorProps {
+    children: ReactNode;
+    className?: string;
+    controlId?: string;
+}
+declare const Error: {
+    ({ children, className, controlId, ...rest }: ErrorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { ErrorProps, ErrorMessageProps };
+export { Error, ErrorMessage };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/error/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/error/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,UAAU,iBAAiB;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,YAAY,GAAI,uBAAuB,iBAAiB,4CAM7D,CAAA;AAED,UAAU,UAAU;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,QAAA,MAAM,KAAK;kDAAiD,UAAU;;CAarE,CAAA;AAID,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/form/field/index.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+interface FieldProps {
+    badgeText?: string;
+    id: string;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    className?: string;
+    layout?: 'vertical' | 'flag';
+    children: ReactNode;
+}
+declare const Field: {
+    ({ badgeText, id, isRequired, isOptional, label, helperText, error, className, layout, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { FieldProps };
+export { Field };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/field/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,UAAU,UAAU;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACnB;AAED,QAAA,MAAM,KAAK;gHAYR,UAAU;;CA8BZ,CAAA;AAID,YAAY,EAAE,UAAU,EAAE,CAAA;AAC1B,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/form/fieldset/index.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+interface FieldsetProps extends React.PropsWithChildren {
+    isRequired?: boolean;
+    isOptional?: boolean;
+    legend?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    className?: string;
+    layout?: 'vertical' | 'horizontal';
+    id?: string;
+    testingKey?: string;
+}
+declare const Fieldset: {
+    ({ isRequired, isOptional, legend, helperText, error, className, layout, children, id, testingKey, ...rest }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { FieldsetProps };
+export { Fieldset };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fieldset/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,UAAU,aAAc,SAAQ,KAAK,CAAC,iBAAiB;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,QAAQ;kHAYX,aAAa;;CA0Cf,CAAA;AAID,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,CAAA"}