mayak-common-library 0.0.1

package/dist/index.js

@@ -0,0 +1,661 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AppBar: () => AppBar_default,
+  Avatar: () => Avatar_default,
+  Badge: () => Badge_default,
+  Button: () => Button_default,
+  Chip: () => Chip_default,
+  FromToInput: () => FromToInput_default,
+  Greet: () => Greet,
+  IconButton: () => IconButton_default,
+  Input: () => Input_default,
+  MenuItem: () => MenuItem_default,
+  PhoneInput: () => PhoneInput_default,
+  Providers: () => Providers_default,
+  Radio: () => Radio_default,
+  RadioGroup: () => RadioGroup_default,
+  Select: () => Select_default,
+  SelectPro: () => SelectPro_default,
+  Slider: () => Slider_default,
+  Switch: () => Switch_default,
+  Text: () => Text_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Greet.tsx
+function Greet(props) {
+  const { name } = props;
+  return /* @__PURE__ */ React.createElement("div", null, "Hello ", name);
+}
+
+// src/components/Button/Button.tsx
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_material = require("@mui/material");
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var StyledButton = (0, import_material.styled)(import_Button.default)(() => ({
+  textTransform: "none",
+  width: "fit-content",
+  color: "#343434",
+  "&:hover": {
+    backgroundColor: "unset",
+    svg: {
+      filter: "brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(806%) hue-rotate(339deg) brightness(83%) contrast(85%)"
+    }
+  },
+  transition: "transform 0.1s ease-in-out",
+  "&:active": {
+    // p: {
+    // transform: "scale(0.99)",
+    // },
+  }
+}));
+var Button = (props) => {
+  const { children, base, bolt, border, small, large, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    StyledButton,
+    {
+      ...rest,
+      disableRipple: true,
+      className: `${base ? "bg-accent-dark rounded-none text-white hover:bg-accent-beige text-base" : ""}
+${small ? "py-1.5 px-4" : ""}
+      ${large ? "py-5 px-10" : ""}   
+        ${border ? "border-b border-solid rounded-none" : ""}`
+    },
+    /* @__PURE__ */ React.createElement(
+      import_Typography.default,
+      {
+        className: `${bolt ? "font-extrabold leading-4" : "font-normal leading-3"}`
+      },
+      children
+    )
+  );
+};
+var Button_default = Button;
+
+// src/components/Button/IconButton.tsx
+var import_material2 = require("@mui/material");
+var StyledButton2 = (0, import_material2.styled)(import_material2.IconButton)(() => ({
+  width: "fit-content",
+  borderRadius: 0,
+  svg: {
+    margin: "1px 0 0 0px"
+  },
+  "&:hover": {
+    svg: {
+      filter: "brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(806%) hue-rotate(339deg) brightness(83%) contrast(85%)"
+    }
+  }
+}));
+var IconButton = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(StyledButton2, { ...rest, disableRipple: true }, children);
+};
+var IconButton_default = IconButton;
+
+// src/components/Select/Select.tsx
+var import_react = require("react");
+var import_material3 = require("@mui/material");
+
+// src/assets/dropdown-arrow.svg
+var dropdown_arrow_default = "./dropdown-arrow-CDZAF5GJ.svg";
+
+// src/components/Select/Select.tsx
+var StyledSelect = (0, import_material3.styled)(import_material3.Select)(({ open }) => ({
+  minWidth: 250,
+  "&.MuiInputBase-root": {
+    borderRadius: "0",
+    transition: "0.3s ease-in-out",
+    "&.Mui-focused": {
+      backgroundColor: open ? "white" : "transparent"
+    }
+  },
+  svg: {
+    // Added '&' to the beginning of the selector
+    position: "absolute",
+    right: "18px",
+    transform: `${open ? "rotate(180deg)" : "rotate(0deg)"}`
+    // Moved the transform style here and added a condition based on the 'open' prop
+  },
+  ".MuiOutlinedInput-notchedOutline": {
+    // transition: '0.3s ease-in-out',
+    borderColor: "#343434 "
+  },
+  // '.MuiSvgIcon-root':{
+  //     transition: '0.3s ease-in-out',
+  // },
+  ":hover": {
+    ".MuiOutlinedInput-notchedOutline": {
+      borderColor: "#343434"
+    }
+  },
+  "&.Mui-focused fieldset": {
+    "&.MuiOutlinedInput-notchedOutline": {
+      // borderColor: 'accent-dark',
+      border: "none"
+      // all: 'unset'
+    }
+  }
+}));
+var CustomSelect = (props) => {
+  const { children, placeholder, ...rest } = props;
+  const myRef = (0, import_react.useRef)(null);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const uniqueId = "select_" + Math.random().toFixed(5).slice(2);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  (0, import_react.useEffect)(() => {
+    if (!open) myRef.current?.classList.remove("Mui-focused");
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    StyledSelect,
+    {
+      ...rest,
+      ref: myRef,
+      open,
+      onOpen: handleOpen,
+      onClose: handleClose,
+      sx: {
+        "& .MuiSelect-select .notranslate::after": placeholder ? {
+          content: `"${placeholder}"`
+          // opacity: 0.42,
+        } : {}
+      },
+      inputProps: { "aria-labelledby": uniqueId },
+      className: `h-12 `,
+      MenuProps: {
+        disableScrollLock: true,
+        // ref: menuRef,
+        id: uniqueId,
+        PaperProps: {
+          classes: {
+            root: `menu ${open ? "menu--open" : "menu--close"}`
+          }
+        }
+      },
+      IconComponent: () => /* @__PURE__ */ React.createElement(dropdown_arrow_default, null)
+    },
+    children
+  );
+};
+var Select_default = CustomSelect;
+
+// src/assets/search.svg
+var search_default = "./search-HJGCO2DZ.svg";
+
+// src/components/Select/SelectPro.tsx
+var import_react2 = require("react");
+var import_material4 = require("@mui/material");
+
+// src/assets/close.svg
+var close_default = "./close-4XJDSDVO.svg";
+
+// src/components/Select/SelectPro.tsx
+var SelectPro = ({
+  children,
+  placeholder,
+  childTitle,
+  colorBorder = false,
+  clickComponent,
+  fullContainerWidth = false,
+  overButton = false,
+  small = false
+}) => {
+  const [btn, setAnchorEl] = (0, import_react2.useState)(null);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const handleClick = (event) => {
+    if (open)
+      setTimeout(() => {
+        setAnchorEl(null);
+      }, 200);
+    else setAnchorEl(event.currentTarget);
+    setOpen(!open);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setTimeout(() => {
+      setAnchorEl(null);
+    }, 200);
+  };
+  const childrenWithHandleChange = (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(children, {
+    collapseParent: handleClose
+  }) : children;
+  return /* @__PURE__ */ React.createElement(import_material4.ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ React.createElement(import_material4.Box, null, clickComponent ? (0, import_react2.cloneElement)(clickComponent, {
+    ref: btn,
+    onClick: handleClick
+  }) : /* @__PURE__ */ React.createElement(
+    import_material4.Button,
+    {
+      ref: btn,
+      "aria-controls": open ? "basic-menu" : void 0,
+      "aria-haspopup": "true",
+      "aria-expanded": open ? "true" : void 0,
+      onClick: handleClick,
+      disableRipple: true,
+      fullWidth: true,
+      sx: {
+        height: small ? "34px" : "49px",
+        padding: small ? "0 10px 0 6px" : "0 20px 0 19px"
+      },
+      className: `border rounded-none border-solid normal-case text-accent-dark hover:bg-white ${open ? "!border-transparent bg-white" : ""} ${colorBorder ? "border-accent-beige flex-row-reverse justify-end gap-x-2" : "justify-between border-accent-dark"}`
+    },
+    /* @__PURE__ */ React.createElement(
+      import_material4.Typography,
+      {
+        className: "text-sm leading-4"
+      },
+      `${placeholder}`
+    ),
+    colorBorder ? /* @__PURE__ */ React.createElement(search_default, null) : /* @__PURE__ */ React.createElement(
+      dropdown_arrow_default,
+      {
+        style: {
+          transform: open ? "scaleY(-1)" : "scaleY(1)",
+          transition: "0.3s ease-in-out"
+        }
+      }
+    )
+  ), btn ? /* @__PURE__ */ React.createElement(
+    import_material4.Paper,
+    {
+      sx: {
+        position: "absolute",
+        width: !fullContainerWidth && btn ? btn.offsetWidth : "100%",
+        left: fullContainerWidth ? 0 : "initial",
+        right: fullContainerWidth ? 0 : "initial",
+        top: overButton ? 0 : "initial"
+      },
+      className: `menu ${open ? "menu--open" : "menu--close"} z-50 rounded-none  shadow-sm`
+    },
+    /* @__PURE__ */ React.createElement(import_material4.Box, { className: `flex flex-col p-3 gap-3` }, overButton ? /* @__PURE__ */ React.createElement(
+      IconButton_default,
+      {
+        className: "bg-accent-silver p-1 self-end absolute",
+        onClick: handleClose
+      },
+      /* @__PURE__ */ React.createElement(close_default, null)
+    ) : null, childTitle ? /* @__PURE__ */ React.createElement(
+      import_material4.Typography,
+      {
+        className: "text-sm font-normal text-accent-silver-2"
+      },
+      childTitle
+    ) : null, childrenWithHandleChange)
+  ) : null));
+};
+var SelectPro_default = SelectPro;
+
+// src/components/Chip/Chip.tsx
+var import_material5 = require("@mui/material");
+var StyledChip = (0, import_material5.styled)(import_material5.Chip)(({ theme: theme2 }) => ({
+  borderRadius: theme2.shape.borderRadius
+}));
+var ChipViews = {
+  black: "bg-accent-dark text-accent-white py-1.5 px-4",
+  line: "border border-solid border-accent-dark bg-accent-white",
+  white: "bg-accent-white text-accent-dark",
+  silver: "bg-accent-silver"
+};
+var CustomChip = (props) => {
+  const { view, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    StyledChip,
+    {
+      className: `rounded-none w-fit h-fit px-2.5 py-0 ${ChipViews[view]}`,
+      ...rest
+    }
+  );
+};
+var Chip_default = CustomChip;
+
+// src/components/Badge/Badge.tsx
+var import_material6 = require("@mui/material");
+var CustomBadge = (props) => {
+  return /* @__PURE__ */ React.createElement(import_material6.Badge, { ...props });
+};
+var Badge_default = CustomBadge;
+
+// src/components/Avatar/Avatar.tsx
+var import_Avatar = __toESM(require("@mui/material/Avatar"));
+var CustomAvatar = (props) => {
+  return /* @__PURE__ */ React.createElement(import_Avatar.default, { ...props });
+};
+var Avatar_default = CustomAvatar;
+
+// src/components/Text/Text.tsx
+var import_Typography2 = __toESM(require("@mui/material/Typography"));
+var Text = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(import_Typography2.default, { ...rest }, children);
+};
+var Text_default = Text;
+
+// src/components/Radio/Radio.tsx
+var import_react3 = __toESM(require("react"));
+var import_Radio = __toESM(require("@mui/material/Radio"));
+var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
+var CustomRadio = (props) => {
+  const { value, label, radioProps, labelProps } = props;
+  if (label && value)
+    return /* @__PURE__ */ import_react3.default.createElement(
+      import_FormControlLabel.default,
+      {
+        value,
+        control: /* @__PURE__ */ import_react3.default.createElement(import_Radio.default, { ...radioProps }),
+        label,
+        ...labelProps
+      }
+    );
+  return /* @__PURE__ */ import_react3.default.createElement(import_Radio.default, { ...radioProps });
+};
+var Radio_default = CustomRadio;
+
+// src/components/RadioGroup/RadioGroup.tsx
+var import_react4 = __toESM(require("react"));
+var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"));
+var CustomRadioGroup = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(import_RadioGroup.default, { ...rest }, children);
+};
+var RadioGroup_default = CustomRadioGroup;
+
+// src/components/Switch/Switch.tsx
+var import_material7 = require("@mui/material");
+var import_Typography3 = __toESM(require("@mui/material/Typography"));
+var Switch = (0, import_material7.styled)(import_material7.Switch)(({ theme: theme2 }) => ({
+  width: 60,
+  height: 30,
+  padding: 0,
+  display: "flex",
+  "&:active": {
+    "& .MuiSwitch-thumb": {
+      width: 20
+    },
+    "& .MuiSwitch-switchBase.Mui-checked": {
+      transform: "translateX(12px)"
+    }
+  },
+  "& .MuiSwitch-switchBase": {
+    padding: 5.1,
+    color: "#C8BCA1",
+    transform: "translateX(2px)",
+    "&.Mui-checked": {
+      transform: "translateX(30px)",
+      color: "#C8BCA1",
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: "#343434"
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    width: 20,
+    height: 20,
+    borderRadius: "100%",
+    transition: theme2.transitions.create(["width"], {
+      duration: 200
+    })
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: "22px",
+    opacity: 1,
+    backgroundColor: "#343434",
+    boxSizing: "border-box"
+  }
+}));
+var CustomSwitch = (props) => {
+  const { beforeText, afterText, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(import_material7.Stack, { direction: "row", spacing: 1, alignItems: "center" }, beforeText ? /* @__PURE__ */ React.createElement(import_Typography3.default, { className: "text-base" }, beforeText) : null, /* @__PURE__ */ React.createElement(Switch, { defaultChecked: true, ...rest, disableRipple: true }), afterText ? /* @__PURE__ */ React.createElement(import_Typography3.default, { className: "text-base" }, afterText) : null);
+};
+var Switch_default = CustomSwitch;
+
+// src/components/Slider/Slider.tsx
+var import_material8 = require("@mui/material");
+var StyledSlider = (0, import_material8.styled)(import_material8.Slider)(() => ({}));
+var CustomSlider = (props) => {
+  return /* @__PURE__ */ React.createElement(StyledSlider, { ...props });
+};
+var Slider_default = CustomSlider;
+
+// src/components/MenuItem/MenuItem.tsx
+var import_material9 = require("@mui/material");
+var StyledMenuItem = (0, import_material9.styled)(import_material9.MenuItem)(() => ({
+  borderRadius: "5px",
+  "&.Mui-selected": {
+    backgroundColor: "unset",
+    color: "purple"
+  }
+}));
+var CustomMenuItem = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(StyledMenuItem, { ...rest }, children);
+};
+var MenuItem_default = CustomMenuItem;
+
+// src/components/Input/Input.tsx
+var import_material10 = require("@mui/material");
+var import_Input = __toESM(require("@mui/material/Input"));
+var StyledInput = (0, import_material10.styled)(import_Input.default)(() => ({
+  "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
+    display: "none"
+  },
+  "& input[type=number]": {
+    MozAppearance: "textfield"
+  }
+}));
+var CustomInput = (props) => {
+  const { type, adornmentText, value, ...rest } = props;
+  const handleKeyDown = (event) => {
+    if (!/[0-9]/.test(event.key) && event.key !== "Backspace") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    StyledInput,
+    {
+      disableUnderline: true,
+      onKeyDown: handleKeyDown,
+      startAdornment: adornmentText ? /* @__PURE__ */ React.createElement(import_material10.InputAdornment, { position: "start", className: "text-sm" }, adornmentText) : void 0,
+      value,
+      componentsProps: {
+        root: {
+          className: "border border-black rounded-none border-solid py-1.5 px-2.5 h-8"
+        }
+      },
+      type: type || "string",
+      ...rest
+    }
+  );
+};
+var Input_default = CustomInput;
+
+// src/components/Input/PhoneInput.tsx
+var import_react_number_format = require("react-number-format");
+var import_react5 = require("react");
+var PhoneInput = (0, import_react5.forwardRef)(
+  function NumericFormatCustom(props, ref) {
+    const { onChange, ...other } = props;
+    return /* @__PURE__ */ React.createElement(
+      import_react_number_format.PatternFormat,
+      {
+        ...other,
+        getInputRef: ref,
+        customInput: Input_default,
+        onValueChange: (values) => {
+          onChange({
+            target: {
+              name: props.name,
+              value: values.value
+            }
+          });
+        },
+        placeholder: "000 000 00 00",
+        format: "### ### ## ##"
+      }
+    );
+  }
+);
+var PhoneInput_default = PhoneInput;
+
+// src/components/Input/FromToInput.tsx
+var import_material11 = require("@mui/material");
+var import_Typography4 = __toESM(require("@mui/material/Typography"));
+var FromToInput = ({ label }) => {
+  return /* @__PURE__ */ React.createElement(import_material11.Stack, null, label ? /* @__PURE__ */ React.createElement(import_Typography4.default, { className: "text-accent-dark text-xs" }, label) : null, /* @__PURE__ */ React.createElement(import_material11.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Input_default, { adornmentText: "\u0432\u0456\u0434", fullWidth: true, type: "number" }), /* @__PURE__ */ React.createElement(Input_default, { adornmentText: "\u0434\u043E", fullWidth: true, type: "number" })));
+};
+var FromToInput_default = FromToInput;
+
+// src/theme/index.tsx
+var import_react6 = require("react");
+var import_cache = __toESM(require("@emotion/cache"));
+var import_navigation = require("next/navigation");
+var import_react7 = require("@emotion/react");
+var import_styles3 = require("@mui/material/styles");
+var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
+var import_stylis = require("stylis");
+var theme = (0, import_styles3.createTheme)({});
+function ThemeRegistry(props) {
+  const { children } = props;
+  const [{ cache, flush }] = (0, import_react6.useState)(() => {
+    const cache2 = (0, import_cache.default)({
+      key: "mui",
+      stylisPlugins: [import_stylis.prefixer]
+    });
+    cache2.compat = true;
+    const prevInsert = cache2.insert;
+    let inserted = [];
+    cache2.insert = (...args) => {
+      const serialized = args[1];
+      if (cache2.inserted[serialized.name] === void 0) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush2 = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache: cache2, flush: flush2 };
+  });
+  (0, import_navigation.useServerInsertedHTML)(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return /* @__PURE__ */ React.createElement(
+      "style",
+      {
+        key: cache.key,
+        "data-emotion": `${cache.key} ${names.join(" ")}`,
+        dangerouslySetInnerHTML: {
+          __html: styles
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ React.createElement(import_react7.CacheProvider, { value: cache }, /* @__PURE__ */ React.createElement(import_styles3.ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(import_CssBaseline.default, null), children));
+}
+
+// src/providers/Providers.tsx
+var Providers = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(ThemeRegistry, null, children);
+};
+var Providers_default = Providers;
+
+// src/components/AppBar/AppBar.tsx
+var import_react8 = require("react");
+var import_material12 = require("@mui/material");
+var import_link = __toESM(require("next/link"));
+var AppBar = ({ links }) => {
+  const [activeIndex, setActiveIndex] = (0, import_react8.useState)(0);
+  const navItemsRef = (0, import_react8.useRef)([]);
+  (0, import_react8.useEffect)(() => {
+    const indicator = document.querySelector(".nav-indicator");
+    const navItem = navItemsRef.current[activeIndex];
+    const navItemWidth = navItem.offsetWidth;
+    const navItemLeft = navItem.offsetLeft + navItemWidth / 2 - indicator.offsetWidth / 2;
+    const navItemTop = navItem.offsetTop - 5;
+    indicator?.setAttribute(
+      "style",
+      `transform: translate(${navItemLeft}px, ${navItemTop}px);`
+    );
+  }, [activeIndex]);
+  const handleClick = (index) => {
+    setActiveIndex(index);
+  };
+  return /* @__PURE__ */ React.createElement(import_material12.Stack, { direction: "row", spacing: 1, position: "relative" }, /* @__PURE__ */ React.createElement(import_material12.Box, { className: "nav-indicator" }), links.map((link, index) => /* @__PURE__ */ React.createElement(
+    import_link.default,
+    {
+      ref: (el) => {
+        navItemsRef.current[index] = el;
+      },
+      key: index,
+      href: link.href,
+      className: `nav-item ${index === activeIndex ? "active" : ""}`,
+      onClick: () => handleClick(index)
+    },
+    link.title
+  )));
+};
+var AppBar_default = AppBar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppBar,
+  Avatar,
+  Badge,
+  Button,
+  Chip,
+  FromToInput,
+  Greet,
+  IconButton,
+  Input,
+  MenuItem,
+  PhoneInput,
+  Providers,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectPro,
+  Slider,
+  Switch,
+  Text
+});