@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.0

package/dist/FileViewer/viewers/ImageViewer.js

@@ -1,26 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import Loader from "../../Loader";
-const IMAGE_VIEWER_PADDING = 10;
 const ImageViewerContainer = styled.div `
-  box-sizing: border-box;
   height: 100%;
-  padding: ${IMAGE_VIEWER_PADDING}px;
-  overflow: auto;
-`;
-const ImageCanvas = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  min-width: 100%;
-  min-height: 100%;
+
+  text-align: center;
+  padding: 10px;
 `;
+// Updated Image styled-component to remove max-width and max-height
 const Image = styled.img `
-  box-sizing: border-box;
-  display: block;
-  flex: 0 0 auto;
   object-fit: contain;
 
   // set orientation
@@ -37,79 +26,33 @@ const StyledLoader = styled.div `
   height: 100%;
 `;
 export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
-    const containerRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
-    const [containerSize, setContainerSize] = useState({
-        width: 0,
-        height: 0,
-    });
     const [originalDimensions, setOriginalDimensions] = useState({
         naturalWidth: 0,
         naturalHeight: 0,
+        width: 0,
+        height: 0,
     });
-    const fittedDimensions = useMemo(() => {
-        const { naturalWidth, naturalHeight } = originalDimensions;
-        if (naturalWidth === 0 ||
-            naturalHeight === 0 ||
-            containerSize.width === 0 ||
-            containerSize.height === 0) {
-            return {
-                width: naturalWidth,
-                height: naturalHeight,
-            };
-        }
-        const fitScale = Math.min(containerSize.width / naturalWidth, containerSize.height / naturalHeight);
-        return {
-            width: naturalWidth * fitScale * zoomFactor,
-            height: naturalHeight * fitScale * zoomFactor,
-        };
-    }, [containerSize, originalDimensions, zoomFactor]);
-    useEffect(() => {
+    const handleImageLoad = (e) => {
+        setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { width: e.target.clientWidth, height: e.target.offsetHeight })));
+    };
+    const loadImage = () => {
         if (!file.url)
             return;
-        let loading = true;
-        setImageLoaded(false);
         const img = document.createElement("img");
         img.src = file.url;
         img.onload = () => {
-            if (!loading)
-                return;
-            setOriginalDimensions({
-                naturalWidth: img.naturalWidth,
-                naturalHeight: img.naturalHeight,
-            });
+            setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight })));
             setImageLoaded(true);
         };
-        return () => {
-            loading = false;
-        };
-    }, [file.url]);
+    };
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const updateContainerSize = () => {
-            setContainerSize({
-                width: Math.max(0, container.clientWidth - IMAGE_VIEWER_PADDING * 2),
-                height: Math.max(0, container.clientHeight - IMAGE_VIEWER_PADDING * 2),
-            });
-        };
-        updateContainerSize();
-        const resizeObserver = new ResizeObserver(updateContainerSize);
-        resizeObserver.observe(container);
-        return () => resizeObserver.disconnect();
-    }, []);
-    const showImage = imageLoaded && containerSize.width > 0 && containerSize.height > 0;
+        loadImage();
+    }, [file.url]);
     if (isPending) {
         return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
     }
-    return (_jsxs(ImageViewerContainer, { ref: containerRef, className: "mfui-ImageViewer", children: [!showImage && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), showImage && (_jsx(ImageCanvas, { style: {
-                    width: fittedDimensions.width,
-                    height: fittedDimensions.height,
-                }, children: _jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", style: {
-                        width: fittedDimensions.width,
-                        height: fittedDimensions.height,
-                    }, onClick: (e) => {
-                        e.stopPropagation();
-                    } }) }))] }));
+    return (_jsxs(ImageViewerContainer, { className: "mfui-ImageViewer", children: [!imageLoaded && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), imageLoaded && (_jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", zoomFactor: zoomFactor, onLoad: handleImageLoad, height: zoomFactor === 1 ? "100%" : originalDimensions.height * zoomFactor, onClick: (e) => {
+                    e.stopPropagation();
+                } }))] }));
 };

package/dist/FormSection/FormSection.js

@@ -2,14 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { useState } from "react";
 import styled from "styled-components";
