@trackunit/react-components 0.1.290 → 0.1.292

package/index.cjs.js

@@ -1281,7 +1281,7 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsxRuntime.jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
@@ -2984,6 +2984,54 @@ const Indicator = (_a) => {
     return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] })) }));
 };
 
+const cvaKPICardContainer = cssClassVarianceUtilities.cvaMerge(["inline-flex"], {
+    variants: {
+        isClickable: {
+            true: ["cursor-pointer"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+    },
+});
+const cvaKPICard = cssClassVarianceUtilities.cvaMerge(["w-full", "bg-white", "p-6", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+    variants: {
+        isClickable: {
+            true: ["hover:bg-slate-50"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+    },
+});
+const cvaKPICardIconContainer = cssClassVarianceUtilities.cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+    variants: {
+        backgroundColor: {
+            info: "bg-primary-500",
+            success: "bg-secondary-500",
+            warning: "bg-yellow-500",
+            danger: "bg-red-500",
+        },
+    },
+    defaultVariants: {
+        backgroundColor: "info",
+    },
+});
+
+/**
+ * The KPICard component is used to display KPIs.
+ *
+ * @param {KPICardProps} props - The props for the KPICard component
+ * @returns {JSX.Element} KPICard component
+ */
+const KPICard = (_a) => {
+    var { asChild = false, title, value, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    const Comp = asChild ? reactSlot.Slot : "div";
+    return (jsxRuntime.jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsxRuntime.jsxs(Card, { className: cvaKPICard({ isClickable: asChild }), children: [iconName ? (jsxRuntime.jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsxRuntime.jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxRuntime.jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] }), jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] })));
+};
+
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
     "py-2",
     "pl-2",
@@ -4480,6 +4528,7 @@ exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Indicator = Indicator;
+exports.KPICard = KPICard;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
 exports.Modal = Modal;

package/index.esm.js

@@ -1250,7 +1250,7 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
         return height;
     };
     for (let i = 0; i < lines; i++) {
-        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "skeleton-lines", "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
+        skeletonLines.push(jsx("div", { className: cvaSkeletonLine({ className }), "data-testid": dataTestId ? `${dataTestId}-${i}` : `skeleton-lines-${i}`, "data-type": "loading-skeleton-line", style: { height: getHeight(i), width: getWidth(i), margin: lines > 1 ? margin : "" }, children: lines > 1 && jsx(Fragment, { children: "\u00A0" }) }, i));
     }
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx(Fragment, { children: skeletonLines });
@@ -2953,6 +2953,54 @@ const Indicator = (_a) => {
     return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaIndicator(), "data-testid": dataTestId }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping ? (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })) : null, icon] }), label !== undefined && withLabel ? (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label })) : null] })) }));
 };
 
+const cvaKPICardContainer = cvaMerge(["inline-flex"], {
+    variants: {
+        isClickable: {
+            true: ["cursor-pointer"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+    },
+});
+const cvaKPICard = cvaMerge(["w-full", "bg-white", "p-6", "py-4", "flex", "flex-row", "items-center", "gap-3"], {
+    variants: {
+        isClickable: {
+            true: ["hover:bg-slate-50"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        isClickable: false,
+    },
+});
+const cvaKPICardIconContainer = cvaMerge(["w-7", "h-7", "flex", "justify-center", "items-center", "rounded"], {
+    variants: {
+        backgroundColor: {
+            info: "bg-primary-500",
+            success: "bg-secondary-500",
+            warning: "bg-yellow-500",
+            danger: "bg-red-500",
+        },
+    },
+    defaultVariants: {
+        backgroundColor: "info",
+    },
+});
+
+/**
+ * The KPICard component is used to display KPIs.
+ *
+ * @param {KPICardProps} props - The props for the KPICard component
+ * @returns {JSX.Element} KPICard component
+ */
+const KPICard = (_a) => {
+    var { asChild = false, title, value, unit, iconName, iconBackgroundColor, className, dataTestId } = _a, rest = __rest(_a, ["asChild", "title", "value", "unit", "iconName", "iconBackgroundColor", "className", "dataTestId"]);
+    const Comp = asChild ? Slot : "div";
+    return (jsxs(Comp, Object.assign({ className: cvaKPICardContainer({ className, isClickable: asChild }), "data-testid": `${dataTestId}-comp` }, rest, { children: [jsxs(Card, { className: cvaKPICard({ isClickable: asChild }), children: [iconName ? (jsx("div", { className: cvaKPICardIconContainer({ backgroundColor: iconBackgroundColor }), "data-testid": `${dataTestId}-icon-container`, children: jsx(Icon, { color: "white", dataTestId: `${dataTestId}-icon`, name: iconName, size: "medium" }) })) : null, jsxs("div", { children: [jsx(Text, { dataTestId: `${dataTestId}-title`, subtle: true, weight: "bold", children: title }), jsxs(Text, { dataTestId: `${dataTestId}-value`, size: "large", weight: "bold", children: [value, " ", unit] })] })] }), jsx(Slottable, { children: rest.children })] })));
+};
+
 const cvaMenuItem = cvaMerge([
     "py-2",
     "pl-2",
@@ -4431,4 +4479,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.290",
+  "version": "0.1.292",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -0,0 +1,47 @@
+import { IntentColors } from "@trackunit/ui-design-tokens";
+import { IconName } from "@trackunit/ui-icons";
+import { ReactNode } from "react";
+import { CommonProps } from "../../common";
+export interface KPICardProps extends CommonProps {
+    /**
+     * The title of the KPI Card
+     */
+    title: string;
+    /**
+     * The value of the KPI Card
+     */
+    value: string | number;
+    /**
+     * The unit of the KPI Card
+     */
+    unit: string;
+    /**
+     * The icon to be displayed in the prefix
+     */
+    iconName?: IconName;
+    /**
+     * The icon to be displayed in the prefix
+     */
+    iconBackgroundColor?: IntentColors;
+    /**
+     * Use asChild to render the KPICard as another component
+     */
+    asChild?: boolean;
+    /**
+     * Only add when asChild is true.
+     * The child element is used to wrap the KPICard component to set it to another HTML element.
+     *
+     * @example
+     * <KPICard {...props}>
+     *   <Link to="/" />
+     * </KPICard>
+     */
+    children?: ReactNode;
+}
+/**
+ * The KPICard component is used to display KPIs.
+ *
+ * @param {KPICardProps} props - The props for the KPICard component
+ * @returns {JSX.Element} KPICard component
+ */
+export declare const KPICard: ({ asChild, title, value, unit, iconName, iconBackgroundColor, className, dataTestId, ...rest }: KPICardProps) => JSX.Element;

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

@@ -0,0 +1,9 @@
+export declare const cvaKPICardContainer: (props?: ({
+    isClickable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPICard: (props?: ({
+    isClickable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaKPICardIconContainer: (props?: ({
+    backgroundColor?: "info" | "success" | "warning" | "danger" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -10,6 +10,7 @@ export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
 export * from "./Icon/Icon";
 export * from "./Indicator";
+export * from "./KPICard/KPICard";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./Notice";