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

package/components/Scroller/Scroller.test.d.ts

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

package/components/Scroller/Scroller.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const SCROLLER_DIRECTION: readonly ["prev", "next"];
+export type ScrollerDirection = (typeof SCROLLER_DIRECTION)[number];
+export declare const SCROLL_MARGIN_INLINE = 48;

package/components/Select/Select.d.ts

@@ -1,44 +1,68 @@
 import { SelectHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
-
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    /** Unique id for the select */
+    /** Unique id for the select. */
     id: string;
-    /** Label text displayed above the select */
+    /** Label text displayed above the select. */
     label: string;
     /**
-     * Defines the options, can be a mixed array of options and option groups
+     * Defines the options, can be a mixed array of options and option groups.
      *  `type SelectOption = {label: string; value: string | number; isDisabled?: boolean;}`
      *  `type SelectOptionsGroup = {label: string; options: SelectOption[];}`
      *  `type SelectOptionsOrOptGroups = (SelectOption | SelectOptionsGroup)[];`
      * */
     options: SelectOptionsOrOptGroups;
-    /** Disables the select, preventing user interaction */
+    /** Disables the select, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the select label, can be responsive
+    /** Hides the select 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;
-    /** Marks the select as invalid, typically used for form validation */
+    /** Marks the select as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Modifies the empty option label to ensure a conscious choice. */
+    /** 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;
+    };
+    /** Modifies the empty option label to ensure a conscious choice.
+     * @default 'Select'
+     */
     placeholder?: string;
-    /** Indicates that the select is required */
+    /** Indicates that the select is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the select */
+    /** Size of the select.
+     * @default 'medium'
+     */
     size?: SelectSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**
  * Use the DSSelect component to efficiently navigate through and select from a range of options,
  * enhancing user interaction and decision-making in your application.
  *
+ * Design in Figma: [Select](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8139-4888)
  *
  * <div className="ds-alert">If you are looking for a component with a **custom dropdown** or the ability to **filter** and **select multiple options**, please take a look at
  * [DSCombobox](/docs/components-combobox--documentation)</div>
  * */
-export declare const DSSelect: ({ id, label, options, className, defaultValue, disabled, hideLabel, hint, invalid, placeholder, required, size, systemFeedback, value, ...rest }: SelectProps) => JSX.Element;
+export declare const DSSelect: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;

package/components/Select/Select.utils.d.ts

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { GroupBase, OptionsOrGroups } from 'react-select';
 import { SelectProps } from './Select';
-
-type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
+type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options' | 'hideLabel' | 'popoverContent'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;
     value: string | number;
@@ -20,7 +19,7 @@ export type SelectSize = (typeof SELECT_SIZE)[number];
  * @param validationProps - The subset of DSSelect properties to validate. This includes
  *                          id and label.
  */
-export declare const validateSelectProps: ({ id, label, options, }: ValidationProps) => void;
+export declare const validateSelectProps: ({ id, label, options, hideLabel, popoverContent, }: ValidationProps) => void;
 /**
  * Determines the initial visibility of the placeholder based on the `placeholder` string and
  * the values of `defaultValue` and `value` from the props.

package/components/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,19 @@
+import { LinkButtonProps } from '../LinkButton/LinkButton';
+export interface SkipToContentProps extends Pick<LinkButtonProps, 'className' | 'theme'> {
+    /** Content within the SkipToContent Link.
+     * @default 'Skip to main content'
+     */
+    children?: string;
+    /** id of the element to be focused by the SkipToContent Link.
+     * @default 'main'
+     */
+    targetElementId?: string;
+}
+/**
+ * The `<DSSkipToContent />` component is an accessibility feature that allows users, especially those using screen readers or keyboard navigation, to quickly jump to the targeted content of a webpage without having to focus all the navigation items first. This improves the user experience by making it easier and faster to access important information.
+ *
+ * Focus the section below by using the tab key to see the "Skip To Content" component in action.
+ *
+ * Design in Figma: [Skip To Content](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=16333-2371)
+ */
+export declare const DSSkipToContent: import('react').ForwardRefExoticComponent<SkipToContentProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/SkipToContent/SkipToContent.test.d.ts

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

package/components/Slider/Slider.d.ts

