@opensite/ui 1.2.2 → 1.2.4

package/dist/testimonial-carousel-cards.cjs

@@ -1164,7 +1164,7 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "hidden justify-start gap-4 lg:flex",
+                "justify-start gap-2 flex mt-4 md:mt-0",
                 controlsClassName
               ),
               children: [
@@ -1221,14 +1221,14 @@ function TestimonialCarouselCards({
           itemClassName,
           testimonial.className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 lg:flex-row", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0 lg:flex-row lg:gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-full lg:h-[460px] lg:w-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: testimonial.image,
               alt: typeof testimonial.username === "string" ? testimonial.username : testimonial.imageAlt || "Testimonial image",
               className: cn(
-                "h-full w-full rounded-2xl object-cover",
+                "h-full w-full rounded-t-2xl rounded-b-none lg:rounded-2xl object-cover",
                 imageClassName
               ),
               loading: "lazy",
@@ -1239,12 +1239,32 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex w-full flex-col items-start justify-end rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
+                "relative flex w-full flex-col items-start justify-end overflow-hidden rounded-b-2xl rounded-t-none lg:rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
                 quotePanelClassName
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-base italic line-clamp-12 lg:line-clamp-14", children: testimonial.quote }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex shrink-0 items-center", children: [
+                  testimonial.avatar && /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: testimonial.avatar,
+                      alt: testimonial.author ? testimonial.author : "Testimonial avatar",
+                      loading: "lazy",
+                      className: "size-12 rounded-xl shadow-lg mr-2",
+                      optixFlowConfig
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-md font-medium", children: testimonial.author })
+                ] }),
+                testimonial.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    href: testimonial.href,
+                    className: "font-semibold text-left uppercase",
+                    children: "Read Review"
+                  }
+                ) })
               ]
             }
           )
@@ -1271,7 +1291,7 @@ function TestimonialCarouselCards({
       patternClassName,
       className,
       containerClassName: "px-4 md:px-2 lg:px-2",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-6 md:gap-4 lg:flex-row", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-6 lg:flex-row", children: [
         sidebarContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1290,7 +1310,7 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "absolute bottom-4 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded",
+                "absolute bottom-4 left-1/2 hidden h-0.5 w-60 -translate-x-1/2 rounded md:block",
                 getNestedCardBg(background),
                 progressClassName
               ),

package/dist/testimonial-carousel-cards.d.cts

@@ -42,6 +42,14 @@ interface TestimonialCarouselItem {
      * Additional CSS classes for the item
      */
     className?: string;
+    /**
+     * Optional href for the testimonial
+     */
+    href?: string;
+    /**
+     * Optional avatar for testimonial
+     */
+    avatar?: string;
 }
 interface TestimonialCarouselCardsProps {
     /**

package/dist/testimonial-carousel-cards.d.ts

@@ -42,6 +42,14 @@ interface TestimonialCarouselItem {
      * Additional CSS classes for the item
      */
     className?: string;
+    /**
+     * Optional href for the testimonial
+     */
+    href?: string;
+    /**
+     * Optional avatar for testimonial
+     */
+    avatar?: string;
 }
 interface TestimonialCarouselCardsProps {
     /**

package/dist/testimonial-carousel-cards.js

@@ -1140,7 +1140,7 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "hidden justify-start gap-4 lg:flex",
+                "justify-start gap-2 flex mt-4 md:mt-0",
                 controlsClassName
               ),
               children: [
@@ -1197,14 +1197,14 @@ function TestimonialCarouselCards({
           itemClassName,
           testimonial.className
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 lg:flex-row", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0 lg:flex-row lg:gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "h-[200px] w-full lg:h-[460px] lg:w-[400px]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: testimonial.image,
               alt: typeof testimonial.username === "string" ? testimonial.username : testimonial.imageAlt || "Testimonial image",
               className: cn(
-                "h-full w-full rounded-2xl object-cover",
+                "h-full w-full rounded-t-2xl rounded-b-none lg:rounded-2xl object-cover",
                 imageClassName
               ),
               loading: "lazy",
@@ -1215,12 +1215,32 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex w-full flex-col items-start justify-end rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
+                "relative flex w-full flex-col items-start justify-end overflow-hidden rounded-b-2xl rounded-t-none lg:rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
                 quotePanelClassName
               ),
               children: [
-                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
-                /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-base italic line-clamp-12 lg:line-clamp-14", children: testimonial.quote }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex shrink-0 items-center", children: [
+                  testimonial.avatar && /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: testimonial.avatar,
+                      alt: testimonial.author ? testimonial.author : "Testimonial avatar",
+                      loading: "lazy",
+                      className: "size-12 rounded-xl shadow-lg mr-2",
+                      optixFlowConfig
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "text-md font-medium", children: testimonial.author })
+                ] }),
+                testimonial.href && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: testimonial.href,
+                    className: "font-semibold text-left uppercase",
+                    children: "Read Review"
+                  }
+                ) })
               ]
             }
           )
@@ -1247,7 +1267,7 @@ function TestimonialCarouselCards({
       patternClassName,
       className,
       containerClassName: "px-4 md:px-2 lg:px-2",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 md:gap-4 lg:flex-row", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 lg:flex-row", children: [
         sidebarContent,
         /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsx(
@@ -1266,7 +1286,7 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "absolute bottom-4 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded",
+                "absolute bottom-4 left-1/2 hidden h-0.5 w-60 -translate-x-1/2 rounded md:block",
                 getNestedCardBg(background),
                 progressClassName
               ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",