@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/Modal/Modal.tsx

@@ -1,172 +0,0 @@
-import styled from "styled-components";
-import * as RadixDialog from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  useFloating,
-} from "@floating-ui/react";
-import { CSSProperties, Ref } from "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;
-    }
-  }
-`;
-
-interface StyledContentProps {
-  style?: CSSProperties;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
-  // Add other props that StyledContent might receive
-  [key: string]: any; // For additional props such as `floatingStyles`
-}
-
-const StyledContent = styled.div<StyledContentProps>`
-  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(RadixDialog.Close)`
-  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};
-`;
-
-interface ModalProps {
-  children: React.ReactNode;
-  open?: boolean;
-  onClose?: () => void;
-  style?: React.CSSProperties;
-  showCloseButton?: boolean;
-  FocusProps?: any;
-}
-
-const Modal = ({
-  children,
-  open = false,
-  onClose,
-  style = {},
-  showCloseButton = false,
-  FocusProps = {},
-}: ModalProps) => {
-  const { refs, floatingStyles, context } = useFloating({
-    open,
-    onOpenChange: (isOpen) => {
-      if (!isOpen) {
-        onClose?.();
-      }
-    },
-  });
-
-  const handleMouseDown = () => {
-    onClose?.();
-  };
-
-  return (
-    <FloatingPortal preserveTabOrder>
-      {open && (
-        <StyledOverlay className="mf-ModalOverlay" lockScroll>
-          <FloatingFocusManager context={context} modal={true} {...FocusProps}>
-            <StyledContent
-              style={style}
-              className="mf-Modal"
-              ref={refs.setFloating}
-              {...floatingStyles}
-            >
-              {showCloseButton && (
-                <StyledClose asChild>
-                  <StyledButton onMouseDown={handleMouseDown}>
-                    <X size={18} />
-                  </StyledButton>
-                </StyledClose>
-              )}
-              <StyledInnerContent>{children}</StyledInnerContent>
-            </StyledContent>
-          </FloatingFocusManager>
-        </StyledOverlay>
-      )}
-    </FloatingPortal>
-  );
-};
-
-Modal.Title = Title;
-Modal.SubTitle = SubTitle;
-
-export default Modal;

package/Modal/index.ts

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

package/Pill/Pill.tsx

@@ -1,174 +0,0 @@
-import styled from "styled-components";
-import { X } from "lucide-react";
-import { ButtonHTMLAttributes, ReactNode } from "react";
-import { Size } from "../core";
-
-interface StyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: ReactNode;
-}
-
-const StyledButton = styled.button<StyledButtonProps>`
-  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;
-`;
-
-interface PillProps {
-  className?: string;
-  children?: ReactNode;
-  size?: Size;
-  showRemoveIcon?: boolean;
-  onRemove?: () => void;
-}
-
-const Pill = styled(
-  ({
-    className,
-    children,
-    size = "md",
-    showRemoveIcon = true,
-    onRemove,
-  }: PillProps) => {
-    const handleRemove = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onRemove?.();
-    };
-    return (
-      <div className={className}>
-        <span className="pill-content">{children}</span>
-        {showRemoveIcon && (
-          <StyledButton onClick={handleRemove}>
-            <X />
-          </StyledButton>
-        )}
-      </div>
-    );
-  }
-)`
-  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) {
-      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/Pill/index.ts

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