@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/TagBox/TagBoxStyles.tsx

@@ -1,116 +0,0 @@
-import styled from "styled-components";
-import { XIcon } from "lucide-react";
-
-export const TagBoxContainer = styled.div`
-  width: 100%;
-`;
-
-export const TagBoxInner = styled.div`
-  height: 33px;
-  display: flex;
-  border: 1px solid ${(props) => props.theme.palette.input.border};
-  color: ${(props) => props.theme.palette.text.primary};
-  outline: none;
-  padding: 8px 8px;
-  width: 100%;
-  background-color: ${(props) => props.theme.palette.input.background};
-  border-radius: 5px;
-  transition: border 0.1s ease-in-out;
-  overflow-x: hidden;
-  &:focus {
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-export const TagsContainer = styled.div`
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  flex-wrap: nowrap;
-  margin-left: calc(-5px);
-  box-sizing: border-box;
-`;
-
-export const TagBoxInput = styled.input`
-  border: none;
-  outline: none;
-  width: 100%;
-  min-width: 50px;
-  background-color: transparent;
-  color: ${(props) => props.theme.palette.text.primary};
-  &:focus {
-    border: none;
-    outline: none;
-  }
-`;
-
-export const Tag = styled.div`
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  background-color: rgb(26, 27, 30);
-  color: rgb(193, 194, 197);
-  height: 22px;
-  padding-left: 10px;
-  padding-right: 0px;
-  font-weight: 500;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: default;
-  user-select: none;
-  max-width: 120px;
-  margin: calc(3px) calc(5px);
-`;
-
-export const TagText = styled.div`
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  background-color: rgb(26, 27, 30);
-  color: rgb(193, 194, 197);
-  height: 22px;
-  padding-right: 0px;
-  font-weight: 500;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: default;
-  user-select: none;
-  max-width: 75px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const TagKillButton = styled(XIcon)`
-  -webkit-tap-highlight-color: transparent;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  cursor: pointer;
-  appearance: none;
-  text-align: left;
-  text-decoration: none;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  background-color: transparent;
-  position: relative;
-  height: 19px;
-  min-height: 19px;
-  width: 22px;
-  min-width: 19px;
-  border-radius: 2px;
-  line-height: 1;
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  justify-content: center;
-  color: rgb(193, 194, 197);
-  padding: 0px 3px;
-  &:hover {
-    color: rgb(255, 255, 255);
-  }
-`;
-
-export const TagBoxOptions = styled.div``;
-
-export const TagBoxOption = styled.div``;

package/TagBox/index.ts

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

package/TextArea/TextArea.tsx

@@ -1,92 +0,0 @@
-import styled from "styled-components";
-import TextareaAutosize from "react-textarea-autosize";
-import { Size, Variant } from "../core";
-
-interface TextAreaProps {
-  ref?: React.Ref<HTMLTextAreaElement>;
-  className?: string;
-  size?: Size;
-  variant?: Variant;
-  width?: string | number | null | undefined;
-  style?: React.CSSProperties;
-  placeholder?: string;
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-}
-
-const TextArea = styled(TextareaAutosize)<TextAreaProps>`
-  outline: none;
-  resize: none;
-  padding: 10px;
-  width: 100%;
-  height: 100%;
-
-  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"
-      : "11px"};
-
-  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"
-        : "10px"};
-  }
-`;
-
-export default TextArea;

package/TextArea/index.ts

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

package/TextAreaInput/TextAreaInput.tsx

@@ -1,46 +0,0 @@
-import { Size } from "../core";
-import { TextArea, FieldLabel } from "..";
-
-interface TextAreaInputProps {
-  label?: string;
-  error?: string;
-  required?: boolean;
-  colSpan?: number;
-  size?: Size;
-  description?: string;
-  inputRef?: React.RefObject<HTMLTextAreaElement> | null;
-}
-
-const TextAreaInput = ({
-  label,
-  error,
-  required,
-  colSpan = 1,
-  size = "sm",
-  description,
-  inputRef = null,
-  ...other
-}: TextAreaInputProps) => {
-  return (
-    <div
-      style={{
-        gridColumn: `span ${colSpan}`,
-        height: "fit-content",
-      }}
-    >
-      {label && (
-        <FieldLabel
-          error={error}
-          asterisk={required}
-          size={size}
-          description={description}
-        >
-          {label}
-        </FieldLabel>
-      )}
-      <TextArea ref={inputRef} size={size} {...other} />
-    </div>
-  );
-};
-
-export default TextAreaInput;

package/TextAreaInput/index.ts

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

package/TextInput/TextInput.tsx

@@ -1,48 +0,0 @@
-import { FieldLabel } from "..";
-import Input, { InputProps } from "../Input/Input";
-import { Size } from "../core";
-
-interface TextInputProps extends InputProps {
-  label?: string;
-  error?: string;
-  required?: boolean;
-  size?: Size;
-  colSpan?: number;
-  description?: string;
-}
-
-const TextInput: React.FC<TextInputProps> = ({
-  label,
-  error,
-  required,
-  colSpan = 1,
-  description,
-  size,
-  ...rest
-}) => {
-  return (
-    <div
-      style={{
-        gridColumn: `span ${colSpan}`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        width: "100%",
-      }}
-    >
-      {label && (
-        <FieldLabel
-          error={error}
-          asterisk={required}
-          size={size}
-          description={description}
-        >
-          {label}
-        </FieldLabel>
-      )}
-      <Input size={size} {...rest} />
-    </div>
-  );
-};
-
-export default TextInput;

package/TextInput/index.ts

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

package/Tooltip/Tooltip.tsx

@@ -1,68 +0,0 @@
-import styled from "styled-components";
-import * as RadixTooltip from "@radix-ui/react-tooltip";
-import { ReactNode } from "react";
-
-interface TooltipProps {
-  className?: string;
-  children?: ReactNode;
-  content?: ReactNode;
-  side?: "top" | "right" | "bottom" | "left";
-  sideOffset?: number;
-  align?: "start" | "center" | "end";
-  delayDuration?: number;
-}
-
-const Tooltip = styled(
-  ({
-    className,
-    children,
-    content,
-    side = "right",
-    sideOffset = 15,
-    align = "start",
-    delayDuration = 800,
-  }: TooltipProps) => {
-    if (!content) return children;
-
-    return (
-      <RadixTooltip.Provider
-        delayDuration={delayDuration || 800}
-        skipDelayDuration={0}
-        disableHoverableContent
-      >
-        <RadixTooltip.Root>
-          <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
-          <RadixTooltip.Portal>
-            <RadixTooltip.Content
-              className={className}
-              side={side || "right"}
-              sideOffset={sideOffset || 15}
-              align={align || "start"}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {content}
-            </RadixTooltip.Content>
-          </RadixTooltip.Portal>
-        </RadixTooltip.Root>
-      </RadixTooltip.Provider>
-    );
-  }
-)`
-  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/Tooltip/index.ts

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

package/core/ArrowButton.tsx

@@ -1,51 +0,0 @@
-import { ChevronDownIcon } from "lucide-react";
-import styled from "styled-components";
-
-interface ArrowIconProps {
-  className?: string;
-  [key: string]: React.SVGAttributes<SVGSVGElement> | any;
-}
-
-const ArrowIcon = styled(({ className, ...props }: ArrowIconProps) => (
-  <div className={className} {...props}>
-    <ChevronDownIcon size={16} />
-  </div>
-))`
-  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;
-`;
-
-interface ArrowButtonProps {
-  className?: string;
-  [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
-}
-
-const ArrowButton = styled(({ className, ...props }: ArrowButtonProps) => (
-  <button
-    className={className}
-    {...props}
-    tabIndex={-1}
-    data-default-btn={true}
-  >
-    <ArrowIcon />
-  </button>
-))`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  padding-inline: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-`;
-
-export default ArrowButton;

package/core/ClearButton.tsx

@@ -1,51 +0,0 @@
-import { X } from "lucide-react";
-import styled from "styled-components";
-
-interface ClearIconProps {
-  className?: string;
-  [key: string]: React.SVGAttributes<SVGSVGElement> | any;
-}
-
-const ClearIcon = styled(({ className, ...props }: ClearIconProps) => (
-  <div className={className} {...props}>
-    <X size={16} />
-  </div>
-))`
-  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;
-`;
-
-interface ClearButtonProps {
-  className?: string;
-  [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
-}
-
-const ClearButton = styled(({ className, ...props }: ClearButtonProps) => (
-  <button
-    className={className}
-    {...props}
-    tabIndex={-1}
-    data-default-btn={true}
-  >
-    <ClearIcon />
-  </button>
-))`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  padding-inline: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-`;
-
-export default ClearButton;

package/core/MonolithThemeProvider.js

@@ -1,16 +0,0 @@
-import { ThemeProvider } from "styled-components";
-
-import variants from "@monolith-ui/theme/variants";
-
-export const MonolithThemeProvider = ({ children, theme }) => {
-  let selectedTheme = theme
-    ? variants.find((variant) => variant.name === theme)
-    : variants[1]; // Default to dark theme
-
-  if (!selectedTheme) {
-    console.warn(new Error(`The theme ${theme} is not valid`));
-    selectedTheme = variants[1]; // Default to dark theme
-  }
-
-  return <ThemeProvider theme={selectedTheme}>{children}</ThemeProvider>;
-};

package/core/StyledContent.tsx

@@ -1,50 +0,0 @@
-import styled from "styled-components";
-import Variant from "./Types/Variant";
-
-interface StyledContentProps {
-  maxDropdownHeight?: number | string;
-  variant?: Variant;
-}
-
-const StyledContent = styled.div<StyledContentProps>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  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/core/StyledFloatContainer.tsx

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

package/core/Types/Size.ts

@@ -1,3 +0,0 @@
-type Size = "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-
-export default Size;

package/core/Types/Variant.ts

@@ -1,10 +0,0 @@
-type Variant =
-  | "default"
-  | "contained"
-  | "filled"
-  | "light"
-  | "outlined"
-  | "text"
-  | "subtle";
-
-export default Variant;

package/core/index.ts

@@ -1,6 +0,0 @@
-export { default as StyledContent } from "./StyledContent";
-export { default as StyledFloatContainer } from "./StyledFloatContainer";
-export { default as ArrowButton } from "./ArrowButton";
-export { default as ClearButton } from "./ClearButton";
-export type { default as Size } from "./Types/Size";
-export type { default as Variant } from "./Types/Variant";

package/index.ts

@@ -1,22 +0,0 @@
-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";

package/theme/breakpoints.js

@@ -1,11 +0,0 @@
-const breakpoints = {
-  values: {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536,
-  },
-};
-
-export default breakpoints;