@trackunit/react-components 1.7.15 → 1.7.17

package/index.cjs.js

@@ -803,23 +803,81 @@ const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3"
             success: ["bg-success-100", "border-success-300"],
             info: ["bg-info-100", "border-info-300"],
         },
+        actionsInline: {
+            true: ["flex-row", "items-center", "gap-2"],
+            false: ["flex-col", "gap-3"],
+        },
     },
     defaultVariants: {
         color: "info",
+        actionsInline: false,
+    },
+});
+const cvaAlertActionsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"], {
+    variants: {
+        inline: {
+            true: ["flex-row", "shrink-0"],
+            false: ["flex-row", "justify-end"],
+        },
+        actionsInline: {
+            true: ["shrink-0", "items-center"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
     },
 });
-const cvaAlertActionsContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "gap-2"]);
 const cvaContent = cssClassVarianceUtilities.cvaMerge(["flex-grow"]);
 const cvaAlertContentContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
     variants: {
         inline: {
-            true: ["items-center"],
+            true: ["items-center", "justify-between"],
             false: ["items-start"],
         },
+        actionsInline: {
+            true: ["flex-grow", "items-center"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
+    },
+});
+const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "w-min", "shrink-0"], {
+    variants: {
+        inline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+        actionsInline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
+    },
+});
+const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
+    variants: {
+        inline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+        actionsInline: {
+            true: ["self-start"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
     },
 });
-const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
-const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:flex"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -827,7 +885,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, actionsInline = false, }) => {
     const ref = react.useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     react.useEffect(() => {
@@ -836,7 +894,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsxRuntime.jsx(IconButton, { circular: true, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children, actionsInline }), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(Icon, { color: color, name: getIconName(color) }) }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? (jsxRuntime.jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsxRuntime.jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose && !actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction ? (jsxRuntime.jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsxRuntime.jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose && actionsInline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsxRuntime.jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {

package/index.esm.js

@@ -801,23 +801,81 @@ const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "roun
             success: ["bg-success-100", "border-success-300"],
             info: ["bg-info-100", "border-info-300"],
         },
+        actionsInline: {
+            true: ["flex-row", "items-center", "gap-2"],
+            false: ["flex-col", "gap-3"],
+        },
     },
     defaultVariants: {
         color: "info",
+        actionsInline: false,
+    },
+});
+const cvaAlertActionsContainer = cvaMerge(["flex", "gap-2"], {
+    variants: {
+        inline: {
+            true: ["flex-row", "shrink-0"],
+            false: ["flex-row", "justify-end"],
+        },
+        actionsInline: {
+            true: ["shrink-0", "items-center"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
     },
 });
-const cvaAlertActionsContainer = cvaMerge(["flex", "justify-end", "gap-2"]);
 const cvaContent = cvaMerge(["flex-grow"]);
 const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"], {
     variants: {
         inline: {
-            true: ["items-center"],
+            true: ["items-center", "justify-between"],
             false: ["items-start"],
         },
+        actionsInline: {
+            true: ["flex-grow", "items-center"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
+    },
+});
+const cvaAlertCloseButtonContainer = cvaMerge(["flex", "w-min", "shrink-0"], {
+    variants: {
+        inline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+        actionsInline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
+    },
+});
+const cvaAlertIconContainer = cvaMerge(["shrink-0", "grid", "w-min", "flex"], {
+    variants: {
+        inline: {
+            true: ["self-center"],
+            false: ["self-start"],
+        },
+        actionsInline: {
+            true: ["self-start"],
+            false: [],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        actionsInline: false,
     },
 });
-const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
-const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:flex"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -825,7 +883,7 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, actionsInline = false, }) => {
     const ref = useRef(null);
     const { isTextWrapping, ref: titleRef } = useIsTextWrapping();
     useEffect(() => {
@@ -834,7 +892,7 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
             ref.current?.scrollIntoView?.();
         }
     }, [ref, autoScroll]);
-    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children }), children: [jsx("div", { className: cvaAlertIconContainer(), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: !title ? "bold" : "normal", children: children })) : null] }), onClose ? (jsx("div", { className: cvaAlertCloseButtonContainer(), children: jsx(IconButton, { circular: true, icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaAlert({ color, actionsInline, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer({ inline: !isTextWrapping && !children, actionsInline }), children: [jsx("div", { className: cvaAlertIconContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsx(Icon, { color: color, name: getIconName(color) }) }), jsxs("div", { className: cvaContent(), children: [title ? (jsx(Text, { dataTestId: `${dataTestId}-title`, ref: titleRef, weight: "bold", children: title })) : null, children ? (jsx(Text, { type: typeof children === "string" || typeof children === "number" ? "p" : "span", weight: "normal", children: children })) : null] }), onClose && !actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }), primaryAction || secondaryAction ? (jsxs("div", { className: cvaAlertActionsContainer({ actionsInline }), children: [secondaryAction ? (jsx(Button, { loading: secondaryAction.loading, onClick: secondaryAction.onClick, size: "small", variant: "ghost-neutral", children: secondaryAction.label })) : null, primaryAction ? (jsx(Button, { loading: primaryAction.loading, onClick: primaryAction.onClick, size: "small", variant: color === "danger" ? "primary-danger" : "primary", children: primaryAction.label })) : null] })) : null, onClose && actionsInline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ inline: !isTextWrapping && !children, actionsInline }), children: jsx(IconButton, { className: "!h-5 !min-h-0 !w-5 !p-0", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, size: "small", title: "Close Alert", variant: "ghost-neutral" }) })) : null] }));
 };
 const getIconName = (color) => {
     switch (color) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.7.15",
+  "version": "1.7.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.13",
-    "@trackunit/css-class-variance-utilities": "1.6.12",
-    "@trackunit/shared-utils": "1.8.12",
-    "@trackunit/ui-icons": "1.6.11",
-    "@trackunit/react-table-pagination": "1.6.11",
-    "@trackunit/react-test-setup": "1.3.12",
+    "@trackunit/ui-design-tokens": "1.6.14",
+    "@trackunit/css-class-variance-utilities": "1.6.13",
+    "@trackunit/shared-utils": "1.8.13",
+    "@trackunit/ui-icons": "1.6.12",
+    "@trackunit/react-table-pagination": "1.6.12",
+    "@trackunit/react-test-setup": "1.3.13",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

package/src/components/Alert/Alert.d.ts

@@ -39,6 +39,10 @@ export interface AlertProps extends CommonProps {
      * could be used for displaying errors on long scrollable forms
      */
     autoScroll?: boolean;
+    /**
+     * When true, action buttons are displayed inline with the main content instead of below it.
+     */
+    actionsInline?: boolean;
 }
 /**
  * The Alert component should be used to inform the user of important information.
@@ -46,4 +50,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, actionsInline, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,21 @@
 export declare const cvaAlert: (props?: ({
     color?: "danger" | "warning" | "success" | "info" | null | undefined;
+    actionsInline?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertActionsContainer: (props?: ({
+    inline?: boolean | null | undefined;
+    actionsInline?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertActionsContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaAlertContentContainer: (props?: ({
     inline?: boolean | null | undefined;
+    actionsInline?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertCloseButtonContainer: (props?: ({
+    inline?: boolean | null | undefined;
+    actionsInline?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAlertIconContainer: (props?: ({
+    inline?: boolean | null | undefined;
+    actionsInline?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertCloseButtonContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertIconContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Popover/Popover.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement, ReactNode } from "react";
 import { PopoverPlacement, PopoverProps, UsePopoverType } from "./PopoverTypes";
 export type ContextType = UsePopoverType | null;
 /**
@@ -26,6 +27,6 @@ type ModalCallback = {
  * @returns {ReactElement} A Popover Context Provider containing the children
  */
 export declare const Popover: ({ children, isModal, ...restOptions }: {
-    children: React.ReactNode | ((modal: ModalCallback) => React.ReactNode);
-} & PopoverProps) => import("react/jsx-runtime").JSX.Element;
+    children: ReactNode | ((modal: ModalCallback) => ReactNode);
+} & PopoverProps) => ReactElement;
 export {};