@trackunit/react-components 0.1.116 → 0.1.119

package/src/components/Spacer/Spacer.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { CommonProps, Size } from "../../common";
-export interface SpacerProps extends CommonProps {
-    /**
-     * The minimum height of the spacer. Defaults to 1px.
-     * Possible values are "normal"(8px), and "large" (32px).
-     */
-    size?: Size;
-    /**
-     * The border of the spacer.
-     */
-    border?: boolean;
-}
-/**
- * The Spacer component is used for adding a bit of space in the ui.
- *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
- */
-export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => JSX.Element;
+/// <reference types="react" />
+import { CommonProps, Size } from "../../common";
+export interface SpacerProps extends CommonProps {
+    /**
+     * The minimum height of the spacer. Defaults to 1px.
+     * Possible values are "normal"(8px), and "large" (32px).
+     */
+    size?: Size;
+    /**
+     * The border of the spacer.
+     */
+    border?: boolean;
+}
+/**
+ * The Spacer component is used for adding a bit of space in the ui.
+ *
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
+ */
+export declare const Spacer: ({ size, border, dataTestId, className }: SpacerProps) => JSX.Element;

package/src/components/Spacer/Spacer.variants.d.ts

@@ -1,4 +1,4 @@
-export declare const cvaSpacer: (props?: ({
-    border?: boolean | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpacer: (props?: ({
+    border?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Spacer";
+export * from "./Spacer";

package/src/components/Spinner/Spinner.d.ts

@@ -1,39 +1,39 @@
-/// <reference types="react" />
-import { CommonProps, Size } from "../../common/CommonProps";
-type Centering = "horizontally" | "vertically" | "centered";
-export interface SpinnerProps extends CommonProps {
-    /**
-     * Defines the size of the spinner.
-     */
-    size?: Size;
-    /**
-     * When true, the spinner will be centered in the parent element using css grid.
-     */
-    centering?: Centering;
-    /**
-     * Select either "light" or "dark" mode.
-     * Use "dark" when the spinner is used on a dark background.
-     */
-    mode?: "light" | "dark";
-    /**
-     * Add custom className to the spinners container element.
-     * Useful for sizing to minimize jumping on load.
-     */
-    containerClassName?: string;
-}
-/**
- * The spinner component provides visual feedback that data is being processed.
- *
- * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
- *
- * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
- *
- * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
- *
- * Use when retrieving or refreshing small data amounts, such as status.
- *
- * @param {SpinnerProps} props - The props for the Spinner component
- * @returns {JSX.Element} Spinner component
- */
-export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps, Size } from "../../common/CommonProps";
+type Centering = "horizontally" | "vertically" | "centered";
+export interface SpinnerProps extends CommonProps {
+    /**
+     * Defines the size of the spinner.
+     */
+    size?: Size;
+    /**
+     * When true, the spinner will be centered in the parent element using css grid.
+     */
+    centering?: Centering;
+    /**
+     * Select either "light" or "dark" mode.
+     * Use "dark" when the spinner is used on a dark background.
+     */
+    mode?: "light" | "dark";
+    /**
+     * Add custom className to the spinners container element.
+     * Useful for sizing to minimize jumping on load.
+     */
+    containerClassName?: string;
+}
+/**
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
+ *
+ * @param {SpinnerProps} props - The props for the Spinner component
+ * @returns {JSX.Element} Spinner component
+ */
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;
+export {};

package/src/components/Spinner/Spinner.variants.d.ts

@@ -1,7 +1,7 @@
-export declare const cvaSpinner: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    mode?: "dark" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaSpinnerContainer: (props?: ({
-    centering?: "centered" | "vertically" | "horizontally" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpinner: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerContainer: (props?: ({
+    centering?: "centered" | "vertically" | "horizontally" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Spinner";
+export * from "./Spinner";

package/src/components/Tag/Tag.d.ts

@@ -1,40 +1,40 @@
-import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export type TagSize = "small" | "medium";
-export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
-export interface TagProps extends CommonProps {
-    /**
-     * The color of the tag.
-     *
-     */
-    color?: TagColors;
-    /**
-     * 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;
-    /**
-     * Child nodes of the tag.
-     *
-     */
-    children?: React.ReactNode;
-    /**
-     * Size of the tag.
-     */
-    size?: TagSize;
-}
-/**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
- *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
+import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export type TagSize = "small" | "medium";
+export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
+export interface TagProps extends CommonProps {
+    /**
+     * The color of the tag.
+     *
+     */
+    color?: TagColors;
+    /**
+     * 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;
+    /**
+     * Child nodes of the tag.
+     *
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the tag.
+     */
+    size?: TagSize;
+}
+/**
+ *  The tag component is used to categorize elements in the ui.
+ *
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;

package/src/components/Tag/Tag.variants.d.ts

@@ -1,7 +1,7 @@
-export declare const cvaTag: (props?: ({
-    size?: "small" | "medium" | null | undefined;
-    layout?: "withIcon" | "default" | null | undefined;
-    color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTag: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    layout?: "withIcon" | "default" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTagIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTagIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

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

package/src/components/Text/Text.d.ts

@@ -1,58 +1,58 @@
-import * as React from "react";
-import { CommonProps, Size } from "../../common/CommonProps";
-export type TextType = "p" | "span" | "div";
-export type TextAlign = "left" | "center" | "right";
-export type TextWeight = "normal" | "thick" | "bold";
-export interface TextProps extends CommonProps {
-    /**
-     * Child nodes.
-     */
-    children: React.ReactNode;
-    /**
-     * Type of element. Element can be of types "p", "span", or "div".
-     */
-    type?: TextType;
-    /**
-     * Size of element. Values can be "small", "medium", or "large".
-     */
-    size?: Size;
-    /**
-     * Alignment of the text. Values can be "left", "center", or "right".
-     */
-    align?: TextAlign;
-    /**
-     * Weight of the text. Values can be "normal", "thick", or "bold".
-     */
-    weight?: TextWeight;
-    /**
-     * Whether font styles are inverted.
-     */
-    inverted?: boolean;
-    /**
-     * Whether font styles are subtle or not.
-     */
-    subtle?: boolean;
-    /**
-     * Whether text is italicized.
-     */
-    italicize?: boolean;
-    /**
-     * Whether text is uppercase.
-     */
-    uppercase?: boolean;
-    /**
-     * Whether text is underlined or not.
-     */
-    underline?: boolean;
-}
-/**
- *  The Text component is used to apply Trackunit default typography styles to text.
- *
- *  ### When to use
- *
- *  Use Text when you want to show a text section, use Heading if you want to show a heading.
- *
- * @param {TextProps} props - The props for the Text component
- * @returns {JSX.Element} Text component
- */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps, Size } from "../../common/CommonProps";
+export type TextType = "p" | "span" | "div";
+export type TextAlign = "left" | "center" | "right";
+export type TextWeight = "normal" | "thick" | "bold";
+export interface TextProps extends CommonProps {
+    /**
+     * Child nodes.
+     */
+    children: React.ReactNode;
+    /**
+     * Type of element. Element can be of types "p", "span", or "div".
+     */
+    type?: TextType;
+    /**
+     * Size of element. Values can be "small", "medium", or "large".
+     */
+    size?: Size;
+    /**
+     * Alignment of the text. Values can be "left", "center", or "right".
+     */
+    align?: TextAlign;
+    /**
+     * Weight of the text. Values can be "normal", "thick", or "bold".
+     */
+    weight?: TextWeight;
+    /**
+     * Whether font styles are inverted.
+     */
+    inverted?: boolean;
+    /**
+     * Whether font styles are subtle or not.
+     */
+    subtle?: boolean;
+    /**
+     * Whether text is italicized.
+     */
+    italicize?: boolean;
+    /**
+     * Whether text is uppercase.
+     */
+    uppercase?: boolean;
+    /**
+     * Whether text is underlined or not.
+     */
+    underline?: boolean;
+}
+/**
+ *  The Text component is used to apply Trackunit default typography styles to text.
+ *
+ *  ### When to use
+ *
+ *  Use Text when you want to show a text section, use Heading if you want to show a heading.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;

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

@@ -1 +1 @@
-export * from "./Text";
+export * from "./Text";

package/src/components/Timeline/Timeline.d.ts

@@ -1,33 +1,33 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-export interface TimelineProps extends CommonProps {
-    children: React.ReactNode;
-}
-/**
- * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
- * - with an indicator (dot)
- * - a header (next to the dot)
- * - and a body.
- *
- * @param {TimelineProps} props - The props for the Timeline component
- * @returns {JSX.Element} Timeline component
- */
-export declare const Timeline: ({ className, dataTestId, children }: TimelineProps) => JSX.Element;
-interface TimeLineElementProps extends CommonProps {
-    date: Date;
-    showTime?: boolean;
-    header?: React.ReactNode;
-    children: React.ReactNode;
-    dot?: React.ReactNode;
-    onClick?: () => void;
-    headerClassName?: string;
-}
-/**
- * TimelineElement - entry on a timeline - rendered with an icon on the timeline
- * - a date as the header and the children provided as body.
- *
- * @param {TimeLineElementProps} props the props
- * @returns {JSX.Element} component
- */
-export declare const TimelineElement: ({ date, showTime, children, className, dataTestId, headerClassName, dot, header, onClick, }: TimeLineElementProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export interface TimelineProps extends CommonProps {
+    children: React.ReactNode;
+}
+/**
+ * Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
+ * - with an indicator (dot)
+ * - a header (next to the dot)
+ * - and a body.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+export declare const Timeline: ({ className, dataTestId, children }: TimelineProps) => JSX.Element;
+interface TimeLineElementProps extends CommonProps {
+    date: Date;
+    showTime?: boolean;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    dot?: React.ReactNode;
+    onClick?: () => void;
+    headerClassName?: string;
+}
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+export declare const TimelineElement: ({ date, showTime, children, className, dataTestId, headerClassName, dot, header, onClick, }: TimeLineElementProps) => JSX.Element;
+export {};

package/src/components/Timeline/Timeline.variants.d.ts

@@ -1,3 +1,3 @@
-export declare const cvaTimeline: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTimelineElement: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTimelineDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTimeline: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTimelineElement: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTimelineDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Tip/Tip.d.ts

@@ -1,26 +1,26 @@
-import * as React from "react";
-import { CommonProps } from "../../common";
-import { IconProps } from "../Icon/Icon";
-import { TooltipProps } from "../Tooltip";
-export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" | "mode"> {
-    /**
-     * Child nodes to render inside the tip.
-     */
-    children: React.ReactNode | string;
-    /**
-     * The props for setting the icon on this tip.
-     */
-    iconProps?: Partial<IconProps>;
-    /**
-     * Shows an icon with link as the href attribute inside the tip.
-     */
-    link?: string;
-}
-/**
- * The Tip component is used to show helpful tips or contextual information to the users.
- * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
- *
- * @param {TipProps} props - The props for the Tip component
- * @returns {JSX.Element} Tip component
- */
-export declare const Tip: ({ children, iconProps, dataTestId, className, placement, mode, link, }: TipProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { IconProps } from "../Icon/Icon";
+import { TooltipProps } from "../Tooltip";
+export interface TipProps extends CommonProps, Pick<TooltipProps, "placement" | "mode"> {
+    /**
+     * Child nodes to render inside the tip.
+     */
+    children: React.ReactNode | string;
+    /**
+     * The props for setting the icon on this tip.
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Shows an icon with link as the href attribute inside the tip.
+     */
+    link?: string;
+}
+/**
+ * The Tip component is used to show helpful tips or contextual information to the users.
+ * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
+ *
+ * @param {TipProps} props - The props for the Tip component
+ * @returns {JSX.Element} Tip component
+ */
+export declare const Tip: ({ children, iconProps, dataTestId, className, placement, mode, link, }: TipProps) => JSX.Element;

package/src/components/Tip/Tip.variants.d.ts

@@ -1,4 +1,4 @@
-export declare const cvaTip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTipContent: (props?: ({
-    color?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTipContent: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Tip";
+export * from "./Tip";

package/src/components/Tooltip/Tooltip.d.ts

@@ -1,37 +1,37 @@
-import * as React from "react";
-import { CommonProps } from "../../common";
-import { PopoverPlacement } from "../Popover";
-import { TextType } from "../Text";
-export interface TooltipProps extends CommonProps {
-    /**
-     * The text to be displayed in the tooltip.
-     */
-    label: string | React.ReactNode;
-    /**
-     * Where the tooltip should preferentially be placed.
-     */
-    placement?: PopoverPlacement;
-    /**
-     * Child nodes
-     */
-    children?: React.ReactNode;
-    /**
-     * Whether the tooltip is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     *  To select either "light" or "dark" mode.
-     */
-    mode?: "light" | "dark";
-    /**
-     * Type of content.
-     */
-    contentTextType?: TextType;
-}
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-export declare const Tooltip: ({ children, dataTestId, disabled, className, ...rest }: TooltipProps) => JSX.Element;
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { PopoverPlacement } from "../Popover";
+import { TextType } from "../Text";
+export interface TooltipProps extends CommonProps {
+    /**
+     * The text to be displayed in the tooltip.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Where the tooltip should preferentially be placed.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Child nodes
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the tooltip is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     *  To select either "light" or "dark" mode.
+     */
+    mode?: "light" | "dark";
+    /**
+     * Type of content.
+     */
+    contentTextType?: TextType;
+}
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+export declare const Tooltip: ({ children, dataTestId, disabled, className, ...rest }: TooltipProps) => JSX.Element;

package/src/components/Tooltip/Tooltip.variants.d.ts

@@ -1,6 +1,6 @@
-export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaTooltipContent: (props?: ({
-    color?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTooltipFlexContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipPopover: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTooltipContent: (props?: ({
+    color?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1 @@
-export * from "./Tooltip";
+export * from "./Tooltip";