@trackunit/react-components 1.12.11 → 1.13.0

package/src/components/KPI/KPI.d.ts

@@ -26,32 +26,6 @@ export interface KPIProps extends CommonProps, Styleable {
      * The size of the KPI
      */
     variant?: "small" | "default" | "condensed";
-    /**
-     * The trend of the KPI
-     */
-    trend?: {
-        /**
-         * The value of the trend
-         */
-        value?: number | string;
-        /**
-         * The percentage of the trend
-         */
-        percentage?: number | string;
-        /**
-         * The variant of the trend
-         */
-        variant?: {
-            /**
-             * The icon of the trend
-             */
-            icon?: "ArrowUp" | "ArrowDown" | "ArrowTrendingUp" | "ArrowTrendingDown";
-            /**
-             * The color of the trend
-             */
-            color?: "success" | "danger" | "neutral";
-        };
-    };
 }
 /**
  * The KPI component is used to display KPIs.
@@ -59,4 +33,4 @@ export interface KPIProps extends CommonProps, Styleable {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-export declare const KPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, variant, trend, style, ...rest }: KPIProps) => ReactElement;
+export declare const KPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, variant, style, ...rest }: KPIProps) => ReactElement;

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

@@ -1,14 +1,6 @@
 export declare const cvaKPI: (props?: ({
     variant?: "default" | "small" | "condensed" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaKPIHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKPITitleText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaKPIvalueText: (props?: ({
-    variant?: "default" | "small" | "condensed" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaKPITrendPercentage: (props?: ({
-    color?: "success" | "danger" | "neutral" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaKPIValueContainer: (props?: ({
-    isDefaultAndHasTrendValue?: boolean | null | undefined;
+    color?: "success" | "danger" | "warning" | "neutral" | "info" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/KPICard/KPICard.d.ts

@@ -1,7 +1,11 @@
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
+import { IconColors } from "../Icon/Icon";
 import { KPIProps } from "../KPI/KPI";
+import { NoticeProps } from "../Notice";
+import { ValueBarProps } from "../ValueBar";
+import { TrendIndicatorProps } from "./components/TrendIndicator/TrendIndicator";
 export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     /**
      * Is the kpi card active
@@ -22,7 +26,19 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     /**
      * The color of the icon
      */
-    iconColor?: "success" | "warning" | "danger" | "info" | "neutral";
+    iconColor?: Extract<IconColors, "success" | "warning" | "danger" | "info" | "neutral">;
+    /**
+     * The trends to display in the KPI
+     */
+    trends?: Array<Omit<TrendIndicatorProps, "className" | "dataTestId">>;
+    /**
+     * The notice to display in the KPI
+     */
+    notice?: Pick<NoticeProps, "label" | "iconName" | "iconColor">;
+    /**
+     * Value bar to display in the KPI
+     */
+    valueBar?: Omit<ValueBarProps, "className" | "dataTestId" | "size" | "valueColor">;
 }
 /**
  * The KPICard component is used to display KPIs.
@@ -30,4 +46,4 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ isActive, onClick, className, "data-testid": dataTestId, children, iconName, iconColor, loading, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, "data-testid": dataTestId, children, iconName, iconColor, loading, notice, valueBar, trends, unit, ...rest }: KPICardProps) => ReactElement;

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

@@ -5,6 +5,3 @@ export declare const cvaKPICard: (props?: ({
 export declare const cvaKPIIconContainer: (props?: ({
     iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardBodyContainer: (props?: ({
-    iconName?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/KPICard/components/TrendIndicator/TrendIndicator.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from "react";
+import { CommonProps } from "../../../../common/CommonProps";
+import { KPICardProps } from "../../KPICard";
+export interface TrendIndicatorProps extends CommonProps {
+    /**
+     * The absolute value
+     */
+    value?: string | number;
+    /**
+     * The trend of the value
+     */
+    trend: string | number;
+    /**
+     * A short description of the trend
+     */
+    label?: string;
+    /**
+     * The trend icon
+     */
+    icon?: "ArrowUp" | "ArrowDown" | "ArrowTrendingUp" | "ArrowTrendingDown";
+    /**
+     * The color of the trend icon
+     */
+    color?: KPICardProps["iconColor"];
+}
+/**
+ * The TrendIndicator component is used within the KPI Card component to display the trend indicator.
+ *
+ * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
+ * @returns {ReactElement} TrendIndicator component
+ */
+export declare const TrendIndicator: ({ value, trend, label, icon, color, "data-testid": dataTestId, className, }: TrendIndicatorProps) => ReactElement;

