npm - @codezee/sixtify-brahma - Versions diffs - 0.1.1 - Mend

@codezee/sixtify-brahma 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (267) hide show

package/packages/shared-components/src/PadBox/PadBox.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { Box, type SxProps } from "@mui/material";
+import type { PropsWithChildren } from "react";
+export const PadBox = ({
+  children,
+  padding,
+}: PropsWithChildren<{ padding: SxProps }>) => {
+  return (
+    <Box
+      sx={{
+        ...padding,
+        height: "inherit",
+        boxSizing: "border-box",
+        width: "100%",
+      }}
+      id="pad-box"
+    >
+      {children}
+    </Box>
+  );
+};

package/packages/shared-components/src/PadBox/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./PadBox";

package/packages/shared-components/src/Stepper/Stepper.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Box,
+  Typography,
+  useTheme,
+} from "@mui/material";
+type StepperProps = MuiStepperProps & {
+  steps: string[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+};
+export const Stepper = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+  const { butterflyBlue } = theme.palette.app.color;
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel
+              {...stepLabelProps}
+              sx={{
+                ".Mui-active .css-18pqgpd-MuiSvgIcon-root-MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".Mui-completed": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+              }}
+            >
+              <Typography variant="caption">{label}</Typography>
+            </StepLabel>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV2.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import type { StepperProps } from "@mui/material/Stepper";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import type { StepLabelProps } from "@mui/material/StepLabel";
+import StepLabel from "@mui/material/StepLabel";
+import Check from "@mui/icons-material/Check";
+import StepConnector, {
+  stepConnectorClasses,
+} from "@mui/material/StepConnector";
+import type { StepIconProps } from "@mui/material/StepIcon";
+const QontoConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 10,
+    left: "calc(-50% + 16px)",
+    right: "calc(50% + 16px)",
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      borderColor: "#784af4",
+    },
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    borderColor: "#eaeaf0",
+    borderTopWidth: 3,
+    borderRadius: 1,
+    ...theme.applyStyles("dark", {
+      borderColor: theme.palette.grey[800],
+    }),
+  },
+}));
+const QontoStepIconRoot = styled("div")<{ ownerState: { active?: boolean } }>(
+  ({ theme }) => ({
+    color: "#eaeaf0",
+    display: "flex",
+    height: 22,
+    alignItems: "center",
+    "& .QontoStepIcon-completedIcon": {
+      color: "#784af4",
+      zIndex: 1,
+      fontSize: 18,
+    },
+    "& .QontoStepIcon-circle": {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      backgroundColor: "currentColor",
+    },
+    ...theme.applyStyles("dark", {
+      color: theme.palette.grey[700],
+    }),
+    variants: [
+      {
+        props: ({ ownerState }) => ownerState.active,
+        style: {
+          color: "#784af4",
+        },
+      },
+    ],
+  })
+);
+function QontoStepIcon(props: Readonly<StepIconProps>) {
+  const { active, completed, className } = props;
+  return (
+    <QontoStepIconRoot ownerState={{ active }} className={className}>
+      {completed ? (
+        <Check className="QontoStepIcon-completedIcon" />
+      ) : (
+        <div className="QontoStepIcon-circle" />
+      )}
+    </QontoStepIconRoot>
+  );
+}
+type StepperV2Props = StepperProps & {
+  steps: string[];
+  stepLabelProps?: StepLabelProps;
+};
+export const StepperV2 = ({
+  steps,
+  alternativeLabel = true,
+  stepLabelProps = {},
+  ...rest
+}: StepperV2Props) => {
+  return (
+    <Stack sx={{ width: "100%" }} spacing={4}>
+      <Stepper
+        alternativeLabel={alternativeLabel}
+        activeStep={1}
+        connector={<QontoConnector />}
+        {...rest}
+      >
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel StepIconComponent={QontoStepIcon} {...stepLabelProps}>
+              {label}
+            </StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Stack>
+  );
+};

package/packages/shared-components/src/Stepper/StepperV3.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import type {
+  StepperProps as MuiStepperProps,
+  StepLabelProps,
+} from "@mui/material";
+import {
+  Stepper as MuiStepper,
+  Step,
+  StepLabel,
+  Box,
+  Typography,
+  useTheme,
+  Stack,
+} from "@mui/material";
+type StepperProps = MuiStepperProps & {
+  steps: { in_time?: string; out_time?: string }[];
+  showActiveStepIcon?: boolean;
+  stepLabelProps?: StepLabelProps;
+};
+export const StepperV3 = ({
+  orientation = "horizontal",
+  activeStep = 0,
+  stepLabelProps = {},
+  steps,
+  ...rest
+}: StepperProps) => {
+  const theme = useTheme();
+  const { butterflyBlue } = theme.palette.app.color;
+  return (
+    <Box>
+      <MuiStepper activeStep={activeStep} orientation={orientation} {...rest}>
+        {steps.map((label, index) => (
+          // eslint-disable-next-line sonarjs/no-array-index-key
+          <Step key={index}>
+            <StepLabel
+              {...stepLabelProps}
+              sx={{
+                ".Mui-active .css-18pqgpd-MuiSvgIcon-root-MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".Mui-completed .MuiStepIcon-root": {
+                  color: `${butterflyBlue[900]} !important`,
+                },
+                ".MuiStepIcon-text": {
+                  color: "transparent !important",
+                  display: "none",
+                },
+              }}
+            >
+              <Stack>
+                {label?.in_time ? (
+                  <>
+                    <Typography variant="caption">In at</Typography>
+                    <Typography variant="caption">{label?.in_time}</Typography>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant="caption">Out at</Typography>
+                    <Typography variant="caption">{label?.out_time}</Typography>
+                  </>
+                )}
+              </Stack>
+            </StepLabel>
+          </Step>
+        ))}
+      </MuiStepper>
+    </Box>
+  );
+};

