athameui 0.0.12 → 0.0.14

package/components/Accordion/Accordion.tsx

@@ -80,29 +80,29 @@ export const Accordion = ({
     <div className={accordionClasses} css={sx?.accordion}>
       {childrenFirst && children}
       <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>
-        ))}
+        {items.map((item) =>
+          CustomAccordionItem ? (
+            <CustomAccordionItem
+              key={item.id}
+              expanded={expandedItems.includes(item.id)}
+              onToggle={expandToggle}
+              {...item}
+            />
+          ) : (
+            <AccordionItem
+              key={item.id}
+              sx={sx}
+              item={item}
+              expanded={expandedItems.includes(item.id)}
+              onToggle={expandToggle}
+              className={
+                className?.accordionItem
+                  ? { ...className.accordionItem }
+                  : undefined
+              }
+            />
+          ),
+        )}
       </List>
       {!childrenFirst && children}
     </div>

package/components/Accordion/AccordionItem.tsx

@@ -103,14 +103,20 @@ export const AccordionItem = ({
           textPosition={headingTextPosition}
           onClick={onToggleHandler}
           disabled={disabled}
+          aria-expanded={expanded}
+          aria-controls={`accordion-content-${item.id}`}
           sx={sx?.accordionHeading}
           dark
         >
           <div className={titleClasses}>{item.heading}</div>
         </Button>
         <div
+          id={`accordion-content-${item.id}`}
           className={expansionClasses}
-          style={{ height: expanded ? contentHeight : 0 }}
+          style={{
+            height: expanded ? contentHeight : 0,
+            visibility: expanded ? "visible" : "hidden",
+          }}
         >
           <div ref={contentRef} className={contentWrapperClasses}>
             {item.content}

package/components/Avatar/Avatar.tsx

@@ -34,7 +34,12 @@ export const Avatar = ({
   // const imageClasses = cx(".ath-avatar-image", className?.image);
 
   return (
-    <div css={sx?.avatar} className={avatarClasses}>
+    <div
+      css={sx?.avatar}
+      className={avatarClasses}
+      role="img"
+      aria-label={displayName}
+    >
       <div css={sx?.initials} className={initialsClasses}>
         {initials[0]}
         {initials[1]}

package/components/Button/Button.tsx

@@ -30,11 +30,16 @@ export type ButtonProps = {
   type?: "button" | "submit" | "reset";
   variant?: ButtonVariant;
   wrap?: boolean;
+  "aria-controls"?: string;
+  "aria-expanded"?: boolean;
+  "aria-label"?: string;
+  "aria-pressed"?: boolean;
 
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onMouseDown?: MouseEventHandler<HTMLButtonElement>;
   onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
   onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
 };
@@ -59,6 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       onFocus,
       onKeyDown,
+      onMouseDown,
       onMouseEnter,
       onMouseLeave,
       ...other
@@ -100,6 +106,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onBlur?.(e);
     };
 
+    const onMouseDownHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+      onMouseDown?.(e);
+    };
+
     const onMouseEnterHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
       onMouseEnter?.(e);
     };
@@ -122,6 +132,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         onBlur={onBlurHandler}
         onMouseEnter={onMouseEnterHandler}
         onMouseLeave={onMouseLeaveHandler}
+        onMouseDown={onMouseDownHandler}
         {...other}
       >
         {icon ? (

package/components/Button/ScrollToTopButton.tsx

@@ -50,7 +50,8 @@ export const ScrollToTopButton = ({
       data-testid="ath-scroll-to-top-button"
       onClick={scrollToTop}
       variant={variant ?? "secondary"}
-      title={title ?? "Back to Top"}
+      title={title ?? "Back to top"}
+      aria-label="Back to top"
       dark={dark}
     >
       <HugeiconsIcon icon={CircleArrowUp02Icon} width="50" height="50" />

package/components/Carousel/Carousel.tsx

@@ -1,9 +1,22 @@
-import { Children, useState, useRef, type ReactNode } from "react";
+import {
+  Children,
+  isValidElement,
+  useState,
+  useRef,
+  useLayoutEffect,
+  type DragEvent,
+  type ReactNode,
+} from "react";
 import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 import { Button } from "../Button/Button";
+import { FormLabel } from "../FormLabel/FormLabel";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { ArrowLeftIcon, ArrowRightIcon } from "@hugeicons/core-free-icons";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  Delete02Icon,
+} from "@hugeicons/core-free-icons";
 
 export type CarouselProps = {
   children?: ReactNode;
@@ -11,6 +24,10 @@ export type CarouselProps = {
     carousel?: string | false | null | undefined;
   };
   emptyMessage?: string;
+  label?: string;
+  onRemove?: (index: number) => void;
+  onReorder?: (from: number, to: number) => void;
+  removeLabel?: string | ((index: number) => string);
   sx?: {
     carousel?: CSSObject;
   };
@@ -20,16 +37,76 @@ export const Carousel = ({
   children,
   className,
   emptyMessage = "Nothing here yet",
+  label,
+  onRemove,
+  onReorder,
+  removeLabel = "Remove item",
   sx,
 }: CarouselProps) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
   const carouselRef = useRef<HTMLDivElement>(null);
-  const carouselClasses = cx(
-    "ath-carousel",
-    isHovered ? "ath-carousel-hover" : "",
-    className?.carousel,
-  );
-  const hasItems = Children.count(children) > 0;
+  const dragIndex = useRef<number | null>(null);
+  const carouselClasses = cx("ath-carousel", className?.carousel);
+  const items = Children.toArray(children);
+  const itemCount = items.length;
+  const interactive = Boolean(onRemove || onReorder);
+
+  const finishDrag = () => {
+    dragIndex.current = null;
+    setDropIndex(null);
+  };
+
+  const handleDragStart = (index: number) => (event: DragEvent<HTMLDivElement>) => {
+    const target = event.target;
+    if (
+      target instanceof Element &&
+      target.closest(".ath-carousel-remove, .ath-carousel-remove-button")
+    ) {
+      event.preventDefault();
+      return;
+    }
+    dragIndex.current = index;
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(index));
+  };
+
+  const handleDragOver = (index: number) => (event: DragEvent<HTMLDivElement>) => {
+    if (!onReorder) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    if (dropIndex !== index) setDropIndex(index);
+  };
+
+  const handleDrop = (index: number) => (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const from = dragIndex.current;
+    finishDrag();
+    if (from == null || !onReorder) return;
+    onReorder(from, index);
+  };
+
+  useLayoutEffect(() => {
+    const el = carouselRef.current;
+    if (!el) return;
+
+    const updateArrows = () => {
+      const hidden = el.scrollWidth - el.clientWidth;
+      setShowLeftArrow(el.scrollLeft > 1);
+      setShowRightArrow(hidden - el.scrollLeft > 1);
+    };
+
+    updateArrows();
+    el.addEventListener("scroll", updateArrows, { passive: true });
+    const observer = new ResizeObserver(updateArrows);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateArrows);
+      observer.disconnect();
+    };
+  }, [itemCount]);
 
   const scrollByPage = (direction: -1 | 1) => {
     const el = carouselRef.current;
@@ -40,13 +117,6 @@ export const Carousel = ({
     });
   };
 
-  const handleLeftArrowClick = () => {
-    scrollByPage(-1);
-  };
-  const handleRightArrowClick = () => {
-    scrollByPage(1);
-  };
-
   const handleMouseEnter = () => {
     setIsHovered(true);
   };
@@ -55,33 +125,85 @@ export const Carousel = ({
   };
 
   return (
-    <div className="ath-carousel-wrapper">
+    <div
+      className="ath-carousel-container"
+      style={{ minWidth: itemCount === 1 ? "" : 0 }}
+    >
+      {label && <FormLabel label={label} dark />}
       <div
-        className={carouselClasses}
-        css={sx?.carousel}
+        className={cx(
+          "ath-carousel-wrapper",
+          isHovered && "ath-carousel-hover",
+          label && "ath-carousel-label",
+        )}
         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
-        ) : (
-          <div className="ath-carousel-empty">{emptyMessage}</div>
+        {showLeftArrow && (
+          <Button
+            className={{ button: "ath-carousel-arrow ath-carousel-left-arrow" }}
+            onClick={() => scrollByPage(-1)}
+            aria-label={
+              label ? `Scroll ${label} backward` : "Scroll backward"
+            }
+            icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
+          />
+        )}
+        <div className={carouselClasses} css={sx?.carousel} ref={carouselRef}>
+          {itemCount > 0 ? (
+            interactive ? (
+              items.map((child, index) => (
+                <div
+                  key={isValidElement(child) ? (child.key ?? index) : index}
+                  className={cx(
+                    "ath-carousel-slot",
+                    onReorder && dropIndex === index && "ath-carousel-slot-target",
+                  )}
+                  draggable={Boolean(onReorder)}
+                  onDragStart={onReorder ? handleDragStart(index) : undefined}
+                  onDragOver={onReorder ? handleDragOver(index) : undefined}
+                  onDrop={onReorder ? handleDrop(index) : undefined}
+                  onDragEnd={onReorder ? finishDrag : undefined}
+                >
+                  {onRemove && (
+                    <Button
+                      variant="ghost"
+                      size="small"
+                      type="button"
+                      className={{ button: "ath-carousel-remove-button" }}
+                      icon={<HugeiconsIcon icon={Delete02Icon} size={16} />}
+                      aria-label={
+                        typeof removeLabel === "function"
+                          ? removeLabel(index)
+                          : removeLabel
+                      }
+                      onMouseDown={(event) => event.stopPropagation()}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onRemove(index);
+                      }}
+                    />
+                  )}
+                  {child}
+                </div>
+              ))
+            ) : (
+              children
+            )
+          ) : (
+            <div className="ath-carousel-empty">{emptyMessage}</div>
+          )}
+        </div>
+        {showRightArrow && (
+          <Button
+            className={{
+              button: "ath-carousel-arrow ath-carousel-right-arrow",
+            }}
+            onClick={() => scrollByPage(1)}
+            aria-label={label ? `Scroll ${label} forward` : "Scroll forward"}
+            icon={<HugeiconsIcon icon={ArrowRightIcon} size={36} />}
+          />
         )}
-        <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/Checkbox/Checkbox.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { CSSObject } from "@emotion/react";
+import { cx } from "../../utils/cx";
+
+export type CheckboxProps = {
+  checked: boolean;
+  className?: string;
+  dark?: boolean;
+  disabled?: boolean;
+  id?: string;
+  label?: string;
+  name?: string;
+  sx?: CSSObject;
+  onChange: (checked: boolean) => void;
+};
+
+export const Checkbox = ({
+  checked,
+  className,
+  dark = false,
+  disabled = false,
+  id,
+  label,
+  name,
+  sx,
+  onChange,
+}: CheckboxProps) => {
+  return (
+    <label
+      className={cx(
+        "ath-checkbox",
+        dark && "ath-checkbox-dark",
+        disabled && "ath-checkbox-disabled",
+        className,
+      )}
+      css={sx}
+      htmlFor={id}
+    >
+      <input
+        id={id}
+        className="ath-checkbox-input"
+        type="checkbox"
+        name={name}
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      {label && <span className="ath-checkbox-label">{label}</span>}
+    </label>
+  );
+};

package/components/Checkbox/index.ts

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

package/components/FormField/FormField.tsx

@@ -23,6 +23,7 @@ export type FormFieldProps = {
   error?: string;
   helperText?: string | ReactNode;
   id?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
   label?: string | ReactNode;
   labelPosition?: "left" | "right" | "above" | "below";
   name?: string;
@@ -57,6 +58,8 @@ export type FormFieldProps = {
       | React.ChangeEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLTextAreaElement>,
   ) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onKeyDown?: React.KeyboardEventHandler<
     HTMLInputElement | HTMLTextAreaElement
   >;
@@ -72,6 +75,7 @@ export const FormField: React.FC<FormFieldProps> = ({
   error,
   helperText,
   id,
+  inputMode,
   label,
   labelPosition = "above",
   name,
@@ -85,6 +89,8 @@ export const FormField: React.FC<FormFieldProps> = ({
   value,
 
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }) => {
@@ -167,16 +173,29 @@ export const FormField: React.FC<FormFieldProps> = ({
     />
   ) : null;
 
+  const describedBy =
+    [
+      error && name ? `${name}-error` : "",
+      helperText && name ? `${name}-helper` : "",
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
   const inputElement =
     type === "textarea" ? (
       <textarea
         autoComplete={autoComplete}
         autoFocus={autoFocus}
         ref={textAreaRef}
+        id={id}
         name={name}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={describedBy}
         onChange={handleTextAreaChange}
         disabled={disabled}
         readOnly={readOnly}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onKeyDown={onKeyDown}
         tabIndex={disabled ? -1 : tabIndex}
         className={textAreaClasses}
@@ -190,10 +209,13 @@ export const FormField: React.FC<FormFieldProps> = ({
         autoComplete={autoComplete}
         autoFocus={autoFocus}
         name={name}
+        inputMode={inputMode}
         type={type}
         onChange={handleInputChange}
         disabled={disabled}
         readOnly={readOnly}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onKeyDown={onKeyDown}
         tabIndex={disabled ? -1 : tabIndex}
         className={{ input: inputClasses }}
@@ -202,6 +224,8 @@ export const FormField: React.FC<FormFieldProps> = ({
         placeholder={placeholder}
         size={size}
         id={id}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={describedBy}
         {...other}
       />
     );

package/components/FormTextInput/FormTextInput.tsx

@@ -2,6 +2,8 @@ import { CSSObject } from "@emotion/react";
 import { cx } from "../../utils/cx";
 
 type FormTextInputProps = {
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
   autoComplete?: string;
   autoFocus?: boolean;
   className?: {
@@ -11,6 +13,7 @@ type FormTextInputProps = {
   disabled?: boolean;
   error?: string;
   id?: string;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
   name?: string;
   placeholder?: string;
   readOnly?: boolean;
@@ -31,6 +34,8 @@ type FormTextInputProps = {
   value?: string | number;
 
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
 };
 
@@ -42,6 +47,7 @@ export const FormTextInput = ({
   error,
   disabled,
   id,
+  inputMode,
   name,
   placeholder,
   readOnly,
@@ -52,6 +58,8 @@ export const FormTextInput = ({
   value,
 
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }: FormTextInputProps) => {
@@ -79,12 +87,15 @@ export const FormTextInput = ({
       css={sx?.input}
       disabled={disabled}
       name={name}
+      inputMode={inputMode}
       placeholder={placeholder}
       readOnly={readOnly}
       tabIndex={disabled ? -1 : tabIndex}
       type={type}
       value={value}
       onChange={onChangeHandler}
+      onBlur={onBlur}
+      onFocus={onFocus}
       onKeyDown={onKeyDown}
       id={id}
       {...other}

package/components/Layout/Main.tsx

@@ -8,14 +8,19 @@ type MainProps = {
     main?: string | false | null | undefined;
     mainContent?: string | false | null | undefined;
   };
-
+  width?: "full" | "wide" | "medium" | "narrow";
   sx?: {
     main?: CSSObject;
     mainContent?: CSSObject;
   };
 };
 
-export const Main = ({ children, className, sx }: MainProps) => {
+export const Main = ({
+  children,
+  className,
+  sx,
+  width = "wide",
+}: MainProps) => {
   const mainClasses = cx(
     "ath-main",
     typeof className === "object" && className !== null ? className.main : "",
@@ -26,6 +31,10 @@ export const Main = ({ children, className, sx }: MainProps) => {
     typeof className === "object" && className !== null
       ? className.mainContent
       : "",
+    width === "full" ? "full" : "",
+    width === "wide" ? "wide" : "",
+    width === "medium" ? "medium" : "",
+    width === "narrow" ? "narrow" : "",
   );
 
   return (

package/components/Modal/Modal.tsx

@@ -52,6 +52,9 @@ export const Modal: React.FC<ModalProps> = ({
   trapFocus = true,
   initialFocusRef,
   finalFocusRef,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   sx,
 
   onClose,
@@ -176,14 +179,18 @@ export const Modal: React.FC<ModalProps> = ({
         css={sx?.modal}
         className={modalClasses}
         role="dialog"
+        aria-modal="true"
+        aria-labelledby={ariaLabelledBy || titleId}
+        aria-label={ariaLabelledBy || titleId ? undefined : ariaLabel}
+        aria-describedby={ariaDescribedBy}
         {...other}
       >
         {(title || showCloseButton) && (
           <div css={sx?.header} className={headerClasses}>
             {title && (
-              <h1 css={sx?.title} className={titleClasses} id={titleId}>
+              <h2 css={sx?.title} className={titleClasses} id={titleId}>
                 {title}
-              </h1>
+              </h2>
             )}
             {showCloseButton && (
               <Button