@hashicorp/mds-react 0.9.1 → 0.9.2

package/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * optional class name to add to the accordion

package/components/accordion/item/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
     ariaLabel?: string;
     isOpen?: boolean;

package/components/alert/icon.d.ts

@@ -1,5 +1,5 @@
-import { AlertColor, AlertProps } from '.';
-import { FlightIconName } from '../flight-icon';
+import type { AlertColor, AlertProps } from '.';
+import type { FlightIconName } from '../flight-icon';
 interface IconProps {
     icon?: FlightIconName | false;
     color: AlertColor;

package/components/alert/index.d.ts

@@ -1,7 +1,7 @@
-import { StandaloneLinkProps } from '../standalone-link';
-import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-import { ButtonProps } from '../button';
-import { FlightIconName } from '../flight-icon';
+import { type StandaloneLinkProps } from '../standalone-link';
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import type { ButtonProps } from '../button';
+import type { FlightIconName } from '../flight-icon';
 type AlertColor = 'neutral' | 'highlight' | 'success' | 'warning' | 'critical';
 interface CommonAlertProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -51,11 +51,11 @@ declare const AlertActions: {
     displayName: string;
 };
 declare const AlertButton: {
-    ({ ...props }: Exclude<ButtonProps, 'size'>): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: Exclude<ButtonProps, "size">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const AlertStandaloneLink: {
-    ({ ...props }: Exclude<StandaloneLinkProps, 'size'>): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: Exclude<StandaloneLinkProps, "size">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Alert, AlertActions, AlertButton, AlertStandaloneLink };

package/components/badge/index.d.ts

@@ -1,4 +1,4 @@
-import { FlightIconName } from '../flight-icon';
+import type { FlightIconName } from '../flight-icon';
 declare const BADGE_SIZES: readonly ["small", "medium", "large"];
 type BadgeSize = (typeof BADGE_SIZES)[number];
 declare const BADGE_TYPES: readonly ["filled", "inverted", "outlined"];

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 interface BadgeCountProps extends HTMLAttributes<HTMLDivElement> {
     size?: 'small' | 'medium' | 'large';
     type?: 'filled' | 'inverted' | 'outlined';

package/components/breadcrumbs/index.d.ts

@@ -1,7 +1,7 @@
-import { BreadcrumbProps, BreadcrumbTruncationProps } from './types';
+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;
+    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/components/breadcrumbs/item/index.d.ts

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

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

@@ -1,3 +1,3 @@
 export declare const TruncationButton: ({ ariaLabel, }: {
-    ariaLabel?: string | undefined;
+    ariaLabel?: string;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+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.

package/components/button/index.d.ts

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent } from 'react';
+import type { ForwardRefExoticComponent } from 'react';
 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"];
@@ -27,5 +27,5 @@ interface ButtonPrimitiveProps {
 export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'color'> {
     color?: ButtonColor;
 }
-export declare const Button: ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export {};

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

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

package/components/card/index.d.ts

@@ -1,3 +1,3 @@
-import { CardProps } from './types';
-declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+import type { CardProps } from './types';
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Card };

package/components/card/types.d.ts

@@ -1,6 +1,6 @@
-import { BadgeProps } from '../badge';
-import { ReactNode } from 'react';
-import { StandaloneLinkProps } from '../standalone-link';
+import type { BadgeProps } from '../badge';
+import type { ReactNode } from 'react';
+import type { StandaloneLinkProps } from '../standalone-link';
 interface CardPropsBase {
     className?: string;
     ctaLabel?: string;

package/components/code-block/code-lines/index.d.ts

@@ -1,4 +1,11 @@
-import { ReactNode } from 'react';
+/**
+ * Note: lines of code are expected to be stable. If we need to work with
+ * dynamic code blocks in the future, we could assign random unique IDs
+ * to each line during the `linesOfCode` `useMemo` function.
+ *
+ * For now, we disable react/no-array-index key for the entire file.
+ */
+import { type ReactNode } from 'react';
 interface CodeLinesProps {
     value: ReactNode;
     hasLineNumbers?: boolean;

package/components/code-block/code-lines/utils/split-html-into-lines.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 /**
  * Given a string of HTML, split it on newlines,
  * and return an array of React <span> elements,

package/components/code-block/code-lines/utils/split-jsx-into-lines.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /**
  * Given an array of React children,
  * split the array on newlines, grouping consecutive

package/components/code-block/hidden-copy-content/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-declare const HiddenCopyContent: import('react').ForwardRefExoticComponent<{
+import { type ReactNode } from 'react';
+declare const HiddenCopyContent: import("react").ForwardRefExoticComponent<{
     code: ReactNode;
-} & import('react').RefAttributes<HTMLPreElement>>;
+} & import("react").RefAttributes<HTMLPreElement>>;
 export { HiddenCopyContent };

package/components/code-block/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /**
  * ALERT: This component is a combination of logic from the official HashiCorp
  * Design System CodeBlock component and the CodeBlock component written by the

package/components/combo-box-primitive/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type TComboBoxItem = {
     id: string;
     value: string;

package/components/dialog-primitive/index.d.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, DialogHTMLAttributes } from 'react';
+import type { DetailedHTMLProps, DialogHTMLAttributes } from 'react';
 interface OverlayProps {
     className?: string;
 }

package/components/disclosure-primitive/index.d.ts

@@ -1,4 +1,5 @@
-import { PropsWithChildren, HTMLAttributes } from 'react';
+import type { PropsWithChildren } from 'react';
+import { type HTMLAttributes } from 'react';
 interface DisclosurePrimitiveProviderProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Callback fired when the disclosure is closed (optional)

package/components/disclosure-primitive/use-disclosure-primitive.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import { type MouseEventHandler } from 'react';
 export interface DisclosurePrimitiveContextState {
     isOpen: boolean;
     onClickToggle: MouseEventHandler<HTMLButtonElement>;
@@ -7,5 +7,5 @@ export interface DisclosurePrimitiveContextState {
     containsInteractive: boolean;
     ariaLabel: string;
 }
-export declare const DisclosurePrimitiveContext: import('react').Context<DisclosurePrimitiveContextState | undefined>;
+export declare const DisclosurePrimitiveContext: import("react").Context<DisclosurePrimitiveContextState | undefined>;
 export declare function useDisclosurePrimitive(): DisclosurePrimitiveContextState;

package/components/dismiss-button/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DismissButtonProps {
     ariaLabel?: string;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

package/components/dropdown/index.d.ts

@@ -1,5 +1,5 @@
-import { DropdownToggleButtonProps } from './toggle-button';
-import { HTMLAttributes, ReactNode } from 'react';
+import type { DropdownToggleButtonProps } from './toggle-button';
+import type { HTMLAttributes, ReactNode } from 'react';
 interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * If true, container is given full width styles. (Added by web presence team)
@@ -51,19 +51,19 @@ declare const Dropdown: {
     };
     ListItem: {
         Interactive: {
-            ({ text, color, icon, isLoading, trailingIcon, ...rest }: import('./list-item/interactive').ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+            ({ text, color, icon, isLoading, trailingIcon, ...rest }: import("./list-item/interactive").ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
         Title: {
-            ({ text, ...rest }: import('./list-item/title').ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+            ({ text, ...rest }: import("./list-item/title").ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
         Separator: {
-            (props: import('./list-item/separator').ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+            (props: import("./list-item/separator").ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
         Custom: {
-            ({ children }: import('./list-item/custom').ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+            ({ children }: import("./list-item/custom").ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
     };

package/components/dropdown/list-item/custom.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface ListItemCustomProps {
     children: ReactNode;
 }

package/components/dropdown/list-item/index.d.ts

@@ -1,18 +1,18 @@
 declare const ListItem: {
     Interactive: {
-        ({ text, color, icon, isLoading, trailingIcon, ...rest }: import('./interactive').ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
+        ({ text, color, icon, isLoading, trailingIcon, ...rest }: import("./interactive").ListItemInteractiveProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Title: {
-        ({ text, ...rest }: import('./title').ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
+        ({ text, ...rest }: import("./title").ListItemTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Separator: {
-        (props: import('./separator').ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        (props: import("./separator").ListItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Custom: {
-        ({ children }: import('./custom').ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
+        ({ children }: import("./custom").ListItemCustomProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,4 +1,4 @@
-import { InteractiveProps } from '../../interactive';
+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.

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+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;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 interface ListItemTitleProps extends Omit<HTMLAttributes<HTMLLIElement>, 'className'> {
     text: string;
 }

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

@@ -1,5 +1,5 @@
-import { FlightIconName } from '../../flight-icon';
-import { ButtonHTMLAttributes } from 'react';
+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.

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

@@ -1,5 +1,5 @@
-import { SVGProps } from 'react';
-import { IconName } from '@hashicorp/flight-icons/svg';
+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>);

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

@@ -1,4 +1,4 @@
-import { ComponentProps, HTMLProps, ReactNode } from 'react';
+import { type ComponentProps, type HTMLProps, type ReactNode } from 'react';
 import { Fieldset } from '../fieldset';
 interface CheckboxBaseProps {
     id?: string;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface ErrorMessageProps {
     children: ReactNode;
 }

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface FieldProps {
     badgeText?: string;
     id: string;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface FieldsetProps {
     isRequired?: boolean;
     isOptional?: boolean;

package/components/form/file-input/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
 interface FileInputBaseProps {
     isRequired?: boolean;
     className?: string;

package/components/form/helper-text/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface HelperTextProps {
     children: ReactNode;
     className?: string;

package/components/form/label/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface LabelProps {
     badgeText?: string;
     className?: string;

package/components/form/legend/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 interface LegendProps {
     className?: string;
     isRequired?: boolean;

package/components/form/radio/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, HTMLProps, ReactNode } from 'react';
+import { type ComponentProps, type HTMLProps, type ReactNode } from 'react';
 import { Fieldset } from '../fieldset';
 interface RadioBaseProps {
     id: string;

package/components/form/radio-card/group.d.ts

@@ -1,5 +1,5 @@
 import { Fieldset } from '../fieldset';
-import { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 export interface RadioCardGroupProps extends ComponentProps<typeof Fieldset> {
     children: ReactNode;
     legend: ReactNode;

package/components/form/radio-card/index.d.ts

@@ -1,6 +1,6 @@
 import { RadioCardGroup } from './group';
-import { HTMLProps, ReactNode } from 'react';
-import { BadgeProps } from '../../badge';
+import type { HTMLProps, ReactNode } from 'react';
+import type { BadgeProps } from '../../badge';
 export declare const DEFAULT_CONTROL_POSITION = "bottom";
 export declare const DEFAULT_ALIGNMENT = "left";
 export declare const CONTROL_POSITIONS: readonly ["bottom", "left"];

package/components/form/select/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
 interface SelectFieldProps {
     isInvalid?: boolean;
     isLoading?: boolean;

package/components/form/super-select/index.d.ts

@@ -1,5 +1,5 @@
-import { TComboBoxItem, ComboBoxSearchInputProps } from '../../combo-box-primitive';
-import { FieldProps } from '../field';
+import type { TComboBoxItem, ComboBoxSearchInputProps } from '../../combo-box-primitive';
+import type { FieldProps } from '../field';
 type SuperSelectSearchInputProps = ComboBoxSearchInputProps;
 interface SuperSelectOptionProps extends TComboBoxItem {
     isLoading?: boolean;

package/components/form/text-input/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLInputTypeAttribute, HTMLProps, ReactNode } from 'react';
+import type { HTMLInputTypeAttribute, HTMLProps, ReactNode } from 'react';
 interface TextInputBaseProps {
     /**
      * Sets the native HTML `type` of the `<input>`.

package/components/form/textarea/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
 interface TextAreaFieldProps {
     isInvalid?: boolean;
     isLoading?: boolean;

package/components/form/toggle/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLProps, ComponentProps } from 'react';
+import type { ReactNode, HTMLProps, ComponentProps } from 'react';
 import { Fieldset } from '../fieldset';
 interface ToggleBaseProps {
     id?: string;

package/components/hds/wrappers/tooltip.d.ts

@@ -1,6 +1,7 @@
-import { TippyProps } from '@tippyjs/react';
-import { Plugin } from 'tippy.js';
-import { ReactElement } from 'react';
+import { type TippyProps } from '@tippyjs/react';
+import { type Plugin } from 'tippy.js';
+import type { ReactElement } from 'react';
+import 'tippy.js/dist/svg-arrow.css';
 export interface TooltipProps {
     options?: TippyProps;
     children: TippyProps['children'];

package/components/icon-tile/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 type BaseProps = {
     size: 'small' | 'medium' | 'large';
     iconSecondary?: string;