@nithish_atum/atum 1.0.3 → 1.0.4

package/dist/index.js

@@ -33,20 +33,28 @@ __export(index_exports, {
   Box: () => Box_default,
   Button: () => Button_default,
   Card: () => Card_default,
+  Center: () => Center_default,
+  CenterMenu: () => CenterMenu_default,
   Checkbox: () => Checkbox_default,
+  Col: () => Col_default,
+  Container: () => Container_default,
   DatePicker: () => DatePicker_default,
   Divider: () => Divider_default,
   Drawer: () => Drawer_default,
   Flex: () => Flex_default,
   Form: () => Form_default,
   FormControl: () => FormControl_default,
+  Grid: () => Grid_default,
   Heading: () => Heading_default,
+  HorizantalMenu: () => HorizantalMenu_default,
   Input: () => Input_default,
   Link: () => Link_default,
   Modal: () => Modal_default,
   Paragraph: () => Paragraph_default,
   Radio: () => Radio_default,
+  Row: () => Row_default,
   Select: () => Select_default,
+  Stack: () => Stack_default,
   Switch: () => Switch_default,
   Text: () => Text_default,
   Textarea: () => Textarea_default
@@ -1283,25 +1291,518 @@ var Textarea = ({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTextarea, { $size: size, $state: state, ...rest });
 };
 var Textarea_default = Textarea;
+
+// src/components/Menus/CenterMenu.tsx
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var baseStyle9 = import_styled_components21.css`
+  padding: 0.2em 0em 0.2em 0em;
+  cursor: pointer;
+  font-weight: 600;
+  transistion: all 900ms;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: 3%;
+  background-color: rgb(71, 91, 248);
+`;
+var StyledMenu = import_styled_components21.default.div`
+  ${baseStyle9}
+`;
+var CenterMenu = ({
+  menuItems = ["SampleMenu_1", "SampleMenu_2", "SampleMenu_3"],
+  logo,
+  alt = "logo",
+  href = "#",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(StyledMenu, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "img",
+      {
+        src: logo,
+        alt,
+        width: "48px",
+        height: "48px",
+        style: {
+          mixBlendMode: "multiply",
+          objectFit: "contain"
+        }
+      }
+    ) }),
+    menuItems.map((x, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: x }, i);
+    })
+  ] });
+};
+var CenterMenu_default = CenterMenu;
+
+// src/components/Layouts/Row.tsx
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var baseStyle10 = import_styled_components22.css`
+  display: flex;
+  flex-direction: row;
+`;
+var justifyStyles3 = {
+  center: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: center;
+  `,
+  start: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: start;
+  `,
+  end: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: end;
+  `,
+  FStart: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: flex-start;
+  `,
+  FEnd: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: flex-end;
+  `,
+  left: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: left;
+  `,
+  right: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: right;
+  `,
+  between: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-between;
+  `,
+  around: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-around;
+  `,
+  even: import_styled_components22.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-evenly;
+  `
+};
+var gapStyles4 = {
+  xs: import_styled_components22.css`
+    gap: 1em;
+  `,
+  sm: import_styled_components22.css`
+    gap: 3em;
+  `,
+  md: import_styled_components22.css`
+    gap: 5em;
+  `,
+  lg: import_styled_components22.css`
+    gap: 7em;
+  `
+};
+var CustomDiv3 = import_styled_components22.default.div`
+  ${baseStyle10}
+  ${({ $justify, $gap }) => import_styled_components22.css`
+    ${justifyStyles3[$justify]}
+    ${gapStyles4[$gap]}
+  `}
+`;
+var Row = ({
+  justify = "center",
+  gap = "xs",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CustomDiv3, { $justify: justify, $gap: gap, ...rest, children });
+};
+var Row_default = Row;
+
+// src/components/Menus/HorizantalMenu.tsx
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var baseStyle11 = import_styled_components23.css`
+  padding: 1em 0em 1em 0em;
+  cursor: pointer;
+  font-weight: 600;
+  transistion: all 900ms;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  background-color:rgb(71, 91, 248);
+`;
+var StyledMenu2 = import_styled_components23.default.div`
+  ${baseStyle11}
+`;
+var HorizantalMenu = ({
+  menuItems = ["SampleMenu_1", "SampleMenu_2", "SampleMenu_3"],
+  logo,
+  alt = "logo",
+  href = "#",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledMenu2, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "img",
+      {
+        src: logo,
+        alt,
+        width: "36px",
+        height: "36px",
+        style: {
+          mixBlendMode: "multiply",
+          objectFit: "contain"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Row_default, { justify: "FEnd", children: menuItems.map((x, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: x }, i);
+    }) })
+  ] });
+};
+var HorizantalMenu_default = HorizantalMenu;
+
+// src/components/Layouts/Center.tsx
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var baseStyle12 = import_styled_components24.css`
+  display: flex;
+  height: inherit;
+  width: inherit;
+  justify-content: center;
+  align-items: center;
+`;
+var CustomDiv4 = import_styled_components24.default.div`
+  ${baseStyle12}
+`;
+var Center = ({
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CustomDiv4, { ...rest, children });
+};
+var Center_default = Center;
+
+// src/components/Layouts/Col.tsx
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var baseStyle13 = import_styled_components25.css`
+  display: flex;
+  flex-direction: column;
+`;
+var justifyStyles4 = {
+  center: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: center;
+  `,
+  start: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: start;
+  `,
+  end: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: end;
+  `,
+  FStart: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: flex-start;
+  `,
+  FEnd: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: flex-end;
+  `,
+  left: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: left;
+  `,
+  right: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: right;
+  `,
+  between: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-between;
+  `,
+  around: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-around;
+  `,
+  even: import_styled_components25.css`
+    height: inherit;
+    width: inherit;
+    justify-content: space-evenly;
+  `
+};
+var gapStyles5 = {
+  xs: import_styled_components25.css`
+    gap: 1em;
+  `,
+  sm: import_styled_components25.css`
+    gap: 3em;
+  `,
+  md: import_styled_components25.css`
+    gap: 5em;
+  `,
+  lg: import_styled_components25.css`
+    gap: 7em;
+  `
+};
+var CustomDiv5 = import_styled_components25.default.div`
+  ${baseStyle13}
+  ${({ $justify, $gap }) => import_styled_components25.css`
+    ${justifyStyles4[$justify]}
+    ${gapStyles5[$gap]}
+  `}
+`;
+var Col = ({
+  justify = "center",
+  gap = "xs",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CustomDiv5, { $justify: justify, $gap: gap, ...rest, children });
+};
+var Col_default = Col;
+
+// src/components/Layouts/Container.tsx
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var baseStyle14 = import_styled_components26.css`
+  padding: 1em;
+`;
+var sizeStyles4 = {
+  xs: import_styled_components26.css`
+    max-width: 576px;
+    width: 100%;
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  `,
+  sm: import_styled_components26.css`
+    max-width: 688px;
+    width: 100%;
+      display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  `,
+  md: import_styled_components26.css`
+    max-width: 768px;
+    width: 100%;
+      display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  `,
+  lg: import_styled_components26.css`
+    max-width: 100%;
+    width: 100%;
+    display: flex;
+    padding: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  `
+};
+var flexStyles = {
+  row: import_styled_components26.css`
+     width: inherit;
+    display: flex;
+    flex-direction: row;
+  `,
+  col: import_styled_components26.css`
+     width: inherit;
+    display: flex;
+    flex-direction: column;
+  `
+};
+var gapStyles6 = {
+  xs: import_styled_components26.css`
+    gap: 1em;
+  `,
+  sm: import_styled_components26.css`
+    gap: 3em;
+  `,
+  md: import_styled_components26.css`
+    gap: 5em;
+  `,
+  lg: import_styled_components26.css`
+    gap: 7em;
+  `
+};
+var CustomDiv6 = import_styled_components26.default.div`
+  ${baseStyle14}
+  ${({ $size, $flex, $gap }) => import_styled_components26.css`
+    ${sizeStyles4[$size]}
+    ${flexStyles[$flex]}
+    ${gapStyles6[$gap]}
+  `}
+`;
+var Container = ({
+  size = "lg",
+  flex = "row",
+  gap = "xs",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CustomDiv6, { $size: size, $flex: flex, $gap: gap, ...rest, children });
+};
+var Container_default = Container;
+
+// src/components/Layouts/Grid.tsx
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var baseStyle15 = import_styled_components27.css`
+  display: grid;
+  width: 100%;
+`;
+var gapStyles7 = {
+  xs: import_styled_components27.css`
+    gap: 0.5rem;
+  `,
+  sm: import_styled_components27.css`
+    gap: 1rem;
+  `,
+  md: import_styled_components27.css`
+    gap: 2rem;
+  `,
+  lg: import_styled_components27.css`
+    gap: 3rem;
+  `
+};
+var StyledGrid = import_styled_components27.default.div`
+  ${baseStyle15}
+
+  ${({ $columns }) => import_styled_components27.css`
+    grid-template-columns: repeat(${$columns}, minmax(0, 1fr));
+  `}
+
+  ${({ $rows }) => $rows && import_styled_components27.css`
+      grid-template-rows: repeat(${$rows}, 1fr);
+    `}
+
+  ${({ $gap }) => gapStyles7[$gap]}
+`;
+var Grid2 = ({
+  columns = 12,
+  rows,
+  gap = "sm",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    StyledGrid,
+    {
+      $columns: columns,
+      $rows: rows,
+      $gap: gap,
+      ...rest,
+      children
+    }
+  );
+};
+var Grid_default = Grid2;
+
+// src/components/Layouts/Stack.tsx
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var baseStyle16 = import_styled_components28.css`
+  display: flex;
+  width: 100%;
+`;
+var directionStyles = {
+  vertical: import_styled_components28.css`
+    flex-direction: column;
+  `,
+  horizontal: import_styled_components28.css`
+    flex-direction: row;
+  `
+};
+var gapStyles8 = {
+  xs: import_styled_components28.css`
+    gap: 0.5rem;
+  `,
+  sm: import_styled_components28.css`
+    gap: 1rem;
+  `,
+  md: import_styled_components28.css`
+    gap: 2rem;
+  `,
+  lg: import_styled_components28.css`
+    gap: 3rem;
+  `
+};
+var StyledStack = import_styled_components28.default.div`
+  ${baseStyle16}
+  ${({ $direction }) => directionStyles[$direction]}
+  ${({ $gap }) => gapStyles8[$gap]}
+`;
+var Stack = ({
+  direction = "vertical",
+  gap = "sm",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledStack, { $direction: direction, $gap: gap, ...rest, children });
+};
+var Stack_default = Stack;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
   Button,
   Card,
+  Center,
+  CenterMenu,
   Checkbox,
+  Col,
+  Container,
   DatePicker,
   Divider,
   Drawer,
   Flex,
   Form,
   FormControl,
+  Grid,
   Heading,
+  HorizantalMenu,
   Input,
   Link,
   Modal,
   Paragraph,
   Radio,
+  Row,
   Select,
+  Stack,
   Switch,
   Text,
   Textarea