@monolith-forensics/monolith-ui 1.1.29 → 1.1.30

package/dist/MonolithUIProvider/GlobalStyle.d.ts

@@ -0,0 +1,4 @@
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    theme: any;
+}>;
+export default GlobalStyle;

package/dist/MonolithUIProvider/GlobalStyle.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = require("styled-components");
+const GlobalStyle = (0, styled_components_1.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;
+    }
+`;
+exports.default = GlobalStyle;

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from "styled-components";
+import React from "react";
+export declare const MonolithUIContext: React.Context<DefaultTheme | undefined>;
+interface MonolithUIProviderProps {
+    children: React.ReactNode | React.ReactNode[];
+    theme?: DefaultTheme;
+    defaultColorScheme?: "light" | "dark";
+}
+declare const MonolithUIProvider: ({ children, theme, defaultColorScheme, }: MonolithUIProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default MonolithUIProvider;

package/dist/MonolithUIProvider/MonolithUIProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonolithUIContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const styled_components_1 = require("styled-components");
+const theme_1 = __importDefault(require("../theme"));
+const react_1 = require("react");
+const GlobalStyle_1 = __importDefault(require("./GlobalStyle"));
+exports.MonolithUIContext = (0, react_1.createContext)(undefined);
+const MonolithUIProvider = ({ children, theme = {}, defaultColorScheme = "dark", }) => {
+    const [colorScheme, setColorScheme] = (0, react_1.useState)(defaultColorScheme);
+    const toggleColorScheme = () => {
+        setColorScheme(colorScheme === "light" ? "dark" : "light");
+    };
+    const defaultTheme = (0, theme_1.default)(colorScheme);
+    // override default theme with the provided theme
+    const _theme = (0, deepmerge_1.default)(defaultTheme, theme);
+    return ((0, jsx_runtime_1.jsx)(exports.MonolithUIContext.Provider, { value: {
+            theme: _theme,
+            colorScheme,
+            toggleColorScheme,
+            setColorScheme,
+        }, children: (0, jsx_runtime_1.jsxs)(styled_components_1.ThemeProvider, { theme: _theme, children: [(0, jsx_runtime_1.jsx)(GlobalStyle_1.default, { theme: _theme }), children] }) }));
+};
+exports.default = MonolithUIProvider;

package/dist/MonolithUIProvider/index.d.ts

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

package/dist/MonolithUIProvider/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTheme = exports.useMonolithUITheme = exports.default = void 0;
+var MonolithUIProvider_1 = require("./MonolithUIProvider");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MonolithUIProvider_1).default; } });
+var useMonolithUITheme_1 = require("./useMonolithUITheme");
+Object.defineProperty(exports, "useMonolithUITheme", { enumerable: true, get: function () { return __importDefault(useMonolithUITheme_1).default; } });
+var theme_1 = require("../theme");
+Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return __importDefault(theme_1).default; } });

package/dist/MonolithUIProvider/useMonolithUITheme.d.ts

@@ -0,0 +1,2 @@
+declare const useMonolithUITheme: () => import("styled-components").DefaultTheme;
+export default useMonolithUITheme;

package/dist/MonolithUIProvider/useMonolithUITheme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const MonolithUIProvider_1 = require("./MonolithUIProvider");
+const useMonolithUITheme = () => {
+    const context = (0, react_1.useContext)(MonolithUIProvider_1.MonolithUIContext);
+    if (context === undefined) {
+        throw new Error("hook must be used within a MonolithUIProvider");
+    }
+    return context;
+};
+exports.default = useMonolithUITheme;

package/dist/Pill/Pill.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Size } from "../core";
+interface PillProps {
+    className?: string;
+    children?: ReactNode;
+    size?: Size;
+    showRemoveIcon?: boolean;
+    onRemove?: () => void;
+}
+declare const Pill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<PillProps, never>> & string & Omit<({ className, children, size, showRemoveIcon, onRemove, }: PillProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default Pill;

package/dist/Pill/Pill.js

@@ -0,0 +1,152 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const lucide_react_1 = require("lucide-react");
+const StyledButton = styled_components_1.default.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 = (0, styled_components_1.default)(({ className, children, size = "md", showRemoveIcon = true, onRemove, }) => {
+    const handleRemove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [(0, jsx_runtime_1.jsx)("span", { className: "pill-content", children: children }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(StyledButton, { onClick: handleRemove, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.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";
+    }
+}};
+  }
+`;
+exports.default = Pill;

package/dist/Pill/index.d.ts

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

package/dist/Pill/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Pill_1 = require("./Pill");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Pill_1).default; } });

package/dist/SelectBox/SelectBox.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { Size, Variant } from "../core";
+export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width?: string | number | null;
+}>> & string;
+type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data?: any;
+};
+interface SelectBoxProps {
+    className?: string;
+    defaultValue?: Option | string;
+    data?: Option[] | string[];
+    placeholder?: string;
+    arrow?: boolean;
+    onChange?: (value: any, item: any) => void;
+    onSearch?: (value: string) => void;
+    searchFn?: (value: string) => void;
+    onScroll?: (e: any) => void;
+    loading?: boolean;
+    onItemAdded?: (item: any) => void;
+    size?: Size;
+    variant?: Variant;
+    width?: string | number | null;
+    allowCustomValue?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    error?: string;
+    openOnFocus?: boolean;
+    renderOption?: (item: Option | string) => ReactNode;
+    actionComponent?: JSX.Element;
+    focused?: boolean;
+    grouped?: boolean;
+    TooltipContent?: React.FC<{
+        data: any;
+    }>;
+    DropDownProps?: any;
+}
+declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default SelectBox;