@harshit-wander/component-lib 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1319,7 +1319,35 @@ var CategoryNavbar = forwardRef(
1319
1319
  onMouseEnter: () => openCategory(index),
1320
1320
  onMouseLeave: scheduleCloseCategory,
1321
1321
  children: [
1322
- /* @__PURE__ */ jsxs(
1322
+ category.href ? /* @__PURE__ */ jsxs(Fragment, { children: [
1323
+ /* @__PURE__ */ jsxs(Link, { href: category.href, className: categoryTriggerClass, children: [
1324
+ /* @__PURE__ */ jsx("span", { children: category.label }),
1325
+ category.badge ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center ml-xs", children: category.badge }) : null
1326
+ ] }),
1327
+ /* @__PURE__ */ jsx(
1328
+ "button",
1329
+ {
1330
+ type: "button",
1331
+ "aria-expanded": isOpen,
1332
+ "aria-controls": itemPanelId,
1333
+ "aria-label": `Open ${category.label} menu`,
1334
+ onClick: () => openCategory(index),
1335
+ onFocus: () => openCategory(index),
1336
+ 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",
1337
+ children: /* @__PURE__ */ jsx(
1338
+ "span",
1339
+ {
1340
+ "aria-hidden": "true",
1341
+ className: cn(
1342
+ "inline-flex items-center justify-center w-4 h-4 transition-transform duration-200 ease-in",
1343
+ isOpen ? "rotate-180" : "rotate-0"
1344
+ ),
1345
+ children: /* @__PURE__ */ jsx(ChevronSvg2, {})
1346
+ }
1347
+ )
1348
+ }
1349
+ )
1350
+ ] }) : /* @__PURE__ */ jsxs(
1323
1351
  "button",
1324
1352
  {
1325
1353
  type: "button",
@@ -1429,7 +1457,7 @@ var ContactSection = forwardRef(
1429
1457
  ref,
1430
1458
  className: cn(
1431
1459
  "flex w-full justify-center",
1432
- "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:px-[80px] lg:bg-primary lg:rounded-lg lg:shadow-card",
1460
+ "lg:items-center lg:justify-between lg:gap-xl lg:py-xl lg:bg-primary lg:rounded-lg lg:shadow-card",
1433
1461
  className
1434
1462
  ),
1435
1463
  ...rest,
@@ -1468,39 +1496,31 @@ var CtaBanner = forwardRef(
1468
1496
  }
1469
1497
  cta.onClick?.();
1470
1498
  };
1471
- return /* @__PURE__ */ jsx(
1472
- "section",
1499
+ return /* @__PURE__ */ jsx("section", { ref, className: cn("flex justify-center bg-surface", className), ...rest, children: /* @__PURE__ */ jsx(
1500
+ "div",
1473
1501
  {
1474
- ref,
1475
- className: cn("flex justify-center px-[80px] bg-surface max-md:px-md", className),
1476
- ...rest,
1477
- children: /* @__PURE__ */ jsx(
1478
- "div",
1479
- {
1480
- className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
1481
- style: {
1482
- backgroundColor: backgroundColor ?? "var(--color-primary)",
1483
- backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
1484
- },
1485
- children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
1486
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
1487
- /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
1488
- subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
1489
- ] }),
1490
- /* @__PURE__ */ jsx(
1491
- "button",
1492
- {
1493
- type: "button",
1494
- onClick: handleCtaClick,
1495
- 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",
1496
- children: cta.label
1497
- }
1498
- )
1499
- ] })
1500
- }
1501
- )
1502
+ className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
1503
+ style: {
1504
+ backgroundColor: backgroundColor ?? "var(--color-primary)",
1505
+ backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
1506
+ },
1507
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
1508
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
1509
+ /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
1510
+ subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
1511
+ ] }),
1512
+ /* @__PURE__ */ jsx(
1513
+ "button",
1514
+ {
1515
+ type: "button",
1516
+ onClick: handleCtaClick,
1517
+ 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",
1518
+ children: cta.label
1519
+ }
1520
+ )
1521
+ ] })
1502
1522
  }
1503
- );
1523
+ ) });
1504
1524
  }
1505
1525
  );
1506
1526
  CtaBanner.displayName = "CtaBanner";
@@ -1509,39 +1529,31 @@ var DestinationsSection = forwardRef(
1509
1529
  const half = Math.ceil(destinations.length / 2);
1510
1530
  const firstRow = destinations.slice(0, half);
1511
1531
  const secondRow = destinations.slice(half);
1512
- return /* @__PURE__ */ jsxs(
1513
- "section",
1514
- {
1515
- ref,
1516
- className: cn("flex flex-col gap-lg px-md bg-surface", className),
1517
- ...rest,
1518
- children: [
1519
- /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1520
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
1521
- /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsx(
1522
- DestinationCard,
1523
- {
1524
- image: destination.image,
1525
- alt: destination.alt,
1526
- label: destination.label,
1527
- href: destination.href
1528
- },
1529
- `r1-${destination.label}`
1530
- )) }),
1531
- secondRow.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsx(
1532
- DestinationCard,
1533
- {
1534
- image: destination.image,
1535
- alt: destination.alt,
1536
- label: destination.label,
1537
- href: destination.href
1538
- },
1539
- `r2-${destination.label}`
1540
- )) }) : null
1541
- ] })
1542
- ]
1543
- }
1544
- );
1532
+ return /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
1533
+ /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1534
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-md overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
1535
+ /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: firstRow.map((destination) => /* @__PURE__ */ jsx(
1536
+ DestinationCard,
1537
+ {
1538
+ image: destination.image,
1539
+ alt: destination.alt,
1540
+ label: destination.label,
1541
+ href: destination.href
1542
+ },
1543
+ `r1-${destination.label}`
1544
+ )) }),
1545
+ secondRow.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-md w-max", children: secondRow.map((destination) => /* @__PURE__ */ jsx(
1546
+ DestinationCard,
1547
+ {
1548
+ image: destination.image,
1549
+ alt: destination.alt,
1550
+ label: destination.label,
1551
+ href: destination.href
1552
+ },
1553
+ `r2-${destination.label}`
1554
+ )) }) : null
1555
+ ] })
1556
+ ] });
1545
1557
  }
1546
1558
  );
1547
1559
  DestinationsSection.displayName = "DestinationsSection";
