@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/TextArea/TextArea.js

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import TextareaAutosize from "react-textarea-autosize";
+const TextArea = styled(TextareaAutosize) `
+  outline: none;
+  resize: none;
+  padding: 10px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "contained":
+            return theme.palette.input.background;
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  border-radius: 4px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+    switch (variant) {
+        case "contained":
+            return "transparent";
+        case "filled":
+            return "transparent";
+        case "outlined":
+            return theme.palette.input.border;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.border;
+    }
+}};
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
+  ::placeholder {
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
+  }
+`;
+export default TextArea;

package/dist/TextArea/index.js

@@ -0,0 +1 @@
+export { default } from "./TextArea";

package/dist/TextAreaInput/TextAreaInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextArea, FieldLabel } from "..";
+const TextAreaInput = ({ label, error, required, colSpan = 1, size = "sm", description, inputRef = null, maxRows = 6, minRows = 3, onHeightChange, cacheMeasurements, style, }) => {
+    return (_jsxs("div", { style: {
+            gridColumn: `span ${colSpan}`,
+            height: "fit-content",
+        }, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsx(TextArea, { ref: inputRef, size: size, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange, cacheMeasurements: cacheMeasurements, style: style })] }));
+};
+export default TextAreaInput;

package/dist/TextAreaInput/index.js

@@ -0,0 +1 @@
+export { default } from "./TextAreaInput";

package/dist/TextInput/TextInput.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { FieldLabel } from "..";
+import Input from "../Input/Input";
+const TextInput = styled((_a) => {
+    var { className, label, error, required, colSpan = 1, description, size = "sm" } = _a, rest = __rest(_a, ["className", "label", "error", "required", "colSpan", "description", "size"]);
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsx(Input, Object.assign({ size: size }, rest))] }));
+}) `
+  grid-column: span ${({ colSpan }) => colSpan || 1};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+`;
+export default TextInput;

package/dist/TextInput/index.js

@@ -0,0 +1 @@
+export { default } from "./TextInput";

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+const Tooltip = styled(({ className, children, content, side = "right", sideOffset = 15, align = "start", delayDuration = 800, }) => {
+    if (!content)
+        return children;
+    return (_jsx(RadixTooltip.Provider, { delayDuration: delayDuration || 800, skipDelayDuration: 0, disableHoverableContent: true, children: _jsxs(RadixTooltip.Root, { children: [_jsx(RadixTooltip.Trigger, { asChild: true, children: children }), _jsx(RadixTooltip.Portal, { children: _jsx(RadixTooltip.Content, { className: className, side: side || "right", sideOffset: sideOffset || 15, align: align || "start", onClick: (e) => e.stopPropagation(), children: content }) })] }) }));
+}) `
+  pointer-events: none;
+  z-index: 999999;
+  background-color: ${({ theme }) => theme.palette.background.default};
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  font-size: 0.75rem;
+
+  white-space: pre-wrap;
+
+  .title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+`;
+export default Tooltip;

package/dist/Tooltip/index.js

@@ -0,0 +1 @@
+export { default } from "./Tooltip";

package/dist/core/ArrowButton.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import styled from "styled-components";
+const ArrowIcon = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(ChevronDownIcon, { size: 16 }) })));
+}) `
+  color: ${(props) => props.theme.palette.text.secondary};
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(0deg);
+  will-change: transform;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const ArrowButton = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ArrowIcon, {}) })));
+}) `
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-inline: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+`;
+export default ArrowButton;

package/dist/core/ClearButton.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import styled from "styled-components";
+const ClearIcon = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: className }, props, { children: _jsx(X, { size: 16 }) })));
+}) `
+  color: ${(props) => props.theme.palette.text.secondary};
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(0deg);
+  will-change: transform;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const ClearButton = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("button", Object.assign({ className: className }, props, { tabIndex: -1, "data-default-btn": true, children: _jsx(ClearIcon, {}) })));
+}) `
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-inline: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+`;
+export default ClearButton;

package/dist/core/StyledContent.js

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+const StyledContent = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
+    ? `${maxDropdownHeight}px`
+    : maxDropdownHeight || "250px"};
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  padding: 5px;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+export default StyledContent;

package/dist/core/StyledFloatContainer.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+const StyledFloatContainer = styled.div `
+  z-index: 100001;
+`;
+export default StyledFloatContainer;

package/dist/core/Types/Size.js

@@ -0,0 +1 @@
+export {};

package/dist/core/Types/Variant.js

@@ -0,0 +1 @@
+export {};

package/dist/core/index.js

@@ -0,0 +1,4 @@
+export { default as StyledContent } from "./StyledContent";
+export { default as StyledFloatContainer } from "./StyledFloatContainer";
+export { default as ArrowButton } from "./ArrowButton";
+export { default as ClearButton } from "./ClearButton";

