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

package/components/Combobox/Combobox.d.ts

@@ -1,18 +1,24 @@
-/// <reference types="react" />
-import { type CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
+import { CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
+
 type CommonComboboxProps = {
-    /** Opens the dropdown on click or focus */
+    /** Opens the dropdown on click or focus.
+     * @default false
+     */
     dropdownOnFocus?: boolean;
 };
 export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant?: 'single';
 }) | (CustomReactSelectProps<true> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant: 'multi';
 }), 'isMulti' | 'openMenuOnClick' | 'openMenuOnFocus'> & CommonComboboxProps;
 /**
  * The DSCombobox component offers an autocomplete-style interface, allowing for efficient and intuitive selection from a dynamic list of options, suitable for both single and multi-select purposes.
  * */
-export declare const DSCombobox: ({ id, label, disabled, dropdownOnFocus, hideLabel, invalid, lang, required, variant, ...rest }: ComboboxProps) => JSX.Element;
+export declare const DSCombobox: ({ id, label, className, disabled, dropdownOnFocus, hideLabel, invalid, lang, required, variant, ...rest }: ComboboxProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
-import type { IconName } from '../../types';
-import type { ComboboxProps } from './Combobox';
-import type { GroupBase, OptionsOrGroups } from 'react-select';
+import { IconName } from '../../types';
+import { ComboboxProps } from './Combobox';
+import { GroupBase, OptionsOrGroups } from 'react-select';
+
 export type ComboboxVariant = 'single' | 'multi';
 type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
 /**

package/components/CustomReactSelect/CustomReactSelect.d.ts

@@ -1,60 +1,73 @@
-/// <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';
+import { GroupBase } from 'react-select';
+import { BreakpointCustomizable, Optional } from '../../types';
+import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox/Combobox.utils';
+import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
+import { 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 */
+    /** Unique id for the DSCombobox. */
     id: string;
-    /** Label text displayed above the DSCombobox */
+    /** Label text displayed above the DSCombobox. */
     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 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 */
+    /** The value of autocomplete to use for the DSCombobox. */
     autoComplete?: string;
-    /** Value of the selected Option in **uncontrolled DSCombobox** component */
+    /** Value of the selected Option in **uncontrolled DSCombobox** component. */
     defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Disables the DSCombobox, preventing user interaction */
+    /** Disables the DSCombobox, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the DSCombobox label, can be responsive
+    /** Hides the DSCombobox 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 DSCombobox as invalid, typically used for form validation */
+    /** Marks the DSCombobox as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Allows selection of multiple options */
+    /** Allows selection of multiple options.
+     * @default false
+     */
     isMulti: boolean;
-    /** Sets language to use for the screen reader messages and "No Options found" message, if no translations object is provided */
+    /** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided.
+     * @default 'en'
+     */
     lang?: ComboboxLanguage;
-    /** Indicates that the DSCombobox is required */
+    /** Indicates that the DSCombobox is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the input */
+    /** Size of the Combobox.
+     * @default 'medium'
+     */
     size?: ComboboxSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** 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 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 */
+    /** Callback function called when the selection of the DSCombobox changes. */
+    onValueChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
+    /** Callback function called 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
+ * 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 declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onValueChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
-import type { AriaLiveMessages, GroupBase } from 'react-select';
-import type { ComboboxAriaTranslations } from '../Combobox/Combobox.utils';
+import { AriaLiveMessages, GroupBase } from 'react-select';
+import { 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}.

package/components/CustomReactSelect/OptionCheckbox.d.ts

@@ -1,4 +1,5 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
+
 export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
     /** Content displayed next to the checkbox */
     label: string;

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,35 @@
+import { DialogHTMLAttributes } from 'react';
+
+export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Dialog. */
+    children: React.ReactNode;
+    /** Label for the close button. */
+    closeButtonLabel?: string;
+    /** Disables closing the Dialog by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Dialog's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Dialog's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Dialog is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Callback function called when the Dialog is closed. */
+    onClose?: () => void;
+}
+/**
+ * A component that renders a modal dialog, which can be used for displaying
+ * important messages, forms, or confirmations.
+ *
+ * <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 DSDialog: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;

package/components/Dialog/Dialog.test.d.ts

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

package/components/Dialog/Dialog.utils.d.ts

@@ -0,0 +1,12 @@
+import { DialogProps } from './Dialog';
+
+type ValidationProps = Pick<DialogProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDialog 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 DSDialog properties to validate.
+ */
+export declare const validateDialogProps: ({ tabIndex }: ValidationProps) => void;
+export {};

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

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

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,40 @@
+import { DialogHTMLAttributes } from 'react';
+import { DrawerPosition } from './Drawer.utils';
+
+export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Drawer. */
+    children: React.ReactNode;
+    /** Label for the close button.
+     * @default 'Close modal'
+     */
+    closeButtonLabel?: string;
+    /** Disables closing the Drawer by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Drawer's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Drawer's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Drawer is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Specifies the final position of the Drawer after opening.
+     * @default 'start'
+     */
+    position?: DrawerPosition;
+    /** Callback function called when the Drawer is closed. */
+    onClose?: () => void;
+}
+/**
+ * A component that renders a modal drawer, which can be used for navigation,
+ * displaying additional information, or providing extra controls.
+ */
+export declare const DSDrawer: ({ children, className, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;

package/components/Drawer/Drawer.test.d.ts

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

package/components/Drawer/Drawer.utils.d.ts

@@ -0,0 +1,14 @@
+import { DrawerProps } from './Drawer';
+
+export declare const DRAWER_POSITION: readonly ["start", "end"];
+export type DrawerPosition = (typeof DRAWER_POSITION)[number];
+type ValidationProps = Pick<DrawerProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDrawer 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 DSDrawer properties to validate.
+ */
+export declare const validateDrawerProps: ({ tabIndex }: ValidationProps) => void;
+export {};

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

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

package/components/Fieldset/Fieldset.d.ts

@@ -1,32 +1,38 @@
-import { type FieldsetHTMLAttributes } from 'react';
-import { type Legend } from './Fieldset.utils';
+import { FieldsetHTMLAttributes } from 'react';
+import { Legend } from './Fieldset.utils';
+
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** Child elements within the fieldset */
+    /** 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'`
+     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | '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 */
+    /** Short descriptive text displayed beneath the legend. */
     description?: string | React.ReactNode;
-    /** Disables the fieldset, preventing user interaction */
+    /** Disables the fieldset, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** 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 */
+    /** Marks the fieldset as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /**
-     * Undocumented property for visually setting the Asterisk
+     * Undocumented property for visually setting the Asterisk.
+     * @default false
      */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**

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

@@ -1,10 +1,11 @@
-import type { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
-import type { FieldsetProps } from './Fieldset';
+import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
+import { 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 declare const validateFieldsetProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-import type { ButtonProps } from '../Button/Button';
+import { IconName } from '../../types';
+import { ButtonProps } from '../Button/Button';
+
 export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
     children: React.ReactNode;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
  * FABs are used to highlight actions by laying over the content.

package/components/Heading/Heading.d.ts

@@ -1,14 +1,21 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { HeadingSize, HeadingTag } from './Heading.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { HeadingSize, HeadingTag } from './Heading.utils';
+
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-    /** Content within the heading */
+    /** Content within the heading. */
     children: React.ReactNode;
-    /** Size of the heading */
+    /** Size of the heading.
+     * @default 'medium'
+     */
     size?: HeadingSize;
-    /** Specifies the HTML tag to be used for the heading */
+    /** Specifies the HTML tag to be used for the heading.
+     * @default 'h2'
+     */
     tag?: HeadingTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**

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

@@ -1,4 +1,4 @@
-export declare const HEADING_SIZE: readonly ["x-large", "large", "medium", "medium-uppercase", "small", "small-uppercase"];
+export declare const HEADING_SIZE: readonly ["x-large", "x-large-uppercase", "large", "large-uppercase", "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

@@ -1,18 +1,25 @@
-import { type HTMLProps, type SVGProps } from 'react';
-import type { IconName, SelectedAriaAttributes, Theme } from '../../types';
-import { type IconAriaAttribute, type IconSize } from './Icon.utils';
+import { HTMLProps, SVGProps } from 'react';
+import { IconName, SelectedAriaAttributes, Theme } from '../../types';
+import { IconAriaAttribute, IconSize } from './Icon.utils';
+
 export interface IconProps {
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
-    /** Name of the icon to display */
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
     name?: IconName;
-    /** Size of the icon */
+    /** Size of the icon.
+     * @default 'large'
+     */
     size?: IconSize;
-    /** URL or path for a custom icon */
+    /** URL or path for a custom icon. */
     source?: string;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**

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

@@ -1,12 +1,10 @@
-/// <reference types="react" />
-import type { IconName } from '../../types';
+import { 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>>;
+    SVGIcon: string | undefined;
+    setShouldLoad: import('react').Dispatch<import('react').SetStateAction<boolean>>;
 };

package/components/Input/Input.d.ts

@@ -1,47 +1,61 @@
-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';
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable, IconName } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { InputSize, SupportedInputTypes } from './Input.utils';
+
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** Unique id for the input */
+    /** Unique id for the input. */
     id: string;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** Accessibility label for the action button or icon */
+    /** Accessibility label for the action button or icon. */
     actionButtonLabel?: string;
-    /** Name of the icon used in the action button */
+    /** Name of the icon used in the action button. */
     actionButtonIconName?: IconName;
-    /** Custom source URL for the action button icon */
+    /** Custom source URL for the action button icon. */
     actionButtonIconSource?: IconProps['source'];
-    /** Callback function triggered when the action button is clicked */
+    /** Callback function called when the action button is clicked. */
     actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the input label, can be responsive
+    /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Name of the leading icon */
+    /** Name of the leading icon. */
     leadingIconName?: IconName;
-    /** URL or path for a custom leading icon */
+    /** URL or path for a custom leading icon. */
     leadingIconSource?: IconProps['source'];
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Text displayed as a prefix inside the input, maximum 8 characters */
+    /** Text displayed as a prefix inside the input, maximum 8 characters. */
     prefix?: string;
-    /** Enables the readonly state of the input */
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** Text displayed as a suffix inside the input, maximum 5 characters */
+    /** Text displayed as a suffix inside the input, maximum 5 characters. */
     suffix?: string;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** Type of the input */
+    /** Type of the input.
+     * @default 'text'
+     */
     type?: SupportedInputTypes;
 }
 /**

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

@@ -1,4 +1,5 @@
-import type { InputProps } from './Input';
+import { 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"];

package/components/InputPassword/InputPassword.d.ts

@@ -1,34 +1,52 @@
-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 */
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { InputSize } from '../Input/Input.utils';
+
+export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
+    /** Unique id for the input. */
     id: string;
-    /** Label text displayed above the input */
+    /** Label text displayed above the input. */
     label: string;
-    /** The value of autocomplete to use for the input */
+    /** The value of autocomplete to use for the input.
+     * @default 'new-password'
+     */
     autocomplete?: 'new-password' | 'current-password' | 'off';
-    /** Disables the input, preventing user interaction */
+    /** Disables the input, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the input label, can be responsive
+    /** Hides the input label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the input as invalid, typically used for form validation */
+    /** Marks the input as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Enables the readonly state of the input */
+    /** Enables the readonly state of the input.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the input is required */
+    /** Indicates that the input is required.
+     * @default false
+     */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the input */
+    /** Size of the input.
+     * @default 'medium'
+     */
     size?: InputSize;
-    /** The show password button text label (for assistive technologies) */
+    /** The show password button text label (for assistive technologies).
+     * @default 'Show password'
+     */
     showPasswordText?: string;
-    /** The hide password button text label (for assistive technologies) */
+    /** The hide password button text label (for assistive technologies).
+     * @default 'Hide password'
+     */
     hidePasswordText?: string;
 }
 /**

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

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