@trackunit/react-components 0.1.316 → 0.1.319

package/index.cjs.js

@@ -1741,6 +1741,32 @@ const Collapsible = ({ children, expanded, id }) => {
     return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
+/**
+ * A component that displays a visual indicator based on the completion status.
+ *
+ * @example
+ * <CompletionStatusIndicator loading={true} />
+ * <CompletionStatusIndicator error={true} />
+ * <CompletionStatusIndicator success={true} />
+ * @param {CompletionStatusIndicatorProps} props - The properties for the indicator.
+ * @param {boolean} props.loading - Indicates if the process is in a loading state.
+ * @param {boolean} props.error - Indicates if an error has occurred.
+ * @param {boolean} props.success - Indicates if the process was successful.
+ */
+const CompletionStatusIndicator = (_a) => {
+    var { loading, error, success } = _a, rest = __rest(_a, ["loading", "error", "success"]);
+    if (loading) {
+        return jsxRuntime.jsx(Spinner, Object.assign({ className: "h-[22px] w-[22px]", containerClassName: "w-min" }, rest));
+    }
+    if (error) {
+        return jsxRuntime.jsx(Icon, Object.assign({ color: "danger", name: "XCircle", type: "solid" }, rest));
+    }
+    if (success) {
+        return jsxRuntime.jsx(Icon, Object.assign({ color: "success", name: "CheckCircle", type: "solid" }, rest));
+    }
+    return null;
+};
+
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
     "py-1",
     "px-2",
@@ -4324,7 +4350,7 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
     "border-b-2",
     "border-b-transparent",
     "hover:border-b-transparent",
-    "data-[state=active]:border-b-blue-600",
+    "data-[state=active]:border-b-primary-600",
     "data-[state=active]:font-semibold",
     "data-[state=active]:text-slate-900",
     "data-[state=inactive]:font-medium",
@@ -4660,6 +4686,7 @@ exports.CardBody = CardBody;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
+exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyableText = CopyableText;
 exports.DayPicker = DayPicker;
 exports.DayRangePicker = DayRangePicker;

package/index.esm.js

@@ -1709,6 +1709,32 @@ const Collapsible = ({ children, expanded, id }) => {
     return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
+/**
+ * A component that displays a visual indicator based on the completion status.
+ *
+ * @example
+ * <CompletionStatusIndicator loading={true} />
+ * <CompletionStatusIndicator error={true} />
+ * <CompletionStatusIndicator success={true} />
+ * @param {CompletionStatusIndicatorProps} props - The properties for the indicator.
+ * @param {boolean} props.loading - Indicates if the process is in a loading state.
+ * @param {boolean} props.error - Indicates if an error has occurred.
+ * @param {boolean} props.success - Indicates if the process was successful.
+ */
+const CompletionStatusIndicator = (_a) => {
+    var { loading, error, success } = _a, rest = __rest(_a, ["loading", "error", "success"]);
+    if (loading) {
+        return jsx(Spinner, Object.assign({ className: "h-[22px] w-[22px]", containerClassName: "w-min" }, rest));
+    }
+    if (error) {
+        return jsx(Icon, Object.assign({ color: "danger", name: "XCircle", type: "solid" }, rest));
+    }
+    if (success) {
+        return jsx(Icon, Object.assign({ color: "success", name: "CheckCircle", type: "solid" }, rest));
+    }
+    return null;
+};
+
 const cvaCopyableText = cvaMerge([
     "py-1",
     "px-2",
@@ -4292,7 +4318,7 @@ const cvaTab = cvaMerge([
     "border-b-2",
     "border-b-transparent",
     "hover:border-b-transparent",
-    "data-[state=active]:border-b-blue-600",
+    "data-[state=active]:border-b-primary-600",
     "data-[state=active]:font-semibold",
     "data-[state=active]:text-slate-900",
     "data-[state=inactive]:font-medium",
@@ -4617,4 +4643,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, 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 };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, 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.316",
+  "version": "0.1.319",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/CompletionStatusIndicator/CompletionStatusIndicator.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export interface CompletionStatusIndicatorProps extends CommonProps {
+    loading: boolean;
+    success: boolean;
+    error: boolean;
+}
+/**
+ * A component that displays a visual indicator based on the completion status.
+ *
+ * @example
+ * <CompletionStatusIndicator loading={true} />
+ * <CompletionStatusIndicator error={true} />
+ * <CompletionStatusIndicator success={true} />
+ * @param {CompletionStatusIndicatorProps} props - The properties for the indicator.
+ * @param {boolean} props.loading - Indicates if the process is in a loading state.
+ * @param {boolean} props.error - Indicates if an error has occurred.
+ * @param {boolean} props.success - Indicates if the process was successful.
+ */
+export declare const CompletionStatusIndicator: ({ loading, error, success, ...rest }: CompletionStatusIndicatorProps) => JSX.Element | null;

package/src/components/index.d.ts

@@ -3,6 +3,7 @@ export * from "./Badge";
 export * from "./Breadcrumb/Breadcrumb";
 export * from "./Card";
 export * from "./Collapse";
+export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
 export * from "./DayPicker";
 export * from "./Drawer/Drawer";