@opensite/ui 3.1.7 → 3.1.9
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/carousel-fullscreen-scroll-fx.cjs +4 -3
- package/dist/carousel-fullscreen-scroll-fx.js +4 -3
- package/dist/carousel-gallery-thumbnails.cjs +2 -2
- package/dist/carousel-gallery-thumbnails.js +2 -2
- package/dist/carousel-image-hero.cjs +89 -80
- package/dist/carousel-image-hero.js +89 -80
- package/dist/carousel-product-feature-showcase.cjs +8 -10
- package/dist/carousel-product-feature-showcase.js +8 -10
- package/dist/carousel-progress-slider.cjs +75 -65
- package/dist/carousel-progress-slider.js +75 -65
- package/dist/carousel-scrolling-feature-showcase.cjs +8 -2
- package/dist/carousel-scrolling-feature-showcase.js +8 -2
- package/dist/registry.cjs +186 -162
- package/dist/registry.js +186 -162
- package/package.json +1 -1
|
@@ -481,8 +481,8 @@ function CarouselFullscreenScrollFx({
|
|
|
481
481
|
{
|
|
482
482
|
onClick: () => scrollToSlide(index),
|
|
483
483
|
className: cn(
|
|
484
|
-
"h-3 w-3 rounded-full border-2 transition-all",
|
|
485
|
-
activeIndex === index ? "scale-125 border-
|
|
484
|
+
"h-3 w-3 rounded-full border-2 transition-all cursor-pointer",
|
|
485
|
+
activeIndex === index ? "scale-125 border-white bg-white" : "border-white bg-transparent hover:bg-white"
|
|
486
486
|
),
|
|
487
487
|
"aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
|
|
488
488
|
},
|
|
@@ -591,7 +591,8 @@ function CarouselFullscreenScrollFx({
|
|
|
591
591
|
"div",
|
|
592
592
|
{
|
|
593
593
|
className: cn(
|
|
594
|
-
"relative z-10 mx-auto max-w-
|
|
594
|
+
"relative z-10 mx-auto max-w-full md:max-w-md",
|
|
595
|
+
"px-6 text-center text-shadow",
|
|
595
596
|
contentClassName
|
|
596
597
|
),
|
|
597
598
|
children: [
|
|
@@ -460,8 +460,8 @@ function CarouselFullscreenScrollFx({
|
|
|
460
460
|
{
|
|
461
461
|
onClick: () => scrollToSlide(index),
|
|
462
462
|
className: cn(
|
|
463
|
-
"h-3 w-3 rounded-full border-2 transition-all",
|
|
464
|
-
activeIndex === index ? "scale-125 border-
|
|
463
|
+
"h-3 w-3 rounded-full border-2 transition-all cursor-pointer",
|
|
464
|
+
activeIndex === index ? "scale-125 border-white bg-white" : "border-white bg-transparent hover:bg-white"
|
|
465
465
|
),
|
|
466
466
|
"aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
|
|
467
467
|
},
|
|
@@ -570,7 +570,8 @@ function CarouselFullscreenScrollFx({
|
|
|
570
570
|
"div",
|
|
571
571
|
{
|
|
572
572
|
className: cn(
|
|
573
|
-
"relative z-10 mx-auto max-w-
|
|
573
|
+
"relative z-10 mx-auto max-w-full md:max-w-md",
|
|
574
|
+
"px-6 text-center text-shadow",
|
|
574
575
|
contentClassName
|
|
575
576
|
),
|
|
576
577
|
children: [
|
|
@@ -624,7 +624,7 @@ function CarouselGalleryThumbnails({
|
|
|
624
624
|
"button",
|
|
625
625
|
{
|
|
626
626
|
className: cn(
|
|
627
|
-
"relative h-20 w-20 shrink-0 transition-all duration-200",
|
|
627
|
+
"relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
|
|
628
628
|
index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
|
|
629
629
|
thumbnailClassName
|
|
630
630
|
),
|
|
@@ -634,7 +634,7 @@ function CarouselGalleryThumbnails({
|
|
|
634
634
|
{
|
|
635
635
|
src: image.src,
|
|
636
636
|
alt: `Thumbnail ${index + 1}`,
|
|
637
|
-
className: "h-full w-full rounded-
|
|
637
|
+
className: "h-full w-full rounded-lg object-cover",
|
|
638
638
|
optixFlowConfig
|
|
639
639
|
}
|
|
640
640
|
)
|
|
@@ -603,7 +603,7 @@ function CarouselGalleryThumbnails({
|
|
|
603
603
|
"button",
|
|
604
604
|
{
|
|
605
605
|
className: cn(
|
|
606
|
-
"relative h-20 w-20 shrink-0 transition-all duration-200",
|
|
606
|
+
"relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
|
|
607
607
|
index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
|
|
608
608
|
thumbnailClassName
|
|
609
609
|
),
|
|
@@ -613,7 +613,7 @@ function CarouselGalleryThumbnails({
|
|
|
613
613
|
{
|
|
614
614
|
src: image.src,
|
|
615
615
|
alt: `Thumbnail ${index + 1}`,
|
|
616
|
-
className: "h-full w-full rounded-
|
|
616
|
+
className: "h-full w-full rounded-lg object-cover",
|
|
617
617
|
optixFlowConfig
|
|
618
618
|
}
|
|
619
619
|
)
|
|
@@ -536,7 +536,7 @@ function CarouselImageHero({
|
|
|
536
536
|
indicatorsClassName,
|
|
537
537
|
optixFlowConfig,
|
|
538
538
|
background,
|
|
539
|
-
spacing = "
|
|
539
|
+
spacing = "hero",
|
|
540
540
|
pattern,
|
|
541
541
|
patternOpacity
|
|
542
542
|
}) {
|
|
@@ -601,87 +601,96 @@ function CarouselImageHero({
|
|
|
601
601
|
patternOpacity,
|
|
602
602
|
containerClassName,
|
|
603
603
|
children: [
|
|
604
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
"div",
|
|
629
|
-
{
|
|
630
|
-
className: cn(
|
|
631
|
-
"absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-5",
|
|
632
|
-
indicatorsClassName
|
|
633
|
-
),
|
|
634
|
-
children: [
|
|
635
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
636
|
-
pressable.Pressable,
|
|
637
|
-
{
|
|
638
|
-
onClick: handlePrev,
|
|
639
|
-
asButton: true,
|
|
640
|
-
variant: "ghost",
|
|
641
|
-
size: "icon",
|
|
642
|
-
className: cn(
|
|
643
|
-
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
604
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
605
|
+
"div",
|
|
606
|
+
{
|
|
607
|
+
className: cn(
|
|
608
|
+
"absolute inset-0 mx-4 md:mx-8 rounded-2xl overflow-hidden",
|
|
609
|
+
imageClassName
|
|
610
|
+
),
|
|
611
|
+
children: [
|
|
612
|
+
!hasImages ? null : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
613
|
+
"div",
|
|
614
|
+
{
|
|
615
|
+
className: cn(
|
|
616
|
+
"absolute inset-0 transition-opacity duration-1000",
|
|
617
|
+
index === currentImageIndex ? "opacity-100" : "opacity-0"
|
|
618
|
+
),
|
|
619
|
+
children: [
|
|
620
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
621
|
+
img.Img,
|
|
622
|
+
{
|
|
623
|
+
src: image.src,
|
|
624
|
+
alt: image.alt,
|
|
625
|
+
className: cn("h-full w-full object-cover", image.className),
|
|
626
|
+
optixFlowConfig
|
|
627
|
+
}
|
|
644
628
|
),
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
629
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" })
|
|
630
|
+
]
|
|
631
|
+
},
|
|
632
|
+
index
|
|
633
|
+
)),
|
|
634
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
635
|
+
"div",
|
|
636
|
+
{
|
|
637
|
+
className: cn(
|
|
638
|
+
"absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-5",
|
|
639
|
+
indicatorsClassName
|
|
640
|
+
),
|
|
641
|
+
children: [
|
|
642
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
643
|
+
pressable.Pressable,
|
|
660
644
|
{
|
|
661
|
-
|
|
662
|
-
|
|
645
|
+
onClick: handlePrev,
|
|
646
|
+
asButton: true,
|
|
647
|
+
variant: "ghost",
|
|
648
|
+
size: "icon",
|
|
649
|
+
className: cn(
|
|
650
|
+
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
651
|
+
),
|
|
652
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
|
|
663
653
|
}
|
|
664
|
-
)
|
|
665
|
-
},
|
|
666
|
-
index
|
|
667
|
-
)) }),
|
|
668
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
669
|
-
pressable.Pressable,
|
|
670
|
-
{
|
|
671
|
-
onClick: handleNext,
|
|
672
|
-
asButton: true,
|
|
673
|
-
variant: "ghost",
|
|
674
|
-
size: "icon",
|
|
675
|
-
className: cn(
|
|
676
|
-
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
677
654
|
),
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
655
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1", children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
656
|
+
framerMotion.motion.button,
|
|
657
|
+
{
|
|
658
|
+
initial: false,
|
|
659
|
+
onClick: () => handleDotClick(index),
|
|
660
|
+
animate: {
|
|
661
|
+
width: index === currentImageIndex ? "30px" : "8px"
|
|
662
|
+
},
|
|
663
|
+
className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full p-0.5 bg-white/50",
|
|
664
|
+
"aria-label": `Go to image ${index + 1}`,
|
|
665
|
+
children: currentImageIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
|
|
666
|
+
framerMotion.motion.div,
|
|
667
|
+
{
|
|
668
|
+
style: { clipPath },
|
|
669
|
+
className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-white"
|
|
670
|
+
}
|
|
671
|
+
)
|
|
672
|
+
},
|
|
673
|
+
index
|
|
674
|
+
)) }),
|
|
675
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
676
|
+
pressable.Pressable,
|
|
677
|
+
{
|
|
678
|
+
onClick: handleNext,
|
|
679
|
+
asButton: true,
|
|
680
|
+
variant: "ghost",
|
|
681
|
+
size: "icon",
|
|
682
|
+
className: cn(
|
|
683
|
+
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
684
|
+
),
|
|
685
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
|
|
686
|
+
}
|
|
687
|
+
)
|
|
688
|
+
]
|
|
689
|
+
}
|
|
690
|
+
)
|
|
691
|
+
]
|
|
692
|
+
}
|
|
693
|
+
),
|
|
685
694
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
686
695
|
"div",
|
|
687
696
|
{
|
|
@@ -720,14 +729,14 @@ function CarouselImageHero({
|
|
|
720
729
|
}
|
|
721
730
|
) : description)
|
|
722
731
|
] }),
|
|
723
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
732
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
724
733
|
BlockActions,
|
|
725
734
|
{
|
|
726
735
|
actions,
|
|
727
736
|
actionsSlot,
|
|
728
737
|
actionsClassName
|
|
729
738
|
}
|
|
730
|
-
)
|
|
739
|
+
) })
|
|
731
740
|
] })
|
|
732
741
|
}
|
|
733
742
|
)
|
|
@@ -515,7 +515,7 @@ function CarouselImageHero({
|
|
|
515
515
|
indicatorsClassName,
|
|
516
516
|
optixFlowConfig,
|
|
517
517
|
background,
|
|
518
|
-
spacing = "
|
|
518
|
+
spacing = "hero",
|
|
519
519
|
pattern,
|
|
520
520
|
patternOpacity
|
|
521
521
|
}) {
|
|
@@ -580,87 +580,96 @@ function CarouselImageHero({
|
|
|
580
580
|
patternOpacity,
|
|
581
581
|
containerClassName,
|
|
582
582
|
children: [
|
|
583
|
-
/* @__PURE__ */ jsxs(
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
"div",
|
|
608
|
-
{
|
|
609
|
-
className: cn(
|
|
610
|
-
"absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-5",
|
|
611
|
-
indicatorsClassName
|
|
612
|
-
),
|
|
613
|
-
children: [
|
|
614
|
-
/* @__PURE__ */ jsx(
|
|
615
|
-
Pressable,
|
|
616
|
-
{
|
|
617
|
-
onClick: handlePrev,
|
|
618
|
-
asButton: true,
|
|
619
|
-
variant: "ghost",
|
|
620
|
-
size: "icon",
|
|
621
|
-
className: cn(
|
|
622
|
-
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
583
|
+
/* @__PURE__ */ jsxs(
|
|
584
|
+
"div",
|
|
585
|
+
{
|
|
586
|
+
className: cn(
|
|
587
|
+
"absolute inset-0 mx-4 md:mx-8 rounded-2xl overflow-hidden",
|
|
588
|
+
imageClassName
|
|
589
|
+
),
|
|
590
|
+
children: [
|
|
591
|
+
!hasImages ? null : images?.map((image, index) => /* @__PURE__ */ jsxs(
|
|
592
|
+
"div",
|
|
593
|
+
{
|
|
594
|
+
className: cn(
|
|
595
|
+
"absolute inset-0 transition-opacity duration-1000",
|
|
596
|
+
index === currentImageIndex ? "opacity-100" : "opacity-0"
|
|
597
|
+
),
|
|
598
|
+
children: [
|
|
599
|
+
/* @__PURE__ */ jsx(
|
|
600
|
+
Img,
|
|
601
|
+
{
|
|
602
|
+
src: image.src,
|
|
603
|
+
alt: image.alt,
|
|
604
|
+
className: cn("h-full w-full object-cover", image.className),
|
|
605
|
+
optixFlowConfig
|
|
606
|
+
}
|
|
623
607
|
),
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
608
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" })
|
|
609
|
+
]
|
|
610
|
+
},
|
|
611
|
+
index
|
|
612
|
+
)),
|
|
613
|
+
/* @__PURE__ */ jsxs(
|
|
614
|
+
"div",
|
|
615
|
+
{
|
|
616
|
+
className: cn(
|
|
617
|
+
"absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-5",
|
|
618
|
+
indicatorsClassName
|
|
619
|
+
),
|
|
620
|
+
children: [
|
|
621
|
+
/* @__PURE__ */ jsx(
|
|
622
|
+
Pressable,
|
|
639
623
|
{
|
|
640
|
-
|
|
641
|
-
|
|
624
|
+
onClick: handlePrev,
|
|
625
|
+
asButton: true,
|
|
626
|
+
variant: "ghost",
|
|
627
|
+
size: "icon",
|
|
628
|
+
className: cn(
|
|
629
|
+
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
630
|
+
),
|
|
631
|
+
children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
|
|
642
632
|
}
|
|
643
|
-
)
|
|
644
|
-
},
|
|
645
|
-
index
|
|
646
|
-
)) }),
|
|
647
|
-
/* @__PURE__ */ jsx(
|
|
648
|
-
Pressable,
|
|
649
|
-
{
|
|
650
|
-
onClick: handleNext,
|
|
651
|
-
asButton: true,
|
|
652
|
-
variant: "ghost",
|
|
653
|
-
size: "icon",
|
|
654
|
-
className: cn(
|
|
655
|
-
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
656
633
|
),
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
634
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", children: images?.map((_, index) => /* @__PURE__ */ jsx(
|
|
635
|
+
motion.button,
|
|
636
|
+
{
|
|
637
|
+
initial: false,
|
|
638
|
+
onClick: () => handleDotClick(index),
|
|
639
|
+
animate: {
|
|
640
|
+
width: index === currentImageIndex ? "30px" : "8px"
|
|
641
|
+
},
|
|
642
|
+
className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full p-0.5 bg-white/50",
|
|
643
|
+
"aria-label": `Go to image ${index + 1}`,
|
|
644
|
+
children: currentImageIndex === index && /* @__PURE__ */ jsx(
|
|
645
|
+
motion.div,
|
|
646
|
+
{
|
|
647
|
+
style: { clipPath },
|
|
648
|
+
className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-white"
|
|
649
|
+
}
|
|
650
|
+
)
|
|
651
|
+
},
|
|
652
|
+
index
|
|
653
|
+
)) }),
|
|
654
|
+
/* @__PURE__ */ jsx(
|
|
655
|
+
Pressable,
|
|
656
|
+
{
|
|
657
|
+
onClick: handleNext,
|
|
658
|
+
asButton: true,
|
|
659
|
+
variant: "ghost",
|
|
660
|
+
size: "icon",
|
|
661
|
+
className: cn(
|
|
662
|
+
"flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
|
|
663
|
+
),
|
|
664
|
+
children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
|
|
665
|
+
}
|
|
666
|
+
)
|
|
667
|
+
]
|
|
668
|
+
}
|
|
669
|
+
)
|
|
670
|
+
]
|
|
671
|
+
}
|
|
672
|
+
),
|
|
664
673
|
/* @__PURE__ */ jsx(
|
|
665
674
|
"div",
|
|
666
675
|
{
|
|
@@ -699,14 +708,14 @@ function CarouselImageHero({
|
|
|
699
708
|
}
|
|
700
709
|
) : description)
|
|
701
710
|
] }),
|
|
702
|
-
/* @__PURE__ */ jsx(
|
|
711
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(
|
|
703
712
|
BlockActions,
|
|
704
713
|
{
|
|
705
714
|
actions,
|
|
706
715
|
actionsSlot,
|
|
707
716
|
actionsClassName
|
|
708
717
|
}
|
|
709
|
-
)
|
|
718
|
+
) })
|
|
710
719
|
] })
|
|
711
720
|
}
|
|
712
721
|
)
|
|
@@ -453,7 +453,7 @@ function CarouselProductFeatureShowcase({
|
|
|
453
453
|
actions,
|
|
454
454
|
actionsSlot,
|
|
455
455
|
className,
|
|
456
|
-
containerClassName,
|
|
456
|
+
containerClassName = "px-4 md:px-10 lg:px-16",
|
|
457
457
|
headerClassName,
|
|
458
458
|
headingClassName,
|
|
459
459
|
subheadingClassName,
|
|
@@ -465,7 +465,7 @@ function CarouselProductFeatureShowcase({
|
|
|
465
465
|
indicatorsClassName,
|
|
466
466
|
optixFlowConfig,
|
|
467
467
|
background,
|
|
468
|
-
spacing,
|
|
468
|
+
spacing = "hero",
|
|
469
469
|
pattern,
|
|
470
470
|
patternOpacity
|
|
471
471
|
}) {
|
|
@@ -542,7 +542,8 @@ function CarouselProductFeatureShowcase({
|
|
|
542
542
|
className: cn(className),
|
|
543
543
|
pattern,
|
|
544
544
|
patternOpacity,
|
|
545
|
-
|
|
545
|
+
containerClassName,
|
|
546
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
546
547
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
|
|
547
548
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
548
549
|
"h2",
|
|
@@ -553,17 +554,14 @@ function CarouselProductFeatureShowcase({
|
|
|
553
554
|
),
|
|
554
555
|
children: heading
|
|
555
556
|
}
|
|
556
|
-
) :
|
|
557
|
+
) : heading),
|
|
557
558
|
subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
558
559
|
"p",
|
|
559
560
|
{
|
|
560
|
-
className: cn(
|
|
561
|
-
"mt-4 text-lg text-muted-foreground",
|
|
562
|
-
subheadingClassName
|
|
563
|
-
),
|
|
561
|
+
className: cn("mt-4 text-lg text-balance", subheadingClassName),
|
|
564
562
|
children: subheading
|
|
565
563
|
}
|
|
566
|
-
) :
|
|
564
|
+
) : subheading)
|
|
567
565
|
] }),
|
|
568
566
|
featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
569
567
|
"div",
|
|
@@ -651,7 +649,7 @@ function CarouselProductFeatureShowcase({
|
|
|
651
649
|
transition: { duration: 0.3 },
|
|
652
650
|
children: [
|
|
653
651
|
activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeFeature.title })),
|
|
654
|
-
activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-
|
|
652
|
+
activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-balance", children: activeFeature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: activeFeature.description })),
|
|
655
653
|
activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
|
|
656
654
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
|
|
657
655
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -432,7 +432,7 @@ function CarouselProductFeatureShowcase({
|
|
|
432
432
|
actions,
|
|
433
433
|
actionsSlot,
|
|
434
434
|
className,
|
|
435
|
-
containerClassName,
|
|
435
|
+
containerClassName = "px-4 md:px-10 lg:px-16",
|
|
436
436
|
headerClassName,
|
|
437
437
|
headingClassName,
|
|
438
438
|
subheadingClassName,
|
|
@@ -444,7 +444,7 @@ function CarouselProductFeatureShowcase({
|
|
|
444
444
|
indicatorsClassName,
|
|
445
445
|
optixFlowConfig,
|
|
446
446
|
background,
|
|
447
|
-
spacing,
|
|
447
|
+
spacing = "hero",
|
|
448
448
|
pattern,
|
|
449
449
|
patternOpacity
|
|
450
450
|
}) {
|
|
@@ -521,7 +521,8 @@ function CarouselProductFeatureShowcase({
|
|
|
521
521
|
className: cn(className),
|
|
522
522
|
pattern,
|
|
523
523
|
patternOpacity,
|
|
524
|
-
|
|
524
|
+
containerClassName,
|
|
525
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
525
526
|
/* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
|
|
526
527
|
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
527
528
|
"h2",
|
|
@@ -532,17 +533,14 @@ function CarouselProductFeatureShowcase({
|
|
|
532
533
|
),
|
|
533
534
|
children: heading
|
|
534
535
|
}
|
|
535
|
-
) :
|
|
536
|
+
) : heading),
|
|
536
537
|
subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
|
|
537
538
|
"p",
|
|
538
539
|
{
|
|
539
|
-
className: cn(
|
|
540
|
-
"mt-4 text-lg text-muted-foreground",
|
|
541
|
-
subheadingClassName
|
|
542
|
-
),
|
|
540
|
+
className: cn("mt-4 text-lg text-balance", subheadingClassName),
|
|
543
541
|
children: subheading
|
|
544
542
|
}
|
|
545
|
-
) :
|
|
543
|
+
) : subheading)
|
|
546
544
|
] }),
|
|
547
545
|
featuresSlot ? /* @__PURE__ */ jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxs(
|
|
548
546
|
"div",
|
|
@@ -630,7 +628,7 @@ function CarouselProductFeatureShowcase({
|
|
|
630
628
|
transition: { duration: 0.3 },
|
|
631
629
|
children: [
|
|
632
630
|
activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsx("div", { children: activeFeature.title })),
|
|
633
|
-
activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-
|
|
631
|
+
activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-balance", children: activeFeature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: activeFeature.description })),
|
|
634
632
|
activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
|
|
635
633
|
/* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
|
|
636
634
|
/* @__PURE__ */ jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsx(
|