athameui 0.0.7 → 0.0.9-c

package/dist/athameui.cjs

@@ -2199,7 +2199,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   onClick,
   onFocus,
   onKeyDown,
-  ...rest
+  ...other
 }, ref) => {
   const isIconOnly = icon && !children;
   const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "");
@@ -2227,7 +2227,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     onKeyDown: onKeyDownHandler,
     onFocus: onFocusHandler,
     onBlur: onBlurHandler,
-    ...rest,
+    ...other,
     children: icon ? jsxs(Fragment, {
       children: [icon, !isIconOnly && children]
     }) : jsx(Fragment, {
@@ -2365,11 +2365,12 @@ const Avatar = ({
   className,
   displayName = "Display Name",
   sx,
-  size = 40
+  size = "medium"
 }) => {
+  console.log(className?.avatar);
   const initials = displayName.split(" ").map(n => n[0].toUpperCase());
-  const avatarClasses = cx(".ath-avatar", `width-${size}px`, `height-${size}px`, `line-height-${size}px`, className?.avatar);
-  const initialsClasses = cx(".ath-avatar-initials", `font-size-${size / 2}px`, className?.initials);
+  const avatarClasses = cx("ath-avatar", `ath-avatar-${size}`, className?.avatar);
+  const initialsClasses = cx(`ath-avatar-initials`, className?.initials);
   // const imageClasses = cx(".ath-avatar-image", className?.image);
   return jsx("div", {
     css: sx?.avatar,
@@ -2382,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,
@@ -2556,21 +2571,50 @@ const ButtonGroup = ({
   });
 };
 
-const FormInputLabel = ({
+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,
   className,
   labelPosition = "above",
   dark,
   sx,
-  ...rest
+  ...other
 }) => {
   const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "", dark ? "ath-form-input-label-dark" : "", className?.label);
   const requiredClasses = cx("ath-form-input-label-required", dark ? "ath-form-input-label-required-dark" : "", className?.required);
   return jsxs("label", {
     className: labelClasses,
     css: sx?.label,
-    ...rest,
+    ...other,
     children: [label, required && jsx("span", {
       className: requiredClasses,
       css: sx?.required,
@@ -2580,7 +2624,52 @@ const FormInputLabel = ({
   });
 };
 
-const FormInput = ({
+const FormTextInput = ({
+  autoComplete,
+  autoFocus,
+  className,
+  dark,
+  error,
+  disabled,
+  id,
+  name,
+  placeholder,
+  readOnly,
+  size,
+  sx,
+  tabIndex,
+  type = "text",
+  value,
+  onChange,
+  onKeyDown,
+  ...other
+}) => {
+  const inputClasses = cx("ath-form-text-input", `ath-form-text-input-${size}`, dark ? "ath-form-text-input-dark" : "", disabled ? "ath-form-text-input-disabled" : "", readOnly ? "ath-form-text-input-readonly" : "", error ? "ath-form-text-input-error" : "", className?.input);
+  const onChangeHandler = e => {
+    if (!disabled && !readOnly) {
+      onChange(e);
+    }
+  };
+  return jsx("input", {
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    className: inputClasses,
+    css: sx?.input,
+    disabled: disabled,
+    name: name,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    tabIndex: disabled ? -1 : tabIndex,
+    type: type,
+    value: value,
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDown,
+    id: id,
+    ...other
+  });
+};
+
+const FormField = ({
   autoComplete,
   autoFocus = false,
   autoResize = false,
@@ -2589,11 +2678,12 @@ const FormInput = ({
   disabled = false,
   error,
   helperText,
+  id,
   label,
   labelPosition = "above",
   name,
   placeholder,
-  readonly = false,
+  readOnly = false,
   required = false,
   size = "medium",
   sx,
@@ -2602,11 +2692,11 @@ const FormInput = ({
   value,
   onChange,
   onKeyDown,
-  ...rest
+  ...other
 }) => {
   const textAreaRef = React.useRef(null);
   const containerClasses = cx("ath-form-input-container", (labelPosition === "left" || labelPosition === "right") && "ath-form-input-container-horizontal", className?.container ? className.container : "");
-  const inputSharedClasses = cx(`ath-form-input-${size}`, disabled && "ath-form-input-shared-disabled", readonly && "ath-form-input-shared-readonly", dark && "ath-form-input-shared-dark", className?.input ? className.input : "");
+  const inputSharedClasses = cx(`ath-form-input-${size}`, disabled && "ath-form-input-shared-disabled", readOnly && "ath-form-input-shared-readonly", dark && "ath-form-input-shared-dark", className?.input ? className.input : "");
   const inputClasses = cx("ath-form-input", inputSharedClasses, error && "ath-form-input-error");
   const textAreaClasses = cx("ath-form-textarea", inputSharedClasses, autoResize && "ath-form-textarea-auto-resize", error && "ath-form-textarea-error");
   const labelClasses = cx("ath-form-input-label", labelPosition ? `ath-form-input-label-${labelPosition}` : "");
@@ -2633,10 +2723,10 @@ const FormInput = ({
       }
     }
   }, [autoResize, type]);
-  const labelElement = label ? jsx(FormInputLabel, {
+  const labelElement = label ? jsx(FormLabel, {
     label: label,
     required: required,
-    htmlFor: name,
+    htmlFor: id,
     className: labelClasses,
     sx: {
       label: sx?.label,
@@ -2652,29 +2742,33 @@ const FormInput = ({
     name: name,
     onChange: handleTextAreaChange,
     disabled: disabled,
-    readOnly: readonly,
+    readOnly: readOnly,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : tabIndex,
     className: textAreaClasses,
     css: sx?.input,
     value: value,
     placeholder: placeholder,
-    ...rest
-  }) : jsx("input", {
+    ...other
+  }) : jsx(FormTextInput, {
     autoComplete: autoComplete,
     autoFocus: autoFocus,
     name: name,
     type: type,
     onChange: handleInputChange,
     disabled: disabled,
-    readOnly: readonly,
+    readOnly: readOnly,
     onKeyDown: onKeyDown,
     tabIndex: disabled ? -1 : tabIndex,
-    className: inputClasses,
+    className: {
+      input: inputClasses
+    },
     css: sx?.input,
     value: value,
     placeholder: placeholder,
-    ...rest
+    size: size,
+    id: id,
+    ...other
   });
   const errorElement = error ? jsx("div", {
     className: errorClasses,
@@ -2717,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
+    })
   });
 };
 
@@ -2781,7 +2880,7 @@ const Modal = ({
   finalFocusRef,
   sx,
   onClose,
-  ...rest
+  ...other
 }) => {
   const [previouslyFocusedElement, setPreviouslyFocusedElement] = React.useState(null);
   const modalRef = React.useRef(null);
@@ -2867,7 +2966,7 @@ const Modal = ({
       css: sx?.modal,
       className: modalClasses,
       role: "dialog",
-      ...rest,
+      ...other,
       children: [(title || showCloseButton) && jsxs("div", {
         css: sx?.header,
         className: headerClasses,
@@ -2908,6 +3007,7 @@ const Search = ({
   buttonVariant = "primary",
   className,
   dark = false,
+  id,
   inputSize,
   label,
   labelPosition = "above",
@@ -2922,7 +3022,7 @@ const Search = ({
   totalResultsCount = "0",
   onSearch,
   setSearchTerm,
-  ...rest
+  ...other
 }) => {
   const setSearchTermHandler = e => {
     if (e.target instanceof HTMLInputElement) {
@@ -2941,7 +3041,7 @@ const Search = ({
     className: cx("ath-search-form", typeof className?.searchForm === "string" ? className.searchForm : ""),
     css: sx?.searchForm,
     role: searchRole || "search",
-    ...rest,
+    ...other,
     children: jsxs("div", {
       className: cx("ath-search-wrapper", typeof className?.searchWrapper === "string" ? className.searchWrapper : ""),
       css: sx?.searchWrapper,
@@ -2955,8 +3055,9 @@ const Search = ({
         children: [resultsLabel ?? "Total Results:", " ", totalResultsCount]
       }), jsx("div", {
         className: "ath-search-input-wrapper",
-        children: jsx(FormInput, {
+        children: jsx(FormField, {
           type: "search",
+          id: id,
           value: searchTerm || "",
           name: "searchTerm",
           labelPosition: labelPosition,
@@ -2991,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 = {
@@ -3009,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: {
@@ -3150,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)",
@@ -3184,12 +3320,15 @@ 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.FormInput = FormInput;
-exports.FormInputLabel = FormInputLabel;
+exports.FormField = FormField;
+exports.FormLabel = FormLabel;
+exports.FormTextInput = FormTextInput;
 exports.Header = Header;
 exports.List = List;
 exports.ListItem = ListItem;
@@ -3197,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;