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

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,61 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconName, SelectedAriaAttributes } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { ActionButtonAriaAttribute, ActionButtonChevronDirection, ActionButtonIconPosition, ActionButtonIconSize, ActionButtonIndentLevel, ActionButtonWeight } from './ActionButton.utils';
+export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content within the button. */
+    children: React.ReactNode;
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-expanded'?: boolean | 'true' | 'false';`
+     *  `'aria-pressed'?: boolean | 'true' | 'false' | 'mixed';`
+     *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
+     * */
+    aria?: SelectedAriaAttributes<ActionButtonAriaAttribute>;
+    /** Direction of the optional chevron icon. If a direction is set, a chevron icon is displayed.   */
+    chevronDirection?: ActionButtonChevronDirection;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the button, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** Position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.
+     * @default 'left'
+     */
+    iconPosition?: ActionButtonIconPosition;
+    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
+     * @default 'large'
+     */
+    iconSize?: ActionButtonIconSize;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+    /** Indent level of the button, used to align the button with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
+     * @default 0
+     */
+    indentLevel?: ActionButtonIndentLevel;
+    /** Enables the active state.
+     * @default false
+     */
+    isActive?: boolean;
+    /** Number Indicator value displayed next to the label or above the icon. */
+    numberIndicatorValue?: string;
+    /** Stretches the button over the parent's width. **Only available with `iconPosition='left'`**.
+     * @default false
+     */
+    stretched?: boolean;
+    /** Defines the weight. **Only available with `iconPosition='left'`**.
+     * @default 'normal'
+     */
+    weight?: ActionButtonWeight;
+    /** Callback function called when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Use the ActionButton component when you want the users to trigger an action, used in the DSDrawer as a mobile menu, as a parent of a Popover or in the DSTopBar of the DSHeader.
+ *
+ * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
+ * */
+export declare const DSActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/ActionButton/ActionButton.test.d.ts

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

package/components/ActionButton/ActionButton.utils.d.ts

@@ -0,0 +1,22 @@
+import { ActionButtonProps } from './ActionButton';
+export declare const ACTION_BUTTON_ICON_POSITION: readonly ["left", "top"];
+export type ActionButtonIconPosition = (typeof ACTION_BUTTON_ICON_POSITION)[number];
+export declare const ACTION_BUTTON_ICON_SIZE: readonly ["large", "x-large"];
+export type ActionButtonIconSize = (typeof ACTION_BUTTON_ICON_SIZE)[number];
+export declare const ACTION_BUTTON_INDENT_LEVEL: readonly [0, 1];
+export type ActionButtonIndentLevel = (typeof ACTION_BUTTON_INDENT_LEVEL)[number];
+export declare const ACTION_BUTTON_WEIGHT: readonly ["normal", "bold"];
+export type ActionButtonWeight = (typeof ACTION_BUTTON_WEIGHT)[number];
+export declare const ACTION_BUTTON_CHEVRON_DIRECTION: readonly ["up", "down", "right", "left"];
+export type ActionButtonChevronDirection = (typeof ACTION_BUTTON_CHEVRON_DIRECTION)[number];
+export type ActionButtonAriaAttribute = 'aria-label' | 'aria-expanded' | 'aria-pressed' | 'aria-haspopup';
+type ValidationProps = Pick<ActionButtonProps, 'iconName' | 'iconSize' | 'iconSource' | 'iconPosition' | 'indentLevel' | 'stretched' | 'weight'>;
+/**
+ * Performs runtime validation on a subset of `DSActionButton` props to detect
+ * misconfigurations during development.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ */
+export declare const validateActionButtonProps: ({ iconName, iconSize, iconSource, iconPosition, indentLevel, stretched, weight, }: ValidationProps) => void;
+export {};

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

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

package/components/ActionLink/ActionLink.d.ts

@@ -0,0 +1,38 @@
+import { CommonLinkProps } from '../LinkButton/LinkButton';
+import { ActionLinkIconPosition, ActionLinkIconSize, ActionLinkIndentLevel, ActionLinkWeight } from './ActionLink.utils';
+export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' | 'theme'> {
+    /** Content within the link. */
+    children: React.ReactNode;
+    /** The position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.
+     * @default 'left'
+     */
+    iconPosition?: ActionLinkIconPosition;
+    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
+     * @default 'large'
+     */
+    iconSize?: ActionLinkIconSize;
+    /** Indent level of the link, used to align the link with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
+     * @default 0
+     */
+    indentLevel?: ActionLinkIndentLevel;
+    /** Enables the active state.
+     * @default false
+     */
+    isActive?: boolean;
+    /** Number Indicator value displayed next to the label or above the icon. */
+    numberIndicatorValue?: string;
+    /** Stretches the link over the parent's width. **Only available with `iconPosition='left'`**.
+     * @default false
+     */
+    stretched?: boolean;
+    /** Defines the weight. **Only available with `iconPosition='left'`**.
+     * @default 'normal'
+     */
+    weight?: ActionLinkWeight;
+}
+/**
+ * Use the ActionLink component when you want the users to navigate to another internal or external page, used in the DSDrawer as a mobile menu or in the DSTopBar of the DSHeader.
+ *
+ * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
+ * */
+export declare const DSActionLink: import('react').ForwardRefExoticComponent<ActionLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/ActionLink/ActionLink.test.d.ts

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

