athameui 0.0.9-c → 0.0.10

package/components/Avatar/Avatar.tsx

@@ -24,7 +24,6 @@ export const Avatar = ({
   sx,
   size = "medium",
 }: AvatarProps) => {
-  console.log(className?.avatar);
   const initials = displayName.split(" ").map((n) => n[0].toUpperCase());
   const avatarClasses = cx(
     "ath-avatar",

package/components/Button/Button.tsx

@@ -34,6 +34,8 @@ export type ButtonProps = {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
+  onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -55,6 +57,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       onFocus,
       onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
       ...other
     },
     ref,
@@ -93,6 +97,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onBlur?.(e);
     };
 
+    const onMouseEnterHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+      onMouseEnter?.(e);
+    };
+
+    const onMouseLeaveHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+      onMouseLeave?.(e);
+    };
+
     return (
       <button
         ref={ref}
@@ -105,6 +117,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onKeyDown={onKeyDownHandler}
         onFocus={onFocusHandler}
         onBlur={onBlurHandler}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
         {...other}
       >
         {icon ? (

package/components/Carousel/Carousel.tsx

@@ -0,0 +1,84 @@
+import { Children, useState, useRef, type ReactNode } from "react";
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+import { Button } from "../Button/Button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@hugeicons/core-free-icons";
+
+export type CarouselProps = {
+  children?: ReactNode;
+  className?: {
+    carousel?: string | false | null | undefined;
+  };
+  emptyMessage?: string;
+  sx?: {
+    carousel?: CSSObject;
+  };
+};
+
+export const Carousel = ({
+  children,
+  className,
+  emptyMessage,
+  sx,
+}: CarouselProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const carouselClasses = cx(
+    "ath-carousel",
+    isHovered ? "ath-carousel-hover" : "",
+    className?.carousel,
+  );
+  const hasItems = Children.count(children) > 0;
+
+  const scrollByPage = (direction: -1 | 1) => {
+    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 (
+    <div className="ath-carousel-wrapper">
+      <div
+        className={carouselClasses}
+        css={sx?.carousel}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        ref={carouselRef}
+      >
+        <Button
+          className={{ button: "ath-carousel-arrow ath-carousel-left-arrow" }}
+          onClick={handleLeftArrowClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
+        />
+        {hasItems ? children : emptyMessage}
+        <Button
+          className={{ button: "ath-carousel-arrow ath-carousel-right-arrow" }}
+          onClick={handleRightArrowClick}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          icon={<HugeiconsIcon icon={ArrowRightIcon} size={36} />}
+        />
+      </div>
+    </div>
+  );
+};

package/components/Carousel/index.ts

@@ -0,0 +1 @@
+export * from "./Carousel";

package/components/DropDown/Dropdown.tsx

@@ -54,7 +54,6 @@ export const Dropdown = ({
       css={sx?.dropdown}
       data-testid="dropdown"
     >
-      fdpdsugfpoidsuy
       {children}
     </div>
   );

package/components/index.ts

@@ -3,6 +3,7 @@ export * from "./Avatar";
 export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./Carousel";
 export * from "./DropDown";
 export * from "./ContainerScalingText";
 export * from "./FormField";

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);
@@ -2453,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,
@@ -2571,6 +2580,71 @@ 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,
@@ -2591,12 +2665,12 @@ const Dropdown = ({
       document.removeEventListener("mousedown", handleOutsideClick);
     };
   }, [onClose]);
-  return jsxs("div", {
+  return jsx("div", {
     ref: dropdownRef,
     className: dropdownClasses,
     css: sx?.dropdown,
     "data-testid": "dropdown",
-    children: ["fdpdsugfpoidsuy", children]
+    children: children
   });
 };
 
@@ -3323,6 +3397,7 @@ exports.Avatar = Avatar;
 exports.Block = Block;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.Carousel = Carousel;
 exports.ContainerScalingText = ContainerScalingText;
 exports.Dropdown = Dropdown;
 exports.Footer = Footer;