athameui 0.0.8 → 0.0.9-c

package/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 

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/DropDown/Dropdown.tsx

@@ -0,0 +1,61 @@
+"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"
+    >
+      fdpdsugfpoidsuy
+      {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,9 @@
 export * from "./Accordion";
 export * from "./Avatar";
+export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./DropDown";
 export * from "./ContainerScalingText";
 export * from "./FormField";
 export * from "./FormLabel";
@@ -11,3 +13,4 @@ export * from "./Layout";
 export * from "./List";
 export * from "./Modal";
 export * from "./Search";
+export * from "./SlideOut";

package/dist/athameui.cjs

@@ -2383,6 +2383,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,
@@ -2557,6 +2571,35 @@ const ButtonGroup = ({
   });
 };
 
+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 jsxs("div", {
+    ref: dropdownRef,
+    className: dropdownClasses,
+    css: sx?.dropdown,
+    "data-testid": "dropdown",
+    children: ["fdpdsugfpoidsuy", children]
+  });
+};
+
 const FormLabel = ({
   label,
   required,
@@ -2768,11 +2811,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 +3092,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 +3154,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 +3295,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 +3320,11 @@ const tokens = {
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
 exports.Avatar = Avatar;
+exports.Block = Block;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ContainerScalingText = ContainerScalingText;
+exports.Dropdown = Dropdown;
 exports.Footer = Footer;
 exports.FormField = FormField;
 exports.FormLabel = FormLabel;
@@ -3251,6 +3336,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;