@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/components/LinkCard/LinkCard.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/Logo100Years/Logo100Years.d.ts

@@ -0,0 +1 @@
+export declare const Logo100Years: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,40 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { NotificationVariant } from './Notification.utils';
-
 export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
-    /** Content within the Notification */
+    /** 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;
-    /** Label for the close button */
-    closeButtonLabel?: string;
-    /** Hides the close button */
-    hideCloseButton?: boolean;
-    /** Hides the icon */
+    /** Hides the icon.
+     * @default false
+     */
     hideIcon?: boolean;
-    /** Defines the variant */
+    /** Defines the variant.
+     * @default 'info'
+     */
     variant?: NotificationVariant;
-    /** Callback function triggered when the close button is clicked */
+    /** 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, customActionArea, className, closeButtonLabel, hideCloseButton, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;
+export declare const DSNotification: ({ children, variant, className, closeButtonProps, customActionArea, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

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

@@ -1,5 +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,62 @@
+import { HTMLProps, JSX } from 'react';
+import { OpenChangeReason, Placement } from '@floating-ui/react';
+export interface PopoverProps {
+    /** Content within the Popover. */
+    children?: React.ReactNode;
+    /** Default anchor button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    defaultAnchorButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Opens the Popover on initial render.
+     * @default false
+     */
+    initialOpen?: boolean;
+    /** Controls the open state of the Popover. If provided, it will be a controlled component.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** The placement of the Popover relative to the anchor element.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /** The offset distance in "px" between the Popover and its anchor element.
+     * @default 6
+     */
+    popoverOffset?: number;
+    /** Whether to render a pointing arrow attached to the popover.
+     * @default true
+     */
+    showArrow?: boolean;
+    /** The variant style of the Popover. The "grey" variant requires `showArrow` to be `true`.
+     * @default 'default'
+     */
+    variant?: 'default' | 'grey';
+    /** 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)
+ * */
+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> & PopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+interface PopoverAnchorProps {
+    children?: React.ReactNode;
+}
+interface PopoverContentProps {
+    classNameArrow?: string;
+}
+export {};

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

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

package/components/Popover/Popover.utils.d.ts

@@ -0,0 +1,84 @@
+import { PopoverProps } from './Popover';
+/**
+ * Popover hook for managing popover state and behavior.
+ * @param PopoverProps Popover props
+ * @returns Popover state and actions
+ */
+export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, showArrow, variant, defaultAnchorButtonProps, onOpenChange: setControlledOpen, }?: PopoverProps) => {
+    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;
+    popoverOffset: number;
+    setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+    arrowRef: import('react').RefObject<SVGSVGElement | null>;
+    showArrow: boolean;
+    defaultAnchorButtonProps: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    } | undefined;
+    variant: "default" | "grey";
+};
+/**
+ * Validates the children of the Popover component in development environment.
+ * - Check for children presence
+ * - Validate that <DSPopover.Anchor> and <DSPopover.Content> are used together.
+ *
+ * @param {Object} childrenObject
+ * @param {React.ReactNode} childrenObject.children - The Popover children.
+ * @param {boolean} childrenObject.hasContent - Whether <DSPopover.Content> is present.
+ * @param {boolean} childrenObject.hasAnchor - Whether <DSPopover.Anchor> is present.
+ * @returns {void}
+ */
+export declare const validatePopoverChildren: ({ children, hasContent, hasAnchor, }: {
+    children: React.ReactNode;
+    hasContent: boolean;
+    hasAnchor: boolean;
+}) => void;
+type ValidationProps = Pick<PopoverProps, 'showArrow' | 'variant'>;
+/**
+ * Validates Popover props in development environment.
+ *
+ * @param props Popover props to validate
+ */
+export declare const validatePopoverProps: ({ showArrow, variant, }: ValidationProps) => void;
+export {};

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

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

package/components/Radio/Radio.d.ts

@@ -1,24 +1,42 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
-
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** Label text displayed next to the radio */
-    label: React.ReactNode;
-    /** Name of the radio group */
+    /** Label text displayed next to the radio. */
+    label: string;
+    /** Name of the radio group. */
     name: string;
-    /** Set the value of the radio */
+    /** Set the value of the radio. */
     value: string;
-    /** Disables the radio, preventing user interaction */
-    disabled?: boolean;
-    /** Hides the radio label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
     /** Controls whether the radio is checked. */
     checked?: boolean;