@@ -1625,10 +1637,7 @@ var EventCarousel = forwardRef(
1625
1637
  "section",
1626
1638
  {
1627
1639
  ref,
1628
- className: cn(
1629
- "relative flex flex-col items-center gap-md px-[80px] bg-surface max-md:px-md",
1630
- className
1631
- ),
1640
+ className: cn("relative flex flex-col items-center gap-md bg-surface", className),
1632
1641
  ...rest,
1633
1642
  children: [
1634
1643
  /* @__PURE__ */ jsx(
@@ -1684,7 +1693,7 @@ var EventCarousel = forwardRef(
1684
1693
  onClick: scrollPrev,
1685
1694
  disabled: !canPrev,
1686
1695
  "aria-label": variant === "video" ? "Previous video" : "Previous event",
1687
- className: cn(arrowBase, "left-[60px]"),
1696
+ className: cn(arrowBase, "left-2"),
1688
1697
  children: /* @__PURE__ */ jsx(ChevronLeft, {})
1689
1698
  }
1690
1699
  ),
@@ -1695,7 +1704,7 @@ var EventCarousel = forwardRef(
1695
1704
  onClick: scrollNext,
1696
1705
  disabled: !canNext,
1697
1706
  "aria-label": variant === "video" ? "Next video" : "Next event",
1698
- className: cn(arrowBase, "right-[60px]"),
1707
+ className: cn(arrowBase, "right-2"),
1699
1708
  children: /* @__PURE__ */ jsx(ChevronRight, {})
1700
1709
  }
1701
1710
  )
@@ -1706,7 +1715,7 @@ var EventCarousel = forwardRef(
1706
1715
  );
1707
1716
  EventCarousel.displayName = "EventCarousel";
1708
1717
  var ExploreSection = forwardRef(
1709
- ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg px-md bg-surface", className), ...rest, children: [
1718
+ ({ heading: heading2, items, className, ...rest }, ref) => /* @__PURE__ */ jsxs("section", { ref, className: cn("flex flex-col gap-lg bg-surface", className), ...rest, children: [
1710
1719
  /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-semibold leading-heading text-secondary", children: heading2 }),
1711
1720
  /* @__PURE__ */ jsx("div", { className: "flex gap-md overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => /* @__PURE__ */ jsx(
1712
1721
  ExploreCard,
@@ -1974,10 +1983,7 @@ var GallerySection = forwardRef(
1974
1983
  "section",
1975
1984
  {
1976
1985
  ref,
1977
- className: cn(
1978
- "relative flex flex-col items-center gap-lg px-[80px] bg-surface max-md:px-md",
1979
- className
1980
- ),
1986
+ className: cn("relative flex flex-col items-center gap-lg bg-surface", className),
1981
1987
  ...rest,
1982
1988
  children: [
1983
1989
  /* @__PURE__ */ jsx(SectionHeader, { heading: heading2, subheading, align: "center" }),
@@ -2394,10 +2400,7 @@ var PackagesCarousel = forwardRef(
2394
2400
  "section",
2395
2401
  {
2396
2402
  ref,
2397
- className: cn(
2398
- "flex flex-col items-center gap-xl px-[80px] bg-surface max-md:px-md",
2399
- className
2400
- ),
2403
+ className: cn("flex flex-col items-center gap-xl bg-surface", className),
2401
2404
  ...rest,
2402
2405
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xl w-full", children: [
2403
2406
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-lg", children: [
@@ -2579,10 +2582,7 @@ var TestimonialsCarousel = forwardRef(
2579
2582
  "section",
2580
2583
  {
2581
2584
  ref,
2582
- className: cn(
2583
- "flex flex-col items-center gap-[28px] px-[80px] bg-surface max-md:px-md",
2584
- className
2585
- ),
2585
+ className: cn("flex flex-col items-center gap-[28px] bg-surface", className),
2586
2586
  ...rest,
2587
2587
  children: [
2588
2588
  /* @__PURE__ */ jsx(
@@ -2707,92 +2707,84 @@ var TripsCategorySection = forwardRef(
2707
2707
  cta.onClick?.();
2708
2708
  };
2709
2709
  const progressWidth = Math.min(33 + scrollProgress * (120 - 33), 120);
2710
- return /* @__PURE__ */ jsxs(
2711
- "section",
2712
- {
2713
- ref,
2714
- className: cn("relative flex flex-col px-[80px] bg-surface max-md:px-md", className),
2715
- ...rest,
2716
- children: [
2717
- /* @__PURE__ */ jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
2718
- /* @__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 }) }),
2719
- /* @__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: [
2720
- /* @__PURE__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
2721
- /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
2722
- /* @__PURE__ */ jsx(
2723
- "button",
2724
- {
2725
- type: "button",
2726
- onClick: handleCtaClick,
2727
- 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",
2728
- children: cta.label
2729
- }
2730
- )
2731
- ] })
2732
- ] }),
2733
- /* @__PURE__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
2734
- /* @__PURE__ */ jsx(
2735
- "button",
2736
- {
2737
- type: "button",
2738
- onClick: scrollPrev,
2739
- disabled: !canPrev,
2740
- "aria-label": "Previous trips",
2741
- className: cn(arrowBase4, "left-2"),
2742
- children: /* @__PURE__ */ jsx(ChevronLeft5, {})
2743
- }
2744
- ),
2745
- /* @__PURE__ */ jsx(
2746
- "div",
2747
- {
2748
- ref: trackRef,
2749
- className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2750
- children: trips.map((trip) => /* @__PURE__ */ jsx(
2751
- TripCategoryCard,
2752
- {
2753
- image: trip.image,
2754
- alt: trip.alt,
2755
- destination: trip.destination,
2756
- startingPrice: trip.startingPrice,
2757
- href: trip.href
2758
- },
2759
- `${trip.image}|${trip.destination}`
2760
- ))
2761
- }
2762
- ),
2763
- /* @__PURE__ */ jsx(
2764
- "button",
2710
+ return /* @__PURE__ */ jsxs("section", { ref, className: cn("relative flex flex-col bg-surface", className), ...rest, children: [
2711
+ /* @__PURE__ */ jsxs("div", { className: "relative h-[318px] rounded-lg overflow-hidden max-md:h-[260px]", children: [
2712
+ /* @__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 }) }),
2713
+ /* @__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: [
2714
+ /* @__PURE__ */ jsx("h2", { className: "m-0 text-hero-title max-w-[436px]", children: title }),
2715
+ /* @__PURE__ */ jsx("p", { className: "m-0 text-xs font-bold leading-5", children: description2 }),
2716
+ /* @__PURE__ */ jsx(
2717
+ "button",
2718
+ {
2719
+ type: "button",
2720
+ onClick: handleCtaClick,
2721
+ 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",
2722
+ children: cta.label
2723
+ }
2724
+ )
2725
+ ] })
2726
+ ] }),
2727
+ /* @__PURE__ */ jsxs("div", { className: "relative -mt-[68px] py-sm px-[25px]", children: [
2728
+ /* @__PURE__ */ jsx(
2729
+ "button",
2730
+ {
2731
+ type: "button",
2732
+ onClick: scrollPrev,
2733
+ disabled: !canPrev,
2734
+ "aria-label": "Previous trips",
2735
+ className: cn(arrowBase4, "left-2"),
2736
+ children: /* @__PURE__ */ jsx(ChevronLeft5, {})
2737
+ }
2738
+ ),
2739
+ /* @__PURE__ */ jsx(
2740
+ "div",
2741
+ {
2742
+ ref: trackRef,
2743
+ className: "flex gap-sm overflow-x-auto snap-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
2744
+ children: trips.map((trip) => /* @__PURE__ */ jsx(
2745
+ TripCategoryCard,
2765
2746
  {
2766
- type: "button",
2767
- onClick: scrollNext,
2768
- disabled: !canNext,
2769
- "aria-label": "Next trips",
2770
- className: cn(arrowBase4, "right-2"),
2771
- children: /* @__PURE__ */ jsx(ChevronRight5, {})
2772
- }
2773
- ),
2774
- /* @__PURE__ */ jsx(
2775
- "div",
2747
+ image: trip.image,
2748
+ alt: trip.alt,
2749
+ destination: trip.destination,
2750
+ startingPrice: trip.startingPrice,
2751
+ href: trip.href
2752
+ },
2753
+ `${trip.image}|${trip.destination}`
2754
+ ))
2755
+ }
2756
+ ),
2757
+ /* @__PURE__ */ jsx(
2758
+ "button",
2759
+ {
2760
+ type: "button",
2761
+ onClick: scrollNext,
2762
+ disabled: !canNext,
2763
+ "aria-label": "Next trips",
2764
+ className: cn(arrowBase4, "right-2"),
2765
+ children: /* @__PURE__ */ jsx(ChevronRight5, {})
2766
+ }
2767
+ ),
2768
+ /* @__PURE__ */ jsx(
2769
+ "div",
2770
+ {
2771
+ role: "progressbar",
2772
+ "aria-valuenow": Math.round(scrollProgress * 100),
2773
+ "aria-valuemin": 0,
2774
+ "aria-valuemax": 100,
2775
+ "aria-label": "Scroll position",
2776
+ className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
2777
+ children: /* @__PURE__ */ jsx(
2778
+ "span",
2776
2779
  {
2777
- role: "progressbar",
2778
- "aria-valuenow": Math.round(scrollProgress * 100),
2779
- "aria-valuemin": 0,
2780
- "aria-valuemax": 100,
2781
- "aria-label": "Scroll position",
2782
- className: "relative w-[120px] h-[6px] mt-md mx-auto bg-track rounded-[32px] overflow-hidden",
2783
- children: /* @__PURE__ */ jsx(
2784
- "span",
2785
- {
2786
- className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
2787
- style: { width: `${progressWidth}px` }
2788
- }
2789
- )
2780
+ className: "absolute top-0 left-0 h-full bg-primary rounded-[32px] transition-[width] duration-200 ease-in",
2781
+ style: { width: `${progressWidth}px` }
2790
2782
  }
2791
2783
  )
2792
- ] })
2793
- ]
2794
- }
2795
- );
2784
+ }
2785
+ )
2786
+ ] })
2787
+ ] });
2796
2788
  }
2797
2789
  );
2798
2790
  TripsCategorySection.displayName = "TripsCategorySection";
@@ -2848,11 +2840,9 @@ var WhyChooseSection = forwardRef(
2848
2840
  ref,
2849
2841
  className: cn(
2850
2842
  // Mobile (default)
2851
- "flex flex-col items-center gap-lg px-md bg-surface",
2843
+ "flex flex-col items-center gap-lg bg-surface",
2852
2844
  // Tablet
2853
- "md:gap-xl md:px-lg",
2854
- // Desktop
2855
- "lg:px-[80px]",
2845
+ "md:gap-xl",
2856
2846
  className
2857
2847
  ),
2858
2848
  ...rest,