@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/SelectBox/index.ts

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

package/Switch/Switch.tsx

@@ -0,0 +1,204 @@
+import styled from "styled-components";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { FieldLabel } from "..";
+import { CSSProperties } from "react";
+import { Size } from "../core";
+
+interface StyledRootProps {
+  size?: Size;
+}
+
+const StyledRoot = styled(RadixSwitch.Root)<StyledRootProps>`
+  all: unset;
+  cursor: pointer;
+
+  height: ${({ size }) =>
+    size === "xs"
+      ? "10px"
+      : size === "sm"
+      ? "16px"
+      : size === "md"
+      ? "22px"
+      : size === "lg"
+      ? "28px"
+      : size === "xl"
+      ? "32px"
+      : "16px"};
+
+  width: ${({ size }) =>
+    size === "xs"
+      ? "26px"
+      : size === "sm"
+      ? "35px"
+      : size === "md"
+      ? "28px"
+      : size === "lg"
+      ? "34px"
+      : size === "xl"
+      ? "70px"
+      : "26px"};
+
+  background-color: ${({ theme }) =>
+    theme.name === "DARK" ? "#383838" : "#e3e3e3"};
+  transition: background-color 100ms;
+  border-radius: 9999px;
+  border: 1px solid
+    ${({ theme }) =>
+      theme.name === "DARK" ? theme.palette.input.border : "#e3e3e3"};
+  position: relative;
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "2px"
+      : size === "sm"
+      ? "2px"
+      : size === "md"
+      ? "28px"
+      : size === "lg"
+      ? "34px"
+      : size === "xl"
+      ? "2px 4px"
+      : "2px"};
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &[data-state="checked"] {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
+
+  // disabled styleing
+  :disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+`;
+
+interface ThumbProps {
+  size?: Size;
+}
+
+const StyledThumb = styled(RadixSwitch.Thumb)<ThumbProps>`
+  display: block;
+  width: ${({ size }) =>
+    size === "xs"
+      ? "9px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "22px"
+      : size === "lg"
+      ? "28px"
+      : size === "xl"
+      ? "28px"
+      : "14px"};
+
+  height: ${({ size }) =>
+    size === "xs"
+      ? "9px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "22px"
+      : size === "lg"
+      ? "28px"
+      : size === "xl"
+      ? "28px"
+      : "14px"};
+
+  background-color: white;
+  border: none;
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  transition: transform 100ms;
+  will-change: transform;
+
+  &[data-state="checked"] {
+    transform: ${({ size }) =>
+      size === "xs"
+        ? "translateX(17px)"
+        : size === "sm"
+        ? "translateX(20px)"
+        : size === "md"
+        ? "translateX(26px)"
+        : size === "lg"
+        ? "translateX(32px)"
+        : size === "xl"
+        ? "translateX(42px)"
+        : "translateX(17px)"};
+  }
+`;
+
+interface SwitchProps {
+  className?: string;
+  onChange: (e: any) => void;
+  size?: Size;
+  label?: string;
+  labelPosition?: "left" | "right";
+  description?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  defaultValue?: boolean;
+  value?: boolean;
+  style?: CSSProperties;
+}
+
+const Switch = styled(
+  ({
+    className,
+    onChange,
+    size = "xs",
+    label,
+    labelPosition = "right",
+    description,
+    error,
+    required,
+    disabled = false,
+    defaultValue,
+    value,
+    style = {},
+    ...other
+  }: SwitchProps) => {
+    return (
+      <div className={className}>
+        {label && labelPosition === "left" && (
+          <FieldLabel
+            error={error}
+            asterisk={required}
+            size={size}
+            description={description}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <StyledRoot
+          size={size}
+          className="SwitchRoot"
+          onCheckedChange={onChange}
+          defaultChecked={defaultValue}
+          checked={value}
+          disabled={disabled}
+          style={style}
+          {...other}
+        >
+          <StyledThumb size={size} className="SwitchThumb" />
+        </StyledRoot>
+        {label && labelPosition === "right" && (
+          <FieldLabel
+            error={error}
+            asterisk={required}
+            size={size}
+            description={description}
+          >
+            {label}
+          </FieldLabel>
+        )}
+      </div>
+    );
+  }
+)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+`;
+
+export default Switch;

package/Switch/index.ts

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