@progress/kendo-react-inputs 10.2.0-develop.1 → 10.2.0-develop.11

package/index.d.mts

@@ -16,7 +16,7 @@ import { HTMLAttributes } from 'react';
 import { IconHandle } from '@progress/kendo-react-common';
 import { IconProps } from '@progress/kendo-react-common';
 import { InputsClassStructure } from '@progress/kendo-react-common';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { PopupAnimation } from '@progress/kendo-react-popup';
 import * as React_2 from 'react';
@@ -77,6 +77,11 @@ export declare interface CheckboxProps extends ToggleBaseProps, FormComponentPro
     /**
      * Sets the checked state of the Checkbox.
      * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
+     *
+     * @example
+     * ```jsx
+     * <Checkbox checked={true} />
+     * ```
      */
     checked?: boolean | null;
     /**
@@ -153,10 +158,20 @@ export declare interface CheckboxProps extends ToggleBaseProps, FormComponentPro
     ariaLabelledBy?: string;
     /**
      * Sets the label of the Checkbox component ([see example]({% slug labels_checkbox %})).
+     *
+     * @example
+     * ```jsx
+     * <Checkbox label="Accept Terms" />
+     * ```
      */
     label?: React.ReactNode;
     /**
      * Sets the label position of the Checkbox component ([see example]({% slug labels_checkbox %})).
+     *
+     * @example
+     * ```jsx
+     * <Checkbox labelPlacement="before" />
+     * ```
      */
     labelPlacement?: 'before' | 'after';
     /**
@@ -261,6 +276,11 @@ export declare interface ColorGradientProps {
      * Sets the background color that will be compared to the selected value.
      * The tool will calculate the contrast ratio between two colors.
      * Currently, only the RGBA format is supported.
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient backgroundColor="#ffffff" />
+     * ```
      */
     backgroundColor?: string;
     /**
@@ -292,6 +312,11 @@ export declare interface ColorGradientProps {
      * Sets the default input format in the gradient input editor.
      *
      * @default 'rgb'
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient format="hex" />
+     * ```
      */
     format?: 'rgba' | 'rgb' | 'hex';
     /**
@@ -318,6 +343,11 @@ export declare interface ColorGradientProps {
     isInsidePopup?: boolean;
     /**
      * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ColorGradient opacity={false} />
+     * ```
      */
     opacity?: boolean;
     /**
@@ -422,16 +452,17 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
     /**
      * @hidden
      */
-    wrapperRef: React_2.RefObject<HTMLDivElement>;
+    wrapperRef: React_2.RefObject<HTMLDivElement | null>;
     /**
      * @hidden
      */
-    hsvGradientRef: React_2.RefObject<HTMLDivElement>;
+    hsvGradientRef: React_2.RefObject<HTMLDivElement | null>;
     private gradientWrapper;
     private alphaSlider;
     private navigation?;
     private hsvNavigation?;
     private readonly showLicenseWatermark;
+    private resizeObserver;
     constructor(props: ColorGradientProps);
     /**
      * @hidden
@@ -497,7 +528,7 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
     /**
      * @hidden
      */
-    renderRectangleDragHandle(): JSX_2.Element;
+    renderRectangleDragHandle(): JSX.Element;
     /**
      * @hidden
      */
@@ -538,11 +569,11 @@ export declare class ColorGradientWithoutContext extends React_2.Component<Color
     /**
      * @hidden
      */
-    getGradientRectMetrics(): ClientRect;
+    getGradientRectMetrics(): DOMRect;
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private onKeyDown;
 }
 
