@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.30

package/components/InputStepper/InputStepper.d.ts

@@ -1,47 +1,83 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
-
 export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
-    /** Unique id for the input */
+    /** Unique id for the input. */
     id: string;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** Text used for assistive technologies when the value changes */
+    /** Text used for assistive technologies when the value changes.
+     * @default 'Value changed to'
+     */
     announcementText?: string;
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Accessibility label for the decrease button */
-    decreaseAmountButtonLabel?: string;
-    /** Hides the input label, can be responsive
+    /** Decrease amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the decrease button.
+     * (default) 'Decrease'
+     */
+    decreaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Accessibility label for the increase button */
-    increaseAmountButtonLabel?: string;
-    /** Marks the input as invalid, typically used for form validation */
+    /** Increase amount button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the increase button.
+     * (default) 'Increase'
+     */
+    increaseAmountButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** The maximum value for the input */
-    max?: number;
-    /** The minimum value for the input */
-    min?: number;
-    /** Text displayed as a prefix inside the input, maximum 8 characters */
+    /** The maximum value for the input.
+     * @default 100
+     */
+    max?: number | string;
+    /** The minimum value for the input.
+     * @default 0
+     */
+    min?: number | string;
+    /** Text displayed as a prefix inside the input, maximum 8 characters. */
     prefix?: string;
-    /** Enables the readonly state of the input */
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** The interval between legal numbers of the input */
-    step?: number;
-    /** Text displayed as a suffix inside the input, maximum 5 characters */
+    /** The interval between legal numbers of the input.
+     * @default 1
+     */
+    step?: number | string;
+    /** Text displayed as a suffix inside the input, maximum 5 characters. */
     suffix?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** Value of the input */
+    /** Value of the input. */
     value?: string;
 }
 /**
@@ -49,5 +85,7 @@ export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputEle
  * It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.
  *
  * Next to the input field, there are two buttons to increase or decrease the input value.
+ *
+ * Design in Figma: [Input Stepper](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6769&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputStepper: ({ id, label, announcementText, className, disabled, decreaseAmountButtonLabel, hint, hideLabel, invalid, increaseAmountButtonLabel, prefix, max, min, readonly, required, size, step, suffix, systemFeedback, value, onChange, ...rest }: InputStepperProps) => JSX.Element;
+export declare const DSInputStepper: import('react').ForwardRefExoticComponent<InputStepperProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/InputStepper/InputStepper.utils.d.ts

@@ -1,5 +1,4 @@
 import { InputStepperProps } from './InputStepper';
-
 type ValidationProps = Pick<InputStepperProps, 'id' | 'label' | 'prefix' | 'suffix'>;
 /**
  * Validates the given properties of the DSInputStepper component for common configuration errors.

package/components/Link/Link.d.ts

@@ -1,50 +1,18 @@
-import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
-import { IconProps } from '../Icon/Icon';
-import { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
-
-export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** ARIA attributes to enhance accessibility
-     *  `{'aria-label'? string;`
-     *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
-     *  `'aria-labelledby'?: string;}`
-     */
-    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Specifies that the target will be downloaded and opens native browser download dialog */
-    download?: string;
-    /** Defines the URL to link to */
-    href?: string;
-    /** Name of the icon to display */
-    iconName?: IconName;
-    /** The position of the icon */
-    iconPosition?: LinkIconPosition;
-    /** URL or path for a custom icon */
-    iconSource?: IconProps['source'];
-    /** Defines the referrer information send with the link */
-    referrerPolicy?: LinkReferrerPolicy;
-    /** Defines the rel attribute */
-    rel?: LinkRel;
-    /** The target of the link */
-    target?: LinkTarget;
-    /** Defines the theme */
-    theme?: Theme;
-}
+import { CommonLinkProps } from '../LinkButton/LinkButton';
+import { LinkVariant } from './Link.utils';
 export interface LinkProps extends CommonLinkProps {
-    /** Content within the link */
+    /** Content within the link. */
     children: React.ReactNode;
-    /** Hides the link label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+    /** Sets an underline. */
+    active?: boolean;
+    /** Visual style variant of the Link.
+     * @default 'neutral'
      */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /** Aligns `variant='ghost'` with text */
-    isFlush?: boolean;
-    /** Size of the link */
-    size?: LinkSize;
-    /** Visual style variant of the link */
     variant?: LinkVariant;
 }
 /**
- * Use the Link component when you want the users to navigate to another internal or external page.
+ * Use Link when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-7210&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSLink: ({ children, aria, className, dataTrackingid, download, hideLabel, href, iconName, iconPosition, iconSource, isFlush, referrerPolicy, rel, size, target, theme, variant, ...rest }: LinkProps) => JSX.Element;
+export declare const DSLink: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/Link/Link.utils.d.ts

@@ -1,8 +1,2 @@
-export declare const LINK_SIZE: readonly ["medium", "small"];
-export type LinkSize = typeof LINK_SIZE[number];
-export declare const LINK_VARIANT: readonly ["filled", "highlight", "outline", "ghost"];
-export type LinkVariant = typeof LINK_VARIANT[number];
-export type LinkIconPosition = 'left' | 'right';
-export type LinkRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
-export type LinkReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
-export type LinkAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';
+export declare const LINK_VARIANT: readonly ["neutral", "highlight"];
+export type LinkVariant = (typeof LINK_VARIANT)[number];

package/components/LinkButton/LinkButton.d.ts

@@ -0,0 +1,64 @@
+import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { LinkButtonAriaAttribute, LinkButtonIconPosition, LinkButtonReferrerPolicy, LinkButtonRel, LinkButtonSize, LinkButtonVariant } from './LinkButton.utils';
+export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** ARIA attributes to enhance accessibility.
+     *  `{'aria-label'? string;`
+     *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
+     *  `'aria-labelledby'?: string;}`
+     */
+    aria?: SelectedAriaAttributes<LinkButtonAriaAttribute>;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Specifies that the target will be downloaded and opens native browser download dialog. */
+    download?: string;
+    /** Defines the URL to link to. */
+    href?: string;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** The position of the icon.
+     * @default 'left'
+     */
+    iconPosition?: LinkButtonIconPosition;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+    /** Defines the referrer information send with the link. */
+    referrerPolicy?: LinkButtonReferrerPolicy;
+    /** Defines the rel attribute. */
+    rel?: LinkButtonRel;
+    /** The target of the link.
+     * @default '_self'
+     */
+    target?: LinkTarget;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
+export interface LinkButtonProps extends CommonLinkProps {
+    /** Content within the link. */
+    children: React.ReactNode;
+    /** Hides the link label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Aligns `variant='ghost'` with text.
+     * @default false
+     */
+    isFlush?: boolean;
+    /** Size of the link.
+     * @default 'medium'
+     */
+    size?: LinkButtonSize;
+    /** Visual style variant of the link.
+     * @default 'filled'
+     */
+    variant?: LinkButtonVariant;
+}
+/**
+ * Use the Link component when you want the users to navigate to another internal or external page.
+ *
+ * Design in Figma: [Link Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=162-126)
+ * */
+export declare const DSLinkButton: import('react').ForwardRefExoticComponent<LinkButtonProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/LinkButton/LinkButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/LinkButton/LinkButton.utils.d.ts

