athameui 0.0.8 → 0.0.10

package/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 
@@ -25,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/Block/Block.tsx

@@ -0,0 +1,22 @@
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+
+type BlockProps = {
+  children: React.ReactNode;
+  className?: {
+    block?: string | false | null | undefined;
+  };
+  sx?: {
+    block: CSSObject;
+  };
+};
+
+export const Block = ({ children, className, sx }: BlockProps) => {
+  const blockClasses = cx("ath-block", className?.block);
+
+  return (
+    <div className={blockClasses} data-testid="block" css={sx?.block}>
+      {children}
+    </div>
+  );
+};

package/components/Block/index.ts

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

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

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+
+export type DropdownProps = {
+  children: React.ReactNode;
+  className?: {
+    dropdown?: string | false | null | undefined;
+  };
+  isOpen: boolean;
+  sx?: {
+    dropdown?: CSSObject;
+  };
+
+  onClose: () => void;
+};
+
+export const Dropdown = ({
+  children,
+  className,
+  isOpen,
+  sx,
+
+  onClose,
+}: DropdownProps) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownClasses = cx(
+    "ath-dropdown",
+    isOpen && "ath-dropdown-open",
+    className?.dropdown,
+  );
+
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={dropdownClasses}
+      css={sx?.dropdown}
+      data-testid="dropdown"
+    >
+      {children}
+    </div>
+  );
+};

package/components/DropDown/index.ts

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

package/components/Layout/Main.tsx

@@ -4,28 +4,35 @@ import { cx } from "../../utils";
 
 type MainProps = {
   children?: React.ReactNode;
-  className?:
-    | string
-    | {
-        main?: string | false | null | undefined;
-      }
-    | false
-    | undefined
-    | null;
-  sx?: CSSObject;
+  className?: {
+    main?: string | false | null | undefined;
+    mainContent?: string | false | null | undefined;
+  };
+
+  sx?: {
+    main?: CSSObject;
+    mainContent?: CSSObject;
+  };
 };
 
 export const Main = ({ children, className, sx }: MainProps) => {
-  const classes = cx(
+  const mainClasses = cx(
     "ath-main",
+    typeof className === "object" && className !== null ? className.main : "",
+  );
+
+  const mainContentClasses = cx(
+    "ath-main-content",
     typeof className === "object" && className !== null
-      ? className.main
-      : className,
+      ? className.mainContent
+      : "",
   );
 
   return (
-    <main css={sx} className={classes}>
-      {children}
+    <main css={sx?.main} className={mainClasses}>
+      <div css={sx?.mainContent} className={mainContentClasses}>
+        {children}
+      </div>
     </main>
   );
 };

package/components/Modal/Modal.tsx

@@ -4,7 +4,7 @@ import { CSSObject } from "@emotion/react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { CancelCircleIcon } from "@hugeicons/core-free-icons";
 import { Button } from "../Button/Button";
-import { cx } from "../../main";
+import { cx } from "../../utils/cx";
 
 export type ModalProps = {
   isOpen: boolean;

package/components/SlideOut/SlideOut.tsx

@@ -0,0 +1,71 @@
+import { CSSObject } from "@emotion/react";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { CancelCircleIcon } from "@hugeicons/core-free-icons";
+import { cx } from "../../utils/cx";
+import { Button } from "../Button/Button";
+
+export type SlideOutProps = {
+  children: React.ReactNode;
+  className?: {
+    slideOut?: string | false | null | undefined;
+    overlay?: string | false | null | undefined;
+    panel?: string | false | null | undefined;
+    closeButton?: string | false | null | undefined;
+  };
+  from?: "left" | "right";
+  isOpen?: boolean;
+  sx?: {
+    slideOut?: CSSObject;
+    overlay?: CSSObject;
+    panel?: CSSObject;
+    closeButton?: CSSObject;
+  };
+
+  onClose: () => void;
+};
+
+export const SlideOut = ({
+  children,
+  className,
+  from = "right",
+  isOpen = false,
+  sx,
+
+  onClose,
+}: SlideOutProps) => {
+  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 (
+    <div className={slideOutClasses} css={sx?.slideOut} data-testid="slide-out">
+      <div className={overlayClasses} css={sx?.overlay} onClick={onClose} />
+      <div className={panelClasses} css={sx?.panel}>
+        <Button
+          className={{ button: closeButtonClasses }}
+          sx={{ button: sx?.closeButton }}
+          onClick={onClose}
+          aria-label="Close menu"
+          variant="ghost"
+          dark
+          size="medium"
+          icon={<HugeiconsIcon icon={CancelCircleIcon} size={24} />}
+        />
+        {children}
+      </div>
+    </div>
+  );
+};

package/components/SlideOut/index.ts

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

package/components/index.ts

@@ -1,7 +1,10 @@
 export * from "./Accordion";
 export * from "./Avatar";
+export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./Carousel";
+export * from "./DropDown";
 export * from "./ContainerScalingText";
 export * from "./FormField";
 export * from "./FormLabel";
@@ -11,3 +14,4 @@ export * from "./Layout";
 export * from "./List";
 export * from "./Modal";
 export * from "./Search";
+export * from "./SlideOut";