athameui 0.0.7 → 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";
 
@@ -10,7 +9,7 @@ type AvatarProps = {
     initials?: string;
     // image?: string;
   };
-  size?: number;
+  size?: "small" | "medium" | "large" | "profile";
   sx?: {
     avatar?: CSSObject;
     initials?: CSSObject;
@@ -23,21 +22,16 @@ export const Avatar = ({
   className,
   displayName = "Display Name",
   sx,
-  size = 40,
+  size = "medium",
 }: AvatarProps) => {
+  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`,
+    "ath-avatar",
+    `ath-avatar-${size}`,
     className?.avatar,
   );
-  const initialsClasses = cx(
-    ".ath-avatar-initials",
-    `font-size-${size / 2}px`,
-    className?.initials,
-  );
+  const initialsClasses = cx(`ath-avatar-initials`, className?.initials);
   // const imageClasses = cx(".ath-avatar-image", className?.image);
 
   return (

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

@@ -55,7 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       onFocus,
       onKeyDown,
-      ...rest
+      ...other
     },
     ref,
   ) => {
@@ -105,7 +105,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onKeyDown={onKeyDownHandler}
         onFocus={onFocusHandler}
         onBlur={onBlurHandler}
-        {...rest}
+        {...other}
       >
         {icon ? (
           <>

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/{FormElements/FormInput.tsx → FormField/FormField.tsx}

@@ -2,9 +2,11 @@
 import React, { ReactNode, useRef, useLayoutEffect } from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
-import { FormInputLabel } from "./FormInputLabel";
+import { FormLabel } from "../FormLabel";
+import { FormTextInput } from "../FormTextInput";
+import "../FormTextInput";
 
-export type FormInputProps = {
+export type FormFieldProps = {
   autoComplete?: string;
   autoFocus?: boolean;
   autoResize?: boolean;
@@ -20,11 +22,12 @@ export type FormInputProps = {
   disabled?: boolean;
   error?: string;
   helperText?: string | ReactNode;
+  id?: string;
   label?: string | ReactNode;
   labelPosition?: "left" | "right" | "above" | "below";
   name?: string;
   placeholder?: string;
-  readonly?: boolean;
+  readOnly?: boolean;
   required?: boolean;
   role?: string;
   size?: "large" | "medium" | "small";
@@ -59,7 +62,7 @@ export type FormInputProps = {
   >;
 };
 
-export const FormInput: React.FC<FormInputProps> = ({
+export const FormField: React.FC<FormFieldProps> = ({
   autoComplete,
   autoFocus = false,
   autoResize = false,
@@ -68,11 +71,12 @@ export const FormInput: React.FC<FormInputProps> = ({
   disabled = false,
   error,
   helperText,
+  id,
   label,
   labelPosition = "above",
   name,
   placeholder,
-  readonly = false,
+  readOnly = false,
   required = false,
   size = "medium",
   sx,
@@ -82,7 +86,7 @@ export const FormInput: React.FC<FormInputProps> = ({
 
   onChange,
   onKeyDown,
-  ...rest
+  ...other
 }) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -96,7 +100,7 @@ export const FormInput: React.FC<FormInputProps> = ({
   const inputSharedClasses = cx(
     `ath-form-input-${size}`,
     disabled && "ath-form-input-shared-disabled",
-    readonly && "ath-form-input-shared-readonly",
+    readOnly && "ath-form-input-shared-readonly",
     dark && "ath-form-input-shared-dark",
     className?.input ? className.input : "",
   );
@@ -151,10 +155,10 @@ export const FormInput: React.FC<FormInputProps> = ({
   }, [autoResize, type]);
 
   const labelElement = label ? (
-    <FormInputLabel
+    <FormLabel
       label={label}
       required={required}
-      htmlFor={name}
+      htmlFor={id}
       className={labelClasses}
       sx={{ label: sx?.label, required: sx?.required }}
       labelPosition={labelPosition}
@@ -171,31 +175,33 @@ export const FormInput: React.FC<FormInputProps> = ({
         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}
+        {...other}
       />
     ) : (
-      <input
+      <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}
       />
     );
 

package/components/FormField/index.ts

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

package/components/{FormElements/FormInputLabel.tsx → FormLabel/FormLabel.tsx}

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 
-type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+type FormLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
   label: string | ReactNode;
   required?: boolean;
   className?: {
@@ -15,15 +15,15 @@ type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
   sx?: { label?: CSSObject; required?: CSSObject };
 };
 
-export const FormInputLabel = ({
+export const FormLabel = ({
   label,
   required,
   className,
   labelPosition = "above",
   dark,
   sx,
-  ...rest
-}: LabelProps) => {
+  ...other
+}: FormLabelProps) => {
   const labelClasses = cx(
     "ath-form-input-label",
     labelPosition ? `ath-form-input-label-${labelPosition}` : "",
@@ -38,7 +38,7 @@ export const FormInputLabel = ({
   );
 
   return (
-    <label className={labelClasses} css={sx?.label} {...rest}>
+    <label className={labelClasses} css={sx?.label} {...other}>
       {label}
       {required && (
         <span

package/components/FormLabel/index.ts

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

package/components/FormTextInput/FormTextInput.tsx

@@ -0,0 +1,93 @@
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+
+type FormTextInputProps = {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  className?: {
+    input?: string | false | null | undefined;
+  };
+  dark?: boolean;
+  disabled?: boolean;
+  error?: string;
+  id?: string;
+  name?: string;
+  placeholder?: string;
+  readOnly?: boolean;
+  size?: "large" | "medium" | "small";
+  sx?: {
+    input?: CSSObject;
+  };
+  tabIndex?: number;
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "tel"
+    | "url"
+    | "search"
+    | "number"
+    | "date";
+  value?: string | number;
+
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+};
+
+export const FormTextInput = ({
+  autoComplete,
+  autoFocus,
+  className,
+  dark,
+  error,
+  disabled,
+  id,
+  name,
+  placeholder,
+  readOnly,
+  size,
+  sx,
+  tabIndex,
+  type = "text",
+  value,
+
+  onChange,
+  onKeyDown,
+  ...other
+}: FormTextInputProps) => {
+  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: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled && !readOnly) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <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}
+    />
+  );
+};

package/components/FormTextInput/index.ts

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

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;
@@ -55,7 +55,7 @@ export const Modal: React.FC<ModalProps> = ({
   sx,
 
   onClose,
-  ...rest
+  ...other
 }) => {
   const [previouslyFocusedElement, setPreviouslyFocusedElement] =
     React.useState<HTMLElement | null>(null);
@@ -176,7 +176,7 @@ export const Modal: React.FC<ModalProps> = ({
         css={sx?.modal}
         className={modalClasses}
         role="dialog"
-        {...rest}
+        {...other}
       >
         {(title || showCloseButton) && (
           <div css={sx?.header} className={headerClasses}>

package/components/Search/Search.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { FormInput } from "../FormElements";
+import { FormField } from "../FormField";
 import { Button } from "../Button";
 import { cx } from "../../utils/cx";
 import { CSSObject } from "@emotion/react";
@@ -18,6 +18,7 @@ type SearchProps = {
     searchButton?: string | CSSObject;
   };
   dark?: boolean;
+  id?: string;
   inputSize?: "large" | "medium" | "small";
   label?: string;
   labelPosition?: "left" | "right" | "above" | "below";
@@ -49,6 +50,7 @@ export const Search = ({
   buttonVariant = "primary",
   className,
   dark = false,
+  id,
   inputSize,
   label,
   labelPosition = "above",
@@ -65,7 +67,7 @@ export const Search = ({
   onSearch,
   setSearchTerm,
 
-  ...rest
+  ...other
 }: SearchProps) => {
   const setSearchTermHandler = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -93,7 +95,7 @@ export const Search = ({
       )}
       css={sx?.searchForm}
       role={searchRole || "search"}
-      {...rest}
+      {...other}
     >
       <div
         className={cx(
@@ -123,8 +125,9 @@ export const Search = ({
         )}
 
         <div className="ath-search-input-wrapper">
-          <FormInput
+          <FormField
             type="search"
+            id={id}
             value={searchTerm || ""}
             name="searchTerm"
             labelPosition={labelPosition}

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,11 +1,16 @@
 export * from "./Accordion";
 export * from "./Avatar";
+export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
+export * from "./DropDown";
 export * from "./ContainerScalingText";
-export * from "./FormElements";
+export * from "./FormField";
+export * from "./FormLabel";
+export * from "./FormTextInput";
 export * from "./Header";
 export * from "./Layout";
 export * from "./List";
 export * from "./Modal";
 export * from "./Search";
+export * from "./SlideOut";