@nithish_atum/atum 1.0.3 → 1.0.5

package/dist/index.js

@@ -33,23 +33,34 @@ __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,
+  NotificationProvider: () => NotificationProvider,
   Paragraph: () => Paragraph_default,
   Radio: () => Radio_default,
+  Row: () => Row_default,
   Select: () => Select_default,
+  Stack: () => Stack_default,
   Switch: () => Switch_default,
   Text: () => Text_default,
-  Textarea: () => Textarea_default
+  Textarea: () => Textarea_default,
+  toast: () => toast,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1283,27 +1294,627 @@ 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;
+
+// src/components/Notification/NotificationProvider.tsx
+var import_react6 = require("react");
+var import_react_dom5 = require("react-dom");
+var import_styled_components29 = __toESM(require("styled-components"));
+
+// src/components/Notification/toast.ts
+var notifyRef = null;
+var registerToast = (fn) => {
+  notifyRef = fn;
+};
+var toast = {
+  success(message, duration) {
+    notifyRef?.({ type: "success", message, duration });
+  },
+  error(message, duration) {
+    notifyRef?.({ type: "error", message, duration });
+  },
+  info(message, duration) {
+    notifyRef?.({ type: "info", message, duration });
+  },
+  warning(message, duration) {
+    notifyRef?.({ type: "warning", message, duration });
+  }
+};
+
+// src/components/Notification/NotificationProvider.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var NotificationContext = (0, import_react6.createContext)(null);
+var useNotification = () => {
+  const ctx = (0, import_react6.useContext)(NotificationContext);
+  if (!ctx) {
+    throw new Error("useNotification must be used inside NotificationProvider");
+  }
+  return ctx;
+};
+var Container2 = import_styled_components29.default.div`
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  z-index: 2000;
+`;
+var Item2 = import_styled_components29.default.div`
+  min-width: 280px;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  border-left: 4px solid
+    ${({ $type }) => ({
+  success: "#2e7d32",
+  error: "#d32f2f",
+  info: "#0288d1",
+  warning: "#ed6c02"
+})[$type]};
+`;
+var Title = import_styled_components29.default.div`
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+`;
+var Message = import_styled_components29.default.div`
+  font-size: 0.875rem;
+  line-height: 1.4;
+`;
+var NotificationProvider = ({ children }) => {
+  const [items, setItems] = (0, import_react6.useState)([]);
+  const notify = (notice) => {
+    const id = crypto.randomUUID();
+    const item = { ...notice, id };
+    setItems((prev) => [...prev, item]);
+    if (notice.duration !== 0) {
+      setTimeout(() => {
+        setItems((prev) => prev.filter((n) => n.id !== id));
+      }, notice.duration ?? 3e3);
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    registerToast(notify);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(NotificationContext.Provider, { value: { notify }, children: [
+    children,
+    (0, import_react_dom5.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Container2, { children: items.map((n) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Item2, { $type: n.type, children: [
+        n.title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Title, { children: n.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Message, { children: n.message })
+      ] }, n.id)) }),
+      document.body
+    )
+  ] });
+};
+
+// src/components/Notification/useToast.ts
+var useToast = () => {
+  const { notify } = useNotification();
+  return {
+    success: (message, duration) => notify({ type: "success", message, duration }),
+    error: (message, duration) => notify({ type: "error", message, duration }),
+    info: (message, duration) => notify({ type: "info", message, duration }),
+    warning: (message, duration) => notify({ type: "warning", message, duration })
+  };
+};
 // 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,
+  NotificationProvider,
   Paragraph,
   Radio,
+  Row,
   Select,
+  Stack,
   Switch,
   Text,
-  Textarea
+  Textarea,
+  toast,
+  useToast
 });
 //# sourceMappingURL=index.js.map