package/packages/shared-components/src/Stepper/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./Stepper";
+export * from "./StepperV2";
+export * from "./StepperV3";

package/packages/shared-components/src/Svgs/AppLogo/AppLogoMedium.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import type { SVGProps } from "react";
+export const AppLogoMedium = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={117}
+      height={42}
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#fff"
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        stroke="#3BA4E8"
+        strokeWidth={0.353}
+        d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+      />
+      <path
+        fill="#fff"
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+      />
+      <path
+        fill="#fff"
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#fff"
+        stroke="#fff"
+        strokeWidth={0.353}
+        d="M85 26.695v-2.35h-5.569v-2.364h4.977v-2.203H79.43v-2.14h5.264v-2.332H76.64v11.389H85Zm-13.287-5.727c0 2.541-1.912 3.346-3.977 3.346h-1.371v-6.66h1.439c1.997 0 3.91.756 3.91 3.314Zm3.013 0c0-4.311-3.453-5.662-6.855-5.662h-4.332v11.389h4.469c3.3 0 6.718-1.722 6.718-5.727Zm-16.198-.016c0 2.058-1.421 3.538-3.435 3.538-2.015 0-3.42-1.48-3.42-3.538 0-1.995 1.389-3.475 3.42-3.475 2.03 0 3.436 1.48 3.436 3.475Zm3.098 0C61.626 17.3 58.85 15 55.093 15c-3.74 0-6.516 2.3-6.516 5.952 0 3.603 2.776 6.048 6.516 6.048 3.757 0 6.533-2.445 6.533-6.048Zm-13.523 4.166-2.014-1.802c-.507.676-1.405 1.159-2.539 1.159-1.997 0-3.402-1.415-3.402-3.491 0-2.01 1.438-3.49 3.452-3.49.914 0 1.879.337 2.42 1.045l1.964-1.866C46.986 15.579 45.174 15 43.5 15 39.843 15 37 17.332 37 20.984 37 24.555 39.759 27 43.449 27c2.014 0 3.605-.724 4.654-1.882Z"
+      />
+      <path
+        fill="#3BA4E8"
+        d="M117 27v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12H117Zm-10.288 0v-2.475h-5.576v-2.491h4.983v-2.322h-4.983v-2.254h5.271V15h-8.068v12h8.373Zm-10.254 0v-2.509h-5.966l5.847-7.169V15h-9.204v2.457h5.577L87 24.491V27h9.458Z"
+      />
+    </svg>
+  );
+};

package/packages/shared-components/src/Svgs/AppLogo/AppLogoSmall.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import type { SVGProps } from "react";
+export const AppLogoSmall = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={42}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 23-3.958.011s-1.289-.014-1.948.655c-.706.715-2.12 2.476-2.12 2.476s-.745.775-.746 1.4L21 32.738c-.003.13.002.258.016.387.07.634.402 1.656 1.95-.115 2.076-2.375 7.75-8.797 7.75-8.797s1.061-1.19-.927-1.214Z"
+    />
+    <path
+      fill="#3BA4E8"
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      stroke="#3BA4E8"
+      strokeWidth={0.353}
+      d="m29.79 20-3.958-.011s-1.289.014-1.948-.655c-.706-.715-2.12-2.476-2.12-2.476s-.745-.776-.747-1.4l-.016-5.197a2.89 2.89 0 0 1 .016-.387c.069-.634.402-1.656 1.95.115 2.076 2.375 7.75 8.797 7.75 8.797s1.062 1.19-.927 1.214Z"
+    />
+    <path
+      fill="#fff"
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="m1.487 23.774 13.157 15.828s2.397 3.197 2.351-.078c-.046-3.275 0-8.792 0-8.792s.14-1.16-1.105-2.585c-1.246-1.426-4.32-5.035-4.32-5.035S10.756 22 8.597 22.004c-2.057.005-6.116-.011-6.16 0 0 0-.222-.001-.429.012-.622.04-1.61.362-.52 1.758Z"
+    />
+    <path
+      fill="#fff"
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+    <path
+      stroke="#fff"
+      strokeWidth={0.353}
+      d="M1.487 18.226 14.644 2.398s2.397-3.197 2.351.078c-.046 3.275 0 8.792 0 8.792s.14 1.16-1.105 2.585c-1.246 1.427-4.32 5.035-4.32 5.035s-.814 1.113-2.973 1.108c-2.057-.005-6.116.011-6.16 0 0 0-.222.001-.429-.012-.622-.04-1.61-.362-.52-1.758Z"
+    />
+  </svg>
+);

package/packages/shared-components/src/Svgs/ArrowUp.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export const ArrowUp = () => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 10 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M5 0L10 8.75H0L5 0Z" fill="#D9D9D9" />
+  </svg>
+);