norma-library 0.4.6 → 0.4.8

package/dist/esm/interfaces/Badge.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.js.map

package/dist/esm/interfaces/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/interfaces/Badge.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/ChatMessage.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface ChatProps {
+    name: string;
+    message: string;
+    emotion?: React.ReactNode;
+    emotionReplay?: React.ReactNode;
+    time: string;
+    send: "me" | "replay";
+}
+export interface ChatMessageProps {
+    data: ChatProps[];
+}

package/dist/esm/interfaces/ChatMessage.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatMessage.js.map

package/dist/esm/interfaces/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.js","sourceRoot":"","sources":["../../../src/interfaces/ChatMessage.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/DatePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DatePickVariant } from "../types";
+export interface DatePickerBaseProps {
+    sx?: SxProps<Theme>;
+    label?: string;
+    format?: string;
+    language?: string;
+    onChange?: React.ChangeEvent<HTMLInputElement>;
+    variant?: DatePickVariant;
+}

package/dist/esm/interfaces/DatePicker.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/interfaces/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/interfaces/DatePicker.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/TimeLine.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { ColorVariant, DataTimeLine, MuiTimeLineBaseProps, PositionVariant } from "../types";
+export interface TimeLineBaseProps extends MuiTimeLineBaseProps {
+    position?: PositionVariant;
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    color: ColorVariant;
+    data: DataTimeLine[];
+}

package/dist/esm/interfaces/TimeLine.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TimeLine.js.map

package/dist/esm/interfaces/TimeLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeLine.js","sourceRoot":"","sources":["../../../src/interfaces/TimeLine.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/TimePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DatePickVariant } from "../types";
+export interface TimePickerBaseProps {
+    sx?: SxProps<Theme>;
+    label?: string;
+    timezone?: string;
+    language?: string;
+    onChange?: React.ChangeEvent<HTMLInputElement>;
+    variant?: DatePickVariant;
+}

package/dist/esm/interfaces/TimePicker.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TimePicker.js.map

package/dist/esm/interfaces/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/interfaces/TimePicker.ts"],"names":[],"mappings":""}

package/dist/esm/interfaces/index.d.ts

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -9,9 +12,11 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";

package/dist/esm/interfaces/index.js

@@ -1,7 +1,10 @@
 export * from "./Accordion";
+export * from "./Avatar";
+export * from "./Badge";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
+export * from "./DatePicker";
 export * from "./DropDown";
 export * from "./IconButton";
 export * from "./Icons";
@@ -9,10 +12,12 @@ export * from "./Modal";
 export * from "./Paper";
 export * from "./ProgressBar";
 export * from "./RadioGroup";
-export * from "./RadioGroup";
 export * from "./RangerSlider";
 export * from "./Select";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextField";
+export * from "./TimeLine";
+export * from "./TimePicker";
+export * from "./ChatMessage";
 //# sourceMappingURL=index.js.map

package/dist/esm/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/esm/types/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { ButtonProps as MuiButtonProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
+import { AvatarProps as MuiAvatarProps, ButtonProps as MuiButtonProps, BadgeProps as MuiBadgeProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 import { iconsSVG } from "../components/Svgs";
 export type ColorVariant = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
@@ -10,6 +11,7 @@ export type ButtonVariant = "text" | "outlined" | "contained";
 export type DropVariant = "menu" | "selectedMenu";
 export type TagVariant = "outlined" | "contained";
 export type TabsVariant = "standard" | "scrollable" | "fullWidth";
+export type DatePickVariant = "responsive" | "desktop" | "mobile";
 export type ProgressVariant = "determinate" | "indeterminate" | "buffer" | "query";
 export type MuiButtonBaseProps = Omit<MuiButtonProps, "sx" | "color" | "size" | "variant">;
 export type MuiIconButtonBaseProps = Omit<MuiIconButtonProps, "sx" | "color" | "size" | "variant">;
@@ -18,6 +20,7 @@ export type TextFieldVariant = "standard" | "outlined" | "filled";
 export type TextFieldSizeVariant = "small" | "medium";
 export type DirectionVariant = "vertical" | "horizontal";
 export type PaperVariant = "elevation" | "outlined";
+export type PositionVariant = "left" | "right" | "alternate" | "alternate-reverse";
 export type MuiTextFieldBaseProps = Omit<MuiTextFieldProps, "onChange" | "onBlur" | "onFocus" | "defaultValue" | "size" | "value" | "id" | "fullWidth" | "helperText" | "type" | "InputProps" | "InputLabelProps" | "autoComplete" | "label" | "helperText" | "InputLabelProps" | "margin" | "maxRows" | "minRows" | "multiline" | "name" | "placeholder" | "rows" | "select" | "SelectProps" | "sx" | "autoFocus" | "error" | "classes" | "children" | "color" | "variant">;
 export interface CheckboxPropsSizeOverrides {
 }
@@ -29,11 +32,15 @@ export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
 export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
 export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
 export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx" | "ref">;
 export type MuiTabsBaseProps = Omit<MuiTabsProps, "sx" | "children" | "onChange" | "variant" | "value">;
 export type MuiAccordionBaseProps = Omit<MuiAccordionProps, "sx" | "children" | "defaultExpanded" | "onChange">;
 export type MuiSelectBaseProps = Omit<MuiSelectProps, "sx" | "value" | "onClose" | "onOpen" | "input" | "label">;
 export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
+export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
+export type MuiAvatarBaseProps = Omit<MuiAvatarProps, "sx" | "src" | "children" | "variant" | "sizes">;
+export type MuiTimeLineBaseProps = Omit<MuiTimeLineProps, "sx" | "position" | "children" | "ref">;
+export type MuiBadgeBaseProps = Omit<MuiBadgeProps, "sx" | "color" | "children" | "invisible" | "variant" | "className" | "badgeContent">;
 export type IconScale = "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge";
 export type IconColors = "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "white" | "black";
 export declare const scaleSize: Record<IconScale, number>;
@@ -69,6 +76,12 @@ export type DataSelect = {
     label: string;
     value: string | number;
 };
+export type DataTimeLine = {
+    id?: string;
+    title: string;
+    data: string;
+    by: string;
+};
 export type RenderProps<E extends HTMLElement = HTMLElement> = {
     focusRef?: React.MutableRefObject<E | null>;
     id?: string;

package/dist/esm/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AA+JA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAmMA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "private": false,
   "description": "Norma Library. A React UI kit.",
   "scripts": {
@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
+    "@mui/lab": "^5.0.0-alpha.145",
     "@storybook/addon-essentials": "^7.5.0-alpha.1",
     "@storybook/addon-interactions": "^7.5.0-alpha.1",
     "@storybook/addon-links": "^7.5.0-alpha.1",
@@ -44,6 +45,8 @@
     "@material-tailwind/react": "^2.1.1",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
+    "@mui/x-date-pickers": "^6.14.0",
+    "dayjs": "^1.11.9",
     "react-i18next": "^13.2.2",
     "react-scripts": "^5.0.1",
     "tslib": "^2.6.2"

package/src/components/Avatar.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+
+import {
+  ThemeProvider,
+  useMediaQuery,
+  Avatar as MuiVatar,
+} from "@mui/material";
+
+import { AvatarBaseProps } from "../interfaces";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: "none",
+  color: "currentcolor",
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <AvatarStyled src={src} {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/Badge.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from "react";
+
+import { ThemeProvider, useMediaQuery, Badge as MuiBadge } from "@mui/material";
+
+import { BadgeBaseProps } from "../interfaces";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.dark : themes.light),
+    [prefersDarkMode]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <BadgeStyled {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/ChatMessage.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { ChatMessageProps } from "@/interfaces";
+
+const Item = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  borderColor: "#ccc",
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  justifyContent: orient === "replay" ? "flex-end" : "flex-start",
+  marginBottom: "10px",
+  alignItems: "center",
+}));
+
+const ContainerStyled = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  minWidth: "640px",
+  backgroundColor: "#F0F0F0",
+  padding: "10px",
+});
+
+const BoxStyled = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  width: "70%",
+  backgroundColor: orient === "replay" ? "#E18B50" : "#FFF",
+  color: orient === "replay" ? "#FFF" : "#4D4F5C",
+  borderTopLeftRadius: 30,
+  borderTopRightRadius: 30,
+  borderBottomLeftRadius: orient === "me" ? 2 : 30,
+  borderBottomRightRadius: orient === "me" ? 30 : 2,
+  marginLeft: orient === "replay" ? "10px" : 0,
+  marginRight: orient === "me" ? "10px" : 0,
+  padding: 20,
+}));
+
+export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
+  return (
+    <ContainerStyled>
+      {data.map((item, key) => (
+        <Item key={key} orient={item.send}>
+          {item.emotion && item.send === "replay" && <>{item.emotion}</>}
+          <BoxStyled orient={item.send}>
+            <Typography
+              variant="subtitle2"
+              style={{
+                marginBottom: "5px",
+                font: "normal normal 600 16px/20px Source Sans Pro",
+              }}
+            >
+              {item.name}
+            </Typography>
+            <Typography
+              variant="body1"
+              style={{
+                font: "normal normal normal 16px/20px Source Sans Pro",
+              }}
+            >
+              {item.message}
+            </Typography>
+            <Typography
+              variant="caption"
+              style={{
+                position: "absolute",
+                bottom: "-18px",
+                left: item.send === "me" ? 0 : "auto",
+                right: item.send === "me" ? "auto" : 0,
+                font: "normal normal normal 11px/13px Source Sans Pro",
+                opacity: 0.5,
+                color: "#4D4F5C",
+              }}
+            >
+              {item.time}
+            </Typography>
+          </BoxStyled>
+          {item.emotion && item.send === "me" && <>{item.emotion}</>}
+          {item.emotionReplay && item.send === "me" && (
+            <>{item.emotionReplay}</>
+          )}
+        </Item>
+      ))}
+    </ContainerStyled>
+  );
+};

