mainstack-design-system 0.0.0

package/src/components/controls/RadioButton.tsx

@@ -0,0 +1,135 @@
+/** @format */
+
+import { Box, Flex, useRadio, RadioProps, Text } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+
+interface Props extends RadioProps {
+  label?: string;
+  subtext?: string;
+}
+
+const RadioButton = (props: Props) => {
+  const { htmlProps, getInputProps, getCheckboxProps } = useRadio(props);
+  const input = getInputProps({});
+  const checkbox = getCheckboxProps();
+  return (
+    <Box as="label" cursor="pointer" position="relative" {...htmlProps}>
+      <input {...input} disabled={props.isDisabled} />
+      <Flex alignItems="center" direction={"row"} gap={"12px"}>
+        <Box
+          {...checkbox}
+          cursor="pointer"
+          border={`1px solid ${Colors.gray100}`}
+          borderWidth={1}
+          h="18px"
+          w="18px"
+          borderRadius="100px"
+          position="relative"
+          display="inline-flex"
+          justifyContent={"center"}
+          alignItems={"center"}
+          boxSizing="border-box"
+          outline={"1px solid transparent"}
+          bg={Colors.white100}
+          _pressed={{
+            bg: Colors.black300,
+            outline: `0.6px solid ${Colors.gray100} `,
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "50%",
+              display: "block",
+            },
+          }}
+          _hover={{
+            bg: Colors.black300,
+            transition: "outline 0.3s ease-in-out, background 0.3s ease-in-out",
+            padding: "2px",
+            border: "none",
+            _disabled: {
+              bg: Colors.white100,
+              border: `1px solid ${Colors.gray100}`,
+              cursor: "not-allowed",
+              _after: {
+                display: "none",
+              },
+            },
+            _pressed: {
+              outline: `0.6px solid ${Colors.gray100} `,
+            },
+            _checked: {
+              padding: "5px",
+              _after: {
+                content: '""',
+                h: "100%",
+                w: "100%",
+                bg: Colors.white100,
+                borderRadius: "50%",
+                display: "block",
+              },
+              outline: `1.8px solid ${Colors.gray100} `,
+            },
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "100%",
+              display: "block",
+            },
+          }}
+          _checked={{
+            bg: Colors.black300,
+            border: "none",
+            padding: "5px",
+            _after: {
+              display: "block",
+            },
+          }}
+          _focus={{
+            boxShadow: "none",
+          }}
+          _after={{
+            content: '""',
+            h: "100%",
+            w: "100%",
+            bg: Colors.white100,
+            borderRadius: "50%",
+            display: "none",
+          }}
+          {...props}
+        />
+        {(props.label || props.subtext) && (
+          <Flex direction={"column"} gap={"4px"}>
+            <Text
+              color={Colors.black300}
+              fontFamily={"Degular"}
+              fontSize={"16px"}
+              fontWeight={600}
+              lineHeight={"20px"}
+              letterSpacing={"-0.064px"}
+              margin={0}
+            >
+              {props.label}
+            </Text>
+            <Text
+              color={Colors.gray400}
+              fontFamily={"Degular"}
+              fontSize={"14px"}
+              fontWeight={500}
+              lineHeight={"16px"}
+              letterSpacing={"-0.2px"}
+              margin={0}
+            >
+              {props.subtext}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default RadioButton;

package/src/components/controls/RectangleCheckButton.tsx

@@ -0,0 +1,106 @@
+/** @format */
+
+import { Box, Flex, Text, useCheckbox, CheckboxProps } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import CheckIcon from "icons/CheckIcon";
+
+interface Props extends CheckboxProps {
+  label?: string;
+  subtext?: string;
+}
+const RectangleCheckButton = (props: Props) => {
+  const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
+    useCheckbox(props);
+
+  return (
+    <Box as="label" cursor="pointer" position={"relative"} {...htmlProps}>
+      <input {...getInputProps()} disabled={props.isDisabled} />
+      <Flex alignItems={"center"} direction={"row"} gap={"12px"}>
+        <Box
+          cursor="pointer"
+          border={`1px solid ${Colors.gray100}`}
+          borderWidth={1}
+          h="18px"
+          w="18px"
+          borderRadius="4.5px"
+          position="relative"
+          display="inline-flex"
+          justifyContent={"center"}
+          alignItems={"center"}
+          boxSizing="border-box"
+          outline={"1px solid transparent"}
+          bg={Colors.white100}
+          _pressed={{
+            bg: Colors.black300,
+            outline: `0.6px solid ${Colors.gray100} `,
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "2.25px",
+              display: "block",
+            },
+          }}
+          _hover={{
+            bg: Colors.black300,
+            transition: "outline 0.3s ease-in-out, background 0.3s ease-in-out",
+            padding: "2px",
+            border: "none",
+            _checked: {
+              _after: {
+                display: "none",
+              },
+              outline: `1.8px solid ${Colors.gray100} `,
+            },
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "2.25px",
+              display: "block",
+            },
+          }}
+          _checked={{
+            bg: Colors.black300,
+            border: "none",
+          }}
+          {...getCheckboxProps()}
+        >
+          {state.isChecked && <CheckIcon color={Colors.white100} />}
+        </Box>
+        <Flex direction={"column"} gap={"4px"}>
+          {props.label && (
+            <Text
+              color={Colors.black300}
+              fontFamily={"Degular"}
+              fontSize={"16px"}
+              fontWeight={600}
+              lineHeight={"20px"}
+              letterSpacing={"-0.064px"}
+              margin={0}
+            >
+              {props.label}
+            </Text>
+          )}
+          {props.subtext && (
+            <Text
+              color={Colors.gray400}
+              fontFamily={"Degular"}
+              fontSize={"14px"}
+              fontWeight={500}
+              lineHeight={"16px"}
+              letterSpacing={"-0.2px"}
+              margin={0}
+            >
+              {props.subtext}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default RectangleCheckButton;

package/src/components/controls/RoundCheckButton.tsx

@@ -0,0 +1,106 @@
+/** @format */
+
+import { Box, Flex, Text, useCheckbox, CheckboxProps } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import CheckIcon from "icons/CheckIcon";
+
+interface Props extends CheckboxProps {
+  label?: string;
+  subtext?: string;
+}
+const RoundCheckButton = (props: Props) => {
+  const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
+    useCheckbox(props);
+
+  return (
+    <Box as="label" cursor="pointer" position={"relative"} {...htmlProps}>
+      <input {...getInputProps()} disabled={props.isDisabled} />
+      <Flex alignItems={"center"} direction={"row"} gap={"12px"}>
+        <Box
+          cursor="pointer"
+          border={`1px solid ${Colors.gray100}`}
+          borderWidth={1}
+          h="18px"
+          w="18px"
+          borderRadius="100px"
+          position="relative"
+          display="inline-flex"
+          justifyContent={"center"}
+          alignItems={"center"}
+          boxSizing="border-box"
+          outline={"1px solid transparent"}
+          bg={Colors.white100}
+          _pressed={{
+            bg: Colors.black300,
+            outline: `0.6px solid ${Colors.gray100} `,
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "50%",
+              display: "block",
+            },
+          }}
+          _hover={{
+            bg: Colors.black300,
+            transition: "outline 0.3s ease-in-out, background 0.3s ease-in-out",
+            padding: "2px",
+            border: "none",
+            _checked: {
+              _after: {
+                display: "none",
+              },
+              outline: `1.8px solid ${Colors.gray100} `,
+            },
+            _after: {
+              content: '""',
+              h: "100%",
+              w: "100%",
+              bg: Colors.white100,
+              borderRadius: "50%",
+              display: "block",
+            },
+          }}
+          _checked={{
+            bg: Colors.black300,
+            border: "none",
+          }}
+          {...getCheckboxProps()}
+        >
+          {state.isChecked && <CheckIcon color={Colors.white100} />}
+        </Box>
+        <Flex direction={"column"} gap={"4px"}>
+          {props.label && (
+            <Text
+              color={Colors.black300}
+              fontFamily={"Degular"}
+              fontSize={"16px"}
+              fontWeight={600}
+              lineHeight={"20px"}
+              letterSpacing={"-0.064px"}
+              margin={0}
+            >
+              {props.label}
+            </Text>
+          )}
+          {props.subtext && (
+            <Text
+              color={Colors.gray400}
+              fontFamily={"Degular"}
+              fontSize={"14px"}
+              fontWeight={500}
+              lineHeight={"16px"}
+              letterSpacing={"-0.2px"}
+              margin={0}
+            >
+              {props.subtext}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default RoundCheckButton;

package/src/components/controls/Stepper.tsx

@@ -0,0 +1,84 @@
+/** @format */
+
+import { Flex, Text, Box, FlexProps } from "@chakra-ui/react";
+import { useEffect, useState, useCallback } from "react";
+import Colors from "components/styleGuide/Colors";
+import CheckIcon from "icons/CheckIcon";
+export interface StepperProps extends FlexProps {
+  steps: {
+    name: string;
+    id: number;
+  }[];
+  page: number;
+}
+const Stepper = ({ steps, page, ...rest }: StepperProps) => {
+  const [elementHeight, setElementHeight] = useState(0);
+  const [marginTop, setMarginTop] = useState(0);
+  const [marginLeft, setMarginLeft] = useState(0);
+  const stepBar = useCallback(
+    (node: HTMLInputElement) => {
+      if (node !== null) {
+        const paddingTop = 28;
+        const marginBetweenSteps = 24;
+
+        setElementHeight(node?.clientHeight - paddingTop);
+        setMarginTop(marginBetweenSteps * steps.length);
+        setMarginLeft((node?.clientHeight - paddingTop - paddingTop) / 2);
+      }
+    },
+    [steps.length]
+  );
+
+  return (
+    <Flex
+      direction={"column"}
+      position={"relative"}
+      rowGap={"24px"}
+      ref={stepBar}
+      {...rest}
+    >
+      <Box
+        w={`${elementHeight}px`}
+        h={0}
+        transform="rotate(-90deg)"
+        border={`1px solid ${Colors.gray50} !important`}
+        pos="absolute"
+        top={`${marginTop}px`}
+        left={`-${marginLeft}px`}
+      ></Box>
+      {steps.map((step) => (
+        <Flex alignItems="center" gap="12px" key={step.id} height={"28px"}>
+          <Flex
+            alignItems="center"
+            bg={page === step.id ? Colors.polychromePinkOrange : Colors.gray50}
+            color={page === step.id ? Colors.white100 : Colors.gray400}
+            borderRadius="50%"
+            fontFamily={"Degular"}
+            fontSize={"14px"}
+            lineHeight={"16px"}
+            letterSpacing={"-0.2px"}
+            boxSize="28px"
+            justifyContent="center"
+            textAlign="center"
+            fontWeight={500}
+            zIndex={"99"}
+          >
+            {page > step.id ? <CheckIcon color={Colors.black300} /> : step.id}
+          </Flex>
+          <Text
+            fontSize={"16px"}
+            lineHeight="24px"
+            fontWeight={600}
+            fontFamily="Degular"
+            letterSpacing="-0.4px"
+            color={Colors.black300}
+          >
+            {step.name}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
+
+export default Stepper;

package/src/components/controls/TabMenu.tsx

@@ -0,0 +1,114 @@
+/** @format */
+
+import {
+  Tabs as DefaultTabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  TabProps,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+export interface TabMenuProps extends TabProps {
+  items: {
+    name: string;
+    element: any;
+  }[];
+}
+const TabMenu = ({ items }: TabMenuProps) => {
+  return (
+    <DefaultTabs>
+      <TabList
+        h={"50px"}
+        alignItems="center"
+        p={"4px"}
+        borderBottom="unset"
+        fontFamily="Degular"
+        fontSize={"16px"}
+        lineHeight={"18px"}
+        gap={"24px"}
+        w={["100%", "max-content"]}
+        overflowX={["scroll", "auto"]}
+      >
+        {items.map((item, index) => (
+          <Tab
+            w="fit-content"
+            h="100%"
+            display="flex"
+            position={"relative"}
+            fontFamily={"Degular"}
+            fontSize={"16px"}
+            justifyContent="center"
+            border="none"
+            bg={"none"}
+            marginBottom="0"
+            cursor="pointer"
+            fontWeight={600}
+            color={Colors.gray400}
+            letterSpacing={"-0.4px"}
+            lineHeight={"16px"}
+            _hover={{
+              _after: {
+                bg: Colors.gray100,
+                width: "100%",
+              },
+              _selected: {
+                color: Colors.black300,
+                _after: {
+                  width: "100%",
+                  bg: Colors.black300,
+                },
+              },
+              _pressed: {
+                _after: {
+                  bg: Colors.gray400,
+                  width: "100%",
+                },
+              },
+            }}
+            _pressed={{
+              _after: {
+                bg: Colors.gray400,
+                width: "100%",
+              },
+            }}
+            _selected={{
+              bg: "none",
+              color: Colors.black300,
+              _after: {
+                width: "100%",
+                bg: Colors.black300,
+              },
+            }}
+            _after={{
+              content: '""',
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: "-4px",
+              width: "0%",
+              height: "2px",
+              borderRadius: "16px",
+              transition: "ease .40s",
+            }}
+            px={0}
+            py={"10px"}
+            key={index}
+          >
+            {item.name}
+          </Tab>
+        ))}
+      </TabList>
+
+      <TabPanels>
+        {items.map((item, index) => (
+          <TabPanel padding={"0"} key={index}>
+            {item.element}
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </DefaultTabs>
+  );
+};
+
+export default TabMenu;

package/src/components/controls/ToggleButton.tsx

@@ -0,0 +1,123 @@
+/** @format */
+
+import { Switch, SwitchProps, Box, Flex, Text } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+
+interface ISwitch extends SwitchProps {
+  label?: string;
+  subtext?: string;
+  refkey?: string;
+  access?: string;
+  as?: any;
+  name?: string;
+  className?: string;
+  value?: any;
+}
+const ToggleButton = ({
+  label,
+  subtext,
+  refkey,
+  size,
+  className,
+  value,
+  as,
+  id,
+  onChange,
+  isChecked,
+  name,
+  isDisabled,
+}: ISwitch) => {
+  return (
+    <Box as="label" cursor="pointer" position="relative">
+      <Flex alignItems={"center"} gap={"12px"}>
+        <Flex direction={"column"} gap={"4px"}>
+          {label && (
+            <Text
+              color={Colors.black300}
+              fontFamily={"Degular"}
+              fontSize={"16px"}
+              fontWeight={600}
+              lineHeight={"20px"}
+              letterSpacing={"-0.064px"}
+              margin={0}
+            >
+              {label}
+            </Text>
+          )}
+          {subtext && (
+            <Text
+              color={Colors.gray400}
+              fontFamily={"Degular"}
+              fontSize={"14px"}
+              fontWeight={500}
+              lineHeight={"16px"}
+              letterSpacing={"-0.2px"}
+              margin={0}
+            >
+              {subtext}
+            </Text>
+          )}
+        </Flex>
+        <Switch
+          id={id}
+          as={as}
+          name={name}
+          sx={{
+            ".chakra-switch__track": {
+              width: "36px",
+              height: "24px",
+              padding: "0px",
+              backgroundColor: Colors.gray100,
+              borderRadius: "100px",
+              border: "none",
+            },
+            ".chakra-switch__track[data-checked]": {
+              width: "36px",
+              height: "24px",
+              backgroundColor: Colors.black300,
+              padding: "0px",
+            },
+            ".chakra-switch__thumb": {
+              height: "20px",
+              width: "20px",
+              margin: "2px 0px 2px 2px",
+
+              backgroundColor: Colors.white100,
+              borderRadius: "100px",
+              boxShadow:
+                "0px 1px 1px 0px rgba(45, 59, 67, 0.03), 0px 1px 1px 0px rgba(45, 59, 67, 0.03)",
+              transition: "transform ease-in-out .3s",
+            },
+            ".chakra-switch__thumb[data-checked]": {
+              height: "20px",
+              width: "20px",
+              margin: "2px 2px 2px 0px",
+              transform: "translateX(14px)",
+            },
+          }}
+          onChange={onChange}
+          isChecked={isChecked}
+          isDisabled={isDisabled}
+          data-refkey={refkey}
+          accessKey={refkey}
+          value={value}
+          outline={"1px solid transparent"}
+          border={"none"}
+          _hover={{
+            _disabled: {
+              outline: "0px solid transparent !important",
+            },
+            transition: "outline 0.3s ease-in-out, background 0.3s ease-in-out",
+            outline: `2px solid ${Colors.gray50} `,
+          }}
+          _checked={{
+            outline: `2px solid ${Colors.gray50} `,
+          }}
+          borderRadius="100px"
+        />
+      </Flex>
+    </Box>
+  );
+};
+
+export default ToggleButton;