@monolith-forensics/monolith-ui 1.3.32 → 1.3.33

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,8 @@
+export type AlertVariant = "info" | "success" | "warning" | "error";
+export type AlertProps = {
+    children: React.ReactNode;
+    variant?: AlertVariant;
+    title?: string;
+    onClose?: () => void;
+};
+export declare const Alert: React.FC<AlertProps>;

package/dist/Alert/Alert.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, } from "lucide-react";
+import styled from "styled-components";
+const Icons = {
+    info: _jsx(InfoIcon, { size: 16 }),
+    success: _jsx(CheckIcon, { size: 16 }),
+    warning: _jsx(AlertCircleIcon, { size: 16 }),
+    error: _jsx(AlertTriangleIcon, { size: 16 }),
+};
+const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 4px;
+
+  border: 1px solid ${({ theme, variant }) => theme.alert[variant].border};
+  background-color: ${({ theme, variant }) => theme.alert[variant].background};
+  color: ${({ theme, variant }) => theme.alert[variant].color};
+`;
+const StyledTitle = styled.h3 `
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0px;
+
+  color: ${({ theme, variant }) => { var _a; return (_a = theme.alert[variant]) === null || _a === void 0 ? void 0 : _a.color; }};
+`;
+const StyledContent = styled.div `
+  font-size: 13px;
+  font-weight: 400;
+  margin: 0px;
+
+  color: ${({ theme, variant }) => theme.palette.text.primary};
+`;
+const StyledContentContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+export const Alert = ({ children, variant = "info", title, onClose, }) => {
+    return (_jsxs(StyledContainer, { variant: variant, children: [Icons[variant], _jsxs(StyledContentContainer, { children: [title && _jsx(StyledTitle, { variant: variant, children: title }), _jsx(StyledContent, { variant: variant, children: children })] })] }));
+};

package/dist/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/dist/Alert/index.js

@@ -0,0 +1 @@
+export * from "./Alert";

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -143,6 +143,28 @@ export interface MonolithDefaultTheme {
             error: string;
         };
     };
+    alert: {
+        info: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        success: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        warning: {
+            background: string;
+            border: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            border: string;
+            color: string;
+        };
+    };
 }
 export interface MonolithUIContextType {
     theme: MonolithDefaultTheme;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from "./SelectBox";
 export * from "./Button";
 export * from "./DropDownMenu";
 export * from "./Switch";
+export * from "./Alert";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";

package/dist/index.js

@@ -5,6 +5,7 @@ export * from "./SelectBox";
 export * from "./Button";
 export * from "./DropDownMenu";
 export * from "./Switch";
+export * from "./Alert";
 export { default as IconButton } from "./IconButton";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";

package/dist/theme/variants.js

@@ -184,6 +184,28 @@ const lightVariant = {
             alternate: "#000",
         },
     },
+    alert: {
+        info: {
+            background: "#3f88de25",
+            border: "#3f88de50",
+            color: "#357fff",
+        },
+        success: {
+            background: "#4bef2a25",
+            border: "#4bef2a90",
+            color: "#2eb333",
+        },
+        warning: {
+            background: "#eaa82425",
+            border: "#eaa82450",
+            color: "#d18f0b",
+        },
+        error: {
+            background: "#ee1d1d25",
+            border: "#ee1d1d50",
+            color: "#e41a1a",
+        },
+    },
 };
 const darkVariant = merge(lightVariant, {
     name: THEMES.DARK,
@@ -300,6 +322,28 @@ const darkVariant = merge(lightVariant, {
             alternate: "rgba(255, 255, 255, 0.6)",
         },
     },
+    alert: {
+        info: {
+            background: "#3f88de25",
+            border: "#3f88de50",
+            color: "#75a8ff",
+        },
+        success: {
+            background: "#4bef2a25",
+            border: "#4bef2a50",
+            color: "#5fd964",
+        },
+        warning: {
+            background: "#eaa82425",
+            border: "#eaa82450",
+            color: "#da9c21",
+        },
+        error: {
+            background: "#ee1d1d25",
+            border: "#ee1d1d50",
+            color: "#e41a1a",
+        },
+    },
 });
 const variants = [lightVariant, darkVariant];
 export default variants;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",