@opensite/ui 1.4.0 → 1.4.1

package/dist/feature-bento-image-grid.cjs

@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -975,87 +949,203 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React__namespace.useCallback((item) => {
-    if (item.icon) return item.icon;
-    if (item.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 24 });
-    return null;
-  }, []);
-  const renderItemImage = React__namespace.useCallback((item, imageClassName) => {
-    if (item.imageSlot) return item.imageSlot;
-    if (item.imageSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: item.imageSrc,
-          alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
-          className: cn(imageClassName, item.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
-  const renderLargeCard = React__namespace.useCallback((item) => {
-    const iconContent = renderItemIcon(item);
-    const hasIconBadgeContent = iconContent || item.iconBadge;
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      renderItemImage(item, "h-full max-h-[580px] w-full rounded-xl object-cover object-center"),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          iconContent,
-          item.iconBadge
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-          item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title })),
-          item.linkText && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("flex items-center gap-1 font-medium", item.linkTextClassName), children: [
-            item.linkText,
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+  const renderItemIcon = React__namespace.useCallback(
+    (item) => {
+      if (item.icon) return item.icon;
+      if (item.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 24 });
+      return null;
+    },
+    []
+  );
+  const renderItemImage = React__namespace.useCallback(
+    (item, imageClassName) => {
+      if (item.imageSlot) return item.imageSlot;
+      if (item.imageSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: item.imageSrc,
+            alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
+            className: cn(imageClassName, item.imageClassName),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
+  const renderLargeCard = React__namespace.useCallback(
+    (item) => {
+      const iconContent = renderItemIcon(item);
+      const hasIconBadgeContent = iconContent || item.iconBadge;
+      const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        renderItemImage(
+          item,
+          "h-full max-h-[580px] w-full rounded-xl object-cover object-center"
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between px-5 md:px-8 py-6 md:py-6", children: [
+          hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "ml-auto flex w-fit items-center gap-2 p-0 text-sm font-semibold text-white",
+                item.iconBadgeClassName
+              ),
+              children: [
+                iconContent,
+                item.iconBadge
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-5 text-white", children: [
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: cn(
+                  "text-2xl font-medium lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-2xl font-medium lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            )),
+            item.linkText && /* @__PURE__ */ jsxRuntime.jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex items-center gap-1 font-bold text-sm uppercase",
+                  item.linkTextClassName
+                ),
+                children: [
+                  item.linkText,
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
-    ] });
-    if (item.link) {
+      ] });
+      if (item.link) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: item.link,
+            className: cn(
+              "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+              largeCardClassName,
+              item.className
+            ),
+            children: cardContent
+          }
+        );
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
+        "div",
         {
-          href: item.link,
-          className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className),
+          className: cn(
+            "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+            largeCardClassName,
+            item.className
+          ),
           children: cardContent
         }
       );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className), children: cardContent });
-  }, [largeCardClassName, renderItemImage, renderItemIcon]);
-  const renderSmallCard = React__namespace.useCallback((item, index) => {
-    const iconContent = renderItemIcon(item);
-    const hasIconBadgeContent = iconContent || item.iconBadge;
-    const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      renderItemImage(item, cn(
-        "h-full w-full rounded-xl object-cover object-center",
-        index === 0 ? "max-h-44" : "max-h-96"
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          iconContent,
-          item.iconBadge
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-          item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title })),
-          item.linkText && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("flex items-center gap-1 font-medium", item.linkTextClassName), children: [
-            item.linkText,
-            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+    },
+    [largeCardClassName, renderItemImage, renderItemIcon]
+  );
+  const renderSmallCard = React__namespace.useCallback(
+    (item, index) => {
+      const iconContent = renderItemIcon(item);
+      const hasIconBadgeContent = iconContent || item.iconBadge;
+      const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        renderItemImage(
+          item,
+          cn(
+            "h-full w-full rounded-xl object-cover object-center",
+            index === 0 ? "max-h-44" : "max-h-96"
+          )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
+          hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold ",
+                item.iconBadgeClassName
+              ),
+              children: [
+                iconContent,
+                item.iconBadge
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 ", children: [
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h4",
+              {
+                className: cn(
+                  "text-2xl font-semibold lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-2xl font-semibold lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            )),
+            item.linkText && /* @__PURE__ */ jsxRuntime.jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex items-center gap-1 font-medium",
+                  item.linkTextClassName
+                ),
+                children: [
+                  item.linkText,
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
-    ] });
-    if (item.link) {
+      ] });
+      if (item.link) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: item.link,
+            className: cn(
+              "group relative overflow-hidden rounded-xl",
+              index === 1 && "row-span-2",
+              smallCardClassName,
+              item.className
+            ),
+            children: cardContent
+          },
+          index
+        );
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
+        "div",
         {
-          href: item.link,
           className: cn(
             "group relative overflow-hidden rounded-xl",
             index === 1 && "row-span-2",
@@ -1066,21 +1156,9 @@ function FeatureBentoImageGrid({
         },
         index
       );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "group relative overflow-hidden rounded-xl",
-          index === 1 && "row-span-2",
-          smallCardClassName,
-          item.className
-        ),
-        children: cardContent
-      },
-      index
-    );
-  }, [smallCardClassName, renderItemImage, renderItemIcon]);
+    },
+    [smallCardClassName, renderItemImage, renderItemIcon]
+  );
   const itemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -1102,9 +1180,36 @@ function FeatureBentoImageGrid({
       className,
       containerClassName,
       children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0", gridClassName), children: itemsContent })
+        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: cn(
+              "mb-4 text-center text-4xl font-semibold text-balance",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-4 text-center text-4xl font-semibold text-balance",
+              titleClassName
+            ),
+            children: title
+          }
+        )),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0",
+              gridClassName
+            ),
+            children: itemsContent
+          }
+        )
       ]
     }
   );