athameui 0.0.8 → 0.0.10

package/dist/athameui.cjs

@@ -2199,6 +2199,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
   onClick,
   onFocus,
   onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
   ...other
 }, ref) => {
   const isIconOnly = icon && !children;
@@ -2216,6 +2218,12 @@ const Button = /*#__PURE__*/React.forwardRef(({
   const onBlurHandler = e => {
     onBlur?.(e);
   };
+  const onMouseEnterHandler = e => {
+    onMouseEnter?.(e);
+  };
+  const onMouseLeaveHandler = e => {
+    onMouseLeave?.(e);
+  };
   return jsx("button", {
     ref: ref,
     className: buttonClasses,
@@ -2227,6 +2235,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
     onKeyDown: onKeyDownHandler,
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
     ...other,
     children: icon ? jsxs(Fragment, {
       children: [icon, !isIconOnly && children]
@@ -2367,7 +2377,6 @@ const Avatar = ({
   sx,
   size = "medium"
 }) => {
-  console.log(className?.avatar);
   const initials = displayName.split(" ").map(n => n[0].toUpperCase());
   const avatarClasses = cx("ath-avatar", `ath-avatar-${size}`, className?.avatar);
   const initialsClasses = cx(`ath-avatar-initials`, className?.initials);
@@ -2383,6 +2392,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,
@@ -2439,7 +2462,7 @@ const HugeiconsIcon = React.forwardRef(({ color = 'currentColor', size = 24, str
 });
 HugeiconsIcon.displayName = 'HugeiconsIcon';
 
-const uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]];
+const Qt=[["path",{d:"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],un=[["path",{d:"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]];
 
 const ScrollToTopButton = ({
   className,
@@ -2557,6 +2580,100 @@ const ButtonGroup = ({
   });
 };
 
+const Carousel = ({
+  children,
+  className,
+  emptyMessage,
+  sx
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const carouselRef = React.useRef(null);
+  const carouselClasses = cx("ath-carousel", isHovered ? "ath-carousel-hover" : "", className?.carousel);
+  const hasItems = React.Children.count(children) > 0;
+  const scrollByPage = direction => {
+    const el = carouselRef.current;
+    if (!el) return;
+    el.scrollBy({
+      left: direction * el.clientWidth,
+      behavior: "smooth"
+    });
+  };
+  const handleLeftArrowClick = () => {
+    scrollByPage(-1);
+  };
+  const handleRightArrowClick = () => {
+    scrollByPage(1);
+  };
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return jsx("div", {
+    className: "ath-carousel-wrapper",
+    children: jsxs("div", {
+      className: carouselClasses,
+      css: sx?.carousel,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: carouselRef,
+      children: [jsx(Button, {
+        className: {
+          button: "ath-carousel-arrow ath-carousel-left-arrow"
+        },
+        onClick: handleLeftArrowClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        icon: jsx(HugeiconsIcon, {
+          icon: Qt,
+          size: 36
+        })
+      }), hasItems ? children : emptyMessage, jsx(Button, {
+        className: {
+          button: "ath-carousel-arrow ath-carousel-right-arrow"
+        },
+        onClick: handleRightArrowClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        icon: jsx(HugeiconsIcon, {
+          icon: un,
+          size: 36
+        })
+      })]
+    })
+  });
+};
+
+const Dropdown = ({
+  children,
+  className,
+  isOpen,
+  sx,
+  onClose
+}) => {
+  const dropdownRef = React.useRef(null);
+  const dropdownClasses = cx("ath-dropdown", isOpen && "ath-dropdown-open", className?.dropdown);
+  React.useEffect(() => {
+    const handleOutsideClick = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [onClose]);
+  return jsx("div", {
+    ref: dropdownRef,
+    className: dropdownClasses,
+    css: sx?.dropdown,
+    "data-testid": "dropdown",
+    children: children
+  });
+};
+
 const FormLabel = ({
   label,
   required,
@@ -2768,11 +2885,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
+    })
   });
 };
 
@@ -3044,15 +3166,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 = {
@@ -3062,15 +3228,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: {
@@ -3203,27 +3369,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)",
@@ -3237,9 +3394,12 @@ const tokens = {
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.Avatar = Avatar;
+exports.Block = Block;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.Carousel = Carousel;
 exports.ContainerScalingText = ContainerScalingText;
+exports.Dropdown = Dropdown;
 exports.Footer = Footer;
 exports.FormField = FormField;
 exports.FormLabel = FormLabel;
@@ -3251,6 +3411,7 @@ exports.Main = Main;
 exports.Modal = Modal;
 exports.ScrollToTopButton = ScrollToTopButton;
 exports.Search = Search;
+exports.SlideOut = SlideOut;
 exports.breakpoints = breakpoints;
 exports.cx = cx;
 exports.tokens = tokens;