@trackunit/react-components 0.1.219 → 0.1.220

package/index.cjs.js

@@ -679,70 +679,24 @@ const StarButton = ({ starred, onClick }) => {
     return (jsxRuntime.jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsxRuntime.jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
 };
 
-const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
+const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "border", "@container"], {
     variants: {
         color: {
-            danger: "bg-danger-100",
-            warning: "bg-warning-100",
-            success: "bg-success-100",
-            info: "bg-info-100",
-        },
-        layout: {
-            default: "items-start",
-            inline: "items-center",
+            danger: ["bg-danger-100", "border-danger-300"],
+            warning: ["bg-warning-100", "border-warning-300"],
+            success: ["bg-success-100", "border-success-300"],
+            info: ["bg-info-100", "border-info-300"],
         },
     },
     defaultVariants: {
-        layout: "default",
         color: "info",
     },
 });
-const cvaAlertDetails = cssClassVarianceUtilities.cvaMerge(["flex"]);
-const cvaAlertContentBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "flex-grow"]);
-const cvaAlertRightAligned = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "gap-2", "ml-2", "mt-4"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "mt-0 ml-auto items-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertContent = cssClassVarianceUtilities.cvaMerge(["grow"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "flex w-full items-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "ml-4",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "mr-3", "shrink-0", "grid", "w-min"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "self-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
+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"]);
+const cvaAlertCloseButtonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
+const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -750,7 +704,7 @@ const cvaAlertIconContainer = cssClassVarianceUtilities.cvaMerge(["self-start",
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React__namespace.useRef(null);
     const getIconFromColor = () => {
         switch (color) {
@@ -760,6 +714,8 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return jsxRuntime.jsx(Icon, { name: "ExclamationCircle", color: "warning" });
             case "success":
                 return jsxRuntime.jsx(Icon, { name: "CheckCircle", color: "success" });
+            case "info":
+                return jsxRuntime.jsx(Icon, { name: "InformationCircle", color: "info" });
             default:
                 return jsxRuntime.jsx(Icon, { name: "InformationCircle" });
         }
@@ -774,14 +730,12 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(Text, { weight: "bold", children: title !== null && title !== void 0 ? title : children }), children && jsxRuntime.jsx(Text, { weight: !title ? "bold" : "normal", children: children })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && jsxRuntime.jsx(Text, { weight: "bold", children: title !== null && title !== void 0 ? title : children }), children && jsxRuntime.jsx(Text, { weight: !title ? "bold" : "normal", children: children })] }));
     React__namespace.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    const layout = inline ? "inline" : "default";