package/components/ActionLink/ActionLink.utils.d.ts

@@ -0,0 +1,19 @@
+import { ActionLinkProps } from './ActionLink';
+export declare const ACTION_LINK_ICON_POSITION: readonly ["left", "top"];
+export type ActionLinkIconPosition = (typeof ACTION_LINK_ICON_POSITION)[number];
+export declare const ACTION_LINK_ICON_SIZE: readonly ["large", "x-large"];
+export type ActionLinkIconSize = (typeof ACTION_LINK_ICON_SIZE)[number];
+export declare const ACTION_LINK_INDENT_LEVEL: readonly [0, 1];
+export type ActionLinkIndentLevel = (typeof ACTION_LINK_INDENT_LEVEL)[number];
+export declare const ACTION_LINK_WEIGHT: readonly ["normal", "bold"];
+export type ActionLinkWeight = (typeof ACTION_LINK_WEIGHT)[number];
+type ValidationProps = Pick<ActionLinkProps, 'iconName' | 'iconSize' | 'iconSource' | 'iconPosition' | 'indentLevel' | 'stretched' | 'weight'>;
+/**
+ * Performs runtime validation on a subset of `DSActionLink` props to detect
+ * misconfigurations during development.
+ *
+ * Intended for development use only; should not be used in production environments.
+ *
+ */
+export declare const validateActionLinkProps: ({ iconName, iconSize, iconSource, iconPosition, indentLevel, stretched, weight, }: ValidationProps) => void;
+export {};

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

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

package/components/AriaLiveRegions/AriaLiveRegions.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+/**
+ * A component that provides hidden ARIA live regions for accessibility, allowing screen readers to announce changes dynamically.
+ */
+export declare const DSAriaLiveRegions: () => JSX.Element;

package/components/AriaLiveRegions/AriaLiveRegions.utils.d.ts

@@ -0,0 +1,5 @@
+export declare const ARIA_LIVE_REGION_ALERT_ID = "ds-alert-live-region";
+export declare const ARIA_LIVE_REGION_STATUS_ID = "ds-status-live-region";
+export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null | undefined;
+export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null | undefined;
+export declare const validateMultipleDSAriaLiveRegionsOnPage: () => void;

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

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

package/components/Asterisk/Asterisk.d.ts

@@ -1 +1,2 @@
+import { JSX } from 'react';
 export declare const Asterisk: () => JSX.Element;

package/components/Banner/Banner.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, JSX } from 'react';
+import { BannerVariant } from './Banner.utils';
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content of the Banner. */
+    children?: React.ReactNode;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close banner'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Defines the variant.
+     * @default 'default'
+     */
+    variant?: BannerVariant;
+    /** Shows a close button if provided and is called when the close button is clicked. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Use the Banner component to highlight temporary, non-critical marketing content—such as promotions, campaigns,
+ * or events—without disrupting the user experience.
+ *
+ * Avoid using it for critical updates or system messages; use notifications for those instead.
+ *
+ * Design in Figma: [Banner](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/branch/E1V1SOH56AJFI8POcjNHhO/Web-Pattern-Library?node-id=7171-10859&t=DJuQNlSCRz2j9IRs-11)
+ * */
+export declare const DSBanner: ({ className, closeButtonProps, children, variant, onClose, ...rest }: BannerProps) => JSX.Element;

package/components/Banner/Banner.test.d.ts

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

package/components/Banner/Banner.utils.d.ts

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

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,45 @@
+import { SelectedAriaAttributes } from '../../types';
+import { BreadcrumbAriaAttributes } from './Breadcrumb.utils';
+import { JSX } from 'react';
+export interface BreadcrumbLink {
+    /** The link label text. */
+    label: string;
+    /** The href for the link if no framework-specific link component wrapper is provided. */
+    href?: string;
+    /**  Name of the icon to display.*/
+    iconName?: string;
+    /** The framework-specific link component wrapper, e.g., `Link` for `next` or `react-router-dom`. */
+    wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to ensure accessibility
+     *
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<BreadcrumbAriaAttributes>;
+    /** Breadcrumb link array structure with optional and required parameters
+     *  `{ label: string;`
+     *  `href?: string;`
+     *  `iconName?: IconName;`
+     *  `wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;}[]`
+     */
+    links: BreadcrumbLink[];
+    /** Show all (...) button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the show all button.
+     * (default) 'Show all links'
+     */
+    showAllButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+}
+/**
+ * A breadcrumb provides orientation to users within the structure of a website or application.
+ *
+ * Design in Figma: [Breadcrumb](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=23527-3393)
+ * */
+export declare const DSBreadcrumb: ({ aria, className, links, showAllButtonProps, ...rest }: BreadcrumbProps) => JSX.Element;

