athameui 0.0.9-c → 0.0.11

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

@@ -29,11 +29,14 @@ export type ButtonProps = {
   textPosition?: "left" | "center" | "right";
   type?: "button" | "submit" | "reset";
   variant?: ButtonVariant;
+  wrap?: boolean;
 
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
+  onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -50,15 +53,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       type = "button",
       textPosition = "center",
       variant = "secondary",
+      wrap = false,
 
       onBlur,
       onClick,
       onFocus,
       onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
       ...other
     },
     ref,
   ) => {
+    console.log(sx);
     const isIconOnly = icon && !children;
 
     const sharedClasses = cx(
@@ -67,6 +74,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       buttonVariants.variant[variant],
       isIconOnly ? "ath-button-icon-only" : "",
       dark ? buttonVariants.dark : "",
+      wrap ? buttonVariants.wrap : "",
     );
 
     const buttonClasses = cx(
@@ -93,6 +101,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 +121,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onKeyDown={onKeyDownHandler}
         onFocus={onFocusHandler}
         onBlur={onBlurHandler}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
         {...other}
       >
         {icon ? (

package/components/Button/button.variants.ts

@@ -21,6 +21,7 @@ export const buttonVariants = {
     ghost: "ath-button-ghost",
   },
   dark: "ath-button-dark",
+  wrap: "ath-button-wrap",
 } as const;
 
 export type ButtonSize = keyof typeof buttonVariants.size;

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

@@ -2180,7 +2180,8 @@ const buttonVariants = {
     outline: "ath-button-outline",
     ghost: "ath-button-ghost"
   },
-  dark: "ath-button-dark"
+  dark: "ath-button-dark",
+  wrap: "ath-button-wrap"
 };
 
 const Button = /*#__PURE__*/React.forwardRef(({
@@ -2195,14 +2196,18 @@ const Button = /*#__PURE__*/React.forwardRef(({
   type = "button",
   textPosition = "center",
   variant = "secondary",
+  wrap = false,
   onBlur,
   onClick,
   onFocus,
   onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
   ...other
 }, ref) => {
+  console.log(sx);
   const isIconOnly = icon && !children;
-  const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "");
+  const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "", wrap ? buttonVariants.wrap : "");
   const buttonClasses = cx(sharedClasses, buttonVariants.textPosition[textPosition], typeof className === "object" && className !== null ? className.button : className);
   const onClickHandler = e => {
     onClick?.(e);
@@ -2216,6 +2221,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 +2238,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 +2380,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 +2465,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 +2583,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 +2668,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
   });
 };
 
@@ -3146,6 +3223,24 @@ const breakpoints = {
   "3xl": 1280,
   "4xl": 1536
 };
+const minWidth = width => `@media (min-width: ${width}px)`;
+const maxWidth = width => `@media (max-width: ${width - 1}px)`;
+const minXs = minWidth(breakpoints.xs);
+const minSm = minWidth(breakpoints.sm);
+const minMd = minWidth(breakpoints.md);
+const minLg = minWidth(breakpoints.lg);
+const minXl = minWidth(breakpoints.xl);
+const min2xl = minWidth(breakpoints["2xl"]);
+const min3xl = minWidth(breakpoints["3xl"]);
+const min4xl = minWidth(breakpoints["4xl"]);
+const maxXs = maxWidth(breakpoints.xs);
+const maxSm = maxWidth(breakpoints.sm);
+const maxMd = maxWidth(breakpoints.md);
+const maxLg = maxWidth(breakpoints.lg);
+const maxXl = maxWidth(breakpoints.xl);
+const max2xl = maxWidth(breakpoints["2xl"]);
+const max3xl = maxWidth(breakpoints["3xl"]);
+const max4xl = maxWidth(breakpoints["4xl"]);
 
 const tokens = {
   font: {
@@ -3323,6 +3418,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;
@@ -3339,5 +3435,21 @@ exports.Search = Search;
 exports.SlideOut = SlideOut;
 exports.breakpoints = breakpoints;
 exports.cx = cx;
+exports.max2xl = max2xl;
+exports.max3xl = max3xl;
+exports.max4xl = max4xl;
+exports.maxLg = maxLg;
+exports.maxMd = maxMd;
+exports.maxSm = maxSm;
+exports.maxXl = maxXl;
+exports.maxXs = maxXs;
+exports.min2xl = min2xl;
+exports.min3xl = min3xl;
+exports.min4xl = min4xl;
+exports.minLg = minLg;
+exports.minMd = minMd;
+exports.minSm = minSm;
+exports.minXl = minXl;
+exports.minXs = minXs;
 exports.tokens = tokens;
 //# sourceMappingURL=athameui.cjs.map