@monolith-forensics/monolith-ui 1.0.12 → 1.1.0

package/TagBox/TagBoxStyles.tsx

@@ -0,0 +1,116 @@
+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

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

package/{src/components/TextArea → TextArea}/TextArea.tsx

@@ -1,16 +1,23 @@
-import React from "react";
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
+import { Size, Variant } from "../core";
 
-interface StyledTextAreaProps {
-  variant?: "contained" | "filled" | "outlined" | "text";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+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 StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
+const TextArea = styled(TextareaAutosize)<TextAreaProps>`
   outline: none;
   resize: none;
-  padding: 8px 8px;
+  padding: 10px;
   width: 100%;
   height: 100%;
 
@@ -18,16 +25,16 @@ const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
   color: ${(props) => props.theme.palette.text.primary};
   font-size: ${({ size }) =>
     size === "xs"
-      ? "12px"
+      ? "11px"
       : size === "sm"
-      ? "14px"
+      ? "13px"
       : size === "md"
-      ? "16px"
+      ? "15px"
       : size === "lg"
-      ? "18px"
+      ? "17px"
       : size === "xl"
-      ? "20px"
-      : "12px"};
+      ? "19px"
+      : "11px"};
 
   background-color: ${({ theme, variant }) => {
     switch (variant) {
@@ -65,6 +72,21 @@ const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
   &: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 StyledTextArea;
+export default TextArea;

package/{src/components/TextAreaInput → TextAreaInput}/TextAreaInput.tsx

@@ -1,27 +1,26 @@
-import React from "react";
-import FieldLabel from "../FieldLabel";
-import StyledTextArea from "../TextArea";
+import { Size } from "../core";
+import { TextArea, FieldLabel } from "..";
 
 interface TextAreaInputProps {
   label?: string;
-  error?: boolean;
-  errorMessage?: string;
+  error?: string;
   required?: boolean;
   colSpan?: number;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  description?: string | null;
+  size?: Size;
+  description?: string;
+  inputRef?: React.RefObject<HTMLTextAreaElement> | null;
 }
 
-const TextAreaInput: React.FC<TextAreaInputProps> = ({
+const TextAreaInput = ({
   label,
   error,
-  errorMessage,
   required,
   colSpan = 1,
-  size,
+  size = "sm",
   description,
+  inputRef = null,
   ...other
-}) => {
+}: TextAreaInputProps) => {
   return (
     <div
       style={{
@@ -32,7 +31,6 @@ const TextAreaInput: React.FC<TextAreaInputProps> = ({
       {label && (
         <FieldLabel
           error={error}
-          errorMessage={errorMessage}
           asterisk={required}
           size={size}
           description={description}
@@ -40,7 +38,7 @@ const TextAreaInput: React.FC<TextAreaInputProps> = ({
           {label}
         </FieldLabel>
       )}
-      <StyledTextArea {...other} />
+      <TextArea ref={inputRef} size={size} {...other} />
     </div>
   );
 };

package/{src/components/TextInput → TextInput}/TextInput.tsx

@@ -1,26 +1,24 @@
-import React from "react";
-import FieldLabel from "../FieldLabel";
-import StyledInput from "../Input";
+import { FieldLabel } from "..";
+import Input, { InputProps } from "../Input/Input";
+import { Size } from "../core";
 
-interface TextInputProps {
+interface TextInputProps extends InputProps {
   label?: string;
-  error?: boolean;
-  errorMessage?: string;
+  error?: string;
   required?: boolean;
+  size?: Size;
   colSpan?: number;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  description?: string | null;
+  description?: string;
 }
 
 const TextInput: React.FC<TextInputProps> = ({
   label,
   error,
-  errorMessage,
   required,
   colSpan = 1,
-  size,
   description,
-  ...other
+  size,
+  ...rest
 }) => {
   return (
     <div
@@ -29,12 +27,12 @@ const TextInput: React.FC<TextInputProps> = ({
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
+        width: "100%",
       }}
     >
       {label && (
         <FieldLabel
           error={error}
-          errorMessage={errorMessage}
           asterisk={required}
           size={size}
           description={description}
@@ -42,7 +40,7 @@ const TextInput: React.FC<TextInputProps> = ({
           {label}
         </FieldLabel>
       )}
-      <StyledInput error={error} {...other} />
+      <Input size={size} {...rest} />
     </div>
   );
 };

package/Tooltip/Tooltip.tsx

@@ -0,0 +1,68 @@
+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

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

package/{src/components/ArrowButton → core}/ArrowButton.tsx

@@ -1,18 +1,16 @@
-import React from "react";
 import { ChevronDownIcon } from "lucide-react";
 import styled from "styled-components";
 
 interface ArrowIconProps {
   className?: string;
+  [key: string]: React.SVGAttributes<SVGSVGElement> | any;
 }
 
-const ArrowIcon: React.FC<ArrowIconProps> = styled(
-  ({ className, ...props }: ArrowIconProps) => (
-    <div className={className} {...props}>
-      <ChevronDownIcon size={16} />
-    </div>
-  )
-)`
+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);
@@ -26,20 +24,19 @@ const ArrowIcon: React.FC<ArrowIconProps> = styled(
 
 interface ArrowButtonProps {
   className?: string;
+  [key: string]: React.ButtonHTMLAttributes<HTMLButtonElement> | any;
 }
 
-const ArrowButton: React.FC<ArrowButtonProps> = styled(
-  ({ className, ...props }: ArrowButtonProps) => (
-    <button
-      className={className}
-      {...props}
-      tabIndex={-1}
-      data-default-btn={true}
-    >
-      <ArrowIcon />
-    </button>
-  )
-)`
+const ArrowButton = styled(({ className, ...props }: ArrowButtonProps) => (
+  <button
+    className={className}
+    {...props}
+    tabIndex={-1}
+    data-default-btn={true}
+  >
+    <ArrowIcon />
+  </button>
+))`
   position: absolute;
   right: 0;
   height: 100%;

package/core/ClearButton.tsx

@@ -0,0 +1,51 @@
+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/StyledContent.tsx

@@ -0,0 +1,50 @@
+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

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

package/core/Types/Size.ts

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

package/core/Types/Variant.ts

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

package/core/index.ts

@@ -0,0 +1,6 @@
+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/dist/Button/Button.d.ts

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { Size, Variant } from "../core";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: ReactNode;
+    rightSection?: ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: Size;
+    variant?: Variant;
+    color?: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;