athameui 0.0.13 → 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,8 +1,10 @@
 import {
   Children,
+  isValidElement,
   useState,
   useRef,
   useLayoutEffect,
+  type DragEvent,
   type ReactNode,
 } from "react";
 import { CSSObject } from "@emotion/react";
@@ -10,7 +12,11 @@ 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;
@@ -19,6 +25,9 @@ export type CarouselProps = {
   };
   emptyMessage?: string;
   label?: string;
+  onRemove?: (index: number) => void;
+  onReorder?: (from: number, to: number) => void;
+  removeLabel?: string | ((index: number) => string);
   sx?: {
     carousel?: CSSObject;
   };
@@ -29,14 +38,55 @@ export const Carousel = ({
   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 dragIndex = useRef<number | null>(null);
   const carouselClasses = cx("ath-carousel", className?.carousel);
-  const itemCount = Children.count(children);
+  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;
@@ -93,12 +143,53 @@ export const Carousel = ({
           <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 ? (
-            children
+            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>
           )}
@@ -109,6 +200,7 @@ export const Carousel = ({
               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} />}
           />
         )}

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/Modal/Modal.tsx

@@ -52,6 +52,9 @@ export const Modal: React.FC<ModalProps> = ({
   trapFocus = true,
   initialFocusRef,
   finalFocusRef,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   sx,
 
   onClose,
@@ -176,6 +179,10 @@ 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) && (

package/components/SlideOut/SlideOut.tsx

@@ -1,6 +1,7 @@
 import { CSSObject } from "@emotion/react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { CancelCircleIcon } from "@hugeicons/core-free-icons";
+import { useEffect, useRef } from "react";
 import { cx } from "../../utils/cx";
 import { Button } from "../Button/Button";
 
@@ -49,11 +50,39 @@ export const SlideOut = ({
     "ath-slide-out-close-button",
     className?.closeButton,
   );
+  const slideOutRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = slideOutRef.current;
+    if (!element) return;
+    if (isOpen) element.removeAttribute("inert");
+    else element.setAttribute("inert", "");
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
 
   return (
-    <div className={slideOutClasses} css={sx?.slideOut} data-testid="slide-out">
+    <div
+      ref={slideOutRef}
+      className={slideOutClasses}
+      css={sx?.slideOut}
+      data-testid="slide-out"
+    >
       <div className={overlayClasses} css={sx?.overlay} onClick={onClose} />
-      <div className={panelClasses} css={sx?.panel}>
+      <div
+        className={panelClasses}
+        css={sx?.panel}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Menu"
+      >
         <Button
           className={{ button: closeButtonClasses }}
           sx={{ button: sx?.closeButton }}

package/components/index.ts

@@ -4,6 +4,7 @@ export * from "./Block";
 export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Carousel";
+export * from "./Checkbox";
 export * from "./DropDown";
 export * from "./ContainerScalingText";
 export * from "./FormField";