-import { getControlSizeTokens } from "../core";
 const StyledContainer = styled.div `
   display: flex;
   flex-direction: column;
 
   h3 {
     margin: 0;
-    font-size: ${({ size = "md" }) => `${getControlSizeTokens(size).sectionTitleFontSize}px`};
+    font-size: ${({ size = "md" }) => size === "xs"
+    ? "x-small"
+    : size === "sm"
+        ? "small"
+        : size === "md"
+            ? "medium"
+            : size === "lg"
+                ? "large"
+                : "x-large"};
   }
 
   .section-header {
@@ -49,8 +56,21 @@ const StyledContainer = styled.div `
     }
   }
 `;
-const resolveIconSize = (size = "md") => {
-    return getControlSizeTokens(size).sectionIconSize;
+const resolveIconSize = (size) => {
+    switch (size) {
+        case "xs":
+            return 12;
+        case "sm":
+            return 14;
+        case "md":
+            return 18;
+        case "lg":
+            return 24;
+        case "xl":
+            return 28;
+        default:
+            return 18;
+    }
 };
 export const FormSection = ({ title, children, open, defaultOpen = true, onOpenChange, allowCollapse = true, size, style, icon: Icon, iconColor, }) => {
     const [_open, setOpen] = useState(defaultOpen);
@@ -60,5 +80,5 @@ export const FormSection = ({ title, children, open, defaultOpen = true, onOpenC
                         setOpen(!openState);
                         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!openState);
                     }
-                }, children: [Icon && _jsx(Icon, { size: resolveIconSize(size), color: iconColor }), _jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: resolveIconSize(size), className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
+                }, children: [Icon && _jsx(Icon, { size: resolveIconSize(size), color: iconColor }), _jsx("h3", { children: title }), _jsx("div", { className: "section-line" }), !!allowCollapse ? (_jsx(ChevronDownIcon, { size: 18, className: openState ? "open" : "" })) : ("")] }), _jsx("div", { className: "section-content", "data-open": openState, children: children })] }));
 };

package/dist/IconButton/IconButton.js

@@ -1,11 +1,25 @@
 import styled from "styled-components";
 import { Button } from "..";
-import { getControlSizeTokens } from "../core";
 const IconButton = styled(Button) `
   padding: ${({ size, variant }) => {
     if (variant === "text")
         return `0px 0px`;
-    return `0px ${getControlSizeTokens(size).iconButtonPaddingX}px`;
+    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/Input/Input.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import { getControlSizeTokens, } from "../core";
 import { forwardRef } from "react";
 const StyledInput = styled.input `
   font-family: ${({ theme }) => theme.typography.fontFamily};
@@ -21,11 +20,41 @@ const StyledInput = styled.input `
   box-sizing: border-box;
 
   color: ${({ theme }) => theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "13px"};
 
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "30px"};
 
-  min-height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  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;
@@ -45,7 +74,17 @@ const StyledInput = styled.input `
     }
 }};
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
+  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")
@@ -74,7 +113,17 @@ const StyledInput = styled.input `
 }};
 
   ::placeholder {
-    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "12px"};
   }
 
   &:focus {
@@ -82,7 +131,7 @@ const StyledInput = styled.input `
   }
 
   &[data-button-right="true"] {
-    padding-right: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 36px;
   }
 
   &[readOnly] {

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -38,7 +38,6 @@ export interface MonolithDefaultTheme {
             alt: string;
             secondary: string;
             gradient: string;
-            subtle: string;
         };
         menu: {
             background: string;

package/dist/Pill/Pill.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { X } from "lucide-react";
-import { getControlSizeTokens } from "../core";
 const StyledButton = styled.button `
   background-color: transparent;
   border: none;
@@ -36,7 +35,7 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
   flex-direction: row;
   width: fit-content;
   max-width: 250px;
-  gap: ${({ size }) => `${getControlSizeTokens(size).pillGap}px`};
+  gap: 5px;
   flex: 0;
 
   font-weight: 500;
@@ -46,12 +45,55 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     if (showRemoveIcon !== false) {
         return "0px";
     }
-    return `${getControlSizeTokens(size).pillPaddingX}px`;
+    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 }) => `${getControlSizeTokens(size).pillPaddingX}px`};
+  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 }) => `${getControlSizeTokens(size).pillHeight}px`};
+  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;
@@ -63,14 +105,43 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     overflow: hidden;
     text-overflow: ellipsis;
 
-    font-size: ${({ size }) => `${getControlSizeTokens(size).pillFontSize}px`};
+    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 }) => `${getControlSizeTokens(size).pillIconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).pillIconSize}px`};
+    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/Popover/Popover.context.d.ts

@@ -10,13 +10,12 @@ export interface PopoverContextValue {
     withArrow: boolean;
     arrowSize: number;
     arrowRadius: number;
-    arrowRef: React.MutableRefObject<SVGSVGElement | null>;
+    arrowRef: React.MutableRefObject<HTMLDivElement | null>;
     withinPortal: boolean;
     trapFocus: boolean;
     returnFocus: boolean;
     keepMounted: boolean;
     zIndex: number;
-    role: "dialog" | "menu" | "tooltip";
     dropdownId: string;
     transitionProps: PopoverTransitionProps;
 }

package/dist/Popover/Popover.js

@@ -23,9 +23,8 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
             }
         },
         placement: position,
-        transform: false,
         middleware: [
-            offset(offsetValue + (withArrow ? resolvedArrowSize : 0)),
+            offset(offsetValue + (withArrow ? resolvedArrowSize / 2 : 0)),
             flip({ padding: flipPadding }),
             shift({ padding: shiftPadding }),
             size({
@@ -43,7 +42,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
                 ? [
                     arrow({
                         element: arrowRef,
-                        padding: Math.max(8, resolvedArrowSize),
+                        padding: 8,
                     }),
                 ]
                 : []),
@@ -93,7 +92,6 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
-        role,
         dropdownId,
         transitionProps,
     }), [
@@ -111,7 +109,6 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
-        role,
         dropdownId,
         transitionProps,
     ]);

package/dist/Popover/Popover.styles.d.ts

@@ -1,2 +1,7 @@
 export declare const StyledDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ARROW_STYLES: Record<"top" | "right" | "bottom" | "left", {
+    clipPath: string;
+    borderTransparent: string[];
+    radiusCorner: string;
+    staticProp: string;
+}>;

package/dist/Popover/Popover.styles.js

@@ -1,14 +1,10 @@
-import { FloatingArrow } from "@floating-ui/react";
 import styled from "styled-components";
 export const StyledDropdown = styled.div `
-  --mf-popover-arrow-fill: ${({ theme }) => theme.palette.background.default};
-  --mf-popover-arrow-border: ${({ theme }) => theme.palette.divider};
-
   position: relative;
   min-width: 180px;
   border-radius: 8px;
-  border: 1px solid var(--mf-popover-arrow-border);
-  background-color: var(--mf-popover-arrow-fill);
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  background-color: ${({ theme }) => theme.palette.background.default};
   color: ${({ theme }) => theme.palette.text.primary};
   box-shadow:
     rgba(15, 23, 42, 0.1) 0px 10px 15px -3px,
@@ -16,8 +12,29 @@ export const StyledDropdown = styled.div `
   padding: 10px 12px;
   outline: none;
 `;
-export const StyledArrow = styled(FloatingArrow) `
-  display: block;
-  overflow: visible;
-  z-index: 1;
-`;
+export const ARROW_STYLES = {
+    bottom: {
+        clipPath: "polygon(0 100%, 0 0, 100% 0)",
+        borderTransparent: ["borderBottomColor", "borderRightColor"],
+        radiusCorner: "borderTopLeftRadius",
+        staticProp: "top",
+    },
+    top: {
+        clipPath: "polygon(0 100%, 100% 100%, 100% 0)",
+        borderTransparent: ["borderTopColor", "borderLeftColor"],
+        radiusCorner: "borderBottomRightRadius",
+        staticProp: "bottom",
+    },
+    left: {
+        clipPath: "polygon(100% 0, 0 0, 100% 100%)",
+        borderTransparent: ["borderLeftColor", "borderBottomColor"],
+        radiusCorner: "borderTopRightRadius",
+        staticProp: "right",
+    },
+    right: {
+        clipPath: "polygon(0 100%, 0 0, 100% 100%)",
+        borderTransparent: ["borderRightColor", "borderTopColor"],
+        radiusCorner: "borderBottomLeftRadius",
+        staticProp: "left",
+    },
+};

package/dist/Popover/Popover.transitions.d.ts

@@ -1,7 +1,5 @@
-import { FloatingContext } from "@floating-ui/react";
-import { CSSProperties } from "react";
 import { PopoverTransitionProps } from "./Popover.types";
-export declare function usePopoverTransition(context: FloatingContext, { transition, duration, timingFunction, }: PopoverTransitionProps): {
+export declare function usePopoverTransition(opened: boolean, { transition, duration, timingFunction }: PopoverTransitionProps): {
     mounted: boolean;
-    styles: CSSProperties;
+    styles: React.CSSProperties;
 };

package/dist/Popover/Popover.transitions.js

@@ -1,37 +1,63 @@
-import { useTransitionStyles } from "@floating-ui/react";
+import { useEffect, useRef, useState } from "react";
 const TRANSITION_PRESETS = {
     fade: {
-        initial: { opacity: 0 },
-        open: { opacity: 1 },
+        from: { opacity: 0 },
+        to: { opacity: 1 },
     },
     scale: {
-        initial: { opacity: 0, transform: "scale(0.85)" },
-        open: { opacity: 1, transform: "scale(1)" },
+        from: { opacity: 0, scale: "0.85" },
+        to: { opacity: 1, scale: "1" },
     },
     "scale-y": {
-        initial: { opacity: 0, transform: "scaleY(0.7)" },
-        open: { opacity: 1, transform: "scaleY(1)" },
+        from: { opacity: 0, scale: "1 0.7" },
+        to: { opacity: 1, scale: "1 1" },
     },
     pop: {
-        initial: { opacity: 0, transform: "scale(0.6)" },
-        open: { opacity: 1, transform: "scale(1)" },
+        from: { opacity: 0, scale: "0.6" },
+        to: { opacity: 1, scale: "1" },
     },
 };
-export function usePopoverTransition(context, { transition = "fade", duration = 150, timingFunction = "ease", }) {
-    var _a;
+export function usePopoverTransition(opened, { transition = "fade", duration = 150, timingFunction = "ease" }) {
+    const [mounted, setMounted] = useState(opened);
+    const [transitionEnabled, setTransitionEnabled] = useState(false);
+    const [phase, setPhase] = useState(opened ? "enter" : "exit");
+    const frameRef = useRef(0);
+    useEffect(() => {
+        cancelAnimationFrame(frameRef.current);
+        if (opened) {
+            setMounted(true);
+            setTransitionEnabled(false);
+            setPhase("exit");
+            frameRef.current = requestAnimationFrame(() => {
+                frameRef.current = requestAnimationFrame(() => {
+                    setTransitionEnabled(true);
+                    setPhase("enter");
+                });
+            });
+        }
+        else {
+            setTransitionEnabled(true);
+            setPhase("exit");
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setTransitionEnabled(false);
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [opened, duration]);
+    useEffect(() => {
+        return () => cancelAnimationFrame(frameRef.current);
+    }, []);
     const preset = TRANSITION_PRESETS[transition];
-    const { isMounted, styles } = useTransitionStyles(context, {
-        duration,
-        initial: preset.initial,
-        open: preset.open,
-        close: (_a = preset.close) !== null && _a !== void 0 ? _a : preset.initial,
-        common: {
-            transitionTimingFunction: timingFunction,
-            willChange: transition === "fade" ? "opacity" : "opacity, transform",
-        },
-    });
+    const transitionStyles = phase === "enter" ? preset.to : preset.from;
+    const properties = [
+        ...new Set([...Object.keys(preset.from), ...Object.keys(preset.to)]),
+    ];
+    const transitionValue = properties
+        .map((prop) => `${prop} ${duration}ms ${timingFunction}`)
+        .join(", ");
     return {
-        mounted: isMounted,
-        styles,
+        mounted: mounted || opened,
+        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
     };
 }