package/src/components/DatePicker.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery } from "@mui/material";
+import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileDatePicker as MuiMobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
+import { DesktopDatePicker as MuiDesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
+import { DatePickerBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+import "dayjs/locale/pt-br";
+import "dayjs/locale/en";
+import "dayjs/locale/es";
+
+const MuiDatePickerStyled = styled(MuiDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none",
+    borderRadius: 0,
+    borderBottom: "1px solid #666666",
+  },
+  "& .MuiFormLabel-root": {
+    backgroundColor: "#fff",
+    padding: "0 5px",
+  },
+});
+
+export const DatePicker = ({
+  label,
+  format = "DD/MM/YYYY",
+  language = "pt-br",
+  variant = "desktop",
+}: DatePickerBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+        <DemoContainer
+          components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
+        >
+          {variant === "responsive" && (
+            <MuiDatePickerStyled label={label} format={format} />
+          )}
+          {variant === "mobile" && (
+            <MuiMobileDatePickerStyled label={label} format={format} />
+          )}
+          {variant === "desktop" && (
+            <MuiDesktopDatePickerStyled label={label} format={format} />
+          )}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/Icons.tsx

@@ -72,7 +72,7 @@ export const Icons: FunctionComponent<IconsProps> = ({
 
   return (
     <Svg
-      viewBox="0 0 64 64"
+      viewBox="0 0 56 56"
       width={`${width}px`}
       height={`${height}px`}
       {...props}

package/src/components/ProgressBar.tsx

@@ -6,6 +6,7 @@ import {
   useMediaQuery,
   Typography,
 } from "@mui/material";
+
 import { ProgressBarBaseProps } from "../interfaces";
 import { themes } from "../helpers";
 import { styled } from "@mui/material/styles";
@@ -20,7 +21,7 @@ const ProgressBarStyled = styled(MuiProgressBar)({
   }`,
 });
 
-export const ProgressBarLabelStyled = styled(Typography)`
+const ProgressBarLabelStyled = styled(Typography)`
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/components/TimeLine.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from "react";
+import { ThemeProvider, useMediaQuery, Typography } from "@mui/material";
+
+import {
+  Timeline as MuiTimeLine,
+  TimelineItem,
+  timelineItemClasses,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+} from "@mui/lab";
+
+import { TimeLineBaseProps } from "@/interfaces/TimeLine";
+
+import { styled } from "@mui/material/styles";
+import { palette, lightenRGB, themes } from "../helpers";
+import { ColorVariant, DataTimeLine } from "@/types";
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const sampleData: Array<DataTimeLine> = [
+  {
+    title: "imported register",
+    data: "01/04/2023 at 07h00",
+    by: "By IEM",
+  },
+  {
+    title: "80% score applied on register",
+    data: "01/04/2023 at 07h05",
+    by: "By IEM",
+  },
+  {
+    title: "Registers transfered to campaign ID 10",
+    data: "",
+    by: "",
+  },
+];
+
+const TimeLineStyled = styled(MuiTimeLine)({
+  [`& .${timelineItemClasses.root}:before`]: {
+    flex: 0,
+    padding: 0,
+  },
+});
+
+export const TimeLine: React.FC<TimeLineBaseProps> = ({
+  data = sampleData,
+  color = "primary",
+  position = "left",
+  ...props
+}) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.light),
+    [prefersDarkMode]
+  );
+
+  const renderList = data.map((item, key) => (
+    <TimelineItem key={key}>
+      <TimelineSeparator>
+        <TimelineDot
+          sx={{
+            bgcolor: colorMap[color],
+            p: "6px",
+            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
+          }}
+        />
+        {key !== data.length - 1 && (
+          <TimelineConnector
+            sx={{ bgcolor: colorMap[color], pt: "55px", pl: "3px" }}
+          />
+        )}
+      </TimelineSeparator>
+      <TimelineContent>
+        {item.title}
+        <Typography sx={{ m: "auto 0" }} variant="body2" color="text.secondary">
+          {item.data}
+        </Typography>
+        <Typography
+          sx={{ m: "auto 0", color: colorMap[color] }}
+          variant="body2"
+        >
+          {item.by}
+        </Typography>
+      </TimelineContent>
+    </TimelineItem>
+  ));
+
+  return (
+    <ThemeProvider theme={theme}>
+      <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
+    </ThemeProvider>
+  );
+};