@stihl-design-system/components 1.0.0-RC.0

package/components/Combobox/Combobox.utils.d.ts

@@ -0,0 +1,57 @@
+import type { IconName } from '../../types';
+import type { ComboboxProps } from './Combobox';
+import type { GroupBase, OptionsOrGroups } from 'react-select';
+export type ComboboxVariant = 'single' | 'multi';
+type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
+/**
+ * Validates the given properties of the DSCombobox 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 DSCombobox properties to validate. This includes
+ *                          id and label.
+ */
+export declare const validateComboboxProps: ({ id, label, options, }: ValidationProps) => void;
+export declare const COMBOBOX_SIZE: readonly ["medium", "small"];
+export type ComboboxSize = (typeof COMBOBOX_SIZE)[number];
+export interface ComboboxOption {
+    label: string;
+    value: string | number;
+    leadingIconName?: IconName;
+    isDisabled?: boolean;
+}
+export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
+export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;
+export type ComboboxLanguage = 'de' | 'en';
+export type ComboboxAriaTranslations = typeof DS_COMBOBOX_TRANSLATIONS_EN;
+export declare const DS_COMBOBOX_TRANSLATIONS_EN: {
+    placeholder: string;
+    navigationGuidance: string;
+    selectGuidance: string;
+    exitGuidance: string;
+    tabGuidance: string;
+    searchGuidance: string;
+    inputGuidance: string;
+    selectOptionDisabled: string;
+    focusValue: string;
+    of: string;
+    disabled: string;
+    selected: string;
+    deselected: string;
+    focusSelectedMultiGuidance: string;
+    valueGuidance: string;
+    deleteGuidance: string;
+    clearAllOptions: string;
+    filterTermHint: string;
+    filterNoOptions: string;
+    option_one: string;
+    option_other: string;
+    result_one: string;
+    result_other: string;
+    resultsAvailable: string;
+};
+export declare const DS_COMBOBOX_TRANSLATIONS_DE: ComboboxAriaTranslations;
+export declare const DS_COMBOBOX_TRANSLATIONS: {
+    [key in ComboboxLanguage]: ComboboxAriaTranslations;
+};
+export {};

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

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

package/components/CustomReactSelect/CustomReactSelect.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { type GroupBase } from 'react-select';
+import type { BreakpointCustomizable, Optional } from '../../types';
+import { type ComboboxAriaTranslations, type ComboboxLanguage, type ComboboxOption, type ComboboxOptionsGroup, type ComboboxOptionsOrOptGroups, type ComboboxSize } from '../Combobox/Combobox.utils';
+import type { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
+import type { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
+type IncludedReactSelectKeys = 'className' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
+type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<Optional<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, 'inputValue'>, IncludedReactSelectKeys>;
+type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>;
+export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
+    /** Unique id for the DSCombobox */
+    id: string;
+    /** Label text displayed above the DSCombobox */
+    label: string;
+    /**
+     * Defines the options, can be a mixed array of options and option groups
+     *  `type ComboboxOption = {label: string; value: string | number; leadingIconName?: IconName; isDisabled?: boolean;}`
+     *  `type ComboboxOptionsGroup = {label: string; options: ComboboxOption[];}`
+     *  `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
+     * */
+    options: ComboboxOptionsOrOptGroups;
+    /** The value of autocomplete to use for the DSCombobox */
+    autoComplete?: string;
+    /** Value of the selected Option in **uncontrolled DSCombobox** component */
+    defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
+    /** Disables the DSCombobox, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the DSCombobox label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Marks the DSCombobox as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Allows selection of multiple options */
+    isMulti: boolean;
+    /** Sets language to use for the screen reader messages and "No Options found" message, if no translations object is provided */
+    lang?: ComboboxLanguage;
+    /** Indicates that the DSCombobox is required */
+    required?: boolean;
+    /** Size of the input */
+    size?: ComboboxSize;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Translations for the DSCombobox. Use our [customization page](/?path=/story/components-combobox-translations--documentation) for creating custom translations. */
+    translations?: ComboboxAriaTranslations;
+    /** Value of the DSCombobox */
+    value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
+    /** Callback function triggered when the selection of the DSCombobox changes */
+    onChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
+    /** Callback function triggered when the value of the DSCombobox input changes */
+    onInputChange?: (newValue: string) => void;
+}
+/**
+ * Internal customized react select component, which is in parts exposed to our consumers
+ * via the DSCombobox component
+ * */
+export declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
+export {};

package/components/CustomReactSelect/CustomReactSelect.utils.d.ts

@@ -0,0 +1,15 @@
+import type { AriaLiveMessages, GroupBase } from 'react-select';
+import type { ComboboxAriaTranslations } from '../Combobox/Combobox.utils';
+type ComboboxAriaTranslationKey = keyof ComboboxAriaTranslations;
+/**
+ * Translates a given key using specified translations and dynamic replacements of placeholders like {0} or {1}.
+ * Unmatched placeholders in the translation are removed.
+ *
+ * @param {ComboboxAriaTranslationKey} key - The key identifying the text to be translated.
+ * @param {ComboboxAriaTranslations} translations - Object containing translation mappings.
+ * @param {string[]} [replacements=[]] - Optional array of replacement strings for placeholders in the translation.
+ * @returns {string} The translated string with placeholders replaced by corresponding values in replacements array or removed if no match is found.
+ */
+export declare const translate: (key: ComboboxAriaTranslationKey, translations: ComboboxAriaTranslations, replacements?: string[]) => string;
+export declare const defaultAriaLiveMessages: (translations: ComboboxAriaTranslations) => AriaLiveMessages<unknown, boolean, GroupBase<unknown>>;
+export {};

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

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

package/components/CustomReactSelect/OptionCheckbox.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content displayed next to the checkbox */
+    label: string;
+    /** Controls whether the checkbox is checked. */
+    checked?: boolean;
+    /** Disables the checkbox, preventing user interaction */
+    disabled?: boolean;
+}
+/**
+ * A simplified visual representation of a checkbox.
+ */
+export declare const OptionCheckbox: ({ label, checked, className, disabled, }: CheckboxProps) => JSX.Element;