@@ -0,0 +1,76 @@
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { InputSize } from '../Input/Input.utils';
+export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Unique id for the Slider. */
+    id: string;
+    /** Label text displayed above the Slider. */
+    label: string;
+    /** Disables the Slider, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Hides the Slider label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Controls the visibility of an additional number input for granular value control.
+     * Cannot be used if step > 1 is set.
+     * @default false
+     */
+    hideNumberInput?: boolean;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /**  Controls if the tooltip is visible outside of interactions. Only usable when `hideNumberInput={true}`.
+     * @default false
+     */
+    isTooltipAlwaysVisible?: boolean;
+    /**
+     * Sets the maximum value
+     * @default 100
+     */
+    max?: number | string;
+    /**
+     * Sets greatest value in the range of permitted values.
+     * @default 0
+     */
+    min?: number | string;
+    /**
+     * Specifies the granularity that the value must adhere to.
+     * @default 1
+     */
+    step?: number | string;
+    /** Number input props:
+     * `suffix`:  Text displayed as a suffix inside the input, maximum 5 characters.
+     *
+     * `size`:  Size of the input.
+     *  (default): `'medium'`
+     */
+    numberInputProps?: {
+        suffix?: string;
+        size?: InputSize;
+    };
+    /** 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;
+    };
+}
+/**
+ * The `<DSSlider />` component is a flexible range input that allows users to select a value within a defined range.
+ * It supports various customizations, including a label, hint, tooltip and an optional number input for precise value selection.
+ *
+ * The component also features configurable step values and min/max limits for better user guidance.
+ *
+ * Design in Figma: [Input Slider](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=29536-27468&t=31EIQag1wrGVM75J-4)
+ */
+export declare const DSSlider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/Slider/Slider.test.d.ts

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

package/components/Slider/Slider.utils.d.ts

@@ -0,0 +1,65 @@
+import { SliderProps } from './Slider';
+export declare const MAXIMUM_TICK_AMOUNT = 11;
+export declare const LABEL_LENGTH_BREAKPOINT = 4;
+/**
+ * Returns the number of characters in a number, including the minus sign if present.
+ *
+ * @param {number} num - The number to check.
+ * @returns {number} The total length of the number including all characters.
+ *
+ * @example
+ * getNumberLength(12345); // 5
+ * getNumberLength(-9876); // 5 (includes the minus sign)
+ * getNumberLength(0);     // 1
+ */
+export declare const getNumberLength: (num: number) => number;
+/**
+ * Checks if a given value is aligned to a specific step interval,
+ * starting from a defined minimum value. The check allows for minor
+ * floating-point inaccuracies using an epsilon tolerance.
+ *
+ * @param {number} value - The numeric value to check for alignment.
+ * @param {number} step - The step size that defines valid intervals.
+ * @param {number} parsedMin - The minimum value from which steps start.
+ * @returns {boolean} `true` if the value is aligned to the step; otherwise, `false`.
+ */
+export declare const isStepAligned: (value: number, step: number, parsedMin: number) => boolean;
+/**
+ * Snaps a numeric value to the nearest valid step within a defined range,
+ * clamping it between the provided min and max values.
+ *
+ * @param value - The input number to be snapped.
+ * @param step - The step size as a number or string (e.g., '0.5', 1).
+ * @param min - The minimum allowed value.
+ * @param max - The maximum allowed value.
+ * @returns The value snapped to the nearest step, clamped and precision-adjusted.
+ */
+export declare const snapValueToStep: (value: number, step: string | number, min: number, max: number) => number;
+/**
+ * Calculates the CSS `left` offset for a tick mark on a slider component,
+ * adjusting its position so that it aligns visually with the slider thumb.
+ *
+ * The function computes the percentage position of the tick based on the
+ * provided `tickValue` in relation to the `parsedMin` and `parsedMax` range,
+ * then applies a correction (`shift`) to ensure proper alignment with the thumb.
+ *
+ * The shift is calculated with a linear formula derived to meet specific
+ * alignment criteria at 0%, 50%, and 100%.
+ *
+ * @param tickValue - The numeric value of the current tick mark.
+ * @param parsedMin - The minimum value of the slider range.
+ * @param parsedMax - The maximum value of the slider range.
+ * @returns A CSS `left` value string using `calc()` to properly position the tick.
+ */
+export declare const getTickLeftOffset: (tickValue: number, parsedMin: number, parsedMax: number) => string;
+type ValidationProps = Pick<SliderProps, 'id' | 'label'>;
+/**
+ * Validates the given properties of the DSSlider 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 DSSlider properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateSliderProps: ({ id, label }: ValidationProps) => void;
+export {};

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

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

package/components/Spinner/Spinner.d.ts

@@ -1,15 +1,24 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
-
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
-    /** Size of the spinner */
+    /** Size of the spinner.
+     * @default 'small'
+     */
     size?: SpinnerSize;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
