athameui 0.0.13 → 0.0.14

package/dist/athameui.cjs

@@ -2201,6 +2201,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   onClick,
   onFocus,
   onKeyDown,
+  onMouseDown,
   onMouseEnter,
   onMouseLeave,
   ...other
@@ -2220,6 +2221,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
   const onBlurHandler = e => {
     onBlur?.(e);
   };
+  const onMouseDownHandler = e => {
+    onMouseDown?.(e);
+  };
   const onMouseEnterHandler = e => {
     onMouseEnter?.(e);
   };
@@ -2239,6 +2243,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     onBlur: onBlurHandler,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
     ...other,
     children: icon ? jsxs(Fragment, {
       children: [icon, !isIconOnly && children]
@@ -2285,6 +2290,8 @@ const AccordionItem = ({
         textPosition: headingTextPosition,
         onClick: onToggleHandler,
         disabled: disabled,
+        "aria-expanded": expanded,
+        "aria-controls": `accordion-content-${item.id}`,
         sx: sx?.accordionHeading,
         dark: true,
         children: jsx("div", {
@@ -2292,9 +2299,11 @@ const AccordionItem = ({
           children: item.heading
         })
       }), jsx("div", {
+        id: `accordion-content-${item.id}`,
         className: expansionClasses,
         style: {
-          height: expanded ? contentHeight : 0
+          height: expanded ? contentHeight : 0,
+          visibility: expanded ? "visible" : "hidden"
         },
         children: jsx("div", {
           ref: contentRef,
@@ -2353,20 +2362,18 @@ const Accordion = ({
     className: accordionClasses,
     css: sx?.accordion,
     children: [childrenFirst && children, jsx(List, {
-      children: items.map(item => jsx("div", {
-        children: CustomAccordionItem ? jsx(CustomAccordionItem, {
-          expanded: expandedItems.includes(item.id),
-          onToggle: expandToggle,
-          ...item
-        }) : jsx(AccordionItem, {
-          sx: sx,
-          item: item,
-          expanded: expandedItems.includes(item.id),
-          onToggle: expandToggle,
-          className: className?.accordionItem ? {
-            ...className.accordionItem
-          } : undefined
-        })
+      children: items.map(item => CustomAccordionItem ? jsx(CustomAccordionItem, {
+        expanded: expandedItems.includes(item.id),
+        onToggle: expandToggle,
+        ...item
+      }, item.id) : jsx(AccordionItem, {
+        sx: sx,
+        item: item,
+        expanded: expandedItems.includes(item.id),
+        onToggle: expandToggle,
+        className: className?.accordionItem ? {
+          ...className.accordionItem
+        } : undefined
       }, item.id))
     }), !childrenFirst && children]
   });
@@ -2386,6 +2393,8 @@ const Avatar = ({
   return jsx("div", {
     css: sx?.avatar,
     className: avatarClasses,
+    role: "img",
+    "aria-label": displayName,
     children: jsxs("div", {
       css: sx?.initials,
       className: initialsClasses,
@@ -2464,7 +2473,7 @@ const HugeiconsIcon = React.forwardRef(({ color = 'currentColor', size = 24, str
 });
 HugeiconsIcon.displayName = 'HugeiconsIcon';
 
-const Qt=[["path",{d:"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],un=[["path",{d:"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]];
+const Qt=[["path",{d:"M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],un=[["path",{d:"M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}]],uL=[["path",{d:"M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M14.9994 15L9 9M9.00064 15L15 9",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],ll=[["path",{d:"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M12 9.00014V16.0002M15.5 11.5C15.5 11.5 12.9223 8.00001 12 8C11.0777 7.99999 8.50003 11.5 8.50003 11.5",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",key:"1"}]],eI=[["path",{d:"M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"0"}],["path",{d:"M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"1"}],["path",{d:"M9.5 16.5L9.5 10.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"2"}],["path",{d:"M14.5 16.5L14.5 10.5",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.5",key:"3"}]];
 
 const ScrollToTopButton = ({
   className,
@@ -2502,7 +2511,8 @@ 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,
     children: jsx(HugeiconsIcon, {
       icon: ll,
@@ -2611,14 +2621,48 @@ const Carousel = ({
   className,
   emptyMessage = "Nothing here yet",
   label,
+  onRemove,
+  onReorder,
+  removeLabel = "Remove item",
   sx
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const [showLeftArrow, setShowLeftArrow] = React.useState(false);
   const [showRightArrow, setShowRightArrow] = React.useState(false);
+  const [dropIndex, setDropIndex] = React.useState(null);
   const carouselRef = React.useRef(null);
+  const dragIndex = React.useRef(null);
   const carouselClasses = cx("ath-carousel", className?.carousel);
-  const itemCount = React.Children.count(children);
+  const items = React.Children.toArray(children);
+  const itemCount = items.length;
+  const interactive = Boolean(onRemove || onReorder);
+  const finishDrag = () => {
+    dragIndex.current = null;
+    setDropIndex(null);
+  };
+  const handleDragStart = index => event => {
+    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 => event => {
+    if (!onReorder) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+    if (dropIndex !== index) setDropIndex(index);
+  };
+  const handleDrop = index => event => {
+    event.preventDefault();
+    const from = dragIndex.current;
+    finishDrag();
+    if (from == null || !onReorder) return;
+    onReorder(from, index);
+  };
   React.useLayoutEffect(() => {
     const el = carouselRef.current;
     if (!el) return;
@@ -2669,6 +2713,7 @@ const Carousel = ({
           button: "ath-carousel-arrow ath-carousel-left-arrow"
         },
         onClick: () => scrollByPage(-1),
+        "aria-label": label ? `Scroll ${label} backward` : "Scroll backward",
         icon: jsx(HugeiconsIcon, {
           icon: Qt,
           size: 36
@@ -2677,7 +2722,32 @@ const Carousel = ({
         className: carouselClasses,
         css: sx?.carousel,
         ref: carouselRef,
-        children: itemCount > 0 ? children : jsx("div", {
+        children: itemCount > 0 ? interactive ? items.map((child, index) => jsxs("div", {
+          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,
+          children: [onRemove && jsx(Button, {
+            variant: "ghost",
+            size: "small",
+            type: "button",
+            className: {
+              button: "ath-carousel-remove-button"
+            },
+            icon: jsx(HugeiconsIcon, {
+              icon: eI,
+              size: 16
+            }),
+            "aria-label": typeof removeLabel === "function" ? removeLabel(index) : removeLabel,
+            onMouseDown: event => event.stopPropagation(),
+            onClick: event => {
+              event.stopPropagation();
+              onRemove(index);
+            }
+          }), child]
+        }, /*#__PURE__*/React.isValidElement(child) ? child.key ?? index : index)) : children : jsx("div", {
           className: "ath-carousel-empty",
           children: emptyMessage
         })
@@ -2686,6 +2756,7 @@ const Carousel = ({
           button: "ath-carousel-arrow ath-carousel-right-arrow"
         },
         onClick: () => scrollByPage(1),
+        "aria-label": label ? `Scroll ${label} forward` : "Scroll forward",
         icon: jsx(HugeiconsIcon, {
           icon: un,
           size: 36
@@ -2695,6 +2766,36 @@ const Carousel = ({
   });
 };
 
+const Checkbox = ({
+  checked,
+  className,
+  dark = false,
+  disabled = false,
+  id,
+  label,
+  name,
+  sx,
+  onChange
+}) => {
+  return jsxs("label", {
+    className: cx("ath-checkbox", dark && "ath-checkbox-dark", disabled && "ath-checkbox-disabled", className),
+    css: sx,
+    htmlFor: id,
+    children: [jsx("input", {
+      id: id,
+      className: "ath-checkbox-input",
+      type: "checkbox",
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      onChange: event => onChange(event.target.checked)
+    }), label && jsx("span", {
+      className: "ath-checkbox-label",
+      children: label
+    })]
+  });
+};
+
 const Dropdown = ({
   children,
   className,
@@ -2732,6 +2833,7 @@ const FormTextInput = ({
   error,
   disabled,
   id,
+  inputMode,
   name,
   placeholder,
   readOnly,
@@ -2741,6 +2843,8 @@ const FormTextInput = ({
   type = "text",
   value,
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }) => {
@@ -2757,12 +2861,15 @@ 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
@@ -2779,6 +2886,7 @@ const FormField = ({
   error,
   helperText,
   id,
+  inputMode,
   label,
   labelPosition = "above",
   name,
@@ -2791,6 +2899,8 @@ const FormField = ({
   type = "text",
   value,
   onChange,
+  onBlur,
+  onFocus,
   onKeyDown,
   ...other
 }) => {
@@ -2835,14 +2945,20 @@ const FormField = ({
     labelPosition: labelPosition,
     dark: dark
   }) : null;
+  const describedBy = [error && name ? `${name}-error` : "", helperText && name ? `${name}-helper` : ""].filter(Boolean).join(" ") || undefined;
   const inputElement = type === "textarea" ? jsx("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,
@@ -2854,10 +2970,13 @@ const FormField = ({
     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: {
@@ -2868,6 +2987,8 @@ const FormField = ({
     placeholder: placeholder,
     size: size,
     id: id,
+    "aria-invalid": error ? true : undefined,
+    "aria-describedby": describedBy,
     ...other
   });
   const errorElement = error ? jsx("div", {
@@ -2979,6 +3100,9 @@ const Modal = ({
   trapFocus = true,
   initialFocusRef,
   finalFocusRef,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   sx,
   onClose,
   ...other
@@ -3067,6 +3191,10 @@ const Modal = ({
       css: sx?.modal,
       className: modalClasses,
       role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": ariaLabelledBy || titleId,
+      "aria-label": ariaLabelledBy || titleId ? undefined : ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       ...other,
       children: [(title || showCloseButton) && jsxs("div", {
         css: sx?.header,
@@ -3205,7 +3333,22 @@ const 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);
+  const slideOutRef = React.useRef(null);
+  React.useEffect(() => {
+    const element = slideOutRef.current;
+    if (!element) return;
+    if (isOpen) element.removeAttribute("inert");else element.setAttribute("inert", "");
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = event => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
   return jsxs("div", {
+    ref: slideOutRef,
     className: slideOutClasses,
     css: sx?.slideOut,
     "data-testid": "slide-out",
@@ -3216,6 +3359,9 @@ const SlideOut = ({
     }), jsxs("div", {
       className: panelClasses,
       css: sx?.panel,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Menu",
       children: [jsx(Button, {
         className: {
           button: closeButtonClasses
@@ -3433,6 +3579,7 @@ exports.Block = Block;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Carousel = Carousel;
+exports.Checkbox = Checkbox;
 exports.ContainerScalingText = ContainerScalingText;
 exports.Dropdown = Dropdown;
 exports.Footer = Footer;