package/components/Fieldset/Fieldset.d.ts

@@ -0,0 +1,35 @@
+import { type FieldsetHTMLAttributes } from 'react';
+import { type Legend } from './Fieldset.utils';
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Child elements within the fieldset */
+    children: React.ReactNode;
+    /**
+     * The `legend` prop can either be a simple `string` or an object with specific properties.
+     * When provided as a string, it represents the legend text directly.
+     * When provided as an object, it allows for more detailed configuration, including:
+     * - `headingText: string` The text content for the legend.
+     * - `headingSize?: 'x-large' | 'large' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
+     *
+     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
+     */
+    legend: Legend;
+    /** Short descriptive text displayed beneath the legend */
+    description?: string | React.ReactNode;
+    /** Disables the fieldset, preventing user interaction */
+    disabled?: boolean;
+    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    id?: string;
+    /** Marks the fieldset as invalid, typically used for form validation */
+    invalid?: boolean;
+    /**
+     * Undocumented property for visually setting the Asterisk
+     */
+    required?: boolean;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+}
+/**
+ * The `DSFieldset` component is a versatile and accessible way to group related elements and labels in your forms.
+ * */
+export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;

package/components/Fieldset/Fieldset.test.d.ts

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

package/components/Fieldset/Fieldset.utils.d.ts

@@ -0,0 +1,10 @@
+import type { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
+import type { FieldsetProps } from './Fieldset';
+export type Legend = string | {
+    headingText: string;
+    headingSize?: HeadingSize;
+    headingTag?: HeadingTag;
+};
+type ValidationProps = Pick<FieldsetProps, 'description' | 'id' | 'legend' | 'systemFeedback'>;
+export declare const validateProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
+export {};

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ButtonProps } from '../Button/Button';
+export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
+    children: React.ReactNode;
+}
+/**
+ * FABs are used to highlight actions by laying over the content.
+ *
+ * Sizes:
+ * - medium (e.g. back-to-top)
+ * - small (e.g. menu drawer of the sidebar navigation)
+ * */
+export declare const DSFloatingActionButton: ({ aria, children, className, dataTrackingid, disabled, iconName, iconSource, loading, size, theme, onClick, ...rest }: FloatingActionButtonProps) => JSX.Element;

package/components/FloatingActionButton/FloatingActionButton.test.d.ts

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

