athameui 0.0.8 → 0.0.9-c

package/dist/athameui.mjs

@@ -2362,6 +2362,20 @@ const Avatar = ({
   });
 };
 
+const Block = ({
+  children,
+  className,
+  sx
+}) => {
+  const blockClasses = cx("ath-block", className?.block);
+  return jsx("div", {
+    className: blockClasses,
+    "data-testid": "block",
+    css: sx?.block,
+    children: children
+  });
+};
+
 const defaultAttributes = {
     xmlns: 'http://www.w3.org/2000/svg',
     width: 24,
@@ -2536,6 +2550,35 @@ const ButtonGroup = ({
   });
 };
 
+const Dropdown = ({
+  children,
+  className,
+  isOpen,
+  sx,
+  onClose
+}) => {
+  const dropdownRef = useRef(null);
+  const dropdownClasses = cx("ath-dropdown", isOpen && "ath-dropdown-open", className?.dropdown);
+  useEffect(() => {
+    const handleOutsideClick = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [onClose]);
+  return jsxs("div", {
+    ref: dropdownRef,
+    className: dropdownClasses,
+    css: sx?.dropdown,
+    "data-testid": "dropdown",
+    children: ["fdpdsugfpoidsuy", children]
+  });
+};
+
 const FormLabel = ({
   label,
   required,
@@ -2747,11 +2790,16 @@ const Main = ({
   className,
   sx
 }) => {
-  const classes = cx("ath-main", typeof className === "object" && className !== null ? className.main : className);
+  const mainClasses = cx("ath-main", typeof className === "object" && className !== null ? className.main : "");
+  const mainContentClasses = cx("ath-main-content", typeof className === "object" && className !== null ? className.mainContent : "");
   return jsx("main", {
-    css: sx,
-    className: classes,
-    children: children
+    css: sx?.main,
+    className: mainClasses,
+    children: jsx("div", {
+      css: sx?.mainContent,
+      className: mainContentClasses,
+      children: children
+    })
   });
 };
 
@@ -3023,15 +3071,59 @@ const Search = ({
   });
 };
 
+const SlideOut = ({
+  children,
+  className,
+  from = "right",
+  isOpen = false,
+  sx,
+  onClose
+}) => {
+  const slideOutClasses = cx("ath-slide-out", className?.slideOut);
+  const overlayClasses = cx("ath-slide-out-overlay", isOpen && "ath-slide-out-overlay-open", className?.overlay);
+  const panelClasses = cx("ath-slide-out-panel", from === "left" ? "ath-slide-out-from-left" : "ath-slide-out-from-right", isOpen && "ath-slide-out-panel-open", className?.panel);
+  const closeButtonClasses = cx("ath-slide-out-close-button", className?.closeButton);
+  return jsxs("div", {
+    className: slideOutClasses,
+    css: sx?.slideOut,
+    "data-testid": "slide-out",
+    children: [jsx("div", {
+      className: overlayClasses,
+      css: sx?.overlay,
+      onClick: onClose
+    }), jsxs("div", {
+      className: panelClasses,
+      css: sx?.panel,
+      children: [jsx(Button, {
+        className: {
+          button: closeButtonClasses
+        },
+        sx: {
+          button: sx?.closeButton
+        },
+        onClick: onClose,
+        "aria-label": "Close menu",
+        variant: "ghost",
+        dark: true,
+        size: "medium",
+        icon: jsx(HugeiconsIcon, {
+          icon: uL,
+          size: 24
+        })
+      }), children]
+    })]
+  });
+};
+
 const breakpoints = {
-  xs: "360px",
-  sm: "480px",
-  md: "640px",
-  lg: "768px",
-  xl: "896px",
-  "2xl": "1024px",
-  "3xl": "1280px",
-  "4xl": "1536px"
+  xs: 320,
+  sm: 480,
+  md: 620,
+  lg: 768,
+  xl: 896,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1536
 };
 
 const tokens = {
@@ -3041,15 +3133,15 @@ const tokens = {
       serif: "Libre Baskerville, serif"
     },
     size: {
-      xs: "0.625rem",
-      sm: "0.75rem",
-      md: "0.875rem",
-      lg: "1rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "2rem",
-      "4xl": "2.5rem",
-      "5xl": "3rem"
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.25rem",
+      xl: "1.5rem",
+      "2xl": "2rem",
+      "3xl": "2.5rem",
+      "4xl": "3rem",
+      "5xl": "3.5rem"
     }
   },
   color: {
@@ -3182,27 +3274,18 @@ const tokens = {
     md: "5px",
     lg: "8px"
   },
-  screen: {
-    xs: "360px",
-    sm: "480px",
-    md: "768px",
-    lg: "896px",
-    xl: "1024px",
-    "2xl": "1280px",
-    "3xl": "1536px"
-  },
   media: {
     min: {
-      xs: "@media (min-width: 360px)",
+      xs: "@media (min-width: 320px)",
       sm: "@media (min-width: 480px)",
-      md: "@media (min-width: 768px)",
-      lg: "@media (min-width: 896px)",
-      xl: "@media (min-width: 1024px)",
-      "2xl": "@media (min-width: 1280px)",
-      "3xl": "@media (min-width: 1536px)"
+      md: "@media (min-width: 620px)",
+      lg: "@media (min-width: 768px)",
+      xl: "@media (min-width: 896px)",
+      "2xl": "@media (min-width: 1024px)",
+      "3xl": "@media (min-width: 1280px)"
     },
     max: {
-      xs: "@media (max-width: 359px)",
+      xs: "@media (max-width: 319px)",
       sm: "@media (max-width: 479px)",
       md: "@media (max-width: 767px)",
       lg: "@media (max-width: 895px)",
@@ -3213,5 +3296,5 @@ const tokens = {
   }
 };
 
-export { Accordion, AccordionItem, Avatar, Button, ButtonGroup, ContainerScalingText, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, breakpoints, cx, tokens };
+export { Accordion, AccordionItem, Avatar, Block, Button, ButtonGroup, ContainerScalingText, Dropdown, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, SlideOut, breakpoints, cx, tokens };
 //# sourceMappingURL=athameui.mjs.map