@trackunit/react-components 1.7.16 → 1.7.18

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.16",
+  "version": "1.7.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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;