package/components/Heading/Heading.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+import type { Theme } from '../../types';
+import type { HeadingSize, HeadingTag } from './Heading.utils';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Content within the heading */
+    children: React.ReactNode;
+    /** Size of the heading */
+    size?: HeadingSize;
+    /** Specifies the HTML tag to be used for the heading */
+    tag?: HeadingTag;
+    /** Defines the theme */
+    theme?: Theme;
+}
+/**
+ * The `DSHeading` component is used to specify heading styling and hierarchy in documents.
+ * It allows for consistent heading styles across different parts of your application.
+ * */
+export declare const DSHeading: ({ children, className, size, tag, theme, ...rest }: HeadingProps) => JSX.Element;

package/components/Heading/Heading.test.d.ts

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

package/components/Heading/Heading.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const HEADING_SIZE: readonly ["x-large", "large", "medium", "medium-uppercase", "small", "small-uppercase"];
+export type HeadingSize = typeof HEADING_SIZE[number];
+export declare const HEADING_TAG: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export type HeadingTag = typeof HEADING_TAG[number];

package/components/Icon/Icon.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLProps, type SVGProps } from 'react';
+import type { IconName, SelectedAriaAttributes, Theme } from '../../types';
+import { type IconAriaAttribute, type IconSize } from './Icon.utils';
+export interface IconProps {
+    /** ARIA attributes to enhance accessibility
+     * `{'aria-label'? string;}`
+     */
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
+    /** Name of the icon to display */
+    name?: IconName;
+    /** Size of the icon */
+    size?: IconSize;
+    /** URL or path for a custom icon */
+    source?: string;
+    /** Defines the theme */
+    theme?: Theme;
+}
+/**
+ * The STIHL Iconography ranges from content and feature icons to product or system icons.
+ * The STIHL Design System is using an SVG icon system to visually present an icon object.
+ * Icons are provided as assets and can be bundled into the application.
+ */
+export declare const DSIcon: ({ aria, className, name, size, source, theme, ...rest }: IconProps & (HTMLProps<HTMLImageElement> | SVGProps<SVGSVGElement>)) => JSX.Element;

package/components/Icon/Icon.test.d.ts

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

package/components/Icon/Icon.utils.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { IconName } from '../../types';
+export type IconAriaAttribute = 'aria-label';
+export declare const ICON_SIZE: readonly ["large", "medium", "small", "x-small"];
+export type IconSize = (typeof ICON_SIZE)[number];
+export declare const useDynamicSvgImport: (iconName: IconName) => {
+    isLoading: boolean;
+    SVGIcon: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }> | undefined;
+    setShouldLoad: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/components/Input/Input.d.ts

@@ -0,0 +1,54 @@
+import { type InputHTMLAttributes } from 'react';
+import type { BreakpointCustomizable, IconName } from '../../types';
+import { type IconProps } from '../Icon/Icon';
+import { type InputSize, type SupportedInputTypes } from './Input.utils';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Unique id for the input */
+    id: string;
+    /** Label text displayed above the input */
+    label: string;
+    /** Accessibility label for the action button or icon */
+    actionButtonLabel?: string;
+    /** Name of the icon used in the action button */
+    actionButtonIconName?: IconName;
+    /** Custom source URL for the action button icon */
+    actionButtonIconSource?: IconProps['source'];
+    /** Callback function triggered when the action button is clicked */
+    actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Disables the input, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the input label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Name of the leading icon */
+    leadingIconName?: IconName;
+    /** URL or path for a custom leading icon */
+    leadingIconSource?: IconProps['source'];
+    /** Marks the input as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Text displayed as a prefix inside the input, maximum 8 characters */
+    prefix?: string;
+    /** Enables the readonly state of the input */
+    readonly?: boolean;
+    /** Indicates that the input is required */
+    required?: boolean;
+    /** Text displayed as a suffix inside the input, maximum 5 characters */
+    suffix?: string;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Size of the input */
+    size?: InputSize;
+    /** Type of the input */
+    type?: SupportedInputTypes;
+}
+/**
+ * The `<DSInput />` component is a versatile input field that allows users to enter and edit text.
+ * It comes in two sizes (medium & small) and supports various customizations including an action button,
+ * a leading icon, prefix and suffix.
+ *
+ * Depending on the `type` prop it expects different input types.
+ */
+export declare const DSInput: ({ id, label, actionButtonLabel, actionButtonIconName, actionButtonIconSource, actionButtonOnClick, className, disabled, hint, hideLabel, invalid, leadingIconName, leadingIconSource, prefix, readonly, required, size, suffix, systemFeedback, type, ...rest }: InputProps) => JSX.Element;

package/components/Input/Input.test.d.ts

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

package/components/Input/Input.utils.d.ts