package/components/Breadcrumb/Breadcrumb.test.d.ts

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

package/components/Breadcrumb/Breadcrumb.utils.d.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbProps } from './Breadcrumb';
+export type BreadcrumbAriaAttributes = 'aria-label' | 'aria-labelledby';
+export declare const MAX_VISIBLE_LINKS = 4;
+export declare const validateBreadcrumbProps: ({ aria, links }: BreadcrumbProps) => void;

package/components/Button/Button.d.ts

@@ -2,9 +2,8 @@ import { ButtonHTMLAttributes } from 'react';
 import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils';
-
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the button */
+    /** Content within the button. */
     children: React.ReactNode;
     /** ARIA attributes to enhance accessibility
      *  `{'aria-label'? string;`
@@ -13,34 +12,51 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
      * */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Disables the button, preventing user interaction */
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the button, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the button label, can be responsive
+    /** Hides the button label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Name of the icon to display */
+    /** Name of the icon to display. */
     iconName?: IconName;
-    /** Position of the icon */
+    /** Position of the icon.
+     * @default 'left'
+     */
     iconPosition?: 'left' | 'right';
-    /** URL or path for a custom icon */
+    /** URL or path for a custom icon. */
     iconSource?: IconProps['source'];
-    /** Aligns `variant='ghost'` with text */
+    /** Aligns `variant='ghost'` with text.
+     * @default false
+     */
     isFlush?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Size of the button */
+    /** Size of the button.
+     * @default 'medium'
+     */
     size?: ButtonSize;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
-    /** Visual style variant of the button */
+    /** Visual style variant of the button.
+     * @default 'filled'
+     */
     variant?: ButtonVariant;
-    /** Callback function triggered when the button is clicked */
+    /** Callback function called when the button is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * Use the Button component to initialize an important action or to highlight the user journey.
+ *
+ * Design in Figma: [Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-3943&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSButton: ({ children, aria, className, dataTrackingid, disabled, hideLabel, iconName, iconPosition, iconSource, isFlush, loading, size, theme, variant, onClick, ...rest }: ButtonProps) => JSX.Element;
+export declare const DSButton: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/Button/Button.utils.d.ts

@@ -1,6 +1,23 @@
+import { ButtonProps } from './Button';
 export declare const BUTTON_SIZE: readonly ["medium", "small"];
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
-export declare const BUTTON_VARIANT: readonly ["filled", "highlight", "outline", "ghost"];
+export declare const BUTTON_VARIANT: readonly ["highlight", "filled", "outline", "ghost", "navigation"];
 export type ButtonVariant = (typeof BUTTON_VARIANT)[number];
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonAriaAttribute = 'aria-label' | 'aria-expanded' | 'aria-pressed' | 'aria-haspopup';
+type ValidationProps = Pick<ButtonProps, 'variant' | 'size' | 'theme'>;
+/**
+ * Performs runtime validation on a subset of `DSButton` 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 `DSButton` component. These are validated to ensure
+ *                          they are used in supported combinations.
+ */
+export declare const validateButtonProps: ({ variant, size, theme, }: ValidationProps) => void;
+export {};

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

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

package/components/ButtonRound/ButtonRound.d.ts

@@ -1,11 +1,20 @@
+import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
 import { ButtonRoundVariant } from './ButtonRound.utils';
