@opensite/ui 2.8.5 → 2.8.7

package/dist/social-link-icon.cjs

@@ -501,6 +501,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -513,6 +514,21 @@ var SocialLinkIcon = React__namespace.forwardRef(
     const accessibleLabel = React__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -524,16 +540,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/social-link-icon.d.cts

@@ -45,6 +45,11 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
      * Required href for the link
      */
     href: string;
+    /**
+     * Return icon only
+     * @default false
+     */
+    iconOnly?: boolean;
 }
 /**
  * SocialLinkIcon - A reusable social media link icon component.

package/dist/social-link-icon.d.ts

@@ -45,6 +45,11 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
      * Required href for the link
      */
     href: string;
+    /**
+     * Return icon only
+     * @default false
+     */
+    iconOnly?: boolean;
 }
 /**
  * SocialLinkIcon - A reusable social media link icon component.

package/dist/social-link-icon.js

@@ -479,6 +479,7 @@ var SocialLinkIcon = React.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -491,6 +492,21 @@ var SocialLinkIcon = React.forwardRef(
     const accessibleLabel = React.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -502,16 +518,7 @@ var SocialLinkIcon = React.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/testimonials-animated-split.cjs

@@ -1003,14 +1003,14 @@ function TestimonialsAnimatedSplit({
             animate: { opacity: 1, y: 0 },
             exit: { opacity: 0, y: -20 },
             transition: { duration: 0.4 },
-            className: "space-y-6",
+            className: "space-y-4 md:space-y-6",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mdi/comment-quote-outline", size: 48 }),
               current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "blockquote",
                 {
                   className: cn(
-                    "text-lg font-base leading-relaxed md:text-2xl",
+                    "text-base md:text-lg font-thin leading-normal md:leading-relaxed md:text-2xl line-clamp-4",
                     quoteClassName
                   ),
                   children: current.quote
@@ -1022,9 +1022,9 @@ function TestimonialsAnimatedSplit({
                   /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
-                    current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: current.author }) : current.author),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-base tracking-wide", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-0 md:gap-1", children: [
+                    current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-semibold", children: current.author }) : current.author),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-normal tracking-normal md:tracking-wide", children: [
                       current.role && (typeof current.role === "string" ? current.role : null),
                       current.company && (typeof current.company === "string" ? ` at ${current.company}` : null)
                     ] })

package/dist/testimonials-animated-split.js

@@ -981,14 +981,14 @@ function TestimonialsAnimatedSplit({
             animate: { opacity: 1, y: 0 },
             exit: { opacity: 0, y: -20 },
             transition: { duration: 0.4 },
-            className: "space-y-6",
+            className: "space-y-4 md:space-y-6",
             children: [
               /* @__PURE__ */ jsx(DynamicIcon, { name: "mdi/comment-quote-outline", size: 48 }),
               current.quote && (typeof current.quote === "string" ? /* @__PURE__ */ jsx(
                 "blockquote",
                 {
                   className: cn(
-                    "text-lg font-base leading-relaxed md:text-2xl",
+                    "text-base md:text-lg font-thin leading-normal md:leading-relaxed md:text-2xl line-clamp-4",
                     quoteClassName
                   ),
                   children: current.quote
@@ -1000,9 +1000,9 @@ function TestimonialsAnimatedSplit({
                   /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-                    current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-semibold", children: current.author }) : current.author),
-                    /* @__PURE__ */ jsxs("span", { className: "font-base tracking-wide", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-0 md:gap-1", children: [
+                    current.author && (typeof current.author === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm md:text-base font-semibold", children: current.author }) : current.author),
+                    /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base font-normal tracking-normal md:tracking-wide", children: [
                       current.role && (typeof current.role === "string" ? current.role : null),
                       current.company && (typeof current.company === "string" ? ` at ${current.company}` : null)
                     ] })

package/dist/testimonials-bento-grid.cjs

@@ -505,29 +505,6 @@ function AvatarFallback({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -956,10 +933,13 @@ function TestimonialsBentoGrid({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Card,
+            "div",
             {
-              className: cn("md:col-span-2 lg:row-span-2", featuredCardClassName),
-              children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6 md:p-8", children: [
+              className: cn(
+                "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm md:col-span-2 lg:row-span-2",
+                featuredCardClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between p-6 md:p-8 gap-8 md:gap-12", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
@@ -989,11 +969,11 @@ function TestimonialsBentoGrid({
                   {
                     className: cn("mt-6 flex items-center gap-4", authorClassName),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: featuredAvatarSrc, alt: featuredAuthorName }),
                         /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(featuredAuthorName) })
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0 leading-tight", children: [
                         featured.author && (typeof featured.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: featured.author }) : featured.author),
                         (featured.role || featured.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
                           featured.role && (typeof featured.role === "string" ? featured.role : featured.role),
@@ -1004,7 +984,8 @@ function TestimonialsBentoGrid({
                           {
                             href: featured.linkConfig.href,
                             className: cn(
-                              "text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
+                              "text-sm  transition-all duration-300",
+                              "underline underline-offset-4",
                               featured.linkConfig.className
                             ),
                             children: featured.linkConfig.label
@@ -1020,34 +1001,45 @@ function TestimonialsBentoGrid({
           others.slice(0, 5).map((testimonial, index) => {
             const authorName = getAuthorName(testimonial);
             const avatarSrc = getAvatarSrc(testimonial);
-            return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6", children: [
-              testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
-                "\u201C",
-                testimonial.quote,
-                "\u201D"
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-9", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                  testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role),
-                  testimonial.linkConfig?.href && /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      href: testimonial.linkConfig.href,
-                      className: cn(
-                        "text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
-                        testimonial.linkConfig.className
-                      ),
-                      children: testimonial.linkConfig.label
-                    }
-                  )
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  cardClassName,
+                  "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between p-6 gap-8", children: [
+                  testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
+                    "\u201C",
+                    testimonial.quote,
+                    "\u201D"
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0 leading-tight", children: [
+                      testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
+                      testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: testimonial.role }) : testimonial.role),
+                      testimonial.linkConfig?.href && /* @__PURE__ */ jsxRuntime.jsx(
+                        Pressable,
+                        {
+                          href: testimonial.linkConfig.href,
+                          className: cn(
+                            "text-sm  transition-all duration-300",
+                            "underline underline-offset-4",
+                            testimonial.linkConfig.className
+                          ),
+                          children: testimonial.linkConfig.label
+                        }
+                      )
+                    ] })
+                  ] })
                 ] })
-              ] })
-            ] }) }, index);
+              },
+              index
+            );
           })
         ]
       }