-    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxRuntime.jsxs("div", { className: cvaAlertDetails(), children: [jsxRuntime.jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxRuntime.jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsxRuntime.jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsxRuntime.jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsxRuntime.jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsxRuntime.jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxRuntime.jsxs("div", { className: cvaAlertContentContainer(), children: [jsxRuntime.jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxRuntime.jsxs("div", { className: cvaContent(), children: [title ? jsxRuntime.jsx(Text, { 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, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction && (jsxRuntime.jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsxRuntime.jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label }))] }))] }));
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -649,70 +649,24 @@ const StarButton = ({ starred, onClick }) => {
     return (jsx("div", { onClick: onClick, "data-test-id": "starred-filter", children: jsx(Icon, { name: "Star", color: starred ? "primary" : "neutral", size: "medium" }) }));
 };
 
-const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
+const cvaAlert = cvaMerge(["flex", "flex-col", "gap-3", "relative", "p-3", "rounded-lg", "border", "@container"], {
     variants: {
         color: {
-            danger: "bg-danger-100",
-            warning: "bg-warning-100",
-            success: "bg-success-100",
-            info: "bg-info-100",
-        },
-        layout: {
-            default: "items-start",
-            inline: "items-center",
+            danger: ["bg-danger-100", "border-danger-300"],
+            warning: ["bg-warning-100", "border-warning-300"],
+            success: ["bg-success-100", "border-success-300"],
+            info: ["bg-info-100", "border-info-300"],
         },
     },
     defaultVariants: {
-        layout: "default",
         color: "info",
     },
 });
-const cvaAlertDetails = cvaMerge(["flex"]);
-const cvaAlertContentBody = cvaMerge(["grid", "gap-2", "flex-grow"]);
-const cvaAlertRightAligned = cvaMerge(["flex", "justify-end", "gap-2", "ml-2", "mt-4"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "mt-0 ml-auto items-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertContent = cvaMerge(["grow"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "flex w-full items-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "ml-4",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
-const cvaAlertIconContainer = cvaMerge(["self-start", "mr-3", "shrink-0", "grid", "w-min"], {
-    variants: {
-        layout: {
-            default: "",
-            inline: "self-center",
-        },
-    },
-    defaultVariants: {
-        layout: "default",
-    },
-});
+const cvaAlertActionsContainer = cvaMerge(["flex", "justify-end", "gap-2"]);
+const cvaContent = cvaMerge(["flex-grow"]);
+const cvaAlertContentContainer = cvaMerge(["flex", "flex-row", "h-full", "gap-2"]);
+const cvaAlertCloseButtonContainer = cvaMerge(["flex", "self-start", "w-min", "shrink-0"]);
+const cvaAlertIconContainer = cvaMerge(["self-start", "shrink-0", "grid", "w-min", "hidden", "@2xs:block"]);
 
 /**
  * The Alert component should be used to inform the user of important information.
@@ -720,7 +674,7 @@ const cvaAlertIconContainer = cvaMerge(["self-start", "mr-3", "shrink-0", "grid"
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline = false, }) => {
+const Alert = ({ color = "info", title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }) => {
     const ref = React.useRef(null);
     const getIconFromColor = () => {
         switch (color) {
@@ -730,6 +684,8 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return jsx(Icon, { name: "ExclamationCircle", color: "warning" });
             case "success":
                 return jsx(Icon, { name: "CheckCircle", color: "success" });
+            case "info":
+                return jsx(Icon, { name: "InformationCircle", color: "info" });
             default:
                 return jsx(Icon, { name: "InformationCircle" });
         }
@@ -744,14 +700,12 @@ const Alert = ({ color = "info", title, className, children, primaryAction, seco
                 return "primary";
         }
     };
-    const body = inline ? (jsxs("div", { children: [title && jsx(Text, { weight: "bold", children: title !== null && title !== void 0 ? title : children }), children && jsx(Text, { weight: !title ? "bold" : "normal", children: children })] })) : (jsxs(Fragment, { children: [title && jsx(Text, { weight: "bold", children: title !== null && title !== void 0 ? title : children }), children && jsx(Text, { weight: !title ? "bold" : "normal", children: children })] }));
     React.useEffect(() => {
         if (autoScroll) {
             ref && ref.current && ref.current.scrollIntoView && ref.current.scrollIntoView();
         }
     }, [ref, autoScroll]);
-    const layout = inline ? "inline" : "default";
-    return (jsxs("div", { className: cvaAlert({ color, layout, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsx("div", { className: cvaAlertIconContainer({ layout }), children: getIconFromColor() }), jsxs("div", { className: cvaAlertContent({ layout }), children: [jsxs("div", { className: cvaAlertDetails(), children: [jsx("div", { className: cvaAlertContentBody(), children: body }), onClose && !inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction || onClose) && (jsxs("div", { className: cvaAlertRightAligned({ layout }), children: [secondaryAction && (jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label })), onClose && inline ? (jsx("div", { className: cvaAlertCloseButtonContainer({ layout }), children: jsx(IconButton, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }))] })] }));
+    return (jsxs("div", { className: cvaAlert({ color, className }), "data-testid": dataTestId, ref: ref, role: "alert", children: [jsxs("div", { className: cvaAlertContentContainer(), children: [jsx("div", { className: cvaAlertIconContainer(), children: getIconFromColor() }), jsxs("div", { className: cvaContent(), children: [title ? jsx(Text, { 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, { size: "small", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMark", size: "small" }), title: "Close Alert", circular: true }) })) : null] }), (primaryAction || secondaryAction) && (jsxs("div", { className: cvaAlertActionsContainer(), children: [secondaryAction && (jsx(Button, { size: "small", variant: "transparent", color: getButtonColor(), onClick: secondaryAction.onClick, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, children: secondaryAction.label })), primaryAction && (jsx(Button, { size: "small", color: getButtonColor(), onClick: primaryAction.onClick, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, children: primaryAction.label }))] }))] }));
 };
 
 const cvaBadge = cvaMerge([

package/package.json

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

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

@@ -33,10 +33,6 @@ export interface AlertProps extends CommonProps {
      * OnClose Event.
      */
     onClose?: () => void;
-    /**
-     * Whether the contents should be displayed inline or not.
-     */
-    inline?: boolean;
     /**
      * A prop to enable autoscroll to alert element
      *
@@ -50,4 +46,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, }: AlertProps) => JSX.Element;

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

@@ -1,18 +1,8 @@
 export declare const cvaAlert: (props?: ({
     color?: "danger" | "warning" | "success" | "info" | null | undefined;
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertDetails: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertContentBody: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaAlertRightAligned: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertContent: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertCloseButtonContainer: (props?: ({
-    layout?: "default" | "inline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaAlertIconContainer: (props?: ({
-    layout?: "default" | "inline" | 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?: 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;