-
 export interface ButtonRoundProps extends Omit<ButtonProps, 'hideLabel' | 'size' | 'iconPosition' | 'isFlush'> {
     children: React.ReactNode;
+    /** Visual style variant of the button.
+     * @default 'filled'
+     */
     variant?: ButtonRoundVariant;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
- * Icon only Buttons should only used for functions where visible labels are not needed to define the function e.g. modal close or paginations buttons.
+ * Icon only Buttons should only used for functions where visible labels are not needed to define the function e.g. modal close or pagination buttons.
+ *
+ * Design in Figma: [Button Round](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-4016&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSButtonRound: ({ children, aria, className, dataTrackingid, disabled, iconName, iconSource, loading, theme, variant, onClick, ...rest }: ButtonRoundProps) => JSX.Element;
+export declare const DSButtonRound: import('react').ForwardRefExoticComponent<ButtonRoundProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/Checkbox/Checkbox.d.ts

@@ -1,27 +1,43 @@
 import { InputHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
-
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** Content displayed next to the checkbox */
+    /** Content displayed next to the checkbox. */
     label: string;
-    /** Controls whether the checkbox is checked. */
+    /**
+     * Id of the parent DSCheckboxGroup, required when setting a `systemFeedback` and `invalid={true}` on the DSCheckboxGroup.
+     */
+    checkboxGroupId?: string;
+    /** Controls whether the checkbox is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Disables the checkbox, preventing user interaction */
+    /** Disables the checkbox, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hide the checkbox label, can be responsive
+    /** Hides the checkbox label, can be responsive.
      * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      * */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Sets the checkbox to an indeterminate state, distinct from checked or unchecked */
+    /** Unique id for the checkbox. Needs to be set if systemFeedback is provided */
+    id?: string;
+    /** Sets the checkbox to an indeterminate state, distinct from checked or unchecked.
+     * @default false
+     */
     indeterminate?: boolean;
-    /** Marks the checkbox as invalid, typically used for form validation */
+    /** Marks the checkbox as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Callback function triggered when the state of the checkbox changes */
+    /** Callback function called when the state of the checkbox changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * A control element that allows users to make a binary choice. It can either be checked or unchecked.
+ *
+ * Design in Figma: [Checkbox](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1017-2328&t=UBsmFURFENnuYSW1-11)
  * */
 export declare const DSCheckbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/Checkbox/Checkbox.utils.d.ts

@@ -0,0 +1,11 @@
+import { CheckboxProps } from './Checkbox';
+type ValidationProps = Pick<CheckboxProps, 'label' | 'id' | 'invalid' | 'systemFeedback'>;
+/**
+ * Validates the given properties of the DSCheckbox component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSCheckbox properties to validate.
+ */
+export declare const validateCheckboxProps: ({ label, id, invalid, systemFeedback, }: ValidationProps) => void;
+export {};

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

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

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,8 +1,7 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, JSX } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
-
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** DSCheckbox elements within the checkbox group */
+    /** DSCheckbox elements within the checkbox group. */
     children: React.ReactNode;
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -15,28 +14,36 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the checkboes
+     * Set the direction of the checkboxes.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /** Disables the checkbox group, preventing user interaction.
+     * @default false
      */
-    alignment?: 'vertical' | 'horizontal';
-    /** Short descriptive text displayed beneath the legend */
-    description?: FieldsetProps['description'];
-    /** Disables the checkbox group, preventing user interaction */
     disabled?: boolean;
-    /** Unique id for the checkbox group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Unique id for the checkbox group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the checkbox group as invalid, typically used for form validation */
+    /** Marks the checkbox group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /** Marks the checkbox group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the checkbox group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the checkbox 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;
 }
 /**
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
- * 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: [Checkbox Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=5626-11362&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSCheckboxGroup: ({ children, legend, alignment, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

package/components/CheckboxGroup/CheckboxGroup.utils.d.ts

@@ -1,5 +1,4 @@
 import { CheckboxGroupProps } from './CheckboxGroup';
-
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
-export declare const validateProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateCheckboxGroupProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/ChipGroup/Chip.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    groupId: string;
+    isRemovable: boolean;
+    lang?: ChipGroupLanguage;
+    selectionMode: ChipGroupSelectionMode;
+    size?: ChipGroupSize;
+    translations?: ChipGroupAriaTranslations;
+}
+export declare const DSChip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** An array of Chip Objects containing the id and label and other optional parameters.
+     * `{id: string; label: string; disabled?: boolean; iconName?: IconName; isSelected?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;}[]`*/
+    chips: Chip[];
+    /** Unique id for the DSChipGroup. */
+    id: string;
+    /** Label text displayed above the DSChipGroup. */
+    label: string;
+    /** Hides the DSChipGroup label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Allows removal of Chips.
+     * @default false
+     */
+    isRemovable?: boolean;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: ChipGroupLanguage;
+    /** Defines if only one Chip or multiple Chips can be selected. Ignored if `isRemovable=true`.
+     * @default 'single'
+     */
+    selectionMode?: ChipGroupSelectionMode;
+    /** Size of the Chips.
+     * @default 'medium'
+     */
+    size?: ChipGroupSize;
+    /** Translations for the DSChipGroup. Use our [customization page](/?path=/story/components-chip-group-translations--documentation) for creating custom translations. */
+    translations?: ChipGroupAriaTranslations;
+    /** Callback function called when the selection of the DSChipGroup changes. */
+    onChipsChange?: (chips: Chip[]) => void;
+}
+/**
+ * A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
+ * Supports different sizes. Use icons sparingly to reduce cognitive load.
+ *
+ * Design in Figma: [Chip Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=18691-978)
+ */
+export declare const DSChipGroup: React.FC<ChipGroupProps>;

package/components/ChipGroup/ChipGroup.test.d.ts

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