+/**
+ *
+ * Shows the loading state and that the user request is being processed.
+ *
+ * Design in Figma: [Spinner](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26-3)
+ */
 export declare const DSSpinner: ({ aria, className, size, theme, ...rest }: SpinnerProps) => JSX.Element;

package/components/Stepper/Step.d.ts

@@ -0,0 +1,33 @@
+import { default as React, JSX } from 'react';
+import { StepState } from './Step.utils';
+import { StepperTranslations } from './Stepper.utils';
+/** Local copy of the Step data contract to avoid circular dependency with `Stepper.tsx`. */
+export interface Step {
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+    state?: StepState;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface StepperStepProps {
+    /** Step object */
+    step: Step;
+    /** Index of this step in the list */
+    index: number;
+    /** Orientation of the Stepper */
+    orientation: 'horizontal' | 'vertical';
+    /** Total number of steps */
+    stepsCount: number;
+    /** Translation function */
+    t: (key: keyof StepperTranslations, replacements?: string[]) => string;
+    /** Called when the button is clicked (index is already bound in parent) */
+    onStepClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Collect the ref for scroll / focus management */
+    buttonRef?: (el: HTMLButtonElement | null) => void;
+}
+/**
+ * Presentational single Step inside the DSStepper.
+ * Keeps the markup & ARIA logic isolated from the Stepper container.
+ */
+export declare const StepperStep: ({ step, index, stepsCount, t, onStepClick, buttonRef, orientation, }: StepperStepProps) => JSX.Element;
+export default StepperStep;

package/components/Stepper/Step.utils.d.ts

@@ -0,0 +1,5 @@
+import { Step } from './Step';
+import { StepperTranslations } from './Stepper.utils';
+export declare const STEP_STATE: readonly ["current", "completed", undefined];
+export type StepState = (typeof STEP_STATE)[number];
+export declare const getStepAriaLabel: (t: (key: keyof StepperTranslations, replacements?: string[]) => string, index: number, total: number, step: Step, isCurrent: boolean) => string;

package/components/Stepper/Stepper.d.ts

@@ -0,0 +1,56 @@
+import { default as React, JSX } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { StepState } from './Step.utils';
+import { StepperAlignment, StepperAriaAttributes, StepperLanguage, StepperOrientation, StepperTranslations } from './Stepper.utils';
+export interface Step {
+    /** Label text displayed for the Step. */
+    label: string;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Disables the Step, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * State of the Step. If set to 'current', the step is highlighted as the current step.
+     * @default undefined
+     */
+    state?: StepState;
+    /** Callback function called when the Step is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<StepperAriaAttributes>;
+    /** An array of Step Objects containing the label and other optional parameters.
+     * `{label: string; hint: string; disabled?: boolean; state?: 'current' | 'completed' | undefined; onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;}[]`*/
+    steps: Step[];
+    /** Callback function called when the selection of the Stepper changes. */
+    onStepChange: (selectedStepIndex: number) => void;
+    /** Alignment of the DSStepper.
+     * @default 'left'
+     */
+    alignment?: StepperAlignment;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: StepperLanguage;
+    /** Orientation of the DSStepper.
+     * @default 'horizontal'
+     */
+    orientation?: StepperOrientation;
+    /** Translations for the DSStepper. Use our [customization page](/?path=/story/components-stepper-translations--documentation) for creating custom translations. */
+    translations?: StepperTranslations;
+}
+/**
+ * The `<DSStepper />` component provides an accessible step-based navigation pattern following the `aria-current="step"` specification.
+ * It is a **controlled component** and does not manage its own state.
+ * It renders steps as buttons inside an ordered list (`<ol>`) wrapped in a semantic `<nav>` landmark.
+ * Horizontal overflow is handled via `<DSScroller>` preventing line wrapping while enabling keyboard and pointer based scrolling.
+ *
+ * Design in Figma: [Stepper](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-10497)
+ */
+export declare const DSStepper: ({ aria, className, steps, orientation, alignment, lang, translations, onStepChange, ...rest }: StepperProps) => JSX.Element;

package/components/Stepper/Stepper.test.d.ts

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

package/components/Stepper/Stepper.utils.d.ts

@@ -0,0 +1,30 @@
+import { Step } from './Step';
+import { StepperProps } from './Stepper';
+export type StepperAriaAttributes = 'aria-label' | 'aria-labelledby';
+export declare const STEPPER_ALIGNMENT: readonly ["left", "center"];
+export type StepperAlignment = (typeof STEPPER_ALIGNMENT)[number];
+export declare const STEPPER_ORIENTATION: readonly ["horizontal", "vertical"];
+export type StepperOrientation = (typeof STEPPER_ORIENTATION)[number];
+export type ValidateStepperPropsParams = Pick<StepperProps, 'aria' | 'steps'>;
+export declare const validateStepperProps: ({ aria, steps, }: ValidateStepperPropsParams) => void;
+export declare const validateIsLiveRegionPresentForStepper: () => void;
+export type StepperLanguage = 'en' | 'de';
+export type StepperTranslations = typeof DS_STEPPER_TRANSLATIONS_EN;
+export declare const DS_STEPPER_TRANSLATIONS_EN: {
+    current: string;
+    completed: string;
+    step: string;
+    of: string;
+};
+export declare const DS_STEPPER_TRANSLATIONS_DE: StepperTranslations;
+export declare const DS_STEPPER_TRANSLATIONS: Record<StepperLanguage, StepperTranslations>;
+/**
+ * Get the current step in the stepper.
+ * If no step is marked as 'current', the last step with a defined state is returned.
+ * If no steps have a defined state, the first step is returned.
+ * @param steps The array of steps.
+ * @returns The current step.
+ */
+export declare const getCurrentStep: (steps: Step[]) => Step;
+export declare const getCurrentStepIndex: (steps: Step[]) => number;
+export declare const isStepClickable: (state: Step["state"], disabled: boolean | undefined) => boolean;

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

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

package/components/Switch/Switch.d.ts

@@ -1,30 +1,41 @@
 import { ButtonHTMLAttributes } from 'react';
 import { SelectedAriaAttributes } from '../../types';
 import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
-
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the label */
+    /** Content within the label. */
     children: React.ReactNode;
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
-    /** Alignment of the label */
+    /** Alignment of the label.
+     * @default 'left'
+     */
     alignLabel?: SwitchLabelPosition;
-    /** Controls whether the switch is checked. */
+    /** Controls whether the switch is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Disables the switch, preventing user interaction */
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the switch, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Stretches the Switch over the parent's width */
+    /** Stretches the Switch over the parent's width.
+     * @default false
+     */
     stretched?: boolean;
-    /** Callback function triggered when the switch is clicked */
+    /** Callback function called when the switch is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * Often used in settings, in which users can communicate their choice through binary selection.
+ *
+ * Design in Figma: [Switch](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=513-2)
  * */
-export declare const DSSwitch: ({ children, aria, alignLabel, checked, className, dataTrackingid, disabled, loading, stretched, onClick, ...rest }: SwitchProps) => JSX.Element;
+export declare const DSSwitch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,10 +1,19 @@
-import { HTMLAttributes } from 'react';
-import { SystemFeedbackType } from './SystemFeedback.utils';
-
+import { HTMLAttributes, JSX } from 'react';
+import { SystemFeedbackVariant } from './SystemFeedback.utils';
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the message */
+    /** Unique id for connecting the system feedback with aria attributes like aria-describedby. */
+    id: string;
+    /** Defines the message. */
     message: string;
-    /** Defines the type */
-    type: SystemFeedbackType;
+    /** Defines the variant (e.g. "error", "success" or "warning"). */
+    variant: SystemFeedbackVariant;
 }
-export declare const DSSystemFeedback: ({ className, message, type, ...rest }: SystemFeedbackProps) => JSX.Element;
+/**
+ * Use the SystemFeedback component to provide clear and immediate feedback to the user
+ * about the status of a system process or validation state.
+ *
+ * Design in Figma: [SystemFeedback](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=14690-32&t=qoxy54r8T2z3eW8T-4)
+ *
+ * <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 DSSystemFeedback: ({ id, message, variant, className, ...rest }: SystemFeedbackProps) => JSX.Element;

package/components/SystemFeedback/SystemFeedback.utils.d.ts

@@ -1,8 +1,5 @@
-interface SystemFeedbackIcons {
-    valid: 'circle-check-colored';
-    invalid: 'diamond-exclamationmark-colored';
-    warning: 'triangle-exclamationmark-colored';
-}
-export declare const systemFeedbackIcons: SystemFeedbackIcons;
-export type SystemFeedbackType = 'valid' | 'invalid' | 'warning';
+type SystemFeedbackIcon = 'circle-check-colored' | 'diamond-exclamationmark-colored' | 'triangle-exclamationmark-colored';
+export declare const SYSTEM_FEEDBACK_VARIANT: readonly ["success", "error", "warning"];
+export type SystemFeedbackVariant = (typeof SYSTEM_FEEDBACK_VARIANT)[number];
+export declare const SYSTEM_FEEDBACK_ICON_MAP: Record<SystemFeedbackVariant, SystemFeedbackIcon>;
 export {};

package/components/Tabs/TabList/NavigationTabList/NavigationTabList.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { NavigationTab } from '../../../NavigationTabs/NavigationTabs';
+interface NavigationTabListProps {
+    tabs: NavigationTab[];
+    tabRefs: React.RefObject<HTMLAnchorElement[]>;
+    scrollerClass: string;
+    scrollerRef: React.RefObject<HTMLUListElement>;
+    selectedTabIndex: number;
+    handleNavigationKeydown: (event: React.KeyboardEvent<HTMLAnchorElement>, index: number) => void;
+    setSelectedTab: (index: number) => void;
+}
+/**
+ * The NavigationTabList component is an internal component used inside the TabList component.
+ * It renders an unordered list with list items that contain anchor elements.
+ *
+ * Consumers can pass in a link component which is cloned and modified. This allows us to add
+ * DSIcon and NumberIndicator and other props.
+ * Additionally the link component can be a regular anchor element or a Link component from
+ * React Router/Next or any other routing framework.
+ */
+export declare const NavigationTabList: ({ tabs, tabRefs, scrollerClass, scrollerRef, selectedTabIndex, handleNavigationKeydown, setSelectedTab, }: NavigationTabListProps) => JSX.Element;
+export {};

