@opensite/ui 0.6.3 → 0.6.5

package/dist/blog-cards-read-time.cjs

@@ -1032,28 +1032,27 @@ function BlogCardsReadTime({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedViewAllAction = React__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [viewAllSlot, viewAllAction]);
   const renderedPosts = React__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
@@ -1082,7 +1081,13 @@ function BlogCardsReadTime({
               /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-5" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: post.authorAvatar, alt: typeof post.author === "string" ? post.author : "Author" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+                    AvatarImage,
+                    {
+                      src: post.authorAvatar,
+                      alt: typeof post.author === "string" ? post.author : "Author"
+                    }
+                  ) }),
                   post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: post.author })
                 ] }),
                 post.readTime && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "h-fit", children: post.readTime })
@@ -1103,16 +1108,50 @@ function BlogCardsReadTime({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "h-full w-4" }),
-            " ",
-            badge
-          ] }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: renderedPosts }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/file-text",
+                    size: 16,
+                    className: "h-full w-4"
+                  }
+                ),
+                " ",
+                badge
+              ] }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: renderedPosts
+          }
+        ),
         (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex justify-center", viewAllClassName), children: renderedViewAllAction })
       ] })
     }

package/dist/blog-cards-read-time.js

@@ -1009,28 +1009,27 @@ function BlogCardsReadTime({
   postCardClassName,
   viewAllClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const renderedViewAllAction = React.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [viewAllSlot, viewAllAction]);
   const renderedPosts = React.useMemo(() => {
     if (postsSlot) return postsSlot;
@@ -1059,7 +1058,13 @@ function BlogCardsReadTime({
               /* @__PURE__ */ jsx(Separator, { className: "my-5" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsx(AvatarImage, { src: post.authorAvatar, alt: typeof post.author === "string" ? post.author : "Author" }) }),
+                  /* @__PURE__ */ jsx(Avatar, { className: "size-9 rounded-full ring-1 ring-input", children: post.authorAvatar && /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: post.authorAvatar,
+                      alt: typeof post.author === "string" ? post.author : "Author"
+                    }
+                  ) }),
                   post.author && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: post.author })
                 ] }),
                 post.readTime && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "h-fit", children: post.readTime })
@@ -1080,16 +1085,50 @@ function BlogCardsReadTime({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
-            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/file-text", size: 16, className: "h-full w-4" }),
-            " ",
-            badge
-          ] }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: renderedPosts }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/file-text",
+                    size: 16,
+                    className: "h-full w-4"
+                  }
+                ),
+                " ",
+                badge
+              ] }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: renderedPosts
+          }
+        ),
         (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex justify-center", viewAllClassName), children: renderedViewAllAction })
       ] })
     }

package/dist/blog-cards-tagline-cta.cjs

@@ -1026,19 +1026,30 @@ function BlogCardsTaglineCta({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaActionContent = React__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("w-full sm:w-auto inline-flex items-center", actionClassName, ctaClassName),
+        className: cn(
+          "w-full sm:w-auto inline-flex items-center",
+          actionClassName,
+          ctaClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -1059,7 +1070,10 @@ function BlogCardsTaglineCta({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Card,
         {
-          className: cn("grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0", postCardClassName),
+          className: cn(
+            "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
+            postCardClassName
+          ),
           children: [
             post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
@@ -1111,15 +1125,51 @@ function BlogCardsTaglineCta({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto flex flex-col items-center gap-16 lg:px-16", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          ctaActionContent
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8", postsClassName), children: postsContent })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto flex flex-col items-center gap-16 lg:px-16",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ctaActionContent
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
+                  postsClassName
+                ),
+                children: postsContent
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/blog-cards-tagline-cta.js

@@ -1005,19 +1005,30 @@ function BlogCardsTaglineCta({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const ctaActionContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
-        className: cn("w-full sm:w-auto inline-flex items-center", actionClassName, ctaClassName),
+        className: cn(
+          "w-full sm:w-auto inline-flex items-center",
+          actionClassName,
+          ctaClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -1038,7 +1049,10 @@ function BlogCardsTaglineCta({
       return /* @__PURE__ */ jsxs(
         Card,
         {
-          className: cn("grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0", postCardClassName),
+          className: cn(
+            "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
+            postCardClassName
+          ),
           children: [
             post.image && /* @__PURE__ */ jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsx(
               Pressable,
@@ -1090,15 +1104,51 @@ function BlogCardsTaglineCta({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto flex flex-col items-center gap-16 lg:px-16", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          ctaActionContent
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8", postsClassName), children: postsContent })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto flex flex-col items-center gap-16 lg:px-16",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ctaActionContent
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
+                  postsClassName
+                ),
+                children: postsContent
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }