@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/IconButton/IconButton.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { Button } from "..";
+const IconButton = styled(Button) `
+  padding: ${({ size, variant }) => {
+    if (variant === "text")
+        return `0px 0px`;
+    switch (size) {
+        case "xxs":
+            return `0px 4px`;
+        case "xs":
+            return `0px 4px`;
+        case "sm":
+            return `0px 6px`;
+        case "md":
+            return `0px 8px`;
+        case "lg":
+            return `0px 10px`;
+        case "xl":
+            return `0px 12px`;
+        default:
+            return `0px 6px`;
+    }
+}};
+`;
+export default IconButton;

package/dist/IconButton/index.js

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

package/dist/Input/Input.js

@@ -0,0 +1,144 @@
+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 styled from "styled-components";
+import { forwardRef } from "react";
+const Input = styled(forwardRef((_a, ref) => {
+    var { className, size = "sm", variant = "outlined", width } = _a, rest = __rest(_a, ["className", "size", "variant", "width"]);
+    return _jsx("input", Object.assign({ ref: ref, className: className }, rest));
+})) `
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  pointer-events: "all";
+  user-select: "all";
+  outline: none;
+  box-sizing: border-box;
+
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
+
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "30px"};
+
+  min-height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "30px"};
+
+  transition: border 0.1s ease-in-out;
+  border-radius: 4px;
+  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;
+    }
+}};
+
+  padding: ${({ size }) => size === "xs"
+    ? "0px 8px"
+    : size === "sm"
+        ? "0px 10px"
+        : size === "md"
+            ? "0px 12px"
+            : size === "lg"
+                ? "0px 14px"
+                : size === "xl"
+                    ? "0px 16px"
+                    : "0px 10px"};
+
+  width: ${({ width }) => {
+    if (typeof width === "undefined")
+        return "100%";
+    if (width === null)
+        return "100%";
+    if (typeof width === "string")
+        return width;
+    if (typeof width === "number")
+        return `${width}px`;
+}};
+
+  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;
+    }
+}};
+
+  ::placeholder {
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
+  }
+
+  &:focus {
+    border: 1px solid ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+`;
+export default Input;

package/dist/Input/index.js

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

package/dist/Modal/Modal.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { X } from "lucide-react";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useFloating, } from "@floating-ui/react";
+const StyledOverlay = styled(FloatingOverlay) `
+  background-color: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const StyledContent = styled.div `
+  background-color: ${({ theme }) => theme.name === "DARK"
+    ? theme.palette.background.default
+    : theme.palette.background.default};
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  position: fixed;
+  top: 25px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+
+  z-index: 2;
+
+  max-height: calc(100vh - 50px);
+  max-width: calc(100vw - 50px);
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+const StyledInnerContent = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+  padding: 25px;
+`;
+const StyledClose = styled.div `
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const StyledButton = styled.button `
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+`;
+const Title = styled.h1 `
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0px;
+`;
+const SubTitle = styled.h2 `
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0px;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+const Modal = ({ children, open = false, onClose, style = {}, showCloseButton = false, FocusProps = {}, }) => {
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+    });
+    const handleMouseDown = () => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return (_jsx(FloatingPortal, { preserveTabOrder: true, children: open && (_jsx(StyledOverlay, { className: "mf-ModalOverlay", lockScroll: true, children: _jsx(FloatingFocusManager, Object.assign({ context: context, modal: true }, FocusProps, { children: _jsxs(StyledContent, Object.assign({ style: style, className: "mf-Modal", ref: refs.setFloating }, floatingStyles, { children: [showCloseButton && (_jsx(StyledClose, { children: _jsx(StyledButton, { onMouseDown: handleMouseDown, children: _jsx(X, { size: 18 }) }) })), _jsx(StyledInnerContent, { children: children })] })) })) })) }));
+};
+Modal.Title = Title;
+Modal.SubTitle = SubTitle;
+export default Modal;

package/dist/Modal/index.js

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

package/dist/MonolithUIProvider/GlobalStyle.js

@@ -0,0 +1,51 @@
+import { createGlobalStyle } from "styled-components";
+const GlobalStyle = createGlobalStyle `
+    * {
+        box-sizing: border-box;
+    }
+    
+    body {
+        margin: 0;
+        padding: 0;
+        font-family: ${({ theme }) => theme.typography.fontFamily};
+        background-color: ${({ theme }) => theme.palette.background.default};
+        color: ${({ theme }) => theme.palette.text.primary};
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    #root{
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        font-family: ${({ theme }) => theme.typography.fontFamily};
+        color: ${({ theme }) => theme.palette.text.primary};
+        margin: 0;
+    }
+    
+    h1 {
+        margin: 3px 0px;
+    }
+    
+    h2 {
+        margin: 2px 0px;
+    }
+
+    h3 {
+        margin: 1px 0px;
+    }
+
+    h4, h5, h6 {
+        margin: 0px;
+    }
+
+    a {
+        text-decoration: none;
+        color: unset;
+    }
+`;
+export default GlobalStyle;

package/dist/MonolithUIProvider/MonolithUIProvider.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import merge from "deepmerge";
+import { ThemeProvider } from "styled-components";
+import getTheme from "../theme";
+import { createContext, useState } from "react";
+import GlobalStyle from "./GlobalStyle";
+export const MonolithUIContext = createContext(undefined);
+const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "dark", }) => {
+    const [colorScheme, setColorScheme] = useState(defaultColorScheme);
+    const toggleColorScheme = () => {
+        setColorScheme(colorScheme === "light" ? "dark" : "light");
+    };
+    const defaultTheme = getTheme(colorScheme);
+    // override default theme with the provided theme
+    const _theme = merge(defaultTheme, theme);
+    return (_jsx(MonolithUIContext.Provider, { value: {
+            theme: _theme,
+            colorScheme,
+            toggleColorScheme,
+            setColorScheme,
+        }, children: _jsxs(ThemeProvider, { theme: _theme, children: [_jsx(GlobalStyle, { theme: _theme }), children] }) }));
+};
+export default MonolithUIProvider;

package/dist/MonolithUIProvider/index.js

@@ -0,0 +1,3 @@
+export { default } from "./MonolithUIProvider";
+export { default as useMonolithUITheme } from "./useMonolithUITheme";
+export { default as getTheme } from "../theme";

package/dist/MonolithUIProvider/useMonolithUITheme.js

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { MonolithUIContext } from "./MonolithUIProvider";
+const useMonolithUITheme = () => {
+    const context = useContext(MonolithUIContext);
+    if (context === undefined) {
+        throw new Error("hook must be used within a MonolithUIProvider");
+    }
+    return context;
+};
+export default useMonolithUITheme;

package/dist/Pill/Pill.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { X } from "lucide-react";
+const StyledButton = styled.button `
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  transition: color 0.2s;
+  padding-inline-end: 5px;
+`;
+const Pill = styled(({ className, children, size = "md", showRemoveIcon = true, onRemove, }) => {
+    const handleRemove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    };
+    return (_jsxs("div", { className: className, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [_jsx("span", { className: "pill-content", children: children }), showRemoveIcon && (_jsx(StyledButton, { onClick: handleRemove, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, children: _jsx(X, {}) }))] }));
+}) `
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: fit-content;
+  max-width: 250px;
+  gap: 5px;
+  flex: 0;
+
+  font-weight: 500;
+  color: ${({ theme }) => theme.palette.text.primary};
+
+  padding-inline-end: ${({ size, showRemoveIcon }) => {
+    if (showRemoveIcon !== false) {
+        return "0px";
+    }
+    switch (size) {
+        case "xs":
+            return "8px";
+        case "sm":
+            return "10px";
+        case "md":
+            return "12px";
+        case "lg":
+            return "14px";
+        case "xl":
+            return "16px";
+        default:
+            return "10px";
+    }
+}};
+
+  padding-inline-start: ${({ size }) => {
+    switch (size) {
+        case "xs":
+            return "8px";
+        case "sm":
+            return "10px";
+        case "md":
+            return "12px";
+        case "lg":
+            return "14px";
+        case "xl":
+            return "16px";
+        default:
+            return "10px";
+    }
+}};
+
+  height: ${({ size }) => {
+    switch (size) {
+        case "xs":
+            return "20px";
+        case "sm":
+            return "22px";
+        case "md":
+            return "24px";
+        case "lg":
+            return "26px";
+        case "xl":
+            return "28px";
+        default:
+            return "22px";
+    }
+}};
+
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 1000px;
+
+  background-color: ${({ theme }) => theme.palette.background.secondary};
+
+  .pill-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-size: ${({ size }) => {
+    switch (size) {
+        case "xs":
+            return "10px";
+        case "sm":
+            return "12px";
+        case "md":
+            return "14px";
+        case "lg":
+            return "16px";
+        case "xl":
+            return "18px";
+        default:
+            return "12px";
+    }
+}};
+  }
+
+  svg {
+    color: ${({ theme }) => theme.palette.text.primary};
+
+    width: ${({ size }) => {
+    switch (size) {
+        case "xs":
+            return "12px";
+        case "sm":
+            return "14px";
+        case "md":
+            return "16px";
+        case "lg":
+            return "18px";
+        case "xl":
+            return "20px";
+        default:
+            return "14px";
+    }
+}};
+  }
+`;
+export default Pill;

package/dist/Pill/index.js

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