@@ -0,0 +1,25 @@
+import { LinkButtonProps } from './LinkButton';
+export declare const LINK_BUTTON_SIZE: readonly ["medium", "small"];
+export type LinkButtonSize = (typeof LINK_BUTTON_SIZE)[number];
+export declare const LINK_BUTTON_VARIANT: readonly ["filled", "highlight", "outline", "ghost", "navigation"];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANT)[number];
+export type LinkButtonIconPosition = 'left' | 'right';
+export type LinkButtonRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+export type LinkButtonReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+export type LinkButtonAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';
+type ValidationProps = Pick<LinkButtonProps, 'variant' | 'size' | 'theme'>;
+/**
+ * Performs runtime validation on a subset of `DSLinkButton` props to detect
+ * misconfigurations during development.
+ *
+ * This function provides warnings or throws errors when invalid combinations
+ * of `variant`, `size`, or `theme` are detected—particularly for the `navigation` variant.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ * @param validationProps - An object containing the `variant`, `size`, and `theme` props
+ *                          from the `DSLinkButton` component. These are validated to ensure
+ *                          they are used in supported combinations.
+ */
+export declare const validateLinkButtonProps: ({ variant, size, theme, }: ValidationProps) => void;
+export {};

package/components/LinkButton/LinkButton.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Logo/Logo.d.ts

@@ -1,24 +1,32 @@
 import { HTMLAttributes } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
-import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
-
-export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | HTMLAnchorElement> {
-    /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for
+import { Logo, LogoAriaAttribute, LogoTarget } from './Logo.utils';
+export interface LogoProps extends HTMLAttributes<SVGElement | HTMLAnchorElement> {
+    /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for.
      *  `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<LogoAriaAttribute>;
-    /** Defines the URL to link to. When providing an url then the component will be rendered as a link */
+    /**
+     * Controls main and sub-brand logo display.
+     * @default 'main'
+     */
+    logo?: Logo;
+    /** Defines the URL to link to. If you provide a URL, the component will be rendered as a link. */
     href?: string;
-    /** The target of the link */
+    /** The target of the link.
+     * @default '_self'
+     */
     target?: LogoTarget;
-    /** Defines the theme */
+    /** Defines the theme. Relevant for the focus border on dark backgrounds.
+     * @default 'light'
+     */
     theme?: Theme;
-    /** Defines the variant, **standard** is only available with **light** theme */
-    variant?: LogoVariant;
 }
 /**
  * This component is used to display the logo.
  *
  * It can be also used as a link by providing a `href` and an `aria-label`.
+ *
+ * Design in Figma: [Logo](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=9050-2)
  */
-export declare const DSLogo: ({ aria, className, href, target, theme, variant, ...rest }: LogoProps) => JSX.Element;
+export declare const DSLogo: import('react').ForwardRefExoticComponent<LogoProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/Logo/Logo.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Logo/Logo.utils.d.ts

@@ -1,5 +1,5 @@
 import { LinkTarget } from '../../types';
-
+export declare const LOGO: readonly ["main", "reduced-main", "reduced-connected", "reduced-mystihl", "reduced-imow"];
+export type Logo = (typeof LOGO)[number];
 export type LogoTarget = LinkTarget;
-export type LogoVariant = 'standard' | 'background';
 export type LogoAriaAttribute = 'aria-label';

package/components/MegaMenu/MegaMenu.d.ts

@@ -0,0 +1,32 @@
+import { HTMLProps, JSX } from 'react';
+import { OpenChangeReason } from '@floating-ui/react';
+export interface MegaMenuProps {
+    /** Content within the MegaMenu. */
+    children?: React.ReactNode;
+    /** Opens the MegaMenu on initial render.
+     * @default false
+     */
+    initialOpen?: boolean;
+    /** Controls the open state of the MegaMenu. If provided, it will be a controlled component.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** A function that is called when the open state should change. */
+    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+}
+/**
+ * The MegaMenu component is used to display additional information or actions related to an anchor element. It can be positioned relative to the anchor and supports various placements and offsets.
+ *
+ * Design in Figma: [MegaMenu](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/branch/dDZiDou9UpPtHIF2bXkLKL/Web-Pattern-Library?node-id=6869-65546&t=PkzLITphHlu1XJKT-11)
+ * */
+export declare const DSMegaMenu: {
+    ({ children, ...rest }: MegaMenuProps): JSX.Element;
+    /** attach static members */
+    Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & MegaMenuAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+interface MegaMenuAnchorProps {
+    children: React.ReactNode;
+}
+export {};

package/components/MegaMenu/MegaMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/MegaMenu/MegaMenu.utils.d.ts

@@ -0,0 +1,52 @@
+import { MegaMenuProps } from './MegaMenu';
+export declare const useMegaMenu: ({ initialOpen, isOpen: controlledOpen, onOpenChange: setControlledOpen, }?: MegaMenuProps) => {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+};
+export declare const validateMegaMenuAnchor: (children: React.ReactNode) => void;
+export declare const validateMegaMenuChildren: ({ hasContent, hasAnchor, }: {
+    hasContent: boolean;
+    hasAnchor: boolean;
+}) => void;

package/components/MegaMenu/MegaMenu.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/NavigationTabs/NavigationTabs.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes, JSX } from 'react';
+import { IconName, SelectedAriaAttributes } from '../../types';
+import { TabListAriaAttributes } from '../Tabs/TabList/TabList.utils';
+import { NavigationTabsAlignment } from './NavigationTabs.utils';
+export interface NavigationTab {
+    /** Unique id for the NavigationTab. */
+    id: string;
+    /** Link component to be used for the navigation. */
+    linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
+        onClick?: () => void;
+        to?: string;
+    }>;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Number Indicator value displayed next to the label. */
+    numberIndicatorValue?: string;
+}
+export interface NavigationTabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** ARIA attributes to ensure accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<TabListAriaAttributes>;
+    /** NavigationTab array structure with optional and required parameters
+     *  `{ id: string;`
+     *  `linkComponent: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & { onClick?: () => void; to?: string; }>;`
+     *  `iconName?: IconName;`
+     *  `numberIndicatorValue?: string; }[]`
+     */
+    tabs: NavigationTab[];
+    /** Index of the tab that should be active. */
+    activeTabIndex?: number;
+    /** Alignment of the NavigationTabs.
+     * @default 'left'
+     */
+    alignment?: NavigationTabsAlignment;
+}
+/**
+ * The Navigation Tabs component is a link list and often used as secondary navigation. The components main function is to navigate to another page url.
+ *
+ * Design in Figma: [Navigation Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-335&t=UBsmFURFENnuYSW1-11)
+ */
+export declare const DSNavigationTabs: ({ aria, tabs, activeTabIndex, alignment, className, ...rest }: NavigationTabsProps) => JSX.Element;

package/components/NavigationTabs/NavigationTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/NavigationTabs/NavigationTabs.utils.d.ts

@@ -0,0 +1,6 @@
+import { NavigationTabsProps } from './NavigationTabs';
+export declare const NAVIGATION_TABS_ALIGNMENT: readonly ["left", "center"];
+export type NavigationTabsAlignment = (typeof NAVIGATION_TABS_ALIGNMENT)[number];
+export declare const NAVIGATION_TABS_DIRECTION: readonly ["prev", "next"];
+export type NavigationTabsDirection = (typeof NAVIGATION_TABS_DIRECTION)[number];
+export declare const validateNavigationTabsProps: ({ aria, tabs, activeTabIndex, }: NavigationTabsProps) => void;

package/components/Notification/Notification.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, JSX } from 'react';
+import { NotificationVariant } from './Notification.utils';
+export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content within the Notification. */
+    children: React.ReactNode;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close notification'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Content within the Notification's action bar. For example a CTA button. */
+    customActionArea?: React.ReactNode;
+    /** Hides the icon.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Defines the variant.
+     * @default 'info'
+     */
+    variant?: NotificationVariant;
+    /** Shows a close button if provided and is called when the close button is clicked. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * An inline notification component that can be used to provide system feedback messages
+ * or highlight important content.
+ *
+ * Design in Figma: [Notification](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=7251-8)
+ *
+ * The background color and icon vary based on the value of the `variant` prop.
+ *
+ * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
+ */
+export declare const DSNotification: ({ children, variant, className, closeButtonProps, customActionArea, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

package/components/Notification/Notification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Notification/Notification.utils.d.ts

@@ -0,0 +1,4 @@
+import { IconName } from '../../types';
+export declare const NOTIFICATION_VARIANT: readonly ["success", "error", "warning", "info"];
+export type NotificationVariant = (typeof NOTIFICATION_VARIANT)[number];
+export declare const NOTIFICATION_ICONS: Record<NotificationVariant, IconName>;

package/components/NumberIndicator/NumberIndicator.d.ts

@@ -0,0 +1,13 @@
+import { NumberIndicatorVariant } from './NumberIndicator.utils';
+import { JSX } from 'react';
+export interface NumberIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Content within the NumberIndicator. */
+    label?: string;
+    /**
+     * Variant of the NumberIndicator.
+     *
+     * @default 'default'
+     */
+    variant?: NumberIndicatorVariant;
+}
+export declare const NumberIndicator: ({ label, className, variant, ...rest }: NumberIndicatorProps) => JSX.Element;

package/components/NumberIndicator/NumberIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/NumberIndicator/NumberIndicator.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const NUMBER_INDICATOR_VARIANT: readonly ["default", "highlight"];
+export type NumberIndicatorVariant = (typeof NUMBER_INDICATOR_VARIANT)[number];

package/components/Popover/Popover.d.ts

@@ -0,0 +1,40 @@
+import { HTMLProps, JSX } from 'react';
+import { OpenChangeReason, Placement } from '@floating-ui/react';
+export interface PopoverProps {
+    /** Content within the Popover. */
+    children?: React.ReactNode;
+    /** Opens the Popover on initial render.
+     * @default false
+     */
+    initialOpen?: boolean;
+    /** The placement of the Popover relative to the anchor element.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /** The offset distance in "px" between the Popover and its anchor element.
+     * @default 6
+     */
+    popoverOffset?: number;
+    /** Controls the open state of the Popover. If provided, it will be a controlled component.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** A function that is called when the open state should change. */
+    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+}
+/**
+ * The Popover component is used to display additional information or actions related to an anchor element. It can be positioned relative to the anchor and supports various placements and offsets.
+ *
+ * Design in Figma: [Popover](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=35223-10505&p=f&t=QXC7W0qCpEbPrh2M-11)
+ * */
+export declare const DSPopover: {
+    ({ children, ...rest }: PopoverProps): JSX.Element;
+    /** attach static members */
+    Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & PopoverAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+interface PopoverAnchorProps {
+    children: React.ReactNode;
+}
+export {};

package/components/Popover/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};