package/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,38 @@
+import { Dispatch, HTMLAttributes, JSX, SetStateAction } from 'react';
+import { SelectedAriaAttributes } from '../../../types';
+import { NavigationTab } from '../../NavigationTabs/NavigationTabs';
+import { Tab } from '../Tabs';
+import { TabsAlignment } from '../Tabs.utils';
+import { TabListAriaAttributes } from './TabList.utils';
+export type TabListProps<IsNavigation extends boolean> = {
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<TabListAriaAttributes>;
+    selectedTabIndex: number;
+    setSelectedTabIndex: Dispatch<SetStateAction<number>>;
+    /** An array of Tab Objects containing the id, content, label, and other optional parameters.
+     * `{id: string; content: React.ReactNode; label: string; iconName?: IconName; numberIndicatorValue?: string;}[]`*/
+    tabs: IsNavigation extends true ? NavigationTab[] : Tab[];
+    /** Alignment of the Tabs.
+     * @default 'left'
+     */
+    alignment?: TabsAlignment;
+    /** Index of the tab to be selected when Tabs are rendered the first time.
+     * @default 0
+     * */
+    defaultSelectedTabIndex?: number;
+    /** Sets the TabList to navigation mode, using links instead of buttons */
+    isNavigation?: boolean;
+    /** Callback function called when the selected tab changes. */
+    onTabChange?: (selectedTabIndex: number) => void;
+} & HTMLAttributes<HTMLDivElement> & (IsNavigation extends false ? {
+    id: string;
+} : unknown);
+/**
+ *
+ * The TabList component is an internal component used in DSTabs and DSNavigationTabs.
+ * It dynamically renders either a div with role="tablist" or a nav element based on the isNavigation prop.
+ */
+export declare const TabList: <IsNavigation extends boolean>({ aria, id: tabListId, selectedTabIndex, setSelectedTabIndex, tabs, alignment, className, defaultSelectedTabIndex, isNavigation, onTabChange, ...rest }: TabListProps<IsNavigation>) => JSX.Element;

package/components/Tabs/TabList/TabList.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const SCROLL_MARGIN_INLINE = 48;
+export type TabListAriaAttributes = 'aria-label' | 'aria-labelledby';

package/components/Tabs/TabPane/TabPane.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, JSX } from 'react';
+export interface TabPaneProps {
+    id: string;
+    content: ReactNode;
+    index: number;
+    selectedTabIndex: number;
+    tabListId: string;
+    className?: string;
+}
+export declare const TabPane: ({ id, content, index, selectedTabIndex, tabListId, className, }: TabPaneProps) => JSX.Element;

package/components/Tabs/TabPane/TabPane.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const containsFocusableElement: (element: HTMLElement) => boolean;
+export declare const getTabButtonId: (tabListId: string, id: string) => string;
+export declare const getTabPaneId: (tabListId: string, id: string, index: number) => string;

package/components/Tabs/TabPane/TabPane.utils.test.d.ts

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