@opensite/ui 3.1.6 → 3.1.8
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 +1 -1
- package/dist/carousel-gallery-thumbnails.js +1 -1
- package/dist/carousel-image-hero.cjs +88 -79
- package/dist/carousel-image-hero.js +88 -79
- package/dist/carousel-product-feature-showcase.cjs +7 -9
- package/dist/carousel-product-feature-showcase.js +7 -9
- 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 +183 -159
- package/dist/registry.js +183 -159
- package/package.json +2 -3
|
@@ -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: [
|
|
@@ -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
|
)
|
|
@@ -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,
|
|
@@ -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,
|
|
@@ -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(
|