athameui 0.0.8 → 0.0.10

package/dist/athameui.mjs

@@ -1,7 +1,7 @@
 "use client";
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useContext, useRef, useState, createElement, useEffect, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, createElement, useEffect, Children, useLayoutEffect } from 'react';
 
 /*
 
@@ -2178,6 +2178,8 @@ const Button = /*#__PURE__*/forwardRef(({
   onClick,
   onFocus,
   onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
   ...other
 }, ref) => {
   const isIconOnly = icon && !children;
@@ -2195,6 +2197,12 @@ const Button = /*#__PURE__*/forwardRef(({
   const onBlurHandler = e => {
     onBlur?.(e);
   };
+  const onMouseEnterHandler = e => {
+    onMouseEnter?.(e);
+  };
+  const onMouseLeaveHandler = e => {
+    onMouseLeave?.(e);
+  };
   return jsx("button", {
     ref: ref,
     className: buttonClasses,
@@ -2206,6 +2214,8 @@ const Button = /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDownHandler,
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
     ...other,
     children: icon ? jsxs(Fragment, {
       children: [icon, !isIconOnly && children]
@@ -2346,7 +2356,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);
@@ -2362,6 +2371,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,
@@ -2418,7 +2441,7 @@ const HugeiconsIcon = forwardRef(({ color = 'currentColor', size = 24, strokeWid
 });
 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,
@@ -2536,6 +2559,100 @@ const ButtonGroup = ({
   });
 };
 
+const Carousel = ({
+  children,
+  className,
+  emptyMessage,
+  sx
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const carouselRef = useRef(null);
+  const carouselClasses = cx("ath-carousel", isHovered ? "ath-carousel-hover" : "", className?.carousel);
+  const hasItems = 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 = 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 jsx("div", {
+    ref: dropdownRef,
+    className: dropdownClasses,
+    css: sx?.dropdown,
+    "data-testid": "dropdown",
+    children: children
+  });
+};
+
 const FormLabel = ({
   label,
   required,
@@ -2747,11 +2864,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 +3145,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 +3207,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 +3348,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 +3370,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, Carousel, ContainerScalingText, Dropdown, Footer, FormField, FormLabel, FormTextInput, Header, List, ListItem, Main, Modal, ScrollToTopButton, Search, SlideOut, breakpoints, cx, tokens };
 //# sourceMappingURL=athameui.mjs.map