@@ -553,7 +584,7 @@ export declare class ColorInput extends React_2.Component<ColorInputProps, {
     inputMode: string;
 }> {
     constructor(props: ColorInputProps);
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;
     private onRgbaBChange;
@@ -627,16 +658,31 @@ export declare interface ColorPaletteProps {
      * The supported values are:
      * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
      * * A string array.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette palette={['#ff0000', '#00ff00', '#0000ff']} />
+     * ```
      */
     palette?: string[] | string;
     /**
      * Specifies the number of columns that will be displayed.
      * Defaults to `10`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette columns={5} />
+     * ```
      */
     columns?: number;
     /**
      * Specifies the size of a color cell in px.
      * Defaults to `24`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPalette tileSize={30} />
+     * ```
      */
     tileSize?: number | TileSize;
     /**
@@ -761,7 +807,7 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
     /**
      * @hidden
      */
-    wrapperRef: React_2.RefObject<HTMLDivElement>;
+    wrapperRef: React_2.RefObject<HTMLDivElement | null>;
     private paletteService;
     private get guid();
     constructor(props: ColorPaletteProps);
@@ -772,7 +818,7 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
     /**
      * @hidden
      */
-    render(): "" | JSX_2.Element;
+    render(): "" | JSX.Element;
     /**
      * @hidden
      */
@@ -972,10 +1018,20 @@ export declare interface ColorPickerProps {
     /**
      * The default value of the ColorPicker
      * ([see example]({% slug default_value_colorpicker %})).
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker defaultValue="#ff0000" />
+     * ```
      */
     defaultValue?: string;
     /**
      * Specifies the value of the ColorPicker. Currently, only the RGBA format is supported.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker value="rgba(255, 0, 0, 1)" />
+     * ```
      */
     value?: string;
     /**
@@ -988,6 +1044,11 @@ export declare interface ColorPickerProps {
     /**
      * Sets the disabled state of the ColorPicker
      * ([see example]({% slug disabled_colorpicker %})).
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
@@ -1100,9 +1161,14 @@ export declare interface ColorPickerProps {
      * - `small`
      * - `medium`
      * - `large`
-     * - `null`&mdash;This option removes the the built-in size styles of the ColorPicker. Allows for custom `padding`.
+     * - `null`&mdash;This option removes the built-in size styles of the ColorPicker. Allows for custom `padding`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -1743,14 +1809,29 @@ export declare interface MaskedTextBoxHandle extends Pick<MaskedTextBoxWithoutCo
 export declare interface MaskedTextBoxProps extends FormComponentProps {
     /**
      * Sets a class of the MaskedTextBox DOM element.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets additional CSS styles to the MaskedTextBox DOM element.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox style={{ color: 'red' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Specifies the value of the MaskedTextBox.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox value="123-45-6789" />
+     * ```
      */
     value?: string;
     /**
@@ -1759,6 +1840,11 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     defaultValue?: string;
     /**
      * Specifies the input placeholder.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox placeholder="Enter text here" />
+     * ```
      */
     placeholder?: string;
     /**
@@ -1767,6 +1853,11 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     title?: string;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
@@ -1779,10 +1870,20 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     accessKey?: string;
     /**
      * Specifies the width of the MaskedTextBox.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox width="200px" />
+     * ```
      */
     width?: number | string;
     /**
      * Determines whether the MaskedTextBox is disabled.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
@@ -1832,6 +1933,11 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     maskValidation?: boolean;
     /**
      * Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox mask="(999) 000-0000" />
+     * ```
      */
     mask?: string;
     /**
@@ -1849,6 +1955,11 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     };
     /**
      * Determines the event handler that will be fired when the user edits the value.
+     *
+     * @example
+     * ```jsx
+     * <MaskedTextBox onChange={(e) => console.log(e.value)} />
+     * ```
      */
     onChange?: (event: MaskedTextBoxChangeEvent) => void;
     /**
@@ -2074,7 +2185,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private pasteHandler;
     private onChangeHandler;
     private focusHandler;
@@ -2627,71 +2738,151 @@ export declare interface RadioGroupProps {
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup ariaDescribedBy="error-message" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup ariaLabelledBy="group-label" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
      * Specifies a list of CSS classes that will be added to the RadioGroup element.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Specifies the value of the `id` attribute that will be added to the RadioGroup element.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup id="radio-group" />
+     * ```
      */
     id?: string;
     /**
      * The collection of radio buttons that will be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})).
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup data={[{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]} />
+     * ```
      */
     data?: Array<RadioButtonProps>;
     /**
      * Sets the default checked state of a radio button when used in uncontrolled mode ([see example]({% slug overview_radiobutton %})).
      * The `checked` property is passed to the underlying `input` element.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup defaultValue={1} />
+     * ```
      */
     defaultValue?: any;
     /**
      * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Disable all radio buttons ([see example]({% slug disabled_radiobutton %})).
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Overrides the default component responsible for visualizing a single item.
      *
      * The default element is `li` with a [RadioButton]({% slug api_inputs_radiobutton %}) as `children`.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup item={(props) => <li>{props.label}</li>} />
+     * ```
      */
     item?: React.ComponentType<HTMLAttributes<HTMLLIElement>>;
     /**
      * Sets the label position of the radio buttons.
      * Accepts two options: `before` or `after`. Defaults to `after`.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup labelPlacement="before" />
+     * ```
      */
     labelPlacement?: string;
     /**
      * Specifies the radio group layout.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup layout="horizontal" />
+     * ```
      */
     layout?: 'horizontal' | 'vertical';
     /**
      * Specifies the `name` property of the `input` DOM elements.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup name="options" />
+     * ```
      */
     name?: string;
     /**
      * The event handler that will be fired when the changes the selected value.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: RadioGroupChangeEvent) => void;
     /**
      * The event handler that will be fired when Radio button is focused.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup onFocus={(event) => console.log('Focused')} />
+     * ```
      */
     onFocus?: (event: RadioGroupFocusEvent) => void;
     /**
      * Sets additional CSS styles to the radio group.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup style={{ margin: '10px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the default checked state of a radio button when used in controlled mode ([see example]({% slug controlled_radiogroup %})).
      * The `checked` property is passed to the underlying `input` element.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup value={1} />
+     * ```
      */
     value?: string | number | null;
     /**
@@ -2699,6 +2890,11 @@ export declare interface RadioGroupProps {
      * If `valid` is set, the `required` property will be ignored.
      *
      * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     *
+     * @example
+     * ```jsx
+     * <RadioGroup valid={false} />
+     * ```
      */
     valid?: boolean;
 }
@@ -3167,115 +3363,258 @@ export declare interface RatingMouseEvent {
 export declare interface RatingProps extends FormComponentProps {
     /**
      * Sets the `id` property of the top div element of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating id="rating-component" value={3} />
+     * ```
      */
     id?: string;
     /**
-     * Sets additional classes to the Rating.
+     * Adds custom CSS classes to the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating className="custom-class" value={4} />
+     * ```
      */
     className?: string;
     /**
      * Sets the `tabIndex` attribute.
+     *
+     * @example
+     * ```jsx
+     * <Rating tabIndex={0} value={2} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Sets additional CSS styles to the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating style={{ margin: '10px' }} value={5} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Determines the children nodes.
+     *
+     * @example
+     * ```jsx
+     * <Rating>
+     *   <span>Custom Child</span>
+     * </Rating>
+     * ```
      */
     children?: React_2.ReactNode;
     /**
      * Represents the rendered Rating item.
+     *
+     * @example
+     * ```jsx
+     * <Rating item={(props) => <div>{props.value}</div>} />
+     * ```
      */
     item?: React_2.ComponentType<RatingItemProps>;
     /**
-     * Sets the current value of the Rating, used in controlled mode. [See example]({% slug item_customization_ratingitem %})
+     * Sets the current value of the Rating, used in controlled mode.
+     *
+     * @example
+     * ```jsx
+     * <Rating value={3} />
+     * ```
      */
     value?: number;
     /**
-     * Sets the default value of the Rating, used in uncontrolled mode. [See example]({% slug controlled_rating %})
+     * Sets the default value of the Rating, used in uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Rating defaultValue={2} />
+     * ```
      */
     defaultValue?: number;
     /**
-     * Sets the min possible icon value or star value in the main use-case.
+     * Sets the minimum possible value of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating min={1} max={10} />
+     * ```
      */
     min?: number;
     /**
-     * Sets the max possible icon value or star value in the main use-case.
+     * Sets the maximum possible value of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating max={10} />
+     * ```
      */
     max?: number;
     /**
-     * Sets the step value between the min and max value.
+     * Sets the step value between the minimum and maximum values.
+     *
+     * @example
+     * ```jsx
+     * <Rating step={0.5} />
+     * ```
      */
     step?: number;
     /**
-     * Determines the Rating direction `ltr` - by default, or `rtl`.
+     * Specifies the direction of the Rating (`ltr` or `rtl`).
+     *
+     * @example
+     * ```jsx
+     * <Rating dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * Determines if the Rating has a label and is it a custom one.
+     * Sets a custom label for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating label="Rating Label" />
+     * ```
      */
     label?: string;
     /**
-     * Sets the `readonly` mode of the Rating, if it is set to `true`. [See example]({% slug label_rating %})
+     * Sets the `readonly` mode of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating readonly={true} value={4} />
+     * ```
      */
     readonly?: boolean;
     /**
-     * Sets the `disabled` mode of the Rating, if it is set to `true`. [See example]({% slug readonly_rating %})
+     * Disables the Rating when set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Rating disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
-     * Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
+     * Sets a custom icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating icon="star" />
+     * ```
      */
     icon?: string;
     /**
-     * Sets custom Rating SVG icon.
+     * Sets a custom SVG icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Rating svgIcon={gearIcon} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
-     * Sets custom Rating SVG icon.
+     * Sets a custom outline SVG icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating svgIconOutline={customOutlineSvgIcon} />
+     * ```
      */
     svgIconOutline?: SVGIcon;
     /**
-     * Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
+     * Determines the selection mode of the Rating (`continues` or `single`).
+     *
+     * @example
+     * ```jsx
+     * <Rating selection="single" />
+     * ```
      */
     selection?: 'continues' | 'single';
     /**
-     * Determines the precision of the Rating. By default set to `item`. [See example]({% slug selection_rating %})
+     * Determines the precision of the Rating (`item` or `half`).
+     *
+     * @example
+     * ```jsx
+     * <Rating precision="half" />
+     * ```
      */
     precision?: 'half' | 'item';
     /**
-     * Determines if value represents half icon -> true, or not -> false. [See example]({% slug precision_rating %})
+     * Determines if the value represents a half icon (`true`) or not (`false`).
+     *
+     * @example
+     * ```jsx
+     * <Rating half={true} />
+     * ```
      */
     half?: boolean;
     /**
-     * Triggered after value change. Gets outside access to the target element, the new value and the event type.
+     * Fires when the value of the Rating changes.
+     *
+     * @example
+     * ```jsx
+     * <Rating onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: RatingChangeEvent) => void;
     /**
-     * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+     * Fires when the Rating is clicked.
+     *
+     * @example
+     * ```jsx
+     * <Rating onClick={(event) => console.log(event.value)} />
+     * ```
      */
     onClick?: (event: RatingItemMouseEvent) => void;
     /**
-     * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+     * Fires when a key is pressed while the Rating is focused.
+     *
+     * @example
+     * ```jsx
+     * <Rating onKeyDown={(event) => console.log(event.value)} />
+     * ```
      */
     onKeyDown?: (event: RatingKeyboardEvent) => void;
     /**
-     * Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+     * Fires when the Rating is focused.
+     *
+     * @example
+     * ```jsx
+     * <Rating onFocus={(event) => console.log('Focused')} />
+     * ```
      */
     onFocus?: (event: RatingItemFocusEvent) => void;
     /**
-     * Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+     * Fires when the Rating loses focus.
+     *
+     * @example
+     * ```jsx
+     * <Rating onBlur={(event) => console.log('Blurred')} />
+     * ```
      */
     onBlur?: (event: RatingItemFocusEvent) => void;
     /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Rating ariaDescribedBy="description-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Rating ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
 }
@@ -3394,132 +3733,201 @@ export declare interface SignatureOpenEvent extends BaseEvent<SignatureHandle> {
  */
 export declare interface SignatureProps extends FormComponentProps {
     /**
-     * Sets a class of the Signature DOM element.
+     * Adds custom CSS classes to the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature className="custom-class" />
+     * ```
      */
     className?: string;
     /**
-     * Specifies the value of the Signature.
+     * Specifies the value of the Signature as a Data URL.
      *
-     * The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
+     * @example
+     * ```jsx
+     * <Signature value="data:image/png;base64,..." />
+     * ```
      */
     value?: string;
     /**
      * Specifies the width of the Signature in pixels.
+     *
+     * @example
+     * ```jsx
+     * <Signature width={500} />
+     * ```
      */
     width?: number;
     /**
      * Specifies the height of the Signature in pixels.
+     *
+     * @example
+     * ```jsx
+     * <Signature height={300} />
+     * ```
      */
     height?: number;
     /**
-     * Sets the `tabIndex` property of the Signature.
+     * Specifies the `tabIndex` of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
-     * Sets the `id` of the Signature DOM element.
+     * Specifies the `id` of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature id="signature-component" />
+     * ```
      */
     id?: string;
     /**
      * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Specifies the name of the Signature input.
+     *
+     * @example
+     * ```jsx
+     * <Signature name="signature" />
+     * ```
      */
     name?: string;
     /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaDescribedBy="description-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
-     * The accessible label of the component.
+     * Specifies the accessible label of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaLabel="Signature field" />
+     * ```
      */
     ariaLabel?: string;
     /**
-     * Determines whether the Signature is in its read-only state.
+     * Sets the Signature to read-only mode.
+     *
+     * @example
+     * ```jsx
+     * <Signature readOnly={true} />
+     * ```
      */
     readOnly?: boolean;
     /**
-     * Determines whether the Signature is in its disabled state.
+     * Disables the Signature when set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Signature disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
-     * Configures the `size` of the Signature.
+     * Configures the size of the Signature.
      *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
+     * @example
+     * ```jsx
+     * <Signature size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
-     * Configures the `roundness` of the Signature.
+     * Configures the roundness of the Signature.
      *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a rounded `className`.
-     *
-     * @default `medium`
+     * @example
+     * ```jsx
+     * <Signature rounded="medium" />
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large';
     /**
-     * Configures the `fillMode` of the Signature.
+     * Configures the fill mode of the Signature.
      *
-     * The available options are:
-     * - solid
-     * - outline
-     * - flat
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
+     * @example
+     * ```jsx
+     * <Signature fillMode="solid" />
+     * ```
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
     /**
-     * The stroke color of the signature.
-     *
-     * Accepts CSS color names and hex values.
+     * Specifies the stroke color of the Signature.
      *
-     * The default value is determined by the theme `$kendo-input-text` variable.
+     * @example
+     * ```jsx
+     * <Signature color="blue" />
+     * ```
      */
     color?: string;
     /**
-     * The background color of the signature.
+     * Specifies the background color of the Signature.
      *
-     * Accepts CSS color names and hex values.
-     *
-     * The default value is determined by the theme `$kendo-input-bg` variable.
+     * @example
+     * ```jsx
+     * <Signature backgroundColor="lightgray" />
+     * ```
      */
     backgroundColor?: string;
     /**
-     * The stroke width of the signature.
+     * Specifies the stroke width of the Signature.
      *
-     * @default 1
+     * @example
+     * ```jsx
+     * <Signature strokeWidth={2} />
+     * ```
      */
     strokeWidth?: number;
     /**
-     * A flag indicating whether to smooth out signature lines.
+     * Enables smoothing of the signature lines.
      *
-     * @default false
+     * @example
+     * ```jsx
+     * <Signature smooth={true} />
+     * ```
      */
     smooth?: boolean;
     /**
-     * A flag indicating if the signature can be maximized.
+     * Enables the maximizable feature of the Signature.
      *
-     * @default true
+     * @example
+     * ```jsx
+     * <Signature maximizable={true} />
+     * ```
      */
     maximizable?: boolean;
     /**
-     * Sets the open and close state of the Signature.
+     * Sets the open state of the Signature popup.
+     *
+     * @example
+     * ```jsx
+     * <Signature open={true} />
+     * ```
      */
     open?: boolean;
     /**
@@ -3528,6 +3936,10 @@ export declare interface SignatureProps extends FormComponentProps {
      * The Signature width and height will be multiplied by the scale when showing the popup.
      *
      * @default 3
+     * @example
+     * ```jsx
+     * <Signature popupScale={1.5} />
+     * ```
      */
     popupScale?: number;
     /**
@@ -3536,40 +3948,84 @@ export declare interface SignatureProps extends FormComponentProps {
      * The Signature width and height will be multiplied by the scale when converting the signature to an image.
      *
      * @default 2
+     *
+     * @example
+     * ```jsx
+     * <Signature exportScale={2} />
+     * ```
      */
     exportScale?: number;
     /**
-     * A flag indicating whether the dotted line should be displayed in the background.
+     * Hides the dotted line in the background.
      *
      * @default false
+     * @example
+     * ```jsx
+     * <Signature hideLine={true} />
+     * ```
      */
     hideLine?: boolean;
     /**
      * Represents the `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature style={{ border: '1px solid black' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Represents the input element `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature inputStyle={{ padding: '10px' }} />
+     * ```
      */
     inputStyle?: React.CSSProperties;
     /**
-     * Determines the event handler that will be fired when the user edits the value.
+     * Fires when the value of the Signature changes.
+     *
+     * @example
+     * ```jsx
+     * <Signature onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: SignatureChangeEvent) => void;
     /**
-     * The event handler that will be fired when Signature is focused.
+     * Fires when the Signature is focused.
+     *
+     * @example
+     * ```jsx
+     * <Signature onFocus={(event) => console.log('Focused')} />
+     * ```
      */
     onFocus?: (event: SignatureFocusEvent) => void;
     /**
-     * The event handler that will be fired when Signature is blurred.
+     * Fires when the Signature is blurred.
+     *
+     * @example
+     * ```jsx
+     * <Signature onBlur={(event) => console.log('Blurred')} />
+     * ```
      */
     onBlur?: (event: SignatureBlurEvent) => void;
     /**
-     * The event handler that will be fired when Signature popup is open.
+     * Fires when the Signature popup is opened.
+     *
+     * @example
+     * ```jsx
+     * <Signature onOpen={(event) => console.log('Popup opened')} />
+     * ```
      */
     onOpen?: (event: SignatureOpenEvent) => void;
     /**
-     * The event handler that will be fired when Signature popup is closed.
+     * Fires when the Signature popup is closed.
+     *
+     * @example
+     * ```jsx
+     * <Signature onClose={(event) => console.log('Popup closed')} />
+     * ```
      */
     onClose?: (event: SignatureCloseEvent) => void;
     /** @hidden */
@@ -3621,7 +4077,7 @@ export declare interface SliderHandle extends Pick<SliderWithoutContext, keyof S
 /**
  * Represents the KendoReact SliderLabel component.
  */
-export declare const SliderLabel: (props: SliderLabelProps) => JSX_2.Element;
+export declare const SliderLabel: (props: SliderLabelProps) => JSX.Element;
 
 /**
  * Represents the props of the KendoReact SliderLabel component.
@@ -3665,88 +4121,166 @@ export declare interface SliderLabelProps {
 export declare interface SliderProps extends FormComponentProps {
     children?: React_2.ReactNode;
     /**
-     * The value of the Slider.
+     * Specifies the current value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider value={50} min={0} max={100} />
+     * ```
      */
     value?: number;
     /**
-     * The default value of the Slider.
+     * Specifies the default value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider defaultValue={30} min={0} max={100} />
+     * ```
      */
     defaultValue?: number;
     /**
-     * The minimum value of the Slider.
+     * Specifies the minimum value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider min={0} max={100} />
+     * ```
      */
     min: number;
     /**
-     * The maximum value of the Slider.
+     * Specifies the maximum value of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider min={0} max={100} />
+     * ```
      */
     max: number;
     /**
      * Specifies the step by which the Slider's value will be increased or decreased using its buttons or keyboard arrows.
+     *
+     * @example
+     * ```jsx
+     * <Slider step={5} min={0} max={100} />
+     * ```
      */
     step?: number;
     /**
      * Specifies the step by which the Slider's value will be increased or decreased using `pageUp` or `pageDown` keyboard buttons.
+     *
+     * @example
+     * ```jsx
+     * <Slider largeStep={10} min={0} max={100} />
+     * ```
      */
     largeStep?: number;
     /**
-     * Determines the event handler that will be fired when the user edits the value.
+     * Fires when the value of the Slider changes.
+     *
+     * @example
+     * ```jsx
+     * <Slider onChange={(event) => console.log(event.value)} min={0} max={100} />
+     * ```
      */
     onChange?: (event: SliderChangeEvent) => void;
     /**
-     * The styles that are applied to the Slider.
+     * Sets additional CSS styles to the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider style={{ margin: '10px' }} min={0} max={100} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets additional classes to the Slider.
+     * Adds custom CSS classes to the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider className="custom-class" min={0} max={100} />
+     * ```
      */
     className?: string;
     /**
-     * Renders the arrow side buttons of the Slider if set to true.
+     * Renders the arrow side buttons of the Slider if set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Slider buttons={true} min={0} max={100} />
+     * ```
      */
     buttons?: boolean;
     /**
-     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
-     * of the Slider.
+     * Specifies the `tabIndex` of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider tabIndex={0} min={0} max={100} />
+     * ```
      */
     tabIndex?: number;
     /**
-     * Determines whether the Slider is disabled.
+     * When `true`, disables the Slider.
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <Slider disabled={true} min={0} max={10} defaultValue={5} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * <Slider disabled={true} min={0} max={100} />
      * ```
      */
     disabled?: boolean;
     /**
-     * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
-     * ([see example]({% slug orientation_slider %})).
+     * Changes the orientation of the Slider to vertical if set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Slider vertical={true} min={0} max={100} />
+     * ```
      */
     vertical?: boolean;
     /**
-     * Specifies the id of the component.
+     * Specifies the `id` of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider id="slider-component" min={0} max={100} />
+     * ```
      */
     id?: string;
     /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaDescribedBy="description-id" min={0} max={100} />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaLabelledBy="label-id" min={0} max={100} />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
-     * The accessible label of the component.
+     * Specifies the accessible label of the Slider.
+     *
+     * @example
+     * ```jsx
+     * <Slider ariaLabel="Slider component" min={0} max={100} />
+     * ```
      */
     ariaLabel?: string;
+    /**
+     * Specifies the direction of the Slider (`ltr` or `rtl`).
+     *
+     * @example
+     * ```jsx
+     * <Slider dir="rtl" min={0} max={100} />
+     * ```
+     */
     dir?: Direction;
 }
 
@@ -3811,7 +4345,7 @@ export declare class SliderWithoutContext extends React_2.Component<SliderProps,
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     /**
      * @hidden
      */
@@ -3885,34 +4419,74 @@ export declare interface SwitchHandle extends Pick<SwitchWithoutContext, keyof S
 export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps {
     /**
      * Specifies the `accessKey` of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch accessKey="s" />
+     * ```
      */
     accessKey?: string;
     /**
      * Sets the current value of the Switch ([see example]({% slug controlled_switch %})).
+     *
+     * @example
+     * ```jsx
+     * <Switch checked={true} />
+     * ```
      */
     checked?: boolean;
     /**
-     * Sets the `className` of the wrapping element of the Switch.
+     * Adds custom CSS classes to the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})).
+     *
+     * @example
+     * ```jsx
+     * <Switch defaultChecked={true} />
+     * ```
      */
     defaultChecked?: boolean;
     /**
-     * Sets the default value of the Switch.
+     * Specifies the default value of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch defaultValue={true} />
+     * ```
      */
     defaultValue?: any;
     /**
      * Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})).
+     *
+     * @example
+     * ```jsx
+     * <Switch disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
-     * Sets the `dir` property of the wrapping element of the Switch.
+     * Specifies the `dir` property of the wrapping element of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * Sets the `id` of the Switch.
+     * Specifies the `id` of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch id="switch-component" />
+     * ```
      */
     id?: string;
     /**
@@ -3925,6 +4499,10 @@ export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     * @example
+     * ```jsx
+     * <Switch size="large" />
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
@@ -3938,10 +4516,14 @@ export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps
      * - null&mdash;Does not set a trackRounded `className`.
      *
      * @default `full`
+     * @example
+     * ```jsx
+     * <Switch trackRounded="medium" />
+     * ```
      */
     trackRounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
-     * Configures the `thumbRounded` of the Switch.
+     * Configures the `thumbRounded` property of the Switch.
      *
      * The available options are:
      * - small
@@ -3950,48 +4532,101 @@ export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps
      * - full
      * - null&mdash;Does not set a thumbRounded `className`.
      *
-     * @default `full`
+     * @example
+     * ```jsx
+     * <Switch thumbRounded="full" />
+     * ```
      */
     thumbRounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * Identifies the element(s) which will describe the component.
      * For example these elements could contain error or hint message.
+     *
+     * @example
+     * ```jsx
+     * <Switch ariaDescribedBy="description-id" />
+     * ```
      */
     ariaDescribedBy?: string;
     /**
      * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Switch ariaLabelledBy="label-id" />
+     * ```
      */
     ariaLabelledBy?: string;
     /**
-     * Sets custom **Off** label([see example]({% slug labels_switch %})).
+     * Sets a custom label for the **Off** state.
+     *
+     * @example
+     * ```jsx
+     * <Switch offLabel="No" />
+     * ```
      */
     offLabel?: React_2.ReactNode;
     /**
-     * Fires each time the Switch gets blurred.
+     * Fires when the Switch is blurred.
+     *
+     * @example
+     * ```jsx
+     * <Switch onBlur={(event) => console.log('Blurred')} />
+     * ```
      */
     onBlur?: (event: React_2.FocusEvent<HTMLSpanElement>) => void;
     /**
-     * Fires each time the user selects a new value ([see example]({% slug controlled_switch %})).
+     * Fires when the value of the Switch changes.
+     *
+     * @example
+     * ```jsx
+     * <Switch onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: SwitchChangeEvent) => void;
     /**
-     * Fires each time the Switch component gets focused.
+     * Fires when the Switch is focused.
+     *
+     * @example
+     * ```jsx
+     * <Switch onFocus={(event) => console.log('Focused')} />
+     * ```
      */
     onFocus?: (event: React_2.FocusEvent<HTMLSpanElement>) => void;
     /**
-     * Sets custom **On** label ([see example]({% slug labels_switch %})).
+     * Sets a custom label for the **On** state.
+     *
+     * @example
+     * ```jsx
+     * <Switch onLabel="Yes" />
+     * ```
      */
     onLabel?: React_2.ReactNode;
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @example
+     * ```jsx
+     * <Switch tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
-     * Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type.
+     * Specifies the value of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch value={true} />
+     * ```
      */
     value?: string | number | string[] | boolean | null;
     /**
-     * The accessible label of the component.
+     * Specifies the accessible label of the Switch.
+     *
+     * @example
+     * ```jsx
+     * <Switch ariaLabel="Toggle switch" />
+     * ```
      */
     ariaLabel?: string;
 }
@@ -4116,7 +4751,7 @@ export declare class SwitchWithoutContext extends React_2.Component<SwitchProps,
     /**
      * @hidden
      */
-    render(): JSX_2.Element;
+    render(): JSX.Element;
     private dummyInput;
     private handleClick;
     private handleKeyDown;