@@ -0,0 +1,59 @@
+import type { InputProps } from './Input';
+export declare const MAX_PREFIX_LENGTH = 8;
+export declare const MAX_SUFFIX_LENGTH = 5;
+export declare const INPUT_SIZE: readonly ["medium", "small"];
+export type InputSize = (typeof INPUT_SIZE)[number];
+export declare const SUPPORTED_INPUT_TYPES: readonly ["color", "date", "datetime-local", "email", "file", "month", "number", "range", "tel", "text", "time", "url"];
+export type SupportedInputTypes = (typeof SUPPORTED_INPUT_TYPES)[number];
+export declare const UNSUPPORTED_INPUT_TYPES: readonly ["week", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"];
+export type UnSupportedInputTypes = (typeof UNSUPPORTED_INPUT_TYPES)[number];
+type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonIconName' | 'actionButtonIconSource'>;
+/**
+ * Validates the given properties of the DSInput 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 DSInput properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonIconName, actionButtonIconSource, }: ValidationProps) => void;
+/**
+ * Validates the input type for the DSInput component and provides warnings for certain unsupported types.
+ *
+ * @param {SupportedInputTypes} type - The input type to validate.
+ * @throws {Error} Throws an error if the input type is not supported by the DSInput component.
+ */
+export declare const validateType: (type: SupportedInputTypes | UnSupportedInputTypes) => void;
+/**
+ * Checks if the current browser supports the 'showPicker' attribute for date/time input fields
+ * and is a compatible browser (Chrome, Chromium, Chrome on iOS, or Microsoft Edge).
+ *
+ * @returns {boolean} Returns `true` if 'showPicker' is supported in the current browser; otherwise, `false`.
+ */
+export declare const hasShowPickerSupport: () => boolean;
+/**
+ * Determines whether to show a custom calendar or time indicator based on browser support and specified flags.
+ *
+ * @param {boolean} isCalendar - Indicates whether to show the calendar.
+ * @param {boolean} isTime - Indicates whether to show the time indicator.
+ * @returns {boolean} Returns `true` if the browser supports the 'showPicker' attribute and
+ *                   either 'isCalendar' or 'isTime' is `true`, otherwise returns `false`.
+ */
+export declare const showCustomCalendarOrTimeIndicator: (isCalendar: boolean, isTime: boolean) => boolean;
+/**
+ * Checks if the given input type is related to date or calendar input.
+ *
+ * @param {SupportedInputTypes} type - The input type to check.
+ * @returns {boolean} Returns `true` if the input type is related to date or calendar input;
+ *                   otherwise, returns `false`.
+ */
+export declare const isCalendarInput: (type: SupportedInputTypes) => boolean;
+/**
+ * Checks if the given input type is related to time input.
+ *
+ * @param {SupportedInputTypes} type - The input type to check.
+ * @returns {boolean} Returns `true` if the input type is 'time';
+ *                   otherwise, returns `false`.
+ */
+export declare const isTimeInput: (type: SupportedInputTypes) => boolean;
+export {};

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

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

package/components/InputPassword/InputPassword.d.ts

@@ -0,0 +1,41 @@
+import { type InputHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+import type { InputSize } from '../Input/Input.utils';
+export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Unique id for the input */
+    id: string;
+    /** Label text displayed above the input */
+    label: string;
+    /** The value of autocomplete to use for the input */
+    autocomplete?: 'new-password' | 'current-password' | 'off';
+    /** Disables the input, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the input label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Marks the input as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Enables the readonly state of the input */
+    readonly?: boolean;
+    /** Indicates that the input is required */
+    required?: boolean;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Size of the input */
+    size?: InputSize;
+    /** The show password button text label (for assistive technologies) */
+    showPasswordText?: string;
+    /** The hide password button text label (for assistive technologies) */
+    hidePasswordText?: string;
+}
+/**
+ * The `<DSInputPassword />` component is an input field that allows users to enter and edit passwords.
+ * It comes in two sizes (medium & small) and supports various customizations including a label,
+ * a hint and a system feedback message.
+ *
+ * The user can toggle the visibility of the password by clicking on the action button.
+ */
+export declare const DSInputPassword: ({ id, label, autocomplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;

package/components/InputPassword/InputPassword.test.d.ts

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

package/components/InputPassword/InputPassword.utils.d.ts

@@ -0,0 +1,12 @@
+import type { InputPasswordProps } from './InputPassword';
+type ValidationProps = Pick<InputPasswordProps, 'id' | 'label'>;
+/**
+ * Validates the given properties of the DSInputPassword 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 DSInputPassword properties to validate. This includes
+ *                          id and label.
+ */
+export declare const validateInputPasswordProps: ({ id, label }: ValidationProps) => void;
+export {};

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

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

package/components/InputSearch/InputSearch.d.ts

@@ -0,0 +1,44 @@
+import { type InputHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+import type { InputSize } from '../Input/Input.utils';
+export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Unique id for the input */
+    id: string;
+    /** Label text displayed above the input */
+    label: string;
+    /** Accessibility label for the clear button */
+    clearButtonLabel?: string;
+    /** Disables the input, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the input label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Marks the input as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Enables the readonly state of the input */
+    readonly?: boolean;
+    /** Indicates that the input is required */
+    required?: boolean;
+    /** Accessibility label for the submit button */
+    submitButtonLabel?: string;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Size of the input */
+    size?: InputSize;
+    /** Value of the input */
+    value?: string;
+    /** Callback function triggered when the submit button is clicked */
+    submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * The `<DSInputSearch />` component can be used as a dedicated search field input.
+ * It comes in two sizes (medium & small) and supports various customizations including a label,
+ * a hint and a system feedback message.
+ *
+ * A search button is always available on the right to submit the search request.
+ * Additionally when the input is filled, a button to clear the input value becomes visible.
+ */
+export declare const DSInputSearch: ({ id, label, className, clearButtonLabel, disabled, hint, hideLabel, invalid, readonly, required, size, submitButtonLabel, systemFeedback, value, submitButtonOnClick, onChange, ...rest }: InputSearchProps) => JSX.Element;

package/components/InputSearch/InputSearch.test.d.ts

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

package/components/InputSearch/InputSearch.utils.d.ts

@@ -0,0 +1,23 @@
+import type { InputSearchProps } from './InputSearch';
+type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
+/**
+ * Validates the given properties of the DSInputSearch 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 DSInputSearch properties to validate. This includes
+ *                          id and label.
+ */
+export declare const validateInputSearchProps: ({ id, label }: ValidationProps) => void;
+/**
+ * Determines whether the specified HTMLElement is within a form element.
+ *
+ * This function checks if the given HTMLElement (`host`) is a descendant of
+ * a `<form>` element in the DOM tree. It utilizes the `getClosestHTMLElement`
+ * function to find the closest ancestor that matches the 'form' selector.
+ *
+ * @param {HTMLElement} host - The HTMLElement to check for being within a form.
+ * @returns {boolean} `true` if the `host` element is within a `<form>` element; otherwise, `false`.
+ */
+export declare const isWithinForm: (host: HTMLElement) => boolean;
+export {};

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

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

package/components/InputStepper/InputStepper.d.ts

@@ -0,0 +1,52 @@
+import { type InputHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+import { type InputSize } from '../Input/Input.utils';
+export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Unique id for the input */
+    id: string;
+    /** Label text displayed above the input */
+    label: string;
+    /** Text used for assistive technologies when the value changes */
+    announcementText?: string;
+    /** Disables the input, preventing user interaction */
+    disabled?: boolean;
+    /** Accessibility label for the decrease button */
+    decreaseAmountButtonLabel?: string;
+    /** Hides the input label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** 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 */
+    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 */
+    prefix?: string;
+    /** Enables the readonly state of the input */
+    readonly?: boolean;
+    /** Indicates that the input is required */
+    required?: boolean;
+    /** The interval between legal numbers of the input */
+    step?: number;
+    /** Text displayed as a suffix inside the input, maximum 5 characters */
+    suffix?: string;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Size of the input */
+    size?: InputSize;
+    /** Value of the input */
+    value?: string;
+}
+/**
+ * The `<DSInputStepper />` component is a versatile input field that allows users to easily enter a value and decrease or increase it as needed.
+ * 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.
+ */
+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;

package/components/InputStepper/InputStepper.test.d.ts

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

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

@@ -0,0 +1,12 @@
+import type { InputStepperProps } from './InputStepper';
+type ValidationProps = Pick<InputStepperProps, 'id' | 'label' | 'prefix' | 'suffix'>;
+/**
+ * Validates the given properties of the DSInputStepper 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 DSInputStepper properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateInputStepperProps: ({ id, label, prefix, suffix, }: ValidationProps) => void;
+export {};

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

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