@trackunit/react-components 0.0.53 → 0.0.56

package/components/{label → Label}/Label.d.ts

@@ -3,26 +3,18 @@ import { CommonProps } from "../../common/CommonProps";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
-     *
-     * @memberof LabelProps
      */
     id?: string;
     /**
      * Specifies the element to which the label belongs to.
-     *
-     * @memberof LabelProps
      */
     htmlFor: string | false;
     /**
      * The label value.
-     *
-     * @memberof LabelProps
      */
     label?: React.ReactNode;
     /**
      *  Description for the label.
-     *
-     * @memberof LabelProps
      */
     description?: React.ReactNode;
 }

package/components/{menu → Menu}/MenuItem.d.ts

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

package/components/{menu → Menu}/MenuList.d.ts

@@ -1,32 +1,26 @@
 /// <reference types="react" />
-import { IMenuItemProps } from "./MenuItem";
-export interface IMenuListItemProps extends IMenuItemProps {
+import { MenuItemProps } from "./MenuItem";
+export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }
-export interface IMenuListProps {
+export interface MenuListProps {
     /**
      * Additional tailwind classes to be applied to the component.
-     *
-     * @memberof IMenuListProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof IMenuListProps
      */
     dataTestId?: string;
     /**
      * List of menu items to be rendered.
-     *
-     * @memberof IMenuListProps
      */
-    menuItems: IMenuListItemProps[];
+    menuItems: MenuListItemProps[];
 }
 /**
  * The MenuList component is used for menus and selects.
  *
- * @param {IMenuListProps} props - The props for the MenuList component
+ * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
-export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: MenuListProps) => JSX.Element;

package/components/{modal → Modal}/Modal.d.ts

@@ -4,32 +4,22 @@ declare type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
-     *
-     * @memberof ModalProps
      */
     isOpen?: boolean;
     /**
      * Whether modal should be closed when clicked outside of it.
-     *
-     * @memberof ModalProps
      */
     onDismissClick?: () => void;
     /**
      * Child elements to be rendered inside the modal.
-     *
-     * @memberof ModalProps
      */
     children: React.ReactNode;
     /**
      * Test id to be applied to the modal.
-     *
-     * @memberof ModalProps
      */
     dataTestId?: string;
     /**
      * Maximum width of the modal.
-     *
-     * @memberof ModalProps
      */
     maxWidth?: ModalWidth;
 }

package/components/{multiRowTableCell → MultiRowTableCell}/MultiRowTableCell.d.ts

@@ -1,30 +1,24 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-interface IMultiRowTableCellProps extends CommonProps {
+interface MultiRowTableCellProps extends CommonProps {
     /**
      * Main header.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     main: string;
     /**
      * Secondary string.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     secondary?: string;
     /**
      * Grid area.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     area?: string;
 }
 /**
  * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
  *
- * @param {IMultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {JSX.Element} MultiRowTableCell component
  */
-export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: IMultiRowTableCellProps) => JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: MultiRowTableCellProps) => JSX.Element;
 export {};

package/components/NumberField/NumberField.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-import { FormGroupProps } from "../formGroup/FormGroup";
+import { FormGroupProps } from "../FormGroup/FormGroup";
 import { NumberInputProps } from "../NumberInput/NumberInput";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
-     *
-     * @memberof NumberFieldProps
      */
     errorMessage?: string;
 }

package/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from "../baseInput";
+import { BaseInputProps } from "../BaseInput";
 declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface NumberInputProps extends BaseInputExposedProps {
 }

package/components/{pageHeading → PageHeading}/PageHeading.d.ts