package/src/components/KPICard/components/TrendIndicators.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { CommonProps } from "../../../common/CommonProps";
+import { TrendIndicatorProps } from "./TrendIndicator/TrendIndicator";
+export interface TrendIndicatorsProps extends CommonProps {
+    trends: Array<Omit<TrendIndicatorProps, "className" | "data-testid">>;
+}
+/**
+ * The TrendIndicators component is used within the KPI Card component to display the trend indicators.
+ *
+ * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
+ * @returns {ReactElement} TrendIndicators component
+ */
+export declare const TrendIndicators: ({ trends, "data-testid": dataTestId, className, }: TrendIndicatorsProps) => ReactElement;

package/src/components/List/List.d.ts

@@ -52,6 +52,7 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  *
  * @example Basic usage
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],
@@ -68,6 +69,7 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * ```
  * @example With header
  * ```tsx
+ * import { useList, List } from "@trackunit/react-components";
  * const list = useList({
  *   count: items.length,
  *   getItem: index => items[index],

package/src/components/Notice/Notice.d.ts

@@ -1,13 +1,23 @@
 import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Size } from "../../common/Size";
 export interface NoticeProps extends CommonProps {
     /**
-     * The icon to be rendered inside the indicator component
+     * The name of the icon
      */
-    icon: ReactElement;
+    iconName?: IconName;
     /**
-     * A color token used to style the icon and the icon background
+     * The size of the icon
+     */
+    iconSize?: Size;
+    /**
+     * The color of the icon. Icon color overrides the color prop.
+     */
+    iconColor?: NoticeProps["color"];
+    /**
+     * A color token used to style both the text and icon
      */
     color?: Extract<GeneralColors, "neutral"> | IntentColors;
     /**
@@ -37,8 +47,8 @@ export interface NoticeProps extends CommonProps {
  * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
  *
  * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
- 
+ *
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {ReactElement} Notice component
  */
-export declare const Notice: ({ "data-testid": dataTestId, icon, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => ReactElement;
+export declare const Notice: ({ "data-testid": dataTestId, iconName, iconSize, iconColor, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => ReactElement;

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

@@ -14,7 +14,18 @@ export interface SpacerProps extends CommonProps {
 }
 /**
  * The Spacer component is used for adding a bit of space in the ui.
- 
+ *
+ * @example basic usage
+ * ```tsx
+ * import { Spacer } from "@trackunit/react-components";
+ * const MySpacer = () => {
+ *   return (
+ *     <div>
+ *       <Spacer size="small" border data-testid="my-spacer-testid" />
+ *     </div>
+ *   );
+ * };
+ * ```
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */

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

@@ -58,7 +58,4 @@ export interface TagProps extends CommonProps {
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-export declare const Tag: {
-    ({ className, "data-testid": dataTestId, children, size, onClose, color, disabled, ref, icon, onMouseEnter, }: TagProps): ReactElement;
-    displayName: string;
-};
+export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClose, color, disabled, ref, icon, onMouseEnter, }: TagProps) => ReactElement;

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

@@ -1,9 +1,16 @@
+/**
+ * The Tailwind class for minimum width of tag text.
+ * This is the source of truth - use parseTailwindArbitraryValue to derive the numeric value.
+ */
+export declare const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
     layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
     color?: "primary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
     border?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaTagText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTagText: (props?: ({
+    truncate?: boolean | 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/index.d.ts

@@ -28,6 +28,8 @@ export * from "./components/Indicator";
 export * from "./components/Indicator/Indicator.variants";
 export * from "./components/InteractableItem/InteractableItem.variants";
 export * from "./components/KPI/KPI";
+export * from "./components/KPICard/components/TrendIndicator/TrendIndicator";
+export * from "./components/KPICard/components/TrendIndicators";
 export * from "./components/KPICard/KPICard";
 export * from "./components/List/List";
 export * from "./components/List/List.variants";