athameui 0.0.2 → 0.0.5

package/components/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { useState } from "react";
+import { CSSObject } from "@emotion/react";
 import { AccordionItem } from "./AccordionItem";
+import { List } from "../List/List";
 import type { AccordionItemType } from "./AccordionItem";
 import { cx } from "../../utils/cx";
 
@@ -9,15 +11,35 @@ type AccordionProps = {
   items: AccordionItemType[];
   childrenFirst?: boolean;
   expand?: "one" | "any";
-  className?:
-    | string
-    | {
-        accordion?: string | false | null | undefined;
-        accordionItem?: string | false | null | undefined;
-      }
-    | false
-    | undefined
-    | null;
+  sx?: {
+    accordion: CSSObject;
+    accordionItem?: {
+      accordionItem?: CSSObject;
+      accordionHeading?: CSSObject;
+      accordionTitle?: CSSObject;
+      accordionExpansionWrapper?: CSSObject;
+      accordionContentWrapper?: CSSObject;
+    };
+  };
+  className?: {
+    accordion?: string | false | null | undefined;
+    accordionItem?: {
+      accordionItem?: string | false | null | undefined;
+      accordionHeading?: string | false | null | undefined;
+      accordionTitle?: string | false | null | undefined;
+      accordionExpansionWrapper?: string | false | null | undefined;
+      accordionContentWrapper?: string | false | null | undefined;
+    };
+  };
+
+  CustomAccordionItem?: React.ComponentType<
+    AccordionItemType & {
+      expanded: boolean;
+      onToggle: (id: string | number) => void;
+      className?: AccordionProps["className"];
+    }
+  >;
+
   expandToggleCallback?: (expandedItems: (string | number)[]) => void;
 };
 
@@ -27,24 +49,19 @@ export const Accordion = ({
   items,
   childrenFirst,
   expand = "one",
+  sx,
+
+  CustomAccordionItem,
 
   expandToggleCallback,
 }: AccordionProps) => {
   const [expandedItems, setExpandedItems] = useState<(string | number)[]>([]);
-  const classes = cx(
+  const accordionClasses = cx(
     "ath-accordion",
-    typeof className === "object" && className !== null
-      ? className.accordion
-      : className
+    className?.accordion ? className.accordion : undefined,
   );
 
   const expandToggle = (itemId: string | number) => {
-    console.log(
-      "Rendering AccordionItem:",
-      itemId,
-      "Expanded:",
-      expandedItems.includes(itemId)
-    );
     if (expandedItems.includes(itemId)) {
       setExpandedItems(expandedItems.filter((id) => id !== itemId));
     } else {
@@ -60,21 +77,33 @@ export const Accordion = ({
   };
 
   return (
-    <div className={classes}>
+    <div className={accordionClasses} css={sx?.accordion}>
       {childrenFirst && children}
-      {items.map((item) => (
-        <AccordionItem
-          key={item.id}
-          item={item}
-          expanded={expandedItems.includes(item.id)}
-          onToggle={expandToggle}
-          className={
-            typeof className === "object" && className !== null
-              ? className.accordionItem
-              : undefined
-          }
-        />
-      ))}
+      <List>
+        {items.map((item) => (
+          <div key={item.id}>
+            {CustomAccordionItem ? (
+              <CustomAccordionItem
+                expanded={expandedItems.includes(item.id)}
+                onToggle={expandToggle}
+                {...item}
+              />
+            ) : (
+              <AccordionItem
+                sx={sx}
+                item={item}
+                expanded={expandedItems.includes(item.id)}
+                onToggle={expandToggle}
+                className={
+                  className?.accordionItem
+                    ? { ...className.accordionItem }
+                    : undefined
+                }
+              />
+            )}
+          </div>
+        ))}
+      </List>
       {!childrenFirst && children}
     </div>
   );

package/components/Accordion/AccordionItem.tsx

@@ -1,65 +1,122 @@
 "use client";
+import { CSSObject } from "@emotion/react";
 import { useRef } from "react";
 import { Button } from "../Button/Button";
+import type {
+  ButtonSize,
+  ButtonTextPosition,
+  ButtonVariant,
+} from "../Button/button.variants";
 import { cx } from "../../utils/cx";
 
 export type AccordionItemType = {
   id: string | number;
-  heading: string;
+  heading: React.ReactNode;
   content: React.ReactNode;
 };
 
 export type AccordionItemProps = {
-  item: AccordionItemType;
+  children?: React.ReactNode;
+  className?: {
+    accordionItem?: string | false | null | undefined;
+    accordionHeading?: string | false | null | undefined;
+    accordionTitle?: string | false | null | undefined;
+    accordionExpansionWrapper?: string | false | null | undefined;
+    accordionContentWrapper?: string | false | null | undefined;
+  };
+
+  disabled?: boolean;
   expanded: boolean;
+  headingSize?: ButtonSize;
+  headingTextPosition?: ButtonTextPosition;
+  headingVariant?: ButtonVariant;
+  item: AccordionItemType;
+  sx?: {
+    accordionItem?: CSSObject;
+    accordionHeading?: CSSObject;
+    accordionTitle?: CSSObject;
+    accordionExpansionWrapper?: CSSObject;
+    accordionContentWrapper?: CSSObject;
+  };
+
   onToggle: (id: string | number) => void;
-  className?:
-    | string
-    | { accordionItem?: string | false | null | undefined }
-    | false
-    | undefined
-    | null;
 };
 
 export const AccordionItem = ({
-  item,
+  className,
+  disabled,
   expanded,
+  item,
+  headingSize = "full",
+  headingTextPosition = "left",
+  headingVariant = "ghost",
+  sx,
+
   onToggle,
-  className,
 }: AccordionItemProps) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const contentHeight = contentRef.current?.scrollHeight;
 
-  const classes = cx(
+  const itemClasses = cx(
     "ath-accordion-item",
-    typeof className === "object" && className !== null
-      ? className.accordionItem
-      : className
+    disabled && "ath-accordion-item-heading-disabled",
+    className?.accordionItem ? className.accordionItem : undefined,
   );
 
+  const headingClasses = cx(
+    "ath-accordion-item-heading",
+    disabled && "ath-accordion-item-heading-disabled",
+    className?.accordionHeading ? className.accordionHeading : "",
+  );
+
+  const titleClasses = cx(
+    "ath-accordion-item-title",
+    className?.accordionTitle ? className.accordionTitle : "",
+  );
+
+  const expansionClasses = cx(
+    "ath-accordion-expansion-wrapper",
+    expanded && "expanded",
+    className?.accordionExpansionWrapper
+      ? className.accordionExpansionWrapper
+      : "",
+  );
+
+  const contentWrapperClasses = cx(
+    "ath-accordion-content-wrapper",
+    className?.accordionContentWrapper ? className.accordionContentWrapper : "",
+  );
+
+  const onToggleHandler = () => {
+    if (!disabled) {
+      onToggle(item.id);
+    }
+  };
+
   return (
-    <div className={classes}>
-      <Button
-        className="ath-accordion-item-heading"
-        variant="ghost"
-        size="full"
-        textAlign="left"
-        onClick={() => onToggle(item.id)}
-        dark
-      >
-        <h4>{item.heading}</h4>
-      </Button>
-      <div
-        className={cx(
-          "ath-accordion-expansion-wrapper",
-          expanded && "expanded"
-        )}
-        style={{ height: expanded ? contentHeight : 0 }}
-      >
-        <div ref={contentRef} className="ath-accordion-item-content">
-          {item.content}
+    <li className={itemClasses} css={sx?.accordionItem}>
+      <>
+        <Button
+          className={{ button: headingClasses }}
+          variant={headingVariant}
+          size={headingSize}
+          textPosition={headingTextPosition}
+          onClick={onToggleHandler}
+          disabled={disabled}
+          sx={sx?.accordionHeading}
+          dark
+        >
+          <div className={titleClasses}>{item.heading}</div>
+        </Button>
+        <div
+          className={expansionClasses}
+          style={{ height: expanded ? contentHeight : 0 }}
+        >
+          <div ref={contentRef} className={contentWrapperClasses}>
+            {item.content}
+          </div>
         </div>
-      </div>
-    </div>
+      </>
+    </li>
   );
 };

package/components/Button/Button.tsx

@@ -1,40 +1,39 @@
 "use client";
-import { ButtonPrimitive, type ButtonPrimitiveProps } from "./ButtonPrimitive";
-import { cx } from "../../utils/cx";
-import { buttonVariants, ButtonSize, ButtonVariant } from "./button.variants";
-
+import { forwardRef } from "react";
 import type {
   KeyboardEventHandler,
   MouseEventHandler,
   ReactElement,
 } from "react";
-import { forwardRef } from "react";
+import { cx } from "../../utils/cx";
+import {
+  buttonVariants,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./button.variants";
+import { CSSObject } from "@emotion/react";
 
-export type ButtonProps = Omit<ButtonPrimitiveProps, "className"> & {
+export type ButtonProps = {
   children?: ReactElement | string;
-  className?:
-    | string
-    | { button?: string | false | null | undefined }
-    | false
-    | undefined
-    | null;
-  type?: "button" | "submit" | "reset";
-  variant?: ButtonVariant;
-  size?: ButtonSize;
+  className?: {
+    button?: string | false | null | undefined;
+    icon?: string | false | null | undefined;
+  };
   dark?: boolean;
-  iconOnly?: boolean;
-  icon?: ReactElement | string;
-  title?: string;
   disabled?: boolean;
-  autoFocus?: boolean;
+  icon?: React.ComponentType<{ className?: string }> | string;
+  size?: ButtonSize;
+  sx?: CSSObject | { button?: CSSObject; icon?: CSSObject };
+  title?: string;
   tabIndex?: number;
-  testId?: string;
-  textAlign?: "left" | "center" | "right";
+  textPosition?: "left" | "center" | "right";
+  type?: "button" | "submit" | "reset";
+  variant?: ButtonVariant;
 
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -42,18 +41,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       children,
       className,
-      variant = "primary",
-      size = "medium",
       dark = false,
       disabled = false,
-      icon,
-      iconOnly,
+      icon: Icon,
+      size = "medium",
+      sx,
       tabIndex,
-      testId,
       type = "button",
-      title,
-      autoFocus = false,
-      textAlign = "center",
+      textPosition = "center",
+      variant = "secondary",
 
       onBlur,
       onClick,
@@ -61,54 +57,79 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onKeyDown,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const classes = cx(
+    const isIconOnly = Icon && !children;
+
+    const sharedClasses = cx(
       "ath-button",
       buttonVariants.size[size],
       buttonVariants.variant[variant],
-      buttonVariants.textAlign[textAlign],
+      isIconOnly ? "ath-button-icon-only" : "",
       dark ? buttonVariants.dark : "",
+    );
+
+    const buttonClasses = cx(
+      sharedClasses,
+      buttonVariants.textPosition[textPosition],
       typeof className === "object" && className !== null
         ? className.button
-        : className
+        : className,
+    );
+
+    const iconClasses = cx(
+      sharedClasses,
+      "ath-button-icon",
+      typeof className === "object" && className !== null
+        ? className.icon
+        : undefined,
     );
 
     const onClickHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
       onClick?.(e);
     };
 
+    const onKeyDownHandler: KeyboardEventHandler<HTMLButtonElement> = (e) => {
+      onKeyDown?.(e);
+    };
+
+    const onFocusHandler = (e: React.FocusEvent<HTMLButtonElement>) => {
+      onFocus?.(e);
+    };
+
+    const onBlurHandler = (e: React.FocusEvent<HTMLButtonElement>) => {
+      onBlur?.(e);
+    };
+
     return (
-      <ButtonPrimitive
+      <button
         ref={ref}
-        type={type}
-        title={title}
-        className={classes}
+        className={buttonClasses}
+        css={sx?.button ? sx.button : sx}
         disabled={disabled}
-        autoFocus={autoFocus}
         tabIndex={disabled ? -1 : tabIndex}
-        data-testid={testId}
+        type={type}
         onClick={onClickHandler}
-        onKeyDown={onKeyDown}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        onKeyDown={onKeyDownHandler}
+        onFocus={onFocusHandler}
+        onBlur={onBlurHandler}
         {...rest}
       >
-        {icon ? (
+        {Icon ? (
           <>
-            {typeof icon === "string" ? (
-              <span aria-hidden="true">{icon}</span>
-            ) : (
-              icon
-            )}
-            {!iconOnly && children}
+            <Icon
+              className={iconClasses}
+              css={sx?.icon ? sx.icon : undefined}
+            />
+
+            {!isIconOnly && children}
           </>
         ) : (
           <>{children}</>
         )}
-      </ButtonPrimitive>
+      </button>
     );
-  }
+  },
 );
 
 Button.displayName = "Button";

package/components/Button/ButtonGroup.tsx

@@ -1,13 +1,32 @@
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils";
+
 type ButtonGroupProps = {
   children: React.ReactNode;
-  gap?: string;
+  className?: {
+    buttonGroup?: string | false | null | undefined;
+  };
   direction?: "row" | "column";
+  sx?: {
+    buttonGroup?: CSSObject | string;
+  };
 };
 
 export const ButtonGroup = ({
   children,
-  gap = "2",
+  className,
   direction = "row",
+  sx,
 }: ButtonGroupProps) => {
-  return <div className={`flex flex-${direction} gap-${gap}`}>{children}</div>;
+  const buttonGroupClasses = cx(
+    "ath-button-group",
+    `ath-button-group-direction-${direction}`,
+    className?.buttonGroup ? className.buttonGroup : undefined,
+  );
+
+  return (
+    <div className={buttonGroupClasses} css={sx?.buttonGroup}>
+      {children}
+    </div>
+  );
 };

package/components/Button/{BackToTopButton.tsx → ScrollToTopButton.tsx}

@@ -6,12 +6,18 @@ import { CircleArrowUp02Icon } from "@hugeicons/core-free-icons";
 import type { ButtonProps } from "./Button";
 import { cx } from "../../utils/cx";
 
-type BackToTopButtonProps = ButtonProps & {
-  className?: string;
+type ScrollToTopButtonProps = ButtonProps & {
+  className?: {
+    button?: string | false | null | undefined;
+  };
 };
 
-export const BackToTopButton = (props: BackToTopButtonProps) => {
-  const { className, variant, dark = false, testId, title } = props;
+export const ScrollToTopButton = ({
+  className,
+  variant,
+  dark = false,
+  title,
+}: ScrollToTopButtonProps) => {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -36,12 +42,12 @@ export const BackToTopButton = (props: BackToTopButtonProps) => {
 
   if (!visible) return null;
 
-  const classes = cx("ath-back-to-top-button", className);
+  const buttonClasses = cx("ath-scroll-to-top-button", className?.button);
 
   return (
     <Button
-      className={classes}
-      data-testid={`${testId} "ath-back-to-top-button"`}
+      className={{ button: buttonClasses }}
+      data-testid="ath-scroll-to-top-button"
       onClick={scrollToTop}
       variant={variant ?? "secondary"}
       title={title ?? "Back to Top"}

package/components/Button/button.variants.ts

@@ -1,4 +1,3 @@
-// button.variants.ts
 export const buttonVariants = {
   size: {
     small: "ath-button-small",
@@ -6,6 +5,11 @@ export const buttonVariants = {
     large: "ath-button-large",
     full: "ath-button-full",
   },
+  textPosition: {
+    left: "ath-button-text-left",
+    center: "ath-button-text-center",
+    right: "ath-button-text-right",
+  },
   variant: {
     primary: "ath-button-primary",
     secondary: "ath-button-secondary",
@@ -16,15 +20,19 @@ export const buttonVariants = {
     outline: "ath-button-outline",
     ghost: "ath-button-ghost",
   },
-  textAlign: {
-    left: "ath-button-text-left",
-    center: "ath-button-text-center",
-    right: "ath-button-text-right",
-  },
+
   dark: "ath-button-dark",
 } as const;
 
+export const ButtonGroupVariants = {
+  direction: {
+    row: "ath-button-group-direction-row",
+    column: "ath-button-group-direction-column",
+  },
+} as const;
+
 export type ButtonSize = keyof typeof buttonVariants.size;
 export type ButtonVariant = keyof typeof buttonVariants.variant;
-export type ButtonDark = keyof typeof buttonVariants.dark;
-export type ButtonTextAlign = keyof typeof buttonVariants.textAlign;
+export type ButtonDark = typeof buttonVariants.dark;
+export type ButtonTextPosition = keyof typeof buttonVariants.textPosition;
+export type ButtonGroupDirection = keyof typeof ButtonGroupVariants.direction;

package/components/Button/index.ts

@@ -1,3 +1,3 @@
 export * from "./Button";
 export * from "./ButtonGroup";
-export * from "./BackToTopButton";
+export * from "./ScrollToTopButton";

package/components/ContainerScalingText.tsx

@@ -0,0 +1,72 @@
+"use client";
+import { CSSObject } from "@emotion/react";
+import React, { useRef, useEffect, useState } from "react";
+
+type ContainerScalingTextProps = {
+  children: React.ReactNode;
+  className?: { container?: string };
+  maxFontSize?: number;
+  minFontSize?: number;
+  sx?: { container?: CSSObject };
+};
+
+export const ContainerScalingText: React.FC<ContainerScalingTextProps> = ({
+  children,
+  maxFontSize = 48,
+  minFontSize = 14,
+  className,
+  sx,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLDivElement>(null);
+  const [fontSize, setFontSize] = useState(maxFontSize);
+
+  useEffect(() => {
+    const resizeText = () => {
+      if (!containerRef.current || !textRef.current) return;
+
+      const container = containerRef.current;
+      const text = textRef.current;
+
+      let currentSize = maxFontSize;
+      text.style.fontSize = `${currentSize}px`;
+
+      while (
+        (text.scrollWidth > container.clientWidth ||
+          text.scrollHeight > container.clientHeight) &&
+        currentSize > minFontSize
+      ) {
+        currentSize -= 1;
+        text.style.fontSize = `${currentSize}px`;
+      }
+
+      setFontSize(currentSize);
+    };
+
+    resizeText();
+
+    const resizeObserver = new ResizeObserver(resizeText);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [children, maxFontSize, minFontSize, sx, className]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`overflow-hidden ${className?.container}`}
+      style={{ width: "100%", height: "100%" }}
+      css={sx?.container}
+    >
+      <div
+        ref={textRef}
+        className="whitespace-pre-line"
+        style={{ fontSize: `${fontSize}px` }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};