@trackunit/react-components 0.0.43 → 0.0.46

package/components/alert/Alert.d.ts

@@ -17,8 +17,8 @@ export interface AlertProps extends CommonProps {
     children: React.ReactNode;
     /**
      * Intent of the alert component.
+     * @type "info" | "warning" | "danger" | "success"
      *
-     * @type {AlertIntent}
      * @memberof AlertProps
      */
     intent?: AlertIntent;
@@ -39,7 +39,7 @@ export interface AlertProps extends CommonProps {
     /**
      * Action to be performed on clicking the secondary button.
      *
-     * @type AlertAction
+     * @type {AlertAction}
      * @memberof AlertProps
      */
     secondaryAction?: AlertAction;

package/components/badge/Badge.d.ts

@@ -1,47 +1,47 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-export declare type BadgeIntent = "primary" | "secondary" | "success" | "danger" | "warning";
+import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
 declare type BadgeVariant = "badge" | "pill" | "tag";
 export interface TagProps extends BaseBadgeProps {
     /**
      * The name of the variant.
      *
-     * @type string}
      * @memberof TagProps
      */
     variant: "tag";
     /**
      * A handler for a click event triggered on x icon
      * if not passed then x icon won't be visible
-     * @type {() => void}
+     *
+     * @type () => void
      * @memberof TagProps
      */
     onClose?: () => void;
 }
 export interface BaseBadgeProps extends CommonProps {
     /**
-     * The intent of the badge.
+     * The color of the badge.
      *
-     * @type {BadgeIntent}
+     * @type "primary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown"
      * @memberof BadgeProps
      */
-    intent?: BadgeIntent;
+    color?: Colors;
     /**
-     * Specifies whether the intent style should be subtle or not.
+     * Specifies whether the badge is subtle or not.
+     * Subtle badges have a light background color wither a darker text color.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof BadgeProps
      */
     subtle?: boolean;
     /**
-     * Whether badge should be displayed as a pill, tag or badge
-     * pill numeric values above 99 will be displayed as 99+.
-     * tag will display x icon, you have to provide onClose handler
-     *
-     * Badge will use subtle intent by default.
+     * Whether badge should be displayed as a pill, tag or badge.
+     * For the pill variant, numeric values above 99 will be displayed as 99+.
+     * Tag will display x icon if you provide onClose handler.
+     * Badge is subtle by default.
      *
-     * @type {BadgeVariant}
+     * @type "badge" | "pill" | "tag"
      * @memberof BadgeProps
      */
     variant?: BadgeVariant;
@@ -64,11 +64,11 @@ export interface BaseBadgeProps extends CommonProps {
     /**
      * Size of the badge.
      *
-     * @type {BadgeSize}
+     * @type "default" | "large"
      * @memberof BadgeProps
      */
     size?: BadgeSize;
 }
 export declare type BadgeProps = BaseBadgeProps | TagProps;
-export declare const Badge: ({ intent, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ color, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
 export {};

package/components/buttons/button/Button.d.ts

@@ -19,7 +19,7 @@ export interface ButtonProps extends ButtonCommonProps {
     /**
      * Whether button is fullWidth or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ButtonProps
      */
     fullWidth?: boolean;
@@ -40,7 +40,7 @@ export interface ButtonProps extends ButtonCommonProps {
     /**
      * The type of the button. Values can be "submit" or "button".
      *
-     * @type {ButtonType}
+     * @type "submit" | "button"
      * @memberof ButtonProps
      */
     type?: ButtonType;

package/components/buttons/icon-button/IconButton.d.ts

@@ -11,7 +11,7 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * Whether the button is circular or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof IconButtonProps
      */
     circular?: boolean;
@@ -25,7 +25,7 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The size of the button. Defaults to "small".
      *
-     * @type {("small" | "normal" | "large")}
+     * @type "small" | "normal" | "large"
      * @memberof IconButtonProps
      */
     size?: ButtonSize;

package/components/buttons/shared/ButtonProps.d.ts

@@ -9,42 +9,42 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * Whether the button is loading.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ButtonCommonProps
      */
     loading?: boolean;
     /**
      * Whether the button is disabled.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ButtonCommonProps
      */
     disabled?: boolean;
     /**
      * Button with square aspect ratio.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ButtonCommonProps
      */
     square?: boolean;
     /**
      * The button's variant. Values are filled, transparent, plain.
      *
-     * @type {"primary" | "secondary" | "danger" | "warning" | "tertiary"}
+     * @type "primary" | "secondary" | "danger" | "warning" | "tertiary"
      * @memberof ButtonCommonProps
      */
     intent?: ButtonIntent;
     /**
      * The variant of the button.
      *
-     * @type {"filled" | "transparent"}
+     * @type "filled" | "transparent"
      * @memberof ButtonCommonProps
      */
     variant?: ButtonVariant;
     /**
      * The size of the button.
      *
-     * @type {"small" | "normal" | "large"}
+     * @type "small" | "normal" | "large"
      * @memberof ButtonCommonProps
      */
     size?: ButtonSize;

package/components/card/Card.d.ts

@@ -10,21 +10,21 @@ export interface CardProps extends CommonProps {
     /**
      * Whether the card should have full height or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof CardProps
      */
     fullHeight?: boolean;
     /**
      * Whether the card should overflow contents.
      *
-     * @type {Overflow}
+     * @type "visible" | "hidden" | "scroll" | "auto"
      * @memberof CardProps
      */
     overflow?: Overflow;
     /**
      *
      * @deprecated Use tailwind based grid layouts instead.
-     * @type {string}
+     * @type string
      * @memberof CardProps
      */
     gridArea?: string;

package/components/card/DensityContainer.d.ts

@@ -15,18 +15,19 @@ interface ContainerProps extends CommonProps {
      * "comfortable" = 16px gap and padding.
      * "spacious" = 16px gap, 26px padding.
      *
-     * @type {("none" | "compact" | "comfortable" | "spacious" | "auto")}
+     * @type "none" | "compact" | "comfortable" | "spacious" | "auto"
      * @memberof ContainerProps
      */
     $density?: Density;
     /**
      * Set gap to be 0px (not preferable)
+     * @type boolean
      */
     $disableGap?: boolean;
     /**
      * The flex direction of the Card. Defaults to "column".
      *
-     * @type {("row" | "row-reverse" | "column" | "column-reverse")}
+     * @type "row" | "row-reverse" | "column" | "column-reverse"
      * @memberof ContainerProps
      */
     $direction?: "row" | "row-reverse" | "column" | "column-reverse";

package/components/chart/Chart.d.ts

@@ -13,7 +13,7 @@ export interface IChartProps {
     /**
      * Whether or not to low the preloader.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof IChartProps
      */
     showLoading?: boolean;
@@ -42,13 +42,13 @@ export interface IChartProps {
      */
     onBrushSelected?: (event: any) => void;
     /**
-     * Evebt fired when mouse leaves the chart.
+     * Event fired when mouse leaves the chart.
      *
      * @memberof IChartProps
      */
     mouseLeaveChart?: () => void;
     /**
-     * class values to be passed to the component.
+     * Class values to be passed to the component.
      *
      * @type string
      * @memberof IChartProps
@@ -70,7 +70,7 @@ export interface IChartProps {
     /**
      * Whether to merge with previous option.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof IChartProps
      */
     merge?: boolean;
@@ -93,7 +93,7 @@ export interface IChartProps {
     /**
      * Type of rendered used. Either "svg" or "canvas".
      *
-     * @type {("svg" | "canvas")}
+     * @type "svg" | "canvas"
      * @memberof IChartProps
      */
     renderer?: "svg" | "canvas";

package/components/collapse/Collapse.d.ts

@@ -5,7 +5,7 @@ export interface CollapseProps extends CommonProps {
     /**
      * Expands the collapse component during initialization.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof CollapseProps
      */
     initialExpanded?: boolean;

package/components/copyableText/CopyableText.d.ts

@@ -1,7 +1,25 @@
 /// <reference types="react" />
 interface CopyableTextProps {
+    /**
+     * The text to be displayed.
+     *
+     * @type string
+     * @memberof CopyableTextProps
+     */
     text?: string;
+    /**
+     * Alternative text to be displayed.
+     *
+     * @type string
+     * @memberof CopyableTextProps
+     */
     alternativeText?: string;
+    /**
+     * ID of the component to be used while testing.
+     *
+     * @type string
+     * @memberof CopyableTextProps
+     */
     dataTestId?: string;
 }
 export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;

package/components/dateField/DateField.d.ts

@@ -26,7 +26,7 @@ export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id
     /**
      * A flag that can be used to disable the input, default value is false
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof DateFieldProps
      */
     disabled?: boolean;

package/components/heading/Heading.d.ts

@@ -10,23 +10,23 @@ export interface HeadingProps extends CommonProps {
      */
     children: React.ReactNode;
     /**
-     * Size of heading. Accepted values: "primary", "secondary", "tertiary", "subtitle".
+     * Size of heading.
      *
-     * @type {HeadingVariant}
+     * @type "primary" | "secondary" | "tertiary" | "subtitle"
      * @memberof HeadingProps
      */
     variant: HeadingVariant;
     /**
      * Whether the heading uses inverted styles or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof HeadingProps
      */
     inverted?: boolean;
     /**
      * Whether the heading is a subtitle or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof HeadingProps
      */
     subtle?: boolean;

package/components/icon/Icon.d.ts

@@ -7,7 +7,7 @@ export interface IIconProps extends CommonProps {
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
      *
-     * @type {(TrackunitIconName | HeroIconName)}
+     * @type TrackunitIconName | HeroIconName
      * @memberof IIconProps
      */
     name: TrackunitIconName | HeroIconName;
@@ -16,7 +16,7 @@ export interface IIconProps extends CommonProps {
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
      *
-     * @type {Colors}
+     * @type Colors
      * @memberof IIconProps
      */
     color?: Colors;
@@ -26,7 +26,7 @@ export interface IIconProps extends CommonProps {
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      *
-     * @type {("small" | "normal" | "large")}
+     * @type "small" | "normal" | "large"
      * @memberof IIconProps
      */
     size?: "small" | "normal" | "large";
@@ -35,7 +35,7 @@ export interface IIconProps extends CommonProps {
      * Default value depends on the Size prop, small == solid, normal == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
      *
-     * @type {("solid" | "outline")}
+     * @type "solid" | "outline"
      * @memberof IIconProps
      */
     type?: "solid" | "outline";

package/components/indicator/Indicator.d.ts

@@ -26,7 +26,7 @@ export interface IndicatorProps extends CommonProps {
     /**
      * A boolean parameter to display or hide icon background, default value is true
      *
-     * @type string
+     * @type boolean
      * @memberof IndicatorProps
      */
     withBackground?: boolean;

package/components/menu/MenuItem.d.ts

@@ -1,9 +1,38 @@
 /// <reference types="react" />
 export interface IMenuItemProps {
+    /**
+     * The icon to be rendered in the menu item.
+     *
+     * @type {(JSX.Element)}
+     * @memberof IMenuItemProps
+     */
     icon?: JSX.Element;
+    /**
+     * Label of the menu item
+     *
+     * @type string
+     * @memberof IMenuItemProps
+     */
     label?: string;
+    /**
+     * Additional tailwind classes to be applied to the component.
+     *
+     * @type string
+     * @memberof IMenuItemProps
+     */
     className?: string;
+    /**
+     * Test id to be used for the component.
+     *
+     * @type string
+     * @memberof IMenuItemProps
+     */
     dataTestId?: string;
+    /**
+     * onClick event.
+     *
+     * @memberof IMenuItemProps
+     */
     onClick: () => void;
 }
 export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;

package/components/menu/MenuList.d.ts

@@ -4,8 +4,26 @@ export interface IMenuListItemProps extends IMenuItemProps {
     showDivider?: boolean;
 }
 export interface IMenuListProps {
+    /**
+     * Additional tailwind classes to be applied to the component.
+     *
+     * @type string
+     * @memberof IMenuListProps
+     */
     className?: string;
+    /**
+     * Test id to be used for the component.
+     *
+     * @type string
+     * @memberof IMenuListProps
+     */
     dataTestId?: string;
+    /**
+     * List of menu items to be rendered.
+     *
+     * @type {IMenuListItemProps[]}
+     * @memberof IMenuListProps
+     */
     menuItems: IMenuListItemProps[];
 }
-export declare const MenuList: ({ dataTestId, className, menuItems }: IMenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;

package/components/modal/Modal.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ModalProps
      */
     isOpen?: boolean;

package/components/pageHeading/PageHeading.d.ts

@@ -1,7 +1,25 @@
 /// <reference types="react" />
 interface PageHeadingProps {
+    /**
+     * The title of the page.
+     *
+     * @type {string}
+     * @memberof PageHeadingProps
+     */
     title: string;
+    /**
+     * Subtitle of the page.
+     *
+     * @type {string}
+     * @memberof PageHeadingProps
+     */
     subtitle?: string;
+    /**
+     * Test id to be used for the component.
+     *
+     * @type {string}
+     * @memberof PageHeadingProps
+     */
     dataTestId?: string;
     badge?: string;
 }

package/components/radioGroup/RadioGroup.d.ts

@@ -1,13 +1,60 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 interface RadioGroupProps extends CommonProps {
+    /**
+     *
+     *
+     * @type {React.ReactNode}
+     * @memberof RadioGroupProps
+     */
     children: React.ReactNode;
+    /**
+     * The id of the radio group.
+     *
+     * @type string
+     * @memberof RadioGroupProps
+     */
     id: string;
+    /**
+     * onChange handler for the radio group.
+     *
+     * @memberof RadioGroupProps
+     */
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * The value of the radio group.
+     *
+     * @type string | number
+     * @memberof RadioGroupProps
+     */
     value: string | number;
+    /**
+     * The name of the radio group.
+     *
+     * @type string
+     * @memberof RadioGroupProps
+     */
     name?: string;
+    /**
+     * The label of the radio group.
+     *
+     * @type string
+     * @memberof RadioGroupProps
+     */
     label?: string;
+    /**
+     * Whether the radiogroup is inline or not.
+     *
+     * @type boolean
+     * @memberof RadioGroupProps
+     */
     inline?: boolean;
+    /**
+     * Whether the radio group is disabled or not.
+     *
+     * @type boolean
+     * @memberof RadioGroupProps
+     */
     disabled?: boolean;
 }
 export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;

package/components/radioGroup/RadioItem.d.ts

@@ -1,7 +1,19 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 interface RadioItemProps extends CommonProps {
+    /**
+     * The label of the radio item.
+     *
+     * @type {React.ReactNode}
+     * @memberof RadioItemProps
+     */
     label: React.ReactNode;
+    /**
+     * The value of the radio item.
+     *
+     * @type {(string | number)}
+     * @memberof RadioItemProps
+     */
     value: string | number;
 }
 export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;

package/components/select/shared.d.ts

@@ -20,7 +20,7 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
     /**
      * To hide the label.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ISelectProps
      */
     hideLabel?: boolean;
@@ -34,14 +34,14 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
     /**
      * Whether the component is invalid.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ISelectProps
      */
     isInvalid?: boolean;
     /**
      * Whether the component is disabled.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof ISelectProps
      */
     isDisabled?: boolean;
@@ -62,7 +62,7 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
     /**
      * Size of the component.
      *
-     * @type {SelectSize}
+     * @type "small" | "default"
      * @memberof ISelectProps
      */
     size?: SelectSize;

package/components/skeletonLines/SkeletonLines.d.ts

@@ -4,21 +4,21 @@ export interface ISkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
      *
-     * @type {number}
+     * @type number
      * @memberof ISkeletonLinesProps
      */
     lines?: number;
     /**
      * The height of lines. Can be a number or an array of numbers or string.
      *
-     * @type {(number | number[] | string)}
+     * @type number | number[] | string
      * @memberof ISkeletonLinesProps
      */
     height?: number | number[] | string;
     /**
      * The width of each lines. Can be a number or an array of numbers or string.
      *
-     * @type {(number | number[] | string)}
+     * @type number | number[] | string
      * @memberof ISkeletonLinesProps
      */
     width?: number | number[] | string;

package/components/spacer/Spacer.d.ts

@@ -5,14 +5,14 @@ interface SpacerProps extends CommonProps {
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px). Use className prop to use custom min-height values, example: min-h-[100px].
      *
-     * @type {(number | string)}
+     * @type number | string
      * @memberof SpacerProps
      */
     minHeight?: string;
     /**
      * The border of the spacer.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof SpacerProps
      */
     border?: boolean;

package/components/text/Text.d.ts

@@ -15,63 +15,63 @@ export interface TextProps extends CommonProps {
     /**
      * Type of element. Element can be of types "p", "span", or "div".
      *
-     * @type {TextType}
+     * @type "p" | "span" | "div"
      * @memberof TextProps
      */
     type?: TextType;
     /**
      * Size of element. Values can be "default", "small", or "large".
      *
-     * @type {TextSize}
+     * @type "small" | "default" | "large"
      * @memberof TextProps
      */
     size?: TextSize;
     /**
      * Alignment of the text. Values can be "left", "center", or "right".
      *
-     * @type {TextAlign}
+     * @type "left" | "center" | "right"
      * @memberof TextProps
      */
     align?: TextAlign;
     /**
      * Weight of the text. Values can be "default", "thick", or "bold".
      *
-     * @type {TextWeight}
+     * @type "default" | "thick" | "bold"
      * @memberof TextProps
      */
     weight?: TextWeight;
     /**
      * Whether font styles are inverted.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TextProps
      */
     inverted?: boolean;
     /**
      * Whether font styles are subtle or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TextProps
      */
     subtle?: boolean;
     /**
      * Whether text is italicized.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TextProps
      */
     italicize?: boolean;
     /**
      * Whether text is uppercase.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TextProps
      */
     uppercase?: boolean;
     /**
      * Whether text is underlined or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TextProps
      */
     underline?: boolean;

package/components/textArea/TextArea.d.ts

@@ -2,24 +2,135 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 export interface TextAreaProps extends CommonProps {
+    /**
+     * ID of the text area.
+     *
+     * @type string
+     * @memberof TextAreaProps
+     */
     id?: string;
+    /**
+     * Name of the text area.
+     *
+     * @type string
+     * @memberof TextAreaProps
+     */
     name?: string;
+    /**
+     * Label of the text area.
+     *
+     * @type string
+     * @memberof TextAreaProps
+     */
     label?: string;
+    /**
+     * Description of the text area.
+     *
+     * @type string
+     * @memberof TextAreaProps
+     */
     description?: string;
+    /**
+     * Information about the text area.
+     *
+     * @type {React.ReactNode}
+     * @memberof TextAreaProps
+     */
     info?: React.ReactNode;
+    /**
+     * Error message of the text area.
+     *
+     * @type {React.ReactNode}
+     * @memberof TextAreaProps
+     */
     error?: React.ReactNode;
+    /**
+     * Value of the text area.
+     *
+     * @type {React.ReactText}
+     * @memberof TextAreaProps
+     */
     value?: React.ReactText;
+    /**
+     * Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
+     *
+     * @type number
+     * @memberof TextAreaProps
+     */
     tabIndex?: number;
+    /**
+     * Whether the text area is disabled or not.
+     *
+     * @type boolean
+     * @memberof TextAreaProps
+     */
     disabled?: boolean;
+    /**
+     * Whether the text area is readonly or not.
+     *
+     * @type boolean
+     * @memberof TextAreaProps
+     */
     readOnly?: boolean;
+    /**
+     * Number of rows in the text area.
+     *
+     * @type number
+     * @memberof TextAreaProps
+     */
     rows?: number;
+    /**
+     * Placeholder text for the text area.
+     *
+     * @type string
+     * @memberof TextAreaProps
+     */
     placeholder?: string;
+    /**
+     * onChange handler of the text area.
+     *
+     * @memberof TextAreaProps
+     */
     onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    /**
+     * onFocus handler of the text area.
+     *
+     * @memberof TextAreaProps
+     */
     onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    /**
+     * onBlur handler of the text area.
+     *
+     * @memberof TextAreaProps
+     */
     onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Maximum length of the text area.
+     *
+     * @type number
+     * @memberof TextAreaProps
+     */
     maxLength?: number;
+    /**
+     * Resize of the text area.
+     *
+     * @type "none" | "vertical" | "horizontal" | "both"
+     * @memberof TextAreaProps
+     */
     resize?: TextAreaResize;
+    /**
+     * Default value of the textarea.
+     *
+     * @type {React.ReactText}
+     * @memberof TextAreaProps
+     */
     defaultValue?: React.ReactText;
+    /**
+     * Whether the text area is required or not.
+     *
+     * @type boolean
+     * @memberof TextAreaProps
+     */
     required?: boolean;
 }
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/components/tip/Tip.d.ts

@@ -3,6 +3,12 @@ import { CommonProps } from "../../common";
 import { IIconProps } from "../icon/Icon";
 import { TooltipProps } from "../tooltip";
 export interface TipProps extends CommonProps {
+    /**
+     * Child nodes to render inside the tip.
+     *
+     * @type {React.ReactNode}
+     * @memberof TipProps
+     */
     children: React.ReactNode;
     iconProps?: Partial<IIconProps>;
     tooltipProps?: Partial<TooltipProps>;

package/components/toggle/Toggle.d.ts

@@ -2,14 +2,67 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export declare type ToggleSize = "small" | "default";
 export interface ToggleProps extends CommonProps {
+    /**
+     * ID of the toggle.
+     *
+     * @type string
+     * @memberof ToggleProps
+     */
     id: string;
+    /**
+     * Whether the toggle is toggled(active) or not.
+     *
+     * @type boolean
+     * @memberof ToggleProps
+     */
     toggled: boolean;
+    /**
+     * onChange event handler.
+     *
+     * @memberof ToggleProps
+     */
     onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the toggle is disabled or not.
+     *
+     * @type boolean
+     * @memberof ToggleProps
+     */
     disabled?: boolean;
+    /**
+     * Size of the toggle.
+     *
+     * @type "small" | "default"
+     * @memberof ToggleProps
+     */
     size?: ToggleSize;
+    /**
+     * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
+     *
+     * @type number
+     * @memberof ToggleProps
+     */
     tabIndex?: number;
+    /**
+     * Whether the toggle is required or not.
+     *
+     * @type boolean
+     * @memberof ToggleProps
+     */
     required?: boolean;
+    /**
+     * Name of the toggle.
+     *
+     * @type string
+     * @memberof ToggleProps
+     */
     name?: string;
+    /**
+     * onBlur event handler.
+     *
+     * @type {React.FocusEventHandler<HTMLInputElement>}
+     * @memberof ToggleProps
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/components/tooltip/Tooltip.d.ts

@@ -33,21 +33,21 @@ export interface TooltipProps {
     /**
      * Whether the tooltip is disabled or not.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof TooltipProps
      */
     disabled?: boolean;
     /**
      *  To select either "light" or "dark" mode.
      *
-     * @type {("light" | "dark")}
+     * @type "light" | "dark"
      * @memberof TooltipProps
      */
     mode?: "light" | "dark";
     /**
      * Offset value of the tooltip.
      *
-     * @type {[number, number]}
+     * @type [number, number]
      * @memberof TooltipProps
      */
     offset?: [number, number];
@@ -61,7 +61,7 @@ export interface TooltipProps {
     /**
      * Type of content.
      *
-     * @type {TextType}
+     * @type "p" | "span" | "div"
      * @memberof TooltipProps
      */
     contentTextType?: TextType;

package/index.js

@@ -697,7 +697,7 @@ const IconContainer = tw.div`
 
 const Badge = _a => {
   var {
-    intent = "secondary",
+    color = "neutral",
     subtle = false,
     className,
     variant = "badge",
@@ -705,14 +705,14 @@ const Badge = _a => {
     children,
     size = "default"
   } = _a,
-      rest = __rest(_a, ["intent", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+      rest = __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
 
   const isPill = variant === "pill";
   const tagProps = rest;
   return jsxs(StyledText$2, Object.assign({
     "$variant": variant,
     className: className,
-    "$intent": intent,
+    "$color": color,
     "$size": size,
     "$subtle": subtle ? subtle : isPill,
     "data-testid": dataTestId,
@@ -746,17 +746,26 @@ const getSizeModifierClass = () => ({
 };
 
 const getBadgeModifierClass = () => ({
-  $intent,
+  $color,
   $subtle
 }) => {
-  const intentClass = {
+  const colorClasses = {
     primary: $subtle ? tws`badge--primary-subtle` : tws`badge--primary`,
-    secondary: $subtle ? tws`badge--secondary-subtle` : tws`badge--secondary`,
+    accent: $subtle ? tws`badge--accent-subtle` : tws`badge--accent`,
     success: $subtle ? tws`badge--success-subtle` : tws`badge--success`,
     danger: $subtle ? tws`badge--danger-subtle` : tws`badge--danger`,
-    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`
+    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`,
+    info: $subtle ? tws`badge--info-subtle` : tws`badge--info`,
+    neutral: $subtle ? tws`badge--neutral-subtle` : tws`badge--neutral`,
+    good: $subtle ? tws`badge--good-subtle` : tws`badge--good`,
+    low: $subtle ? tws`badge--low-subtle` : tws`badge--low`,
+    critical: $subtle ? tws`badge--critical-subtle` : tws`badge--critical`,
+    working: $subtle ? tws`badge--working-subtle` : tws`badge--working`,
+    idle: $subtle ? tws`badge--idle-subtle` : tws`badge--idle`,
+    stopped: $subtle ? tws`badge--stopped-subtle` : tws`badge--stopped`,
+    unknown: $subtle ? tws`badge--unknown-subtle` : tws`badge--unknown`
   };
-  return intentClass[$intent];
+  return colorClasses[$color];
 };
 
 const StyledText$2 = tw.text`
@@ -2507,15 +2516,18 @@ const Label = tw.div`
   menuItem__label
 `;
 
-const MenuList = ({
-  dataTestId,
-  className,
-  menuItems
-}) => {
-  const containerProps = useContainerProps({
+const MenuList = _a => {
+  var {
+    dataTestId,
+    className,
+    menuItems
+  } = _a,
+      args = __rest(_a, ["dataTestId", "className", "menuItems"]);
+
+  const containerProps = useContainerProps(Object.assign({
     className,
     dataTestId
-  });
+  }, args));
   return jsx(Wrapper, {
     children: jsx(Container$1, Object.assign({}, containerProps, {
       children: menuItems.map((props, index) => {
@@ -3038,7 +3050,7 @@ const PageHeading = ({
       }, {
         children: title
       })), badge && jsx(Badge, Object.assign({
-        intent: "primary"
+        color: "primary"
       }, {
         children: badge
       }))]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.43",
+  "version": "0.0.46",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {

package/components/drawer/Drawer.d.ts

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface DrawerProps extends CommonProps {
-    /**
-     * Child nodes
-     *
-     * @type React.ReactNode
-     * @memberof DrawerProps
-     */
-    children: React.ReactNode;
-    /**
-     * Whether the drawer is open or not.
-     *
-     * @type {boolean}
-     * @memberof DrawerProps
-     */
-    isOpen?: boolean;
-    /**
-     * OnClose event.
-     *
-     * @memberof DrawerProps
-     */
-    onClose?: () => void;
-    /**
-     * Whether the drawer is displayed in-line or not.
-     *
-     * @type {boolean}
-     * @memberof DrawerProps
-     */
-    inline?: boolean;
-}
-export declare const Drawer: ({ children, isOpen, onClose, inline, className, dataTestId }: DrawerProps) => JSX.Element;

package/components/drawer/index.d.ts

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