@drivy/cobalt 0.13.0

package/types/components/Buttons/InversedButton/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ButtonTemplatePropsType } from "../helpers";
+import { ButtonProps, LinkProps } from "../ButtonComponent";
+declare type InversedCommonPropsType = ButtonTemplatePropsType<Record<string, unknown>>;
+export declare type InversedButtonPropsType = InversedCommonPropsType & ButtonProps;
+export declare type InversedLinkPropsType = InversedCommonPropsType & LinkProps;
+declare const InversedButton: React.ForwardRefExoticComponent<Pick<InversedButtonPropsType, string> & React.RefAttributes<HTMLButtonElement>> & {
+    Link: React.ForwardRefExoticComponent<Pick<InversedLinkPropsType, string> & React.RefAttributes<HTMLAnchorElement>>;
+};
+export default InversedButton;

package/types/components/Buttons/helpers.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react";
+import { IconSources } from "../Icon";
+export declare type ButtonCommonPropsType = PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: "large";
+    iconPosition?: "left" | "right";
+    icon?: IconSources;
+}>;
+export declare type ButtonTemplatePropsType<SpecificButtonProps> = SpecificButtonProps & ButtonCommonPropsType;
+export declare const getButtonContent: ({ children, icon, iconPosition, }: Pick<ButtonCommonPropsType, "children" | "icon" | "iconPosition">) => JSX.Element;
+export declare const getButtonCommonClassNames: ({ rounded, size, fullWidth, className, disabled, }: Pick<ButtonCommonPropsType, "rounded" | "size" | "fullWidth" | "className" | "disabled">) => string;

package/types/components/Buttons/index.d.ts

@@ -0,0 +1,5 @@
+import { BrandButtonPropsType, BrandLinkPropsType } from "./BrandButton";
+import { GhostButtonPropsType, GhostLinkPropsType } from "./GhostButton";
+import { InversedButtonPropsType, InversedLinkPropsType } from "./InversedButton";
+import { DefaultButtonPropsType, DefaultLinkPropsType } from "./DefaultButton";
+export declare type AllButtonsPropsType = BrandButtonPropsType & BrandLinkPropsType & GhostButtonPropsType & GhostLinkPropsType & InversedButtonPropsType & InversedLinkPropsType & DefaultButtonPropsType & DefaultLinkPropsType;

package/types/components/Calendar/CalendarRangePicker/CalendarRangePicker.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FormElementStatus } from "../../Form/form";
+declare type Props = {
+    numberOfMonths?: number;
+    firstMonthDate?: Date;
+    rangeLimit?: number;
+    firstAvailableDate?: Date;
+    lastAvailableDate?: Date;
+    isEditingStartDate: boolean;
+    isEditingEndDate: boolean;
+    startDate: Date | undefined;
+    endDate: Date | undefined;
+    hint?: {
+        status?: FormElementStatus;
+        html: string;
+    };
+    onChangeDate?: (date: Date, isOutOfRange: boolean, disabled: boolean) => boolean;
+    onLeaveDate?: (date: Date) => void;
+    onSelectDate?: (date: Date, isOutOfRange: boolean) => void;
+    locale?: Record<string, unknown>;
+};
+export declare function CalendarRangePicker({ rangeLimit, firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, locale, }: Props): JSX.Element;
+export {};

package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+declare type Props = {
+    date: Date;
+    isEditingStartDate: boolean;
+    isEditingEndDate: boolean;
+    isToday?: boolean;
+    isFirstDayOfMonth?: boolean;
+    isLastDayOfMonth?: boolean;
+    isStartDay?: boolean;
+    isEndDay?: boolean;
+    selected?: boolean;
+    isRange?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    subdued?: boolean;
+    onSelect: (date: Date) => void;
+    onMouseEnter: (date: Date, disabled: boolean) => void;
+    onMouseLeave?: (date: Date) => void;
+};
+declare function CalendarRangePickerDay({ date, isToday, isFirstDayOfMonth, isLastDayOfMonth, isStartDay, isEndDay, isRange, selected, subdued, disabled, invalid, onSelect, onMouseEnter, onMouseLeave, }: Props): JSX.Element;
+declare const MemoizedComponent: React.MemoExoticComponent<typeof CalendarRangePickerDay>;
+export { MemoizedComponent as CalendarRangePickerDay };

