@opensite/ui 2.8.4 → 2.8.5

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.
@@ -493,7 +493,8 @@ function TestimonialsSimpleGrid({
493
493
  quoteClassName,
494
494
  authorClassName,
495
495
  background,
496
- spacing,
496
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
497
+ spacing = "xl",
497
498
  pattern,
498
499
  patternOpacity
499
500
  }) {
@@ -507,49 +508,70 @@ function TestimonialsSimpleGrid({
507
508
  if (typeof testimonial.author === "string") return testimonial.author;
508
509
  return "";
509
510
  }, []);
510
- const getAvatarSrc = React.useCallback((testimonial) => {
511
- return testimonial.avatarSrc || testimonial.avatar?.src;
512
- }, []);
511
+ const getAvatarSrc = React.useCallback(
512
+ (testimonial) => {
513
+ return testimonial.avatarSrc || testimonial.avatar?.src;
514
+ },
515
+ []
516
+ );
513
517
  const getInitials = React.useCallback((name) => {
514
518
  return name.split(" ").map((n) => n[0]).join("");
515
519
  }, []);
516
520
  const renderedTestimonials = React.useMemo(() => {
517
521
  if (testimonialsSlot) return testimonialsSlot;
518
522
  if (!testimonials || testimonials.length === 0) return null;
519
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName), children: testimonials.map((testimonial, index) => {
520
- const authorName = getAuthorName(testimonial);
521
- const avatarSrc = getAvatarSrc(testimonial);
522
- return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6", children: [
523
- testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
524
- "p",
525
- {
526
- className: cn(
527
- "mb-6 text-sm leading-relaxed text-muted-foreground",
528
- quoteClassName
529
- ),
530
- children: [
531
- "\u201C",
532
- testimonial.quote,
533
- "\u201D"
534
- ]
535
- }
536
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
537
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
538
- /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10", children: [
539
- /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
540
- /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
541
- ] }),
542
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
543
- testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
544
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
545
- testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
546
- testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
523
+ return /* @__PURE__ */ jsxRuntime.jsx(
524
+ "div",
525
+ {
526
+ className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName),
527
+ children: testimonials.map((testimonial, index) => {
528
+ const authorName = getAuthorName(testimonial);
529
+ const avatarSrc = getAvatarSrc(testimonial);
530
+ return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6", children: [
531
+ testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
532
+ "p",
533
+ {
534
+ className: cn(
535
+ "mb-6 text-sm leading-relaxed ",
536
+ quoteClassName
537
+ ),
538
+ children: [
539
+ "\u201C",
540
+ testimonial.quote,
541
+ "\u201D"
542
+ ]
543
+ }
544
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
545
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
546
+ /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10", children: [
547
+ /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
548
+ /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
549
+ ] }),
550
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
551
+ testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
552
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs ", children: [
553
+ testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
554
+ testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
555
+ ] })
556
+ ] })
547
557
  ] })
548
- ] })
549
- ] })
550
- ] }) }, index);
551
- }) });
552
- }, [testimonialsSlot, gridCols, effectiveColumns, gridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
558
+ ] }) }, index);
559
+ })
560
+ }
561
+ );
562
+ }, [
563
+ testimonialsSlot,
564
+ gridCols,
565
+ effectiveColumns,
566
+ gridClassName,
567
+ testimonials,
568
+ cardClassName,
569
+ quoteClassName,
570
+ authorClassName,
571
+ getAuthorName,
572
+ getAvatarSrc,
573
+ getInitials
574
+ ]);
553
575
  return /* @__PURE__ */ jsxRuntime.jsxs(
554
576
  Section,
555
577
  {
@@ -558,6 +580,7 @@ function TestimonialsSimpleGrid({
558
580
  pattern,
559
581
  patternOpacity,
560
582
  className,
583
+ containerClassName,
561
584
  children: [
562
585
  /* @__PURE__ */ jsxRuntime.jsxs(
563
586
  "div",
@@ -574,16 +597,7 @@ function TestimonialsSimpleGrid({
574
597
  children: heading
575
598
  }
576
599
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
577
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
578
- "p",
579
- {
580
- className: cn(
581
- "mt-4 text-lg text-muted-foreground",
582
- descriptionClassName
583
- ),
584
- children: description
585
- }
586
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
600
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
587
601
  ]
588
602
  }
589
603
  ),
@@ -76,6 +76,10 @@ interface TestimonialsSimpleGridProps {
76
76
  * Pattern overlay opacity (0-1)
77
77
  */
78
78
  patternOpacity?: number;
79
+ /**
80
+ * Additional CSS classes for the container
81
+ */
82
+ containerClassName?: string;
79
83
  }
80
84
  /**
81
85
  * TestimonialsSimpleGrid - A clean, straightforward grid of testimonial cards with
@@ -104,6 +108,6 @@ interface TestimonialsSimpleGridProps {
104
108
  * />
105
109
  * ```
106
110
  */
107
- declare function TestimonialsSimpleGrid({ testimonials, testimonialsSlot, heading, description, columns, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsSimpleGridProps): React.JSX.Element;
111
+ declare function TestimonialsSimpleGrid({ testimonials, testimonialsSlot, heading, description, columns, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsSimpleGridProps): React.JSX.Element;
108
112
 
109
113
  export { TestimonialsSimpleGrid, type TestimonialsSimpleGridProps };
@@ -76,6 +76,10 @@ interface TestimonialsSimpleGridProps {
76
76
  * Pattern overlay opacity (0-1)
77
77
  */
78
78
  patternOpacity?: number;
79
+ /**
80
+ * Additional CSS classes for the container
81
+ */
82
+ containerClassName?: string;
79
83
  }
80
84
  /**
81
85
  * TestimonialsSimpleGrid - A clean, straightforward grid of testimonial cards with
@@ -104,6 +108,6 @@ interface TestimonialsSimpleGridProps {
104
108
  * />
105
109
  * ```
106
110
  */
107
- declare function TestimonialsSimpleGrid({ testimonials, testimonialsSlot, heading, description, columns, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsSimpleGridProps): React.JSX.Element;
111
+ declare function TestimonialsSimpleGrid({ testimonials, testimonialsSlot, heading, description, columns, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsSimpleGridProps): React.JSX.Element;
108
112
 
109
113
  export { TestimonialsSimpleGrid, type TestimonialsSimpleGridProps };
@@ -468,7 +468,8 @@ function TestimonialsSimpleGrid({
468
468
  quoteClassName,
469
469
  authorClassName,
470
470
  background,
471
- spacing,
471
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
472
+ spacing = "xl",
472
473
  pattern,
473
474
  patternOpacity
474
475
  }) {
@@ -482,49 +483,70 @@ function TestimonialsSimpleGrid({
482
483
  if (typeof testimonial.author === "string") return testimonial.author;
483
484
  return "";
484
485
  }, []);
485
- const getAvatarSrc = useCallback((testimonial) => {
486
- return testimonial.avatarSrc || testimonial.avatar?.src;
487
- }, []);
486
+ const getAvatarSrc = useCallback(
487
+ (testimonial) => {
488
+ return testimonial.avatarSrc || testimonial.avatar?.src;
489
+ },
490
+ []
491
+ );
488
492
  const getInitials = useCallback((name) => {
489
493
  return name.split(" ").map((n) => n[0]).join("");
490
494
  }, []);
491
495
  const renderedTestimonials = useMemo(() => {
492
496
  if (testimonialsSlot) return testimonialsSlot;
493
497
  if (!testimonials || testimonials.length === 0) return null;
494
- return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName), children: testimonials.map((testimonial, index) => {
495
- const authorName = getAuthorName(testimonial);
496
- const avatarSrc = getAvatarSrc(testimonial);
497
- return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
498
- testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
499
- "p",
500
- {
501
- className: cn(
502
- "mb-6 text-sm leading-relaxed text-muted-foreground",
503
- quoteClassName
504
- ),
505
- children: [
506
- "\u201C",
507
- testimonial.quote,
508
- "\u201D"
509
- ]
510
- }
511
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
512
- /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
513
- /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
514
- /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
515
- /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
516
- ] }),
517
- /* @__PURE__ */ jsxs("div", { children: [
518
- testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
519
- /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
520
- testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
521
- testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
498
+ return /* @__PURE__ */ jsx(
499
+ "div",
500
+ {
501
+ className: cn("grid gap-6", gridCols[effectiveColumns], gridClassName),
502
+ children: testimonials.map((testimonial, index) => {
503
+ const authorName = getAuthorName(testimonial);
504
+ const avatarSrc = getAvatarSrc(testimonial);
505
+ return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
506
+ testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs(
507
+ "p",
508
+ {
509
+ className: cn(
510
+ "mb-6 text-sm leading-relaxed ",
511
+ quoteClassName
512
+ ),
513
+ children: [
514
+ "\u201C",
515
+ testimonial.quote,
516
+ "\u201D"
517
+ ]
518
+ }
519
+ ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", quoteClassName), children: testimonial.quote })),
520
+ /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
521
+ /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
522
+ /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
523
+ /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
524
+ ] }),
525
+ /* @__PURE__ */ jsxs("div", { children: [
526
+ testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
527
+ /* @__PURE__ */ jsxs("p", { className: "text-xs ", children: [
528
+ testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : null),
529
+ testimonial.company && (typeof testimonial.company === "string" ? `, ${testimonial.company}` : null)
530
+ ] })
531
+ ] })
522
532
  ] })
523
- ] })
524
- ] })
525
- ] }) }, index);
526
- }) });
527
- }, [testimonialsSlot, gridCols, effectiveColumns, gridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
533
+ ] }) }, index);
534
+ })
535
+ }
536
+ );
537
+ }, [
538
+ testimonialsSlot,
539
+ gridCols,
540
+ effectiveColumns,
541
+ gridClassName,
542
+ testimonials,
543
+ cardClassName,
544
+ quoteClassName,
545
+ authorClassName,
546
+ getAuthorName,
547
+ getAvatarSrc,
548
+ getInitials
549
+ ]);
528
550
  return /* @__PURE__ */ jsxs(
529
551
  Section,
530
552
  {
@@ -533,6 +555,7 @@ function TestimonialsSimpleGrid({
533
555
  pattern,
534
556
  patternOpacity,
535
557
  className,
558
+ containerClassName,
536
559
  children: [
537
560
  /* @__PURE__ */ jsxs(
538
561
  "div",
@@ -549,16 +572,7 @@ function TestimonialsSimpleGrid({
549
572
  children: heading
550
573
  }
551
574
  ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
552
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
553
- "p",
554
- {
555
- className: cn(
556
- "mt-4 text-lg text-muted-foreground",
557
- descriptionClassName
558
- ),
559
- children: description
560
- }
561
- ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
575
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg ", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
562
576
  ]
563
577
  }
564
578
  ),
@@ -466,7 +466,8 @@ function TestimonialsSliderMinimal({
466
466
  avatarClassName,
467
467
  dotsClassName,
468
468
  background,
469
- spacing,
469
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
470
+ spacing = "xl",
470
471
  pattern,
471
472
  patternOpacity
472
473
  }) {
@@ -498,9 +499,12 @@ function TestimonialsSliderMinimal({
498
499
  if (typeof testimonial.author === "string") return testimonial.author;
499
500
  return "";
500
501
  }, []);
501
- const getAvatarSrc = React.useCallback((testimonial) => {
502
- return testimonial.avatarSrc || testimonial.avatar?.src;
503
- }, []);
502
+ const getAvatarSrc = React.useCallback(
503
+ (testimonial) => {
504
+ return testimonial.avatarSrc || testimonial.avatar?.src;
505
+ },
506
+ []
507
+ );
504
508
  const getInitials = React.useCallback((name) => {
505
509
  return name.split(" ").map((n) => n[0]).join("");
506
510
  }, []);
@@ -545,7 +549,7 @@ function TestimonialsSliderMinimal({
545
549
  ] }),
546
550
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
547
551
  current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: current.author }) : current.author),
548
- current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: current.role }) : current.role)
552
+ current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: current.role }) : current.role)
549
553
  ] })
550
554
  ]
551
555
  }
@@ -553,7 +557,17 @@ function TestimonialsSliderMinimal({
553
557
  ]
554
558
  }
555
559
  );
556
- }, [testimonialsSlot, isTransitioning, current, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
560
+ }, [
561
+ testimonialsSlot,
562
+ isTransitioning,
563
+ current,
564
+ quoteClassName,
565
+ authorClassName,
566
+ avatarClassName,
567
+ getAuthorName,
568
+ getAvatarSrc,
569
+ getInitials
570
+ ]);
557
571
  return /* @__PURE__ */ jsxRuntime.jsx(
558
572
  Section,
559
573
  {
@@ -562,6 +576,7 @@ function TestimonialsSliderMinimal({
562
576
  pattern,
563
577
  patternOpacity,
564
578
  className,
579
+ containerClassName,
565
580
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
566
581
  renderedTestimonial,
567
582
  testimonials && testimonials.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-center gap-2", dotsClassName), children: testimonials.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -570,7 +585,7 @@ function TestimonialsSliderMinimal({
570
585
  onClick: () => goToSlide(index),
571
586
  className: cn(
572
587
  "size-2 rounded-full transition-all",
573
- index === currentIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
588
+ index === currentIndex ? "w-6 bg-primary text-primary-foreground" : ""
574
589
  ),
575
590
  "aria-label": `Go to testimonial ${index + 1}`
576
591
  },
@@ -60,6 +60,10 @@ interface TestimonialsSliderMinimalProps {
60
60
  * Pattern overlay opacity (0-1)
61
61
  */
62
62
  patternOpacity?: number;
63
+ /**
64
+ * Additional CSS classes for the container
65
+ */
66
+ containerClassName?: string;
63
67
  }
64
68
  /**
65
69
  * TestimonialsSliderMinimal - A clean, auto-rotating testimonial slider with minimal
@@ -85,6 +89,6 @@ interface TestimonialsSliderMinimalProps {
85
89
  * />
86
90
  * ```
87
91
  */
88
- declare function TestimonialsSliderMinimal({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, quoteClassName, authorClassName, avatarClassName, dotsClassName, background, spacing, pattern, patternOpacity, }: TestimonialsSliderMinimalProps): React.JSX.Element;
92
+ declare function TestimonialsSliderMinimal({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, quoteClassName, authorClassName, avatarClassName, dotsClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsSliderMinimalProps): React.JSX.Element;
89
93
 
90
94
  export { TestimonialsSliderMinimal, type TestimonialsSliderMinimalProps };
@@ -60,6 +60,10 @@ interface TestimonialsSliderMinimalProps {
60
60
  * Pattern overlay opacity (0-1)
61
61
  */
62
62
  patternOpacity?: number;
63
+ /**
64
+ * Additional CSS classes for the container
65
+ */
66
+ containerClassName?: string;
63
67
  }
64
68
  /**
65
69
  * TestimonialsSliderMinimal - A clean, auto-rotating testimonial slider with minimal
@@ -85,6 +89,6 @@ interface TestimonialsSliderMinimalProps {
85
89
  * />
86
90
  * ```
87
91
  */
88
- declare function TestimonialsSliderMinimal({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, quoteClassName, authorClassName, avatarClassName, dotsClassName, background, spacing, pattern, patternOpacity, }: TestimonialsSliderMinimalProps): React.JSX.Element;
92
+ declare function TestimonialsSliderMinimal({ testimonials, testimonialsSlot, autoPlayInterval, className, contentClassName, quoteClassName, authorClassName, avatarClassName, dotsClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsSliderMinimalProps): React.JSX.Element;
89
93
 
90
94
  export { TestimonialsSliderMinimal, type TestimonialsSliderMinimalProps };
@@ -441,7 +441,8 @@ function TestimonialsSliderMinimal({
441
441
  avatarClassName,
442
442
  dotsClassName,
443
443
  background,
444
- spacing,
444
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
445
+ spacing = "xl",
445
446
  pattern,
446
447
  patternOpacity
447
448
  }) {
@@ -473,9 +474,12 @@ function TestimonialsSliderMinimal({
473
474
  if (typeof testimonial.author === "string") return testimonial.author;
474
475
  return "";
475
476
  }, []);
476
- const getAvatarSrc = useCallback((testimonial) => {
477
- return testimonial.avatarSrc || testimonial.avatar?.src;
478
- }, []);
477
+ const getAvatarSrc = useCallback(
478
+ (testimonial) => {
479
+ return testimonial.avatarSrc || testimonial.avatar?.src;
480
+ },
481
+ []
482
+ );
479
483
  const getInitials = useCallback((name) => {
480
484
  return name.split(" ").map((n) => n[0]).join("");
481
485
  }, []);
@@ -520,7 +524,7 @@ function TestimonialsSliderMinimal({
520
524
  ] }),
521
525
  /* @__PURE__ */ jsxs("div", { children: [
522
526
  current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: current.author }) : current.author),
523
- current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: current.role }) : current.role)
527
+ current.role && (typeof current.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm ", children: current.role }) : current.role)
524
528
  ] })
525
529
  ]
526
530
  }
@@ -528,7 +532,17 @@ function TestimonialsSliderMinimal({
528
532
  ]
529
533
  }
530
534
  );
531
- }, [testimonialsSlot, isTransitioning, current, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
535
+ }, [
536
+ testimonialsSlot,
537
+ isTransitioning,
538
+ current,
539
+ quoteClassName,
540
+ authorClassName,
541
+ avatarClassName,
542
+ getAuthorName,
543
+ getAvatarSrc,
544
+ getInitials
545
+ ]);
532
546
  return /* @__PURE__ */ jsx(
533
547
  Section,
534
548
  {
@@ -537,6 +551,7 @@ function TestimonialsSliderMinimal({
537
551
  pattern,
538
552
  patternOpacity,
539
553
  className,
554
+ containerClassName,
540
555
  children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
541
556
  renderedTestimonial,
542
557
  testimonials && testimonials.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-center gap-2", dotsClassName), children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
@@ -545,7 +560,7 @@ function TestimonialsSliderMinimal({
545
560
  onClick: () => goToSlide(index),
546
561
  className: cn(
547
562
  "size-2 rounded-full transition-all",
548
- index === currentIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
563
+ index === currentIndex ? "w-6 bg-primary text-primary-foreground" : ""
549
564
  ),
550
565
  "aria-label": `Go to testimonial ${index + 1}`
551
566
  },
@@ -477,7 +477,8 @@ function TestimonialsSplitImage({
477
477
  quoteClassName,
478
478
  authorClassName,
479
479
  background,
480
- spacing,
480
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
481
+ spacing = "xl",
481
482
  pattern,
482
483
  patternOpacity,
483
484
  optixFlowConfig
@@ -532,7 +533,7 @@ function TestimonialsSplitImage({
532
533
  ] }),
533
534
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
534
535
  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: testimonial.author }) : testimonial.author),
535
- (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
536
+ (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm ", children: [
536
537
  testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
537
538
  testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
538
539
  ] })
@@ -541,7 +542,18 @@ function TestimonialsSplitImage({
541
542
  ]
542
543
  }
543
544
  );
544
- }, [testimonialSlot, effectiveImagePosition, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
545
+ }, [
546
+ testimonialSlot,
547
+ effectiveImagePosition,
548
+ contentClassName,
549
+ quoteIconClassName,
550
+ testimonial,
551
+ quoteClassName,
552
+ authorClassName,
553
+ getAuthorName,
554
+ getAvatarSrc,
555
+ getInitials
556
+ ]);
545
557
  return /* @__PURE__ */ jsxRuntime.jsx(
546
558
  Section,
547
559
  {
@@ -550,6 +562,7 @@ function TestimonialsSplitImage({
550
562
  pattern,
551
563
  patternOpacity,
552
564
  className,
565
+ containerClassName,
553
566
  children: /* @__PURE__ */ jsxRuntime.jsxs(
554
567
  "div",
555
568
  {
@@ -76,6 +76,10 @@ interface TestimonialsSplitImageProps {
76
76
  * OptixFlow image optimization configuration
77
77
  */
78
78
  optixFlowConfig?: OptixFlowConfig;
79
+ /**
80
+ * Additional CSS classes for the container
81
+ */
82
+ containerClassName?: string;
79
83
  }
80
84
  /**
81
85
  * TestimonialsSplitImage - A two-column split layout testimonial featuring a large
@@ -101,6 +105,6 @@ interface TestimonialsSplitImageProps {
101
105
  * />
102
106
  * ```
103
107
  */
104
- declare function TestimonialsSplitImage({ testimonial, testimonialSlot, imageSrc, imageAlt, imagePosition, className, gridClassName, imageClassName, contentClassName, quoteIconClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsSplitImageProps): React.JSX.Element;
108
+ declare function TestimonialsSplitImage({ testimonial, testimonialSlot, imageSrc, imageAlt, imagePosition, className, gridClassName, imageClassName, contentClassName, quoteIconClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsSplitImageProps): React.JSX.Element;
105
109
 
106
110
  export { TestimonialsSplitImage, type TestimonialsSplitImageProps };
@@ -76,6 +76,10 @@ interface TestimonialsSplitImageProps {
76
76
  * OptixFlow image optimization configuration
77
77
  */
78
78
  optixFlowConfig?: OptixFlowConfig;
79
+ /**
80
+ * Additional CSS classes for the container
81
+ */
82
+ containerClassName?: string;
79
83
  }
80
84
  /**
81
85
  * TestimonialsSplitImage - A two-column split layout testimonial featuring a large
@@ -101,6 +105,6 @@ interface TestimonialsSplitImageProps {
101
105
  * />
102
106
  * ```
103
107
  */
104
- declare function TestimonialsSplitImage({ testimonial, testimonialSlot, imageSrc, imageAlt, imagePosition, className, gridClassName, imageClassName, contentClassName, quoteIconClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsSplitImageProps): React.JSX.Element;
108
+ declare function TestimonialsSplitImage({ testimonial, testimonialSlot, imageSrc, imageAlt, imagePosition, className, gridClassName, imageClassName, contentClassName, quoteIconClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsSplitImageProps): React.JSX.Element;
105
109
 
106
110
  export { TestimonialsSplitImage, type TestimonialsSplitImageProps };
@@ -455,7 +455,8 @@ function TestimonialsSplitImage({
455
455
  quoteClassName,
456
456
  authorClassName,
457
457
  background,
458
- spacing,
458
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
459
+ spacing = "xl",
459
460
  pattern,
460
461
  patternOpacity,
461
462
  optixFlowConfig
@@ -510,7 +511,7 @@ function TestimonialsSplitImage({
510
511
  ] }),
511
512
  /* @__PURE__ */ jsxs("div", { children: [
512
513
  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: testimonial.author }) : testimonial.author),
513
- (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
514
+ (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-sm ", children: [
514
515
  testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
515
516
  testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
516
517
  ] })
@@ -519,7 +520,18 @@ function TestimonialsSplitImage({
519
520
  ]
520
521
  }
521
522
  );
522
- }, [testimonialSlot, effectiveImagePosition, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
523
+ }, [
524
+ testimonialSlot,
525
+ effectiveImagePosition,
526
+ contentClassName,
527
+ quoteIconClassName,
528
+ testimonial,
529
+ quoteClassName,
530
+ authorClassName,
531
+ getAuthorName,
532
+ getAvatarSrc,
533
+ getInitials
534
+ ]);
523
535
  return /* @__PURE__ */ jsx(
524
536
  Section,
525
537
  {
@@ -528,6 +540,7 @@ function TestimonialsSplitImage({
528
540
  pattern,
529
541
  patternOpacity,
530
542
  className,
543
+ containerClassName,
531
544
  children: /* @__PURE__ */ jsxs(
532
545
  "div",
533
546
  {