@julseb-lib/react 1.1.25 → 1.1.26

package/dist/index.cjs

@@ -2686,6 +2686,7 @@ var init_Image = __esm({
       caption,
       borderRadius,
       fit,
+      alt,
       ...rest
     }) => {
       const Element = caption ? "figure" : "img";
@@ -2709,6 +2710,7 @@ var init_Image = __esm({
                     typeof caption === "object" && caption.imgClasses,
                     "image"
                   ),
+                  alt,
                   ...rest
                 }
               ),
@@ -5212,7 +5214,10 @@ var import_react49 = require("react");
 var import_bi = require("react-icons/bi");
 init_Text2();
 init_utils();
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime52 = (
+  // eslint-disable-next-line
+  require("react/jsx-runtime")
+);
 var InputContainer = ({
   className,
   element = "div",
@@ -5569,7 +5574,6 @@ var InputListItem = ({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "button",
     {
-      role: "button",
       onClick,
       className: clsx(
         "flex items-center gap-2 p-2 w-full text-left",
@@ -6244,42 +6248,48 @@ var InputImage = ({
       helperBottom,
       validation,
       className: containerClassName,
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-        "label",
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "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__ */ (0, import_jsx_runtime74.jsx)(EmptyContainer, { icons }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "img",
-              {
-                src: value,
-                alt: "Image input",
-                className: "w-full h-full object-cover input-image-image"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(HoverContainer, { isVisible: isHovered, icons }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "input",
-              {
-                type: "file",
-                id,
-                disabled,
-                className: "hidden input-image-input",
-                ...rest
-              }
-            )
-          ]
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+            "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__ */ (0, import_jsx_runtime74.jsx)(EmptyContainer, { icons }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                  "img",
+                  {
+                    src: value,
+                    alt: "Input",
+                    className: "w-full h-full object-cover input-image-image"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(HoverContainer, { isVisible: isHovered, icons }),
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                  "input",
+                  {
+                    type: "file",
+                    id,
+                    disabled,
+                    className: "sr-only input-image-input",
+                    accept: "image/*",
+                    ...rest
+                  }
+                )
+              ]
+            }
+          )
         }
       )
     }
@@ -66801,7 +66811,6 @@ var InputPhone = ({
                     "input-phone-country-button"
                   ),
                   onClick: () => setIsOpen(!isOpen),
-                  role: "button",
                   "aria-label": countryButtonAriaLabel,
                   children: [
                     country?.flag,
@@ -66872,7 +66881,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"
                       }
                     )
                   ]
@@ -67092,12 +67102,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__ */ (0, import_jsx_runtime320.jsx)(Text, { tag: "small", color: "gray", className: "min-max", children: min }),
             /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)("div", { className: "relative w-full slider-wrapper", children: [
@@ -67126,6 +67130,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
                 }
               )
@@ -67574,7 +67585,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
             );
@@ -68446,7 +68458,6 @@ var Modal = ({
             ),
             onClick: () => setIsOpen(false),
             "aria-label": labelClose,
-            role: "button",
             type: "button",
             children: closeIcon
           }
@@ -68507,7 +68518,6 @@ var DragListItem = ({
         /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
           "button",
           {
-            role: "button",
             "aria-label": iconLabel,
             className: clsx(
               "outline-none cursor-grab! active:cursor-grabbing",
@@ -68823,7 +68833,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"
             }
           ),
           " ",
@@ -69247,7 +69258,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__ */ (0, import_jsx_runtime354.jsx)(
         import_bi22.BiChevronLeft,
         {
@@ -69305,6 +69315,7 @@ var SlideshowPagination = ({
             setActive(i);
             handleClick(i);
           },
+          "aria-label": `Set image ${i + 1} active`,
           children: /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
             "img",
             {
@@ -69312,7 +69323,8 @@ var SlideshowPagination = ({
               className: clsx(
                 "w-full h-full object-cover",
                 "slideshow-thumbnail"
-              )
+              ),
+              alt: `Slideshow ${i + 1}`
             }
           )
         },
@@ -69321,7 +69333,6 @@ var SlideshowPagination = ({
         "button",
         {
           className: clsx(
-            "",
             type === "dots-outline" ? outlineColor[color ?? "primary"] : genBgColor2[color ?? "primary"],
             active === n && "active",
             type === "dots" && [
@@ -69336,7 +69347,8 @@ var SlideshowPagination = ({
           onClick: () => {
             setActive(n);
             handleClick(n);
-          }
+          },
+          "aria-label": `Set image ${n + 1} active`
         },
         n
       ))
@@ -69363,7 +69375,6 @@ var outlineColor = {
 };
 
 // src/lib/components/Slideshow/Slideshow.tsx
-init_Image2();
 init_utils();
 var import_jsx_runtime356 = require("react/jsx-runtime");
 var Slideshow = ({
@@ -69526,6 +69537,9 @@ var Slideshow = ({
               userSelect: "none",
               WebkitUserSelect: "none"
             },
+            "aria-label": "Slides wrapper",
+            role: "slider",
+            tabIndex: 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(
               "div",
               {
@@ -69540,27 +69554,21 @@ var Slideshow = ({
                   transitionDuration: `${options?.speed ?? 300}ms`
                 },
                 children: images ? images.map((img, i) => /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(
-                  import_react103.Suspense,
+                  LazyImage,
                   {
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("p", { children: "Loading..." }),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(
-                      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
-                      },
-                      (0, import_utils122.uuid)()
-                    )
+                    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"
                   },
                   (0, import_utils122.uuid)()
                 )) : childrenArray.map((child) => /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(
@@ -70651,7 +70659,7 @@ var Drawer = ({
               "[&.open]:opacity-100 [&.open]:visible",
               "overlay"
             ),
-            onClick: () => setIsOpen(false)
+            "aria-label": "Close drawer"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime371.jsxs)(
@@ -70799,7 +70807,8 @@ var Header = ({
   }, [hideOnScroll]);
   const burgerProps = {
     isOpen,
-    onClick: () => {
+    onClick: (e) => {
+      e.stopPropagation();
       if (isOpen) handleClose();
       else handleOpen();
     },
@@ -70838,7 +70847,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__ */ (0, import_jsx_runtime373.jsxs)(
@@ -70883,7 +70893,7 @@ var Header = ({
               isOpen ? "visible opacity-100" : "invisible opacity-0",
               "drawer-overlay"
             ),
-            onClick: handleClose
+            "aria-label": "Close drawer"
           }
         ),
         navDesktopPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime373.jsx)("nav", { ...navProps }),