package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type Props = {
+    date: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onSelectDate: (date: Date, isOutOfRange?: boolean) => void;
+    onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void;
+    onLeaveDate?: (date: Date) => void;
+    isEditingStartDate?: boolean;
+    isEditingEndDate?: boolean;
+    rangeLimit?: number;
+    firstAvailableDate: Date;
+    lastAvailableDate?: Date;
+    locale: any;
+};
+export declare function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate, isEditingEndDate, rangeLimit, firstAvailableDate, lastAvailableDate, locale, }: Props): JSX.Element;
+export {};

package/types/components/Calendar/CalendarRangePicker/index.d.ts

@@ -0,0 +1 @@
+export { CalendarRangePicker } from "./CalendarRangePicker";

package/types/components/Calendar/CalendarView/CalendarViewMonth.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { MonthType } from "./types";
+declare type Props = MonthType;
+declare const CalendarViewMonth: {
+    ({ monthName, monthStart, statusByDate, }: Props): JSX.Element;
+    displayName: string;
+};
+export default CalendarViewMonth;

package/types/components/Calendar/CalendarView/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MonthType } from "./types";
+declare type Props = {
+    months: MonthType[];
+};
+declare const CalendarView: {
+    ({ months }: Props): JSX.Element;
+    displayName: string;
+};
+export { CalendarView };

package/types/components/Calendar/CalendarView/types.d.ts

@@ -0,0 +1,16 @@
+export declare type DateStatusType = "highlighted" | "semi-highlighted" | "enabled" | "disabled" | "past";
+export declare type StatusByDateType = {
+    [key: string]: DateStatusType;
+};
+export declare type MonthType = {
+    monthName: string;
+    monthStart: number;
+    statusByDate?: StatusByDateType;
+};
+export declare type DateType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31;
+export declare type CalendarViewDateType = {
+    date: DateType | null;
+    status?: string | null;
+};
+export declare type CalendarViewWeekType = CalendarViewDateType[];
+export declare type CalendarViewMonthType = CalendarViewWeekType[];

package/types/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { CalendarView } from "./CalendarView";
+export { MonthType, StatusByDateType } from "./CalendarView/types";

package/types/components/Callout/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CalloutProps {
+    children: React.ReactNode;
+    title?: string;
+    status: "info" | "error" | "success";
+    close?: () => void;
+}
+export declare const Callout: ({ title, children, status, close, }: CalloutProps) => JSX.Element;
+export default Callout;

package/types/components/Card/index.d.ts

@@ -0,0 +1,30 @@
+import React, { PureComponent, PropsWithChildren } from "react";
+export declare type CardProps = PropsWithChildren<{
+    className?: string;
+    flattened?: boolean;
+}>;
+export declare const Card: ({ children, className, flattened }: CardProps) => JSX.Element;
+export declare type CardSectionProps = {
+    children: React.ReactNode;
+    tabBar?: boolean;
+    tight?: boolean;
+    subdued?: boolean;
+    /**
+     * true or "soft"
+     * @default false
+     */
+    divided?: boolean | string;
+};
+export declare type CardSectionLinkProps = CardSectionProps & {
+    href: React.AnchorHTMLAttributes<HTMLAnchorElement>["href"];
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
+};
+export declare class CardSection extends PureComponent<CardSectionProps, never> {
+    static Link: {
+        ({ href, target, rel, ...baseProps }: CardSectionLinkProps): JSX.Element;
+        displayName: string;
+    };
+    render(): JSX.Element;
+}
+export default Card;

package/types/components/CdwChoice/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface CdwChoiceProps {
+    children: React.ReactNode;
+    id: string;
+    badge?: string;
+    price: string;
+    priceLabel: string;
+}
+export declare const CdwChoice: ({ id, badge, price, priceLabel, children, }: CdwChoiceProps) => JSX.Element;

package/types/components/Cell/index.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+export declare type CellPropsType = PropsWithChildren<{
+    divided?: boolean;
+    className?: string;
+}>;
+export declare type CellSoftPropsType = PropsWithChildren<{
+    softDivided?: boolean;
+    className?: string;
+}>;
+export declare type CellsPropsType = {
+    content: CellPropsType["children"][];
+} & Omit<CellPropsType, "children">;
+export declare type CellsSoftPropsType = {
+    content: CellSoftPropsType["children"][];
+} & Omit<CellSoftPropsType, "children">;
+declare function Cell(props: CellPropsType): JSX.Element;
+declare function Cell(props: CellSoftPropsType): JSX.Element;
+export declare function Cells(props: CellsPropsType): JSX.Element;
+export declare function Cells(props: CellsSoftPropsType): JSX.Element;
+export default Cell;

package/types/components/Chip/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface ChipProps {
+    onClick?(): void;
+    text: string;
+    image: string;
+    size?: "large";
+    disabled?: boolean;
+    active?: boolean;
+}
+export interface ChipWrapperProps {
+    onClick?(): void;
+    children: React.ReactElement;
+    disabled?: boolean;
+    className: string;
+}
+export declare const Chip: ({ onClick, text, image, size, disabled, active, }: ChipProps) => JSX.Element;

package/types/components/EmptyState/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Button } from "../Button";
+export interface EmptyStateProps {
+    children?: React.ReactNode;
+    title: string;
+    action?: typeof Button;
+    secondaryAction?: typeof Button;
+    image: string;
+}
+export declare const EmptyState: ({ title, children, action, secondaryAction, image, }: EmptyStateProps) => JSX.Element;

package/types/components/Flag/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface FlagsMap {
+    [name: string]: string;
+}
+export declare const BUNDLED_FLAGS: FlagsMap;
+export interface FlagProps {
+    country: string;
+    /**
+     * Available size in px
+     * @default 24
+     */
+    size?: 16 | 20 | 24 | 32;
+}
+export declare const Flag: ({ country, size }: FlagProps) => JSX.Element;
+export {};

package/types/components/Flash/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare type FlashStatus = "info" | "success" | "error";
+export interface FlashProps {
+    children: React.ReactNode;
+    status: FlashStatus;
+}
+export declare const Flash: ({ children, status }: FlashProps) => JSX.Element;

package/types/components/Form/Autocomplete/index.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { FormElement } from "../form";
+export interface AutocompleteItem {
+    [x: string]: any;
+}
+declare const wrappedComponent: React.ComponentClass<{
+    icon?: "search" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "refresh" | "reset" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+    items: (AutocompleteItem | string)[];
+    minQueryLength?: number | undefined;
+    autoFilter?: boolean | undefined;
+    selectedItem?: AutocompleteItem | undefined;
+    focusOnInit?: boolean | undefined;
+    autocomplete?: boolean | undefined;
+    valueKey?: string | undefined;
+    inputRef?: React.RefObject<HTMLInputElement> | undefined;
+    autocompleteRef?: React.RefObject<HTMLDivElement> | undefined;
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onQueryChange?: ((term: string) => void) | undefined;
+    onSelectItem?: ((item: AutocompleteItem, term: string) => boolean) | undefined;
+    renderItem?: ((item: AutocompleteItem, term: string) => React.ReactNode) | undefined;
+} & FormElement & React.InputHTMLAttributes<HTMLInputElement> & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<{
+        icon?: "search" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "refresh" | "reset" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        items: (AutocompleteItem | string)[];
+        minQueryLength?: number | undefined;
+        autoFilter?: boolean | undefined;
+        selectedItem?: AutocompleteItem | undefined;
+        focusOnInit?: boolean | undefined;
+        autocomplete?: boolean | undefined;
+        valueKey?: string | undefined;
+        inputRef?: React.RefObject<HTMLInputElement> | undefined;
+        autocompleteRef?: React.RefObject<HTMLDivElement> | undefined;
+        onKeyDown?: ((event: React.KeyboardEvent<HTMLElement>) => void) | undefined;
+        onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+        onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+        onQueryChange?: ((term: string) => void) | undefined;
+        onSelectItem?: ((item: AutocompleteItem, term: string) => boolean) | undefined;
+        renderItem?: ((item: AutocompleteItem, term: string) => React.ReactNode) | undefined;
+    } & FormElement & React.InputHTMLAttributes<HTMLInputElement>>;
+};
+export { wrappedComponent as Autocomplete };

package/types/components/Form/CheckablePill.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { IconSources } from "../Icon";
+import { FormElement } from "./form";
+declare type Props = {
+    type?: "checkbox" | "radio";
+    icon?: IconSources;
+    value: string;
+    children: React.ReactNode;
+    defaultChecked?: boolean;
+    name: string;
+} & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const CheckboxPill: {
+    ({ ...props }: Props): JSX.Element;
+    displayName: string;
+};
+export declare const RadioPill: {
+    ({ ...props }: Props): JSX.Element;
+    displayName: string;
+};
+interface CheckablePillsGroupProps {
+    children: React.ReactNode;
+}
+export declare const CheckablePillsGroup: React.ComponentClass<CheckablePillsGroupProps & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+} & FormElement, any> & {
+    Raw: React.ComponentType<CheckablePillsGroupProps>;
+};
+export {};

package/types/components/Form/Checkmark.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { FormElement } from "./form";
+declare type Props = {
+    label: string;
+    type?: "checkbox" | "radio";
+    hint?: string;
+} & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const Checkbox: {
+    ({ label, ...props }: Props): JSX.Element;
+    displayName: string;
+};
+export declare const Radio: {
+    ({ label, ...props }: Props): JSX.Element;
+    displayName: string;
+};
+declare type ChoiceListProps = {
+    children: React.ReactNode;
+};
+declare const wrappedChoiceList: React.ComponentClass<ChoiceListProps & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+} & FormElement, any> & {
+    Raw: React.ComponentType<ChoiceListProps>;
+};
+export { wrappedChoiceList as ChoiceList };

package/types/components/Form/ComposedField.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FormElement } from "./form";
+declare const wrappedComponent: React.ComponentClass<{
+    id?: string | undefined;
+    children: React.ReactNode;
+} & FormElement & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<{
+        id?: string | undefined;
+        children: React.ReactNode;
+    } & FormElement>;
+};
+export { wrappedComponent as ComposedField };

package/types/components/Form/Fieldset.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type Props = {
+    legend: string;
+    children: React.ReactNode;
+};
+export declare const Fieldset: ({ legend, children }: Props) => JSX.Element;
+export {};

package/types/components/Form/Hint.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormElementStatus } from "./form";
+export interface HintPropsType {
+    children: React.ReactNode;
+    status?: FormElementStatus;
+}
+export declare const Hint: ({ children, status }: HintPropsType) => JSX.Element;

package/types/components/Form/Select.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FormElement } from "./form";
+declare const wrappedComponent: React.ComponentClass<{
+    children: any;
+    forwardedRef?: React.Ref<HTMLSelectElement> | undefined;
+} & FormElement & React.SelectHTMLAttributes<HTMLSelectElement> & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<{
+        children: any;
+        forwardedRef?: React.Ref<HTMLSelectElement> | undefined;
+    } & FormElement & React.SelectHTMLAttributes<HTMLSelectElement>>;
+};
+export { wrappedComponent as Select };

package/types/components/Form/Slider.d.ts

@@ -0,0 +1,128 @@
+import React from "react";
+import { FormElement } from "./form";
+import { SliderProps as ReachSliderProps } from "@reach/slider";
+declare type NativeEventType = "onPointerDown" | "onPointerUp" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onTouchStart" | "onTouchMove" | "onTouchEnd";
+export declare type SliderPropsType = {
+    /**
+     * mandatory for A11y
+     */
+    ariaLabel: string;
+    value?: number;
+    defaultValue?: number;
+    /**
+     * minimum selectable value (default is 0)
+     */
+    min?: number;
+    /**
+     * maximum selectable value (default is 100)
+     */
+    max?: number;
+    /**
+     * values interval
+     */
+    step?: number;
+    disabled?: boolean;
+    /**
+     * Listener called when the value is changed
+     */
+    onChange?: (newValue: number) => void;
+    /**
+     * Function used to visually display the slider value
+     */
+    renderValue?: (value: number, status: FormElement["status"]) => React.ReactElement;
+    onPointerDown?: ReachSliderProps["onPointerDown"];
+    onPointerUp?: ReachSliderProps["onPointerUp"];
+    onMouseDown?: ReachSliderProps["onMouseDown"];
+    onMouseMove?: ReachSliderProps["onMouseMove"];
+    onMouseUp?: ReachSliderProps["onMouseUp"];
+    onTouchStart?: ReachSliderProps["onTouchStart"];
+    onTouchMove?: ReachSliderProps["onTouchMove"];
+    onTouchEnd?: ReachSliderProps["onTouchEnd"];
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint">;
+declare const wrappedComponent: React.ComponentClass<{
+    /**
+     * mandatory for A11y
+     */
+    ariaLabel: string;
+    value?: number | undefined;
+    defaultValue?: number | undefined;
+    /**
+     * minimum selectable value (default is 0)
+     */
+    min?: number | undefined;
+    /**
+     * maximum selectable value (default is 100)
+     */
+    max?: number | undefined;
+    /**
+     * values interval
+     */
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Listener called when the value is changed
+     */
+    onChange?: ((newValue: number) => void) | undefined;
+    /**
+     * Function used to visually display the slider value
+     */
+    renderValue?: ((value: number, status: FormElement["status"]) => React.ReactElement) | undefined;
+    onPointerDown?: ReachSliderProps["onPointerDown"];
+    onPointerUp?: ReachSliderProps["onPointerUp"];
+    onMouseDown?: ReachSliderProps["onMouseDown"];
+    onMouseMove?: ReachSliderProps["onMouseMove"];
+    onMouseUp?: ReachSliderProps["onMouseUp"];
+    onTouchStart?: ReachSliderProps["onTouchStart"];
+    onTouchMove?: ReachSliderProps["onTouchMove"];
+    onTouchEnd?: ReachSliderProps["onTouchEnd"];
+    onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+} & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint"> & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<{
+        /**
+         * mandatory for A11y
+         */
+        ariaLabel: string;
+        value?: number | undefined;
+        defaultValue?: number | undefined;
+        /**
+         * minimum selectable value (default is 0)
+         */
+        min?: number | undefined;
+        /**
+         * maximum selectable value (default is 100)
+         */
+        max?: number | undefined;
+        /**
+         * values interval
+         */
+        step?: number | undefined;
+        disabled?: boolean | undefined;
+        /**
+         * Listener called when the value is changed
+         */
+        onChange?: ((newValue: number) => void) | undefined;
+        /**
+         * Function used to visually display the slider value
+         */
+        renderValue?: ((value: number, status: FormElement["status"]) => React.ReactElement) | undefined;
+        onPointerDown?: ReachSliderProps["onPointerDown"];
+        onPointerUp?: ReachSliderProps["onPointerUp"];
+        onMouseDown?: ReachSliderProps["onMouseDown"];
+        onMouseMove?: ReachSliderProps["onMouseMove"];
+        onMouseUp?: ReachSliderProps["onMouseUp"];
+        onTouchStart?: ReachSliderProps["onTouchStart"];
+        onTouchMove?: ReachSliderProps["onTouchMove"];
+        onTouchEnd?: ReachSliderProps["onTouchEnd"];
+        onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    } & FormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, NativeEventType | "css" | "enterKeyHint">>;
+};
+export default wrappedComponent;
+declare type SliderValueMetaProps = {
+    children: React.ReactNode;
+};
+export declare const SliderValueMeta: ({ children }: SliderValueMetaProps) => JSX.Element;

package/types/components/Form/Stepper.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { FormElement } from "./form";
+declare type Props = {
+    value: number;
+    name?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step: number;
+    onChange?: (value: number) => void;
+    children?: (value: number) => React.ReactNode;
+} & FormElement;
+declare const wrappedComponent: React.ComponentClass<{
+    value: number;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step: number;
+    onChange?: ((value: number) => void) | undefined;
+    children?: ((value: number) => React.ReactNode) | undefined;
+} & FormElement & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<Props>;
+};
+export { wrappedComponent as Stepper };
+declare type StepperMetaProps = {
+    children: React.ReactNode;
+};
+declare const StepperMeta: ({ children }: StepperMetaProps) => JSX.Element;
+export { StepperMeta };

package/types/components/Form/TextArea.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { FormElement } from "./form";
+declare type Props = {
+    maxLength?: number;
+    autosize?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+} & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const wrappedComponent: React.ComponentClass<{
+    maxLength?: number | undefined;
+    autosize?: boolean | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+} & FormElement & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    id?: string | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
+}, any> & {
+    Raw: React.ComponentType<Props>;
+};
+export { wrappedComponent as TextArea };