-    /** Marks the radio as invalid, typically used for form validation */
+    /** Allows the addition of e.g. decorative icons for an option.  */
+    customArea?: React.ReactNode;
+    /** Changes the position of the custom area and lifts size restrictions.
+     * @default false
+     */
+    isCustomAreaAbove?: boolean;
+    /** Disables the radio, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Id of the parent Fieldset, required for a11y when systemFeedback is set
+     */
+    fieldsetId?: string;
+    /** Makes the label use `ds.utility-medium-bold` if any option has a `hint` and `hideUncheckedHint` is set to false.
+     * @default false
+     */
+    isBold?: boolean;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Marks the radio as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Callback function triggered when the state of the radio changes */
+    /** Controls whether the hint is displayed when the radio button is not checked.
+     * @default false
+     */
+    hideUncheckedHint?: boolean;
+    /** Callback function called when the state of the radio changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,6 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 import { RadioGroupOption } from './RadioGroup.utils';
-
 export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -14,44 +13,68 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
-    /** Name of the radio group */
+    /** Name of the radio group. */
     name: string;
     /**
-     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button
-     * `{label: string; value: string}[]`
-     * @prop {{label: string; value: string}[]} options
+     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button.
+     * `{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string}[]`
+     * @prop {{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string;}[]} options
      */
     options: RadioGroupOption[];
+    /** Value of the selected Option in **uncontrolled RadioGroup** component. */
+    defaultValue?: string;
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the radio buttons
+     * Set the direction of the radio buttons.
+     * `direction="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
+     * @default 'vertical'
      */
-    alignment?: 'vertical' | 'horizontal';
-    /**
-     * Value of the selected Option in **uncontrolled RadioGroup** component
+    direction?: 'vertical' | 'horizontal';
+    /** Disables the radio group, preventing user interaction.
+     * @default false
      */
-    defaultValue?: string;
-    /** Short descriptive text displayed beneath the legend */
-    description?: FieldsetProps['description'];
-    /** Disables the radio group, preventing user interaction */
     disabled?: boolean;
-    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Controls whether the hint is displayed when the radio buttons are not checked. If set to `false` labels of radio buttons with hints will be displayed in bold.
+     * @default false
+     */
+    hideUncheckedHints?: boolean;
+    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the radio group as invalid, typically used for form validation */
+    /** Marks the radio group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Marks the radio group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend.
+     * @default false
      * */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Set the value of the selected option */
+    /** Set the value of the selected option. */
     value?: string;
-    /** Callback function triggered when the value of the radio group changes */
+    /** Callback function called when the value of the radio group changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
- * complete with customizable legends, alignment options, and integrated validation feedback,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
+ *
+ * Design in Figma: [Radio Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=860-2728)
  * */
 export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/RadioGroup/RadioGroup.utils.d.ts

@@ -1,7 +1,9 @@
 import { RadioProps } from '../Radio/Radio';
 import { RadioGroupProps } from './RadioGroup';
-
-export type RadioGroupOption = Pick<RadioProps, 'label' | 'value'>;
-type ValidationProps = Pick<RadioGroupProps, 'description' | 'id' | 'legend' | 'name' | 'options' | 'systemFeedback'>;
-export declare const validateRadioGroupProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
+export type RadioGroupOption = Pick<RadioProps, 'label' | 'value' | 'className' | 'customArea' | 'hint' | 'isCustomAreaAbove'>;
+type ValidationProps = Pick<RadioGroupProps, 'legend' | 'name' | 'options' | 'description' | 'direction' | 'hideUncheckedHints' | 'id' | 'systemFeedback'>;
+export declare const optionsHaveHint: (options: RadioGroupOption[]) => boolean;
+export declare const optionsHaveCustomAreaInline: (options: RadioGroupOption[]) => boolean;
+export declare const optionsHaveCustomAreaAbove: (options: RadioGroupOption[]) => boolean;
+export declare const validateRadioGroupProps: ({ legend, name, options, description, direction, hideUncheckedHints, id, systemFeedback, }: ValidationProps) => void;
 export {};

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

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

package/components/Scroller/Scroller.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+export interface ScrollerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content to be displayed within the scroller. */
+    children?: React.ReactNode;
+    /** Additional class name to apply to the scrolling element. */
+    scrollerClassName?: string;
+    /** Additional class name to apply to the scroll buttons. */
+    scrollerButtonClassName?: string;
+    /** Scrolls the scroll area to the left either smooth or immediately.
+     *  `{scrollPosition: number;`
+     *  `isSmooth?: boolean;}`
+     */
+    scrollToPosition?: {
+        scrollPosition: number;
+        isSmooth?: boolean;
+    };
+}
+/**
+ * The <DSScroller> component enables horizontal scrolling when a single item or a group of items
+ *  exceeds the container width, allowing users to navigate content side-to-side seamlessly.
+ *
+ * Design in Figma: [Scroller](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6263-49213&t=wRBNgx5siTv3aUkL-11)
+ */
+export declare const DSScroller: import('react').ForwardRefExoticComponent<ScrollerProps & import('react').RefAttributes<HTMLDivElement>>;