@harshit-wander/component-lib 1.0.0 → 1.1.0

package/dist/index.js

@@ -276,33 +276,50 @@ EventBanner.displayName = "EventBanner";
 var frameClass2 = "block w-full h-[300px] overflow-hidden rounded-md no-underline text-inherit focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2";
 var videoClass = "block w-full h-full object-cover";
 var EventVideoBanner = forwardRef(
-  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsx("a", { href, className: frameClass2, children: /* @__PURE__ */ jsx(
-    "video",
-    {
-      src: videoUrl,
-      poster: posterUrl,
-      "aria-label": alt,
-      muted: true,
-      autoPlay: true,
-      loop: true,
-      playsInline: true,
-      preload: "metadata",
-      className: videoClass
-    }
-  ) }) : /* @__PURE__ */ jsx("div", { className: frameClass2, children: /* @__PURE__ */ jsx(
-    "video",
-    {
-      src: videoUrl,
-      poster: posterUrl,
-      "aria-label": alt,
-      muted: true,
-      autoPlay: true,
-      loop: true,
-      playsInline: true,
-      preload: "metadata",
-      className: videoClass
-    }
-  ) }) })
+  ({ posterUrl, videoUrl, alt, href, className, ...rest }, ref) => {
+    const videoRef = useRef(null);
+    useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !videoUrl) return;
+      if (!videoUrl.includes(".m3u8")) {
+        video.src = videoUrl;
+        return;
+      }
+      if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = videoUrl;
+        return;
+      }
+      let cancelled = false;
+      import('hls.js').then(({ default: Hls }) => {
+        if (cancelled || !Hls.isSupported()) return;
+        const hls = new Hls({ autoStartLoad: true, startLevel: -1 });
+        hls.loadSource(videoUrl);
+        hls.attachMedia(video);
+        video._hls = hls;
+      });
+      return () => {
+        cancelled = true;
+        const stored = video._hls;
+        stored?.destroy();
+      };
+    }, [videoUrl]);
+    const videoEl = /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        src: videoUrl?.includes(".m3u8") ? void 0 : videoUrl,
+        poster: posterUrl,
+        "aria-label": alt,
+        muted: true,
+        autoPlay: true,
+        loop: true,
+        playsInline: true,
+        preload: "metadata",
+        className: videoClass
+      }
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("shrink-0 w-full snap-start", className), ...rest, children: href ? /* @__PURE__ */ jsx("a", { href, className: frameClass2, children: videoEl }) : /* @__PURE__ */ jsx("div", { className: frameClass2, children: videoEl }) });
+  }
 );
 EventVideoBanner.displayName = "EventVideoBanner";
 var ExpandableValueCard = forwardRef(
@@ -1319,7 +1336,35 @@ var CategoryNavbar = forwardRef(
                   onMouseEnter: () => openCategory(index),
                   onMouseLeave: scheduleCloseCategory,
                   children: [
-                    /* @__PURE__ */ jsxs(
+                    category.href ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs(Link, { href: category.href, className: categoryTriggerClass, children: [
+                        /* @__PURE__ */ jsx("span", { children: category.label }),
+                        category.badge ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center ml-xs", children: category.badge }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-expanded": isOpen,
+                          "aria-controls": itemPanelId,
+                          "aria-label": `Open ${category.label} menu`,
+                          onClick: () => openCategory(index),
+                          onFocus: () => openCategory(index),
+                          className: "inline-flex items-center justify-center p-0 bg-transparent border-none text-inherit cursor-pointer focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 focus-visible:rounded-sm",
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "aria-hidden": "true",
+                              className: cn(
+                                "inline-flex items-center justify-center w-4 h-4 transition-transform duration-200 ease-in",
+                                isOpen ? "rotate-180" : "rotate-0"
+                              ),
+                              children: /* @__PURE__ */ jsx(ChevronSvg2, {})
+                            }
+                          )
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs(
                       "button",
                       {
                         type: "button",
@@ -1429,7 +1474,7 @@ var ContactSection = forwardRef(
       ref,
       className: cn(
         "flex w-full justify-center",
-        "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:px-[80px] lg:bg-primary lg:rounded-lg lg:shadow-card",
+        "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:bg-primary lg:rounded-lg lg:shadow-card",
         className
       ),
       ...rest,
@@ -1468,39 +1513,31 @@ var CtaBanner = forwardRef(
       }
       cta.onClick?.();
     };
-    return /* @__PURE__ */ jsx(
-      "section",
+    return /* @__PURE__ */ jsx("section", { ref, className: cn("flex justify-center bg-surface", className), ...rest, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        ref,
-        className: cn("flex justify-center px-[80px] bg-surface max-md:px-md", className),
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
-            style: {
-              backgroundColor: backgroundColor ?? "var(--color-primary)",
-              backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
-            },
-            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
-                /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
-                subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleCtaClick,
-                  className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
-                  children: cta.label
-                }
-              )
-            ] })
-          }
-        )
+        className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
+        style: {
+          backgroundColor: backgroundColor ?? "var(--color-primary)",
+          backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
+            /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCtaClick,
+              className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
+              children: cta.label
+            }
+          )
+        ] })
       }
-    );
+    ) });
   }
 );
 CtaBanner.displayName = "CtaBanner";
@@ -1509,39 +1546,31 @@ var DestinationsSection = forwardRef(
     const half = Math.ceil(destinations.length / 2);
     const firstRow = destinations.slice(0, half);
     const secondRow = destinations.slice(half);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        className: cn("flex flex-col gap-lg px-md bg-surface", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsx(
-              DestinationCard,
-              {
-                image: destination.image,
-                alt: destination.alt,
-                label: destination.label,
-                href: destination.href
-              },
-              `r1-${destination.label}`
-            )) }),
-            secondRow.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsx(
-              DestinationCard,
-              {
-                image: destination.image,
-                alt: destination.alt,
-                label: destination.label,
-                href: destination.href
-              },
-              `r2-${destination.label}`
-            )) }) : null
-          ] })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
+      /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsx(
+          DestinationCard,
+          {
+            image: destination.image,
+            alt: destination.alt,
+            label: destination.label,
+            href: destination.href
+          },
+          `r1-${destination.label}`
+        )) }),
+        secondRow.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsx(
+          DestinationCard,
+          {
+            image: destination.image,
+            alt: destination.alt,
+            label: destination.label,
+            href: destination.href
+          },
+          `r2-${destination.label}`
+        )) }) : null
+      ] })
+    ] });
   }
 );
 DestinationsSection.displayName = "DestinationsSection";
@@ -1625,10 +1654,7 @@ var EventCarousel = forwardRef(
       "section",
       {
         ref,
-        className: cn(
-          "relative flex flex-col items-center gap-md px-[80px] bg-surface max-md:px-md",
-          className
-        ),
+        className: cn("relative flex flex-col items-center gap-md bg-surface", className),
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
@@ -1684,7 +1710,7 @@ var EventCarousel = forwardRef(
               onClick: scrollPrev,
               disabled: !canPrev,
               "aria-label": variant === "video" ? "Previous video" : "Previous event",
-              className: cn(arrowBase, "left-[60px]"),
+              className: cn(arrowBase, "left-2"),
               children: /* @__PURE__ */ jsx(ChevronLeft, {})
             }
           ),
@@ -1695,7 +1721,7 @@ var EventCarousel = forwardRef(
               onClick: scrollNext,
               disabled: !canNext,
               "aria-label": variant === "video" ? "Next video" : "Next event",
-              className: cn(arrowBase, "right-[60px]"),
+              className: cn(arrowBase, "right-2"),
               children: /* @__PURE__ */ jsx(ChevronRight, {})
             }
           )
@@ -1706,7 +1732,7 @@ var EventCarousel = forwardRef(
 );
 EventCarousel.displayName = "EventCarousel";
 var ExploreSection = forwardRef(
-  ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg px-md bg-surface", className), ...rest, children: [
+  ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
     /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
     /* @__PURE__ */ jsx("div", { className: "flex gap-md overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => /* @__PURE__ */ jsx(
       ExploreCard,
@@ -1974,10 +2000,7 @@ var GallerySection = forwardRef(
       "section",
       {
         ref,
-        className: cn(
-          "relative flex flex-col items-center gap-lg px-[80px] bg-surface max-md:px-md",
-          className
-        ),
+        className: cn("relative flex flex-col items-center gap-lg bg-surface", className),
         ...rest,
         children: [
           /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading, align: "center" }),
@@ -2394,10 +2417,7 @@ var PackagesCarousel = forwardRef(
       "section",
       {
         ref,
-        className: cn(
-          "flex flex-col items-center gap-xl px-[80px] bg-surface max-md:px-md",
-          className
-        ),
+        className: cn("flex flex-col items-center gap-xl bg-surface", className),
         ...rest,
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl w-full", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-lg", children: [
@@ -2579,10 +2599,7 @@ var TestimonialsCarousel = forwardRef(
       "section",
       {
         ref,
-        className: cn(
-          "flex flex-col items-center gap-[28px] px-[80px] bg-surface max-md:px-md",
-          className
-        ),
+        className: cn("flex flex-col items-center gap-[28px] bg-surface", className),
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
@@ -2707,92 +2724,84 @@ var TripsCategorySection = forwardRef(
       cta.onClick?.();
     };
     const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        className: cn("relative flex flex-col px-[80px] bg-surface max-md:px-md", className),
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>img]:w-full [&>img]:h-full [&>img]:object-cover [&>video]:w-full [&>video]:h-full [&>video]:object-cover", children: /* @__PURE__ */ jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
-              /* @__PURE__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
-              /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleCtaClick,
-                  className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
-                  children: cta.label
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: scrollPrev,
-                disabled: !canPrev,
-                "aria-label": "Previous trips",
-                className: cn(arrowBase4, "left-2"),
-                children: /* @__PURE__ */ jsx(ChevronLeft5, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: trackRef,
-                className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-                children: trips.map((trip) => /* @__PURE__ */ jsx(
-                  TripCategoryCard,
-                  {
-                    image: trip.image,
-                    alt: trip.alt,
-                    destination: trip.destination,
-                    startingPrice: trip.startingPrice,
-                    href: trip.href
-                  },
-                  `${trip.image}|${trip.destination}`
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("relative flex flex-col bg-surface", className), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>img]:w-full [&>img]:h-full [&>img]:object-cover [&>video]:w-full [&>video]:h-full [&>video]:object-cover", children: /* @__PURE__ */ jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, poster, src: videoSrc }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-center gap-lg p-[44px] text-on-image [text-shadow:0px_6px_24px_rgba(0,0,0,0.16)]", children: [
+          /* @__PURE__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCtaClick,
+              className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
+              children: cta.label
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: scrollPrev,
+            disabled: !canPrev,
+            "aria-label": "Previous trips",
+            className: cn(arrowBase4, "left-2"),
+            children: /* @__PURE__ */ jsx(ChevronLeft5, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: trackRef,
+            className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            children: trips.map((trip) => /* @__PURE__ */ jsx(
+              TripCategoryCard,
               {
-                type: "button",
-                onClick: scrollNext,
-                disabled: !canNext,
-                "aria-label": "Next trips",
-                className: cn(arrowBase4, "right-2"),
-                children: /* @__PURE__ */ jsx(ChevronRight5, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
+                image: trip.image,
+                alt: trip.alt,
+                destination: trip.destination,
+                startingPrice: trip.startingPrice,
+                href: trip.href
+              },
+              `${trip.image}|${trip.destination}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: scrollNext,
+            disabled: !canNext,
+            "aria-label": "Next trips",
+            className: cn(arrowBase4, "right-2"),
+            children: /* @__PURE__ */ jsx(ChevronRight5, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuenow": Math.round(scrollProgress * 100),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": "Scroll position",
+            className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
+            children: /* @__PURE__ */ jsx(
+              "span",
               {
-                role: "progressbar",
-                "aria-valuenow": Math.round(scrollProgress * 100),
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                "aria-label": "Scroll position",
-                className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
-                    style: { width: `${progressWidth}px` }
-                  }
-                )
+                className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
+                style: { width: `${progressWidth}px` }
               }
             )
-          ] })
-        ]
-      }
-    );
+          }
+        )
+      ] })
+    ] });
   }
 );
 TripsCategorySection.displayName = "TripsCategorySection";
@@ -2848,11 +2857,9 @@ var WhyChooseSection = forwardRef(
         ref,
         className: cn(
           // Mobile (default)
-          "flex flex-col items-center gap-lg px-md bg-surface",
+          "flex flex-col items-center gap-lg bg-surface",
           // Tablet
-          "md:gap-xl md:px-lg",
-          // Desktop
-          "lg:px-[80px]",
+          "md:gap-xl",
           className
         ),
         ...rest,