@trackunit/react-form-components 0.0.1

package/src/components/Search/Search.d.ts

@@ -0,0 +1,62 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import { TextInputProps } from "../TextInput/TextInput";
+export interface SearchProps extends CommonProps, TextInputProps {
+    /**
+     * The name for the HTML element.
+     */
+    name?: string;
+    /**
+     * Placeholder string to be shown in the search box.
+     */
+    placeholder?: string;
+    /**
+     * Whether the search box should widen to take up full width while in focus or not.
+     * If disabled, the search box takes up full width when not in focus.
+     */
+    widenInputOnFocus?: boolean;
+    /**
+     * Whether the border for the search box should be displayed while the search box is not in focus.
+     */
+    showBorderWhenNotInFocus?: boolean;
+    /**
+     * Value rendered in the search box.
+     */
+    value?: string;
+    /**
+     * Whether the search box is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specify what if any permission the user agent has to provide automated assistance in filling out search values.
+     */
+    autoComplete?: string;
+    /**
+     * Event that occurs when the user releases a key.
+     */
+    onKeyUp?: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when there is a change.
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when the search box is on focus.
+     */
+    onFocus?: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Event that occurs when search box is blurred.
+     */
+    onBlur?: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Event that search box is cleared.
+     */
+    onClear?: () => void;
+    ref?: React.Ref<HTMLInputElement | undefined>;
+}
+/**
+ * The Search component is used to render a search input field.
+ *
+ * @param {SearchProps} props - The props for the Search component
+ * @returns {JSX.Element} Search component
+ */
+export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ref, ...rest }: SearchProps) => JSX.Element;

package/src/components/Search/index.d.ts

@@ -0,0 +1 @@
+export * from "./Search";

package/src/components/Select/CreatableSelect.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { GroupBase } from "react-select";
+import { SelectProps } from "./useSelect";
+interface CreateableSelectProps<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends SelectProps<Option, IsAsync, IsMulti, Group> {
+    /**
+     * To hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * Description for the select component.
+     */
+    description?: string;
+    /**
+     * Whether the component is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * Info of the select component.
+     */
+    info?: React.ReactNode;
+    /**
+     * Error of the select component.
+     */
+    error?: React.ReactNode;
+    /**
+     * Size of the component.
+     */
+    size?: SelectSize;
+}
+export type SelectSize = "small" | "default";
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: CreateableSelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+export {};

package/src/components/Select/FieldContainer.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface SelectContainerProps {
+    children: React.ReactElement;
+    label?: string;
+    hideLabel?: boolean;
+    hasError?: boolean;
+    id?: string;
+    description?: string;
+    error?: React.ReactNode;
+    info?: React.ReactNode;
+    dataTestId?: string;
+    isDisabled?: boolean;
+}
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+export declare const SelectContainer: ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, isDisabled, }: SelectContainerProps) => JSX.Element;

package/src/components/Select/Select.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { SelectProps } from "./useSelect";
+export interface SelectOption<T extends string> {
+    label: string;
+    value: T;
+    disabled?: boolean;
+}
+/**
+ * Selects are input components used to choose a value from a set.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
+ */
+export declare const Select: {
+    <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
+    displayName: string;
+};

package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -0,0 +1,49 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+interface SelectMenuItemProps extends CommonProps {
+    /**
+     * An string to render as a item label.
+     *
+     */
+    label: string;
+    /**
+     * An handler for click on element
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * A boolean prop to set menu item to selected state
+     */
+    selected?: boolean;
+    /**
+     * A boolean prop to set menu item to focused state
+     * used for keyboard navigation
+     */
+    focused?: boolean;
+    /**
+     * A boolean prop to set menu item to disabled state
+     * used in disabled select options
+     */
+    disabled?: boolean;
+}
+export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     */
+    icon?: JSX.Element;
+}
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
+ */
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, disabled, }: SingleSelectMenuItemProps) => JSX.Element;
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focused, disabled, }: SelectMenuItemProps) => JSX.Element;
+export {};

package/src/components/Select/TagWithWidth.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagProps } from "@trackunit/react-components";
+type TagsPropsNoRef = Omit<TagProps, "ref">;
+interface TagWithWidthProps extends TagsPropsNoRef {
+    onWidthKnown?: ({ width }: {
+        width: number;
+    }) => void;
+}
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => JSX.Element;
+export {};

package/src/components/Select/TagsContainer.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+interface TagsContainerItem {
+    /**
+     * A text value to be passed to tags inside container
+     */
+    text: string;
+    /**
+     * OnClick handler for a tags
+     */
+    onClick: () => void;
+    /**
+     * A flag to set tags to readonly mode (without close button)
+     */
+    disabled: boolean;
+}
+interface TagsContainerProps {
+    /**
+     * An items to be rendered inside container if they fit available space. If they overlap then the counter will be displayed.
+     */
+    items: TagsContainerItem[];
+    /**
+     * An css property to set a custom width for container
+     * Default behavior is to take 100% width of parent element
+     * You can provide a value with unit (pixels, percents, rem, etc)
+     *
+     * @memberof TagsContainerProps
+     */
+    width?: string;
+    /**
+     * In case you have a gap between items then you can provide it to be used in calculation of available space,
+     * default value is 5, so if you don't need it then provide 0
+     *
+     * @memberof TagsContainerProps
+     */
+    itemsGap?: number;
+    postFix: JSX.Element;
+}
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ *
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
+ */
+export declare const TagsContainer: ({ items, width, itemsGap, postFix }: TagsContainerProps) => JSX.Element;
+export {};

package/src/components/Select/index.d.ts

@@ -0,0 +1,7 @@
+import ValueType from "react-select";
+export * from "./CreatableSelect";
+export * from "./Select";
+export * from "./SelectMenuItem/SelectMenuItem";
+export * from "./shared";
+export * from "./useCustomComponents";
+export { ValueType };

package/src/components/Select/shared.d.ts

@@ -0,0 +1,15 @@
+import { GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
+/**
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
+ * @returns {arg is MultiValue<Option> } is Multivalue
+ */
+export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleValue<Option>): arg is MultiValue<Option>;
+/**
+ *  @template IsMulti
+ * @template Group
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
+ * @param {PropsValue<Option> | undefined} value Selected values
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
+ */
+export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
+export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;

package/src/components/Select/useCustomComponents.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { GroupBase } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+/**
+ * A hook to retrieve components override object.
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
+ *
+ * @template IsMulti
+ * @template Group
+ * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
+ * @param {boolean} disabled decide to override disabled variant
+ * @param {boolean} menuIsOpen menu is open state
+ * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
+ * @param {string} dataTestId a test id
+ * @param {number} maxSelectedDisplayCount a number of max display count
+ *  @param {JSX.Element} dropdownIcon an custom dropdown icon
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
+ */
+export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;

package/src/components/Select/useCustomStyles.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { GroupBase, StylesConfig } from "react-select";
+/**
+ * @template IsMulti
+ * @template Group
+ * @param {React.RefObject<HTMLDivElement>} refContainer  react ref to container element
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
+ */
+export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined) => {
+    customStyles: StylesConfig<Option, IsMulti, Group>;
+};

package/src/components/Select/useSelect.d.ts

@@ -0,0 +1,143 @@
+import { CommonProps } from "@trackunit/react-components";
+import React from "react";
+import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
+    loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
+    defaultOptions: OptionsOrGroups<Option, Group> | undefined;
+    cacheOptions: boolean;
+}
+export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     *
+     *
+     * @memberof SelectProps
+     */
+    prefix?: JSX.Element;
+    /**
+     * An string to render in field when there is no value selected.
+     * Can be used as a description, example or a hint.
+     *
+     *
+     * @memberof SelectProps
+     */
+    placeholder?: string;
+    /**
+     * An boolean flag to disable field
+     *
+     *
+     * @memberof SelectProps
+     */
+    disabled?: boolean;
+    /**
+     * An field id
+     *
+     *
+     * @memberof SelectProps
+     */
+    id?: string;
+    /**
+     * An boolean flag to set select into async mode
+     * This is typically used when data is fetched after render
+     *
+     *
+     * @memberof SelectProps
+     */
+    async?: AsyncSelect<Option, GroupType>;
+    /**
+     * A custom icon to be used as a dropdown indicator
+     * This is typically used during style customization
+     *
+     *
+     * @memberof SelectProps
+     */
+    dropdownIcon?: JSX.Element;
+    /**
+     * A label to be used as a aria-label
+     * This is typically used for accessibility
+     *
+     *
+     * @memberof SelectProps
+     */
+    label?: string;
+    /**
+     * A number of pixels to limit maximal length of the select menu list
+     *
+     *
+     * @memberof SelectProps
+     */
+    maxMenuHeight?: number;
+    /**
+     * A boolean prop to set select into invalid mode
+     * typically used when selected value is not compliant with field requirement
+     * ex if it breaks validation rules
+     *
+     *
+     * @memberof SelectProps
+     */
+    hasError?: boolean;
+    /**
+     * A boolean flag to display loading indicator
+     *
+     *
+     * @memberof SelectProps
+     */
+    isLoading?: boolean;
+    /**
+     * A number value to limit amount of visible tags for selected options
+     *
+     *
+     * @memberof SelectProps
+     */
+    maxSelectedDisplayCount?: number;
+    /**
+     * A custom handler for menu open event
+     * use if you want to trigger custom logic or fetch data
+     *
+     *
+     * @memberof SelectProps
+     */
+    onMenuOpen?: () => void;
+    /**
+     * A flag to allow user to clear value once selected
+     * default value is true
+     *
+     *
+     * @memberof SelectProps
+     */
+    isClearable?: boolean;
+    /**
+     * A flag to allow user to filter option list by key from the text input
+     *
+     *
+     * @memberof SelectProps
+     */
+    isSearchable?: boolean;
+    /**
+     * A flag to set select into async mode
+     *
+     * @memberof SelectProps
+     */
+    isAsync?: IsAsync;
+}
+interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
+    customStyles: StylesConfig<Option, IsMulti, Group>;
+    customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
+    refContainer: React.RefObject<HTMLDivElement>;
+    refPrefix: React.RefObject<HTMLDivElement>;
+    menuIsOpen: boolean;
+    menuPlacement: MenuPlacement;
+    openMenuHandler: () => Promise<void>;
+    closeMenuHandler: () => void;
+    orderedOptions: OptionsOrGroups<Option, Group>;
+}
+/**
+ * A hook used by selects to share the common code
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {IUseSelect} Select component
+ */
+export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => IUseSelect<Option, IsMulti, Group>;
+export {};

package/src/components/TextArea/TextArea.d.ts

@@ -0,0 +1,30 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
+export interface TextAreaProps extends FilteredInputProps, CommonProps {
+    /**
+     * Number of rows in the text area.
+     */
+    rows?: number;
+    /**
+     * Resize of the text area.
+     *
+     * @default "vertical"
+     */
+    resize?: TextAreaResize;
+    /**
+     * Default value of the textarea.
+     */
+    defaultValue?: React.ReactText;
+    /**
+     * If true the field is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+}
+/**
+ * The TextArea is a base component, and should not be used very often.
+ * For most cases the TextAreaField is the correct component.
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/src/components/TextArea/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextArea";

package/src/components/TextAreaField/TextAreaField.d.ts

@@ -0,0 +1,18 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { TextAreaProps } from "../TextArea/TextArea";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
+    /**
+     * Set the Maximal length of the value for the input.
+     * Adds a TextLengthIndicator to the right of the helpText.
+     */
+    maxLength?: number;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/src/components/TextAreaField/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextAreaField";

package/src/components/TextField/TextField.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { TextInputProps } from "../TextInput/TextInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
+    /**
+     * Set the Maximal length of the value for the input.
+     * Adds a TextLengthIndicator to the right of the helpText.
+     */
+    maxLength?: number;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/TextField/TextLenghtIndicator.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface TextLengthIndicatorProps {
+    /**
+     * The current length of the content of the input
+     */
+    length: number;
+    /**
+     * The max number of characters allowed in the input
+     */
+    maxLength: number;
+}
+/**
+ * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
+ * Used for TextFields to communicate a maximum allowed input length.
+ *
+ * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
+ * @returns {JSX.Element} TextLengthIndicator component
+ */
+export declare const TextLengthIndicator: React.FC<TextLengthIndicatorProps>;

package/src/components/TextField/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextField";

package/src/components/TextInput/TextInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput/BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface TextInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,57 @@
+import { CommonProps } from "@trackunit/react-components";
+import * as React from "react";
+import "./Toggle.css";
+export type ToggleSize = "small" | "medium";
+export interface ToggleProps extends CommonProps {
+    /**
+     * ID of the toggle.
+     */
+    id: string;
+    /**
+     * Whether the toggle is toggled(active) or not.
+     */
+    toggled: boolean;
+    /**
+     * onChange event handler.
+     */
+    onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the toggle is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
+     */
+    tabIndex?: number;
+    /**
+     * Whether the toggle is required or not.
+     */
+    required?: boolean;
+    /**
+     * Name of the toggle.
+     */
+    name?: string;
+    /**
+     * The description of the toggle.
+     */
+    description?: string;
+    /**
+     * onBlur event handler.
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/src/components/Toggle/index.d.ts

@@ -0,0 +1 @@
+export * from "./Toggle";

package/src/components/UploadField/UploadField.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { UploadInputProps } from "../UploadInput/UploadInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * Upload fields enable the user to upload Files.
+ */
+export declare const UploadField: import("react").ForwardRefExoticComponent<UploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};