@monolith-forensics/monolith-ui 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "./dist/index.js",
   "author": "Matt Danner (Monolith Forensics LLC)",
   "license": "private",
@@ -9,6 +9,9 @@
     "url": "git+"
   },
   "types": "index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "prepublish": "rm -r ./dist && tsc"
   },

package/Button/Button.tsx

@@ -1,382 +0,0 @@
-import { ButtonHTMLAttributes, ReactNode, forwardRef } from "react";
-import styled from "styled-components";
-import { Loader2Icon } from "lucide-react";
-import { Size, Variant } from "../core";
-
-const colors = {
-  gray: "#888888",
-  red: "#e03131",
-  pink: "#c2255c",
-  grape: "#9c36b5",
-  violet: "#6741d9",
-  indigo: "#3b5bdb",
-  cyan: "#0c8599",
-  teal: "#099268",
-  green: "#2f9e44",
-  lime: "#66a80f",
-  yellow: "#f08c00",
-  orange: "#e8590c",
-};
-
-type ColorKeys = keyof typeof colors;
-
-interface StyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  fullWidth?: boolean;
-  size?: string;
-  variant?: string;
-  color?: ColorKeys | string;
-  // Add more custom props here if needed
-}
-
-const StyledButton = styled.button<StyledButtonProps>`
-  user-select: none;
-  display: flex;
-  outline: none;
-  white-space: nowrap;
-
-  width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
-  height: ${({ theme, size }) => {
-    switch (size) {
-      case "xxs":
-        return `24px`;
-      case "xs":
-        return `28px`;
-      case "sm":
-        return `34px`;
-      case "md":
-        return `40px`;
-      case "lg":
-        return `48px`;
-      case "xl":
-        return `58px`;
-      default:
-        return `34px`;
-    }
-  }};
-
-  font-weight: 525;
-  letter-spacing: 0.75px;
-  font-size: ${({ theme, size }) => {
-    switch (size) {
-      case "xxs":
-        return `11px`;
-      case "xs":
-        return `12px`;
-      case "sm":
-        return `14px`;
-      case "md":
-        return `16px`;
-      case "lg":
-        return `18px`;
-      case "xl":
-        return `20px`;
-      default:
-        return `14px`;
-    }
-  }};
-
-  padding: ${({ theme, size, variant }) => {
-    if (variant === "text") return `0px 0px`;
-    switch (size) {
-      case "xxs":
-        return `0px 8px`;
-      case "xs":
-        return `0px 12px`;
-      case "sm":
-        return `0px 16px`;
-      case "md":
-        return `0px 20px`;
-      case "lg":
-        return `0px 24px`;
-      case "xl":
-        return `0px 30px`;
-      default:
-        return `0px 16px`;
-    }
-  }};
-
-  color: ${({ theme, variant, color }) => {
-    if (variant === "default") return theme.palette.text.primary;
-    if (variant === "contained") return "white";
-    if (variant === "filled") return "white";
-
-    switch (color) {
-      case "primary":
-        return theme.palette.primary.main;
-      case undefined:
-        return theme.palette.text.primary;
-      default:
-        return color
-          ? theme?.palette?.[color]?.main ||
-              colors[color as keyof typeof colors] ||
-              theme.palette.text.primary
-          : theme.palette.text.primary;
-    }
-  }};
-
-  background-color: ${({ theme, variant, color }) => {
-    if (variant === "default") return "transparent";
-    switch (variant) {
-      case "contained":
-        return color
-          ? theme?.palette?.[color]?.main ||
-              colors[color as keyof typeof colors] ||
-              theme.palette.background.secondary
-          : theme.palette.background.secondary;
-      case "filled":
-        return color
-          ? theme?.palette?.[color]?.main ||
-              colors[color as keyof typeof colors] ||
-              theme.palette.background.secondary
-          : theme.palette.background.secondary;
-      case "light":
-        return (
-          (color
-            ? theme?.palette?.[color]?.main ||
-              colors[color as keyof typeof colors] ||
-              theme.palette.background.secondary
-            : theme.palette.background.secondary) + "30"
-        );
-      case "outlined":
-        return "transparent";
-      case "text":
-        return "transparent";
-      default:
-        return "transparent";
-    }
-  }};
-
-  border-radius: 4px;
-  border: 1px solid
-    ${({ theme, variant, color }) => {
-      switch (variant) {
-        case "contained":
-          return "transparent";
-        case "filled":
-          return "transparent";
-        case "light":
-          return "transparent";
-        case "outlined":
-          return color
-            ? theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors] ||
-                theme.palette.divider
-            : theme.palette.divider;
-        case "text":
-          return "transparent";
-        case "subtle":
-          return "transparent";
-        default:
-          return color
-            ? theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors] ||
-                theme.palette.divider
-            : theme.palette.divider;
-      }
-    }};
-
-  cursor: pointer;
-
-  transition: background-color 0.2s, border 0.2s;
-
-  .inner-span {
-    display: flex;
-    align-items: center;
-  }
-
-  .button-label {
-    display: flex;
-    align-items: center;
-  }
-
-  [data-position="left"] {
-    margin-inline-end: 6px;
-    display: flex;
-    align-items: center;
-  }
-
-  [data-position="right"] {
-    margin-inline-start: 6px;
-    display: flex;
-    align-items: center;
-  }
-
-  &:hover {
-    background-color: ${({ theme, variant, color }) => {
-      if (variant === "default") return "transparent";
-      switch (variant) {
-        case "contained":
-          return (
-            (color
-              ? theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors] ||
-                theme.palette.background.secondary
-              : theme.palette.background.secondary) + "90"
-          );
-        case "filled":
-          return (
-            (color
-              ? theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors] ||
-                theme.palette.background.secondary
-              : theme.palette.background.secondary) + "90"
-          );
-        case "light":
-          return (
-            (color
-              ? theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors] ||
-                theme.palette.background.secondary
-              : theme.palette.background.secondary) + "70"
-          );
-        case "outlined":
-          return theme.palette.action.hover;
-        case "text":
-          return "transparent";
-        case "subtle":
-          return color
-            ? (theme?.palette?.[color]?.main ||
-                colors[color as keyof typeof colors]) + "30" ||
-                theme.palette.action.hover
-            : theme.palette.action.hover;
-        default:
-          return theme.palette.action.hover;
-      }
-    }};
-
-    border: 1px solid
-      ${({ theme, variant, color }) => {
-        switch (variant) {
-          case "contained":
-            return "transparent";
-          case "filled":
-            return "transparent";
-          case "light":
-            return "transparent";
-          case "outlined":
-            return color
-              ? colors[color as keyof typeof colors] || theme.palette.divider
-              : theme.palette.divider;
-          case "text":
-            return "transparent";
-          case "subtle":
-            return "transparent";
-          default:
-            return color
-              ? theme?.palette?.[color]?.main ||
-                  colors[color as keyof typeof colors] ||
-                  theme.palette.divider
-              : theme.palette.divider;
-        }
-      }};
-    opacity: ${({ variant }) => (variant === "text" ? 0.8 : 1)};
-  }
-
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
-
-  &:focus {
-    text-decoration: underline;
-  }
-
-  &:active {
-    // simulate physical button press
-    translate: 0px 1px;
-    text-decoration: none;
-  }
-
-  // disabled styles
-  ${({ disabled }) =>
-    disabled &&
-    `
-    cursor: not-allowed;
-    opacity: 0.5;
-    pointer-events: none;
-  `}
-`;
-
-const StyledAnchor = styled.a`
-  text-decoration: none;
-  height: 100%;
-
-  &:hover {
-    text-decoration: none !important;
-  }
-`;
-
-const StyledLoader = styled.span`
-  svg {
-    width: 16px;
-    height: 16px;
-    color: ${({ theme, color }) =>
-      color
-        ? theme.palette[color] || colors[color as keyof typeof colors]
-        : theme.palette.primary};
-
-    animation: spin 0.75s linear infinite;
-
-    @keyframes spin {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-`;
-
-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;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const {
-    children,
-    loading = false,
-    leftSection = null,
-    rightSection = null,
-    href = null,
-    download = null,
-    ...other
-  } = props;
-
-  const buttonContent = (
-    <span className="inner-span" style={{ height: "100%" }}>
-      {loading ? (
-        <StyledLoader>
-          <Loader2Icon />
-        </StyledLoader>
-      ) : (
-        <>
-          {leftSection && <span data-position="left">{leftSection}</span>}
-          <span className="button-label">{children}</span>
-          {rightSection && <span data-position="right">{rightSection}</span>}
-        </>
-      )}
-    </span>
-  );
-
-  return (
-    <StyledButton ref={ref} {...other}>
-      {href ? (
-        <StyledAnchor href={href} download={download}>
-          {buttonContent}
-        </StyledAnchor>
-      ) : (
-        buttonContent
-      )}
-    </StyledButton>
-  );
-});
-
-export default Button;

package/Button/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./Button";
-export type { ButtonProps } from "./Button";