@@ -2,20 +2,14 @@
 interface PageHeadingProps {
     /**
      * The title of the page.
-     *
-     * @memberof PageHeadingProps
      */
     title: string;
     /**
      * Subtitle of the page.
-     *
-     * @memberof PageHeadingProps
      */
     subtitle?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof PageHeadingProps
      */
     dataTestId?: string;
     badge?: string;

package/components/{prompt → Prompt}/Prompt.d.ts

@@ -1,4 +1,4 @@
-interface IPromptProps {
+interface PromptProps {
     when: boolean;
     message: string;
 }
@@ -13,8 +13,8 @@ export declare function usePrompt(message: string, when?: boolean): void;
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
-export declare const Prompt: ({ when, message }: IPromptProps) => null;
+export declare const Prompt: ({ when, message }: PromptProps) => null;
 export {};

package/components/{radioGroup → RadioGroup}/RadioGroup.d.ts

@@ -2,50 +2,34 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 interface RadioGroupProps extends CommonProps {
     /**
-     *
-     * @memberof RadioGroupProps
      */
     children: React.ReactNode;
     /**
      * The id of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     id: string;
     /**
      * onChange handler for the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
     /**
      * The value of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     value: string | number;
     /**
      * The name of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     name?: string;
     /**
      * The label of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     label?: string;
     /**
      * Whether the radiogroup is inline or not.
-     *
-     * @memberof RadioGroupProps
      */
     inline?: boolean;
     /**
      * Whether the radio group is disabled or not.
-     *
-     * @memberof RadioGroupProps
      */
     disabled?: boolean;
 }

package/components/{radioGroup → RadioGroup}/RadioItem.d.ts

@@ -3,14 +3,10 @@ import { CommonProps } from "../../common/CommonProps";
 interface RadioItemProps extends CommonProps {
     /**
      * The label of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     label: React.ReactNode;
     /**
      * The value of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     value: string | number;
 }

package/components/{select → Select}/shared.d.ts

@@ -12,56 +12,38 @@ export declare type SelectSize = "small" | "default";
 export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
     /**
      * Label to be displayed.
-     *
-     * @memberof ISelectProps
      */
     label?: string;
     /**
      * To hide the label.
-     *
-     * @memberof ISelectProps
      */
     hideLabel?: boolean;
     /**
      * Description for the select component.
-     *
-     * @memberof ISelectProps
      */
     description?: string;
     /**
      * Whether the component is invalid.
-     *
-     * @memberof ISelectProps
      */
     isInvalid?: boolean;
     /**
      * Whether the component is disabled.
-     *
-     * @memberof ISelectProps
      */
     isDisabled?: boolean;
     /**
      * Info of the select component.
-     *
-     * @memberof ISelectProps
      */
     info?: React.ReactNode;
     /**
      * Error of the select component.
-     *
-     * @memberof ISelectProps
      */
     error?: React.ReactNode;
     /**
      * Size of the component.
-     *
-     * @memberof ISelectProps
      */
     size?: SelectSize;
     /**
      * Whether component is asynchronous or not.
-     *
-     * @memberof ISelectProps
      */
     isAsync?: IsAsync;
 }

package/components/{skeletonLines → SkeletonLines}/SkeletonLines.d.ts

@@ -1,36 +1,26 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-export interface ISkeletonLinesProps extends CommonProps {
+export interface SkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
-     *
-     * @memberof ISkeletonLinesProps
      */
     lines?: number;
     /**
      * The height of lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     height?: number | number[] | string;
     /**
      * The width of each lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
-     *
-     * @memberof ISkeletonLinesProps
      */
     margin?: string;
     /**
      * Additional CSS classes.
-     *
-     * @memberof ISkeletonLinesProps
      */
     className?: string;
 }
-export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: ISkeletonLinesProps) => JSX.Element>;
+export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
 export default SkeletonLines;

package/components/{spacer → Spacer}/Spacer.d.ts

@@ -4,14 +4,10 @@ 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].
-     *
-     * @memberof SpacerProps
      */
     minHeight?: string;
     /**
      * The border of the spacer.
-     *
-     * @memberof SpacerProps
      */
     border?: boolean;
 }

package/components/Tag/Tag.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Colors } from "../../constants/colors";
+export declare type TagSize = "default" | "small";
+interface TagProps extends CommonProps {
+    /**
+     * The color of the tag
+     *
+     */
+    color?: Colors;
+    /**
+     * A handler for a click event triggered on x icon
+     * if not passed then x icon won't be visible
+     *
+     */
+    onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * Custom classNames can be added to make adjustments where needed.
+     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
+     * This will make the badge truncate the text if it is too long.
+     *
+     */
+    className?: string;
+    /**
+     * Child nodes of the tag.
+     *
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the tag.
+     *
+     */
+    size?: TagSize;
+}
+/**
+ * Tags allow users to enter information and filter content.
+ * Multiple or single tags can be used to categorise items.
+ * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+export declare const Tag: ({ className, dataTestId, children, size, onClose, color, ...rest }: TagProps) => JSX.Element;
+export {};

package/components/Tag/index.d.ts

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

package/components/{text → Text}/Text.d.ts

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

package/components/{textField → TextField}/TextField.d.ts

@@ -1,19 +1,15 @@
 import * as React from "react";
-import { FormGroupProps } from "../formGroup/FormGroup";
+import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TextInputProps } from "../TextInput/TextInput";
 declare 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 TextLenghtIndicator to the right of the helpText.
-     *
-     * @memberof TextFieldProps
      */
     maxLength?: number;
     /**
      * If a value is set, the field is rendered in its invalid state.
-     *
-     * @memberof TextFieldProps
      */
     errorMessage?: string;
 }

package/components/TextInput/TextInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from "../baseInput/BaseInput";
+import { BaseInputProps } from "../BaseInput/BaseInput";
 declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface TextInputProps extends BaseInputExposedProps {
 }

package/components/{tip → Tip}/Tip.d.ts

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { IconProps } from "../icon/Icon";
-import { TooltipProps } from "../tooltip";
+import { IconProps } from "../Icon/Icon";
+import { TooltipProps } from "../Tooltip";
 export interface TipProps extends CommonProps {
     /**
      * Child nodes to render inside the tip.
-     *
-     * @memberof TipProps
      */
     children: React.ReactNode;
     iconProps?: Partial<IconProps>;