@julseb-lib/react 1.1.25 → 1.1.26

package/dist/index.d.cts

@@ -180,7 +180,7 @@ declare const genFontWeight: Record<LibFontWeights, string>;
  *
  * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useClickOutside
  */
-declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: () => void, isActive?: boolean, delay?: number) => void;
+declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (e?: MouseEvent) => void, isActive?: boolean, delay?: number) => void;
 
 type CopiedValue = string | null;
 type CopyFn = (text: string) => Promise<boolean>;

package/dist/index.d.ts

@@ -180,7 +180,7 @@ declare const genFontWeight: Record<LibFontWeights, string>;
  *
  * @see https://doc-julseb-lib-react.vercel.app/helpers/hooks#useClickOutside
  */
-declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: () => void, isActive?: boolean, delay?: number) => void;
+declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (e?: MouseEvent) => void, isActive?: boolean, delay?: number) => void;
 
 type CopiedValue = string | null;
 type CopyFn = (text: string) => Promise<boolean>;

package/dist/index.js

@@ -51,7 +51,7 @@ import {
   libMarkdownEditorOptions,
   linkifyText,
   scrollToTop
-} from "./chunk-UHS3R3PM.js";
+} from "./chunk-PXJ4JXEH.js";
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -1425,7 +1425,7 @@ var genPosition = {
 // src/lib/components/LazyImage/LazyImage.tsx
 import { Suspense, lazy } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var Image2 = lazy(() => import("./Image-SKLDS4YE.js"));
+var Image2 = lazy(() => import("./Image-4MLJ7FPA.js"));
 var LazyImage = ({
   className,
   ref,
@@ -2317,7 +2317,8 @@ var InputContainer = ({
       ),
       ...rest,
       children: [
-        label && /* @__PURE__ */ jsxs10(
+        label && // eslint-disable-next-line
+        /* @__PURE__ */ jsxs10(
           "label",
           {
             htmlFor: id,
@@ -2630,7 +2631,6 @@ var InputListItem = ({
   return /* @__PURE__ */ jsxs11(
     "button",
     {
-      role: "button",
       onClick,
       className: clsx(
         "flex items-center gap-2 p-2 w-full text-left",
@@ -3294,42 +3294,48 @@ var InputImage = ({
       helperBottom,
       validation,
       className: containerClassName,
-      children: /* @__PURE__ */ jsxs20(
-        "label",
+      children: /* @__PURE__ */ jsx52(
+        "button",
         {
-          htmlFor: id,
-          ref,
-          className: clsx(
-            "relative flex justify-center items-center size-16 overflow-hidden text-primary-500 cursor-pointer",
-            validation?.status === false ? "bg-danger-50 text-danger-500" : "bg-gray-100",
-            disabled && "cursor-not-allowed text-gray-500",
-            genBorderRadius[borderRadius],
-            "input-image-container",
-            className
-          ),
           onMouseEnter: () => !disabled && setIsHovered(true),
           onMouseLeave: () => !disabled && setIsHovered(false),
-          children: [
-            value === "" || !value ? /* @__PURE__ */ jsx52(EmptyContainer, { icons }) : /* @__PURE__ */ jsx52(
-              "img",
-              {
-                src: value,
-                alt: "Image input",
-                className: "w-full h-full object-cover input-image-image"
-              }
-            ),
-            /* @__PURE__ */ jsx52(HoverContainer, { isVisible: isHovered, icons }),
-            /* @__PURE__ */ jsx52(
-              "input",
-              {
-                type: "file",
-                id,
-                disabled,
-                className: "hidden input-image-input",
-                ...rest
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsxs20(
+            "label",
+            {
+              htmlFor: id,
+              ref,
+              className: clsx(
+                "relative flex justify-center items-center size-16 overflow-hidden text-primary-500 cursor-pointer",
+                validation?.status === false ? "bg-danger-50 text-danger-500" : "bg-gray-100",
+                disabled && "cursor-not-allowed text-gray-500",
+                genBorderRadius[borderRadius],
+                "input-image-container",
+                className
+              ),
+              children: [
+                value === "" || !value ? /* @__PURE__ */ jsx52(EmptyContainer, { icons }) : /* @__PURE__ */ jsx52(
+                  "img",
+                  {
+                    src: value,
+                    alt: "Input",
+                    className: "w-full h-full object-cover input-image-image"
+                  }
+                ),
+                /* @__PURE__ */ jsx52(HoverContainer, { isVisible: isHovered, icons }),
+                /* @__PURE__ */ jsx52(
+                  "input",
+                  {
+                    type: "file",
+                    id,
+                    disabled,
+                    className: "sr-only input-image-input",
+                    accept: "image/*",
+                    ...rest
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
@@ -63847,7 +63853,6 @@ var InputPhone = ({
                     "input-phone-country-button"
                   ),
                   onClick: () => setIsOpen(!isOpen),
-                  role: "button",
                   "aria-label": countryButtonAriaLabel,
                   children: [
                     country?.flag,
@@ -63918,7 +63923,8 @@ var InputPhone = ({
                         className: "outline-none w-full input-phone-search",
                         placeholder: searchPlaceholder,
                         value: search,
-                        onChange: (e) => setSearch(e.target.value)
+                        onChange: (e) => setSearch(e.target.value),
+                        "aria-label": "Search country"
                       }
                     )
                   ]
@@ -64135,12 +64141,6 @@ var InputSlider = ({
             "flex items-center gap-2 w-full input-slider-container",
             className
           ),
-          onMouseEnter: () => {
-            if (showValue === "hover") setIsTooltipVisible(true);
-          },
-          onMouseLeave: () => {
-            if (showValue === "hover") setIsTooltipVisible(false);
-          },
           children: [
             showMinMax && /* @__PURE__ */ jsx298(Text, { tag: "small", color: "gray", className: "min-max", children: min }),
             /* @__PURE__ */ jsxs265("div", { className: "relative w-full slider-wrapper", children: [
@@ -64169,6 +64169,13 @@ var InputSlider = ({
                     ["--cursor-value"]: `${percentage}%`,
                     background: validation?.status === false ? `linear-gradient(to right, rgb(239 68 68) 0%, rgb(239 68 68) ${percentage}%, rgb(229 231 235) ${percentage}%, rgb(229 231 235) 100%)` : validation?.status === true ? `linear-gradient(to right, rgb(34 197 94) 0%, rgb(34 197 94) ${percentage}%, rgb(229 231 235) ${percentage}%, rgb(229 231 235) 100%)` : `linear-gradient(to right, rgb(59 130 246) 0%, rgb(59 130 246) ${percentage}%, rgb(229 231 235) ${percentage}%, rgb(229 231 235) 100%)`
                   },
+                  onMouseEnter: () => {
+                    if (showValue === "hover") setIsTooltipVisible(true);
+                  },
+                  onMouseLeave: () => {
+                    if (showValue === "hover")
+                      setIsTooltipVisible(false);
+                  },
                   ...inputProps
                 }
               )
@@ -64612,7 +64619,8 @@ var InputPin = ({
                   "border border-gray-200 size-12 rounded-lg text-center focus:border-primary-500",
                   validation?.status === false ? "focus:border-danger-500" : validation?.status === true && "focus:border-success-500",
                   "input-pin"
-                )
+                ),
+                "aria-label": `Input pin ${i + 1}`
               },
               i
             );
@@ -65465,7 +65473,6 @@ var Modal = ({
             ),
             onClick: () => setIsOpen(false),
             "aria-label": labelClose,
-            role: "button",
             type: "button",
             children: closeIcon
           }
@@ -65524,7 +65531,6 @@ var DragListItem = ({
         /* @__PURE__ */ jsx320(
           "button",
           {
-            role: "button",
             "aria-label": iconLabel,
             className: clsx(
               "outline-none cursor-grab! active:cursor-grabbing",
@@ -65835,7 +65841,8 @@ var Paginator = ({
                 "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [appearance:textfield]",
                 "paginator-input"
               ),
-              size: currentPage.toString().length + 1
+              size: currentPage.toString().length + 1,
+              "aria-label": "Change page"
             }
           ),
           " ",
@@ -66220,8 +66227,7 @@ import {
   Children as Children3,
   useState as useState25,
   useEffect as useEffect14,
-  useRef as useRef15,
-  Suspense as Suspense2
+  useRef as useRef15
 } from "react";
 import { uuid as uuid10 } from "@julseb-lib/utils";
 
@@ -66255,7 +66261,6 @@ var SlideshowButton = ({
       onClick,
       "aria-label": position === "left" ? controls?.labelPrev ?? "Previous" : controls?.labelNext ?? "Next",
       type: "button",
-      role: "button",
       children: position === "left" ? controls?.icons?.prev ?? /* @__PURE__ */ jsx332(
         BiChevronLeft,
         {
@@ -66312,6 +66317,7 @@ var SlideshowPagination = ({
             setActive(i);
             handleClick(i);
           },
+          "aria-label": `Set image ${i + 1} active`,
           children: /* @__PURE__ */ jsx333(
             "img",
             {
@@ -66319,7 +66325,8 @@ var SlideshowPagination = ({
               className: clsx(
                 "w-full h-full object-cover",
                 "slideshow-thumbnail"
-              )
+              ),
+              alt: `Slideshow ${i + 1}`
             }
           )
         },
@@ -66328,7 +66335,6 @@ var SlideshowPagination = ({
         "button",
         {
           className: clsx(
-            "",
             type === "dots-outline" ? outlineColor[color ?? "primary"] : genBgColor2[color ?? "primary"],
             active === n && "active",
             type === "dots" && [
@@ -66343,7 +66349,8 @@ var SlideshowPagination = ({
           onClick: () => {
             setActive(n);
             handleClick(n);
-          }
+          },
+          "aria-label": `Set image ${n + 1} active`
         },
         n
       ))
@@ -66531,6 +66538,9 @@ var Slideshow = ({
               userSelect: "none",
               WebkitUserSelect: "none"
             },
+            "aria-label": "Slides wrapper",
+            role: "slider",
+            tabIndex: 0,
             children: /* @__PURE__ */ jsx334(
               "div",
               {
@@ -66545,27 +66555,21 @@ var Slideshow = ({
                   transitionDuration: `${options?.speed ?? 300}ms`
                 },
                 children: images ? images.map((img, i) => /* @__PURE__ */ jsx334(
-                  Suspense2,
+                  LazyImage,
                   {
-                    fallback: /* @__PURE__ */ jsx334("p", { children: "Loading..." }),
-                    children: /* @__PURE__ */ jsx334(
-                      Image,
-                      {
-                        src: img,
-                        alt: `Slideshow image ${i + 1}`,
-                        className: clsx(
-                          "size-full shrink-0",
-                          genObjectFit[imgFit],
-                          "slideshow-image"
-                        ),
-                        width: "100%",
-                        height: "100%",
-                        fit: "cover",
-                        borderRadius,
-                        draggable: false
-                      },
-                      uuid10()
-                    )
+                    src: img,
+                    alt: `Slideshow image ${i + 1}`,
+                    className: clsx(
+                      "size-full shrink-0",
+                      genObjectFit[imgFit],
+                      "slideshow-image"
+                    ),
+                    width: "100%",
+                    height: "100%",
+                    borderRadius,
+                    draggable: false,
+                    skeletonClasses: "size-full",
+                    skeletonAnimation: "shine"
                   },
                   uuid10()
                 )) : childrenArray.map((child) => /* @__PURE__ */ jsx334(
@@ -67650,7 +67654,7 @@ var Drawer = ({
               "[&.open]:opacity-100 [&.open]:visible",
               "overlay"
             ),
-            onClick: () => setIsOpen(false)
+            "aria-label": "Close drawer"
           }
         ),
         /* @__PURE__ */ jsxs290(
@@ -67796,7 +67800,8 @@ var Header = ({
   }, [hideOnScroll]);
   const burgerProps = {
     isOpen,
-    onClick: () => {
+    onClick: (e) => {
+      e.stopPropagation();
       if (isOpen) handleClose();
       else handleOpen();
     },
@@ -67835,7 +67840,8 @@ var Header = ({
     ref: el
   };
   useKeyPress("Escape", handleClose);
-  useClickOutside(el, () => {
+  useClickOutside(el, (e) => {
+    if (e.target?.closest(".header-burger")) return;
     if (isOpen) handleClose();
   });
   return /* @__PURE__ */ jsxs291(
@@ -67880,7 +67886,7 @@ var Header = ({
               isOpen ? "visible opacity-100" : "invisible opacity-0",
               "drawer-overlay"
             ),
-            onClick: handleClose
+            "aria-label": "Close drawer"
           }
         ),
         navDesktopPosition === "right" && /* @__PURE__ */ jsx351("nav", { ...navProps }),