package/dist/testimonials-bento-grid.js

@@ -483,29 +483,6 @@ function AvatarFallback({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -934,10 +911,13 @@ function TestimonialsBentoGrid({
         ),
         children: [
           /* @__PURE__ */ jsx(
-            Card,
+            "div",
             {
-              className: cn("md:col-span-2 lg:row-span-2", featuredCardClassName),
-              children: /* @__PURE__ */ jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6 md:p-8", children: [
+              className: cn(
+                "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm md:col-span-2 lg:row-span-2",
+                featuredCardClassName
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between p-6 md:p-8 gap-8 md:gap-12", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(
                     DynamicIcon,
@@ -967,11 +947,11 @@ function TestimonialsBentoGrid({
                   {
                     className: cn("mt-6 flex items-center gap-4", authorClassName),
                     children: [
-                      /* @__PURE__ */ jsxs(Avatar, { className: "size-12", children: [
+                      /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
                         /* @__PURE__ */ jsx(AvatarImage, { src: featuredAvatarSrc, alt: featuredAuthorName }),
                         /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(featuredAuthorName) })
                       ] }),
-                      /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "space-y-0 leading-tight", children: [
                         featured.author && (typeof featured.author === "string" ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: featured.author }) : featured.author),
                         (featured.role || featured.company) && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
                           featured.role && (typeof featured.role === "string" ? featured.role : featured.role),
@@ -982,7 +962,8 @@ function TestimonialsBentoGrid({
                           {
                             href: featured.linkConfig.href,
                             className: cn(
-                              "text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
+                              "text-sm  transition-all duration-300",
+                              "underline underline-offset-4",
                               featured.linkConfig.className
                             ),
                             children: featured.linkConfig.label
@@ -998,34 +979,45 @@ function TestimonialsBentoGrid({
           others.slice(0, 5).map((testimonial, index) => {
             const authorName = getAuthorName(testimonial);
             const avatarSrc = getAvatarSrc(testimonial);
-            return /* @__PURE__ */ jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxs(CardContent, { className: "flex h-full flex-col justify-between p-6", children: [
-              testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
-                "\u201C",
-                testimonial.quote,
-                "\u201D"
-              ] }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
-              /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
-                  /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                  testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role),
-                  testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      href: testimonial.linkConfig.href,
-                      className: cn(
-                        "text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors",
-                        testimonial.linkConfig.className
-                      ),
-                      children: testimonial.linkConfig.label
-                    }
-                  )
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  cardClassName,
+                  "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm"
+                ),
+                children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between p-6 gap-8", children: [
+                  testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
+                    "\u201C",
+                    testimonial.quote,
+                    "\u201D"
+                  ] }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
+                      /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-0 leading-tight", children: [
+                      testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
+                      testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs", children: testimonial.role }) : testimonial.role),
+                      testimonial.linkConfig?.href && /* @__PURE__ */ jsx(
+                        Pressable,
+                        {
+                          href: testimonial.linkConfig.href,
+                          className: cn(
+                            "text-sm  transition-all duration-300",
+                            "underline underline-offset-4",
+                            testimonial.linkConfig.className
+                          ),
+                          children: testimonial.linkConfig.label
+                        }
+                      )
+                    ] })
+                  ] })
                 ] })
-              ] })
-            ] }) }, index);
+              },
+              index
+            );
           })
         ]
       }