package/dist/index.js

@@ -0,0 +1,26 @@
+export { default as FormSection } from "./FormSection";
+export { default as Grid } from "./Grid";
+export { default as TextInput } from "./TextInput";
+export { default as SelectBox } from "./SelectBox";
+export { default as Button } from "./Button";
+export { default as IconButton } from "./IconButton";
+export { default as DropDownMenu } from "./DropDownMenu";
+export { default as DateInput } from "./DateInput";
+export { default as TextArea } from "./TextArea";
+export { default as TextAreaInput } from "./TextAreaInput";
+export { default as TagBox } from "./TagBox";
+export { default as FieldLabel } from "./FieldLabel";
+export { default as Modal } from "./Modal";
+export { default as Flyout } from "./Flyout";
+export { FlyoutHeader, FlyoutTitle } from "./Flyout";
+export { default as FileInputField } from "./FileInputField";
+export { default as Switch } from "./Switch";
+export { default as CheckBox } from "./CheckBox";
+export { default as Input } from "./Input";
+export { default as Tooltip } from "./Tooltip";
+export { default as Pill } from "./Pill";
+export { default as Calendar } from "./Calendar";
+export { default as Table } from "./Table";
+export { Column } from "./Table";
+export { default as MonolithUIProvider } from "./MonolithUIProvider";
+export { useMonolithUITheme } from "./MonolithUIProvider";

package/dist/theme/index.js

@@ -0,0 +1,9 @@
+import variants from "./variants";
+const getTheme = (scheme) => {
+    let themeConfig = variants.find((variant) => variant.name === scheme);
+    if (!themeConfig) {
+        themeConfig = variants[0];
+    }
+    return themeConfig;
+};
+export default getTheme;

package/dist/theme/typography.js

@@ -0,0 +1,57 @@
+const typography = {
+    fontFamily: [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        "Roboto",
+        '"Helvetica Neue"',
+        "Arial",
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+    ].join(","),
+    fontSize: 13,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    h1: {
+        fontSize: "2rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h2: {
+        fontSize: "1.75rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h3: {
+        fontSize: "1.5rem",
+        fontWeight: 600,
+        lineHeight: 1.25,
+    },
+    h4: {
+        fontSize: "1.125rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    h5: {
+        fontSize: "1.0625rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    h6: {
+        fontSize: "1rem",
+        fontWeight: 500,
+        lineHeight: 1.25,
+    },
+    body1: {
+        fontSize: 13,
+    },
+    button: {
+        textTransform: "none",
+    },
+};
+export default typography;

package/dist/theme/variants.js

@@ -0,0 +1,270 @@
+import merge from "deepmerge";
+import typography from "./typography";
+// Themes
+export const THEMES = {
+    DARK: "dark",
+    LIGHT: "light",
+};
+const customBlue = {
+    50: "#e9f0fb",
+    100: "#c8daf4",
+    200: "#a3c1ed",
+    300: "#7ea8e5",
+    400: "#6395e0",
+    500: "#4782da",
+    600: "#407ad6",
+    700: "#376fd0",
+    800: "#2f65cb",
+    900: "#2052c2 ",
+};
+const grey = {
+    50: "#FAFAFA",
+    100: "#F5F5F5",
+    200: "#EEEEEE",
+    300: "#E0E0E0",
+    400: "#BDBDBD",
+    500: "#9E9E9E",
+    600: "#757575",
+    700: "#616161",
+    800: "#424242",
+    900: "#212121",
+};
+const green = {
+    50: "#e8f5e9",
+    100: "#c8e6c9",
+    200: "#a5d6a7",
+    300: "#81c784",
+    400: "#66bb6a",
+    500: "#4caf50",
+    600: "#43a047",
+    700: "#388e3c",
+    800: "#2e7d32",
+    900: "#1b5e20",
+};
+const lightVariant = {
+    name: THEMES.LIGHT,
+    typography,
+    palette: {
+        mode: "light",
+        primary: {
+            main: customBlue[700],
+            contrastText: "#FFF",
+        },
+        error: {
+            main: "#f44336",
+            contrastText: "#FFF",
+        },
+        secondary: {
+            main: "#FFF",
+            contrastText: "#000",
+        },
+        third: {
+            main: "#000",
+            contrastText: "#FFF",
+        },
+        fourth: {
+            main: "#ff4500",
+            contrastText: "#FFF",
+        },
+        background: {
+            default: "#FFF",
+            paper: "#FFF",
+            alt: "#ededed",
+            secondary: "#f0f0f0",
+            gradient: "linear-gradient(#FFFFFF 0%, #ccdcf9 50%)",
+        },
+        menu: {
+            background: "#FFF",
+        },
+        signature: {
+            penColor: "#000000",
+            borderColor: "#444444",
+            backgroundColor: "",
+        },
+        text: {
+            primary: "rgba(0, 0, 0, 0.95)",
+            secondary: "rgba(0, 0, 0, 0.75)",
+        },
+        input: {
+            background: "#fff",
+            border: "rgba(0, 0, 0, 0.3)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#6d6d6d",
+            placeholder: "#6d6d6d",
+        },
+        textArea: {
+            background: "#f1f1f4",
+            border: "rgba(0, 0, 0, 0.2)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#9E9E9E",
+            placeholder: "#9E9E9E",
+        },
+        dataGrid: {
+            hover: "#efefef",
+        },
+        action: {
+            hover: "rgba(0, 0, 0, 0.1)",
+        },
+        divider: "rgba(0, 0, 0, 0.3)",
+    },
+    header: {
+        color: grey[500],
+        background: "#FFF",
+        search: {
+            color: grey[800],
+        },
+        indicator: {
+            background: customBlue[600],
+        },
+    },
+    footer: {
+        color: grey[500],
+        background: "#FFF",
+    },
+    sidebar: {
+        color: grey[200],
+        background: "#212121",
+        active: "#353535",
+        header: {
+            color: grey[200],
+            background: "#212121",
+            brand: {
+                color: customBlue[500],
+            },
+        },
+        footer: {
+            color: grey[200],
+            background: "#333",
+            online: {
+                background: green[500],
+            },
+        },
+        badge: {
+            color: "#FFF",
+            background: customBlue[500],
+        },
+    },
+    scrollbar: {
+        track: "#f1f1f1",
+        thumb: "#DDD",
+        thumbHover: "#BBB",
+    },
+    mfBorder: {
+        primary: "#f1f1f1",
+        secondary: "#DDD",
+    },
+    zIndex: {
+        snackbar: 999999,
+    },
+};
+const darkVariant = merge(lightVariant, {
+    name: THEMES.DARK,
+    palette: {
+        mode: "dark",
+        divider: "rgba(255, 255, 255, 0.15)",
+        action: {
+            hover: "rgba(255, 255, 255, 0.05)",
+        },
+        primary: {
+            main: customBlue[500],
+            contrastText: "#FFF",
+        },
+        secondary: {
+            main: "#3f3f3f",
+            contrastText: "#FFF",
+        },
+        background: {
+            default: "#222222",
+            paper: "#333333",
+            alt: "#1e1e1e",
+            secondary: "#303030",
+            gradient: "linear-gradient(#333333 0%, #1e1e1e 50%)",
+        },
+        menu: {
+            background: "#222222",
+        },
+        text: {
+            primary: "rgba(255, 255, 255, 0.95)",
+            secondary: "rgba(255, 255, 255, 0.6)",
+        },
+        signature: {
+            penColor: "#eeeeee",
+            borderColor: "#999999",
+            backgroundColor: "rgba(60,60,60,1)",
+        },
+        input: {
+            background: "#282828",
+            border: "#ffffff1a",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#6d6d6d",
+            placeholder: "#6d6d6d",
+        },
+        textArea: {
+            background: "#292929",
+            border: "rgba(255, 255, 255, 0.2)",
+            borderHover: "#BDBDBD",
+            borderFocus: "#BDBDBD",
+            borderError: "#F44336",
+            borderDisabled: "#E0E0E0",
+            text: "#000",
+            textDisabled: "#9E9E9E",
+            placeholder: "#9E9E9E",
+        },
+        dataGrid: {
+            hover: "#2f2f2f",
+        },
+    },
+    header: {
+        color: grey[300],
+        background: "#1B2635",
+        search: {
+            color: grey[200],
+        },
+    },
+    footer: {
+        color: grey[300],
+        background: "#222222",
+    },
+    sidebar: {
+        color: "rgba(255, 255, 255, 0.95)",
+        background: "#181818",
+        active: "#313131",
+        header: {
+            color: "#FFF",
+            background: "#181818",
+            brand: {
+                color: "#FFFFFF",
+            },
+        },
+        footer: {
+            color: "rgba(255, 255, 255, 0.95)",
+            background: "#333333",
+            online: {
+                background: green[500],
+            },
+        },
+    },
+    scrollbar: {
+        thumb: "#3f3f3f",
+        track: "#252525",
+        thumbHover: "#151515",
+    },
+    mfBorder: {
+        primary: "#3f3f3f",
+        secondary: "#252525",
+    },
+});
+const variants = [lightVariant, darkVariant];
+export default variants;

package/package.json

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