@opensite/ui 0.8.1 → 0.8.2

package/dist/feature-utility-cards-grid.cjs

@@ -968,7 +968,7 @@ Section.displayName = "Section";
 function FeatureUtilityCardsGrid({
   label,
   labelIcon,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   title,
   description,
   learnMoreAction,
@@ -990,11 +990,11 @@ function FeatureUtilityCardsGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderLabelIcon = () => {
+  const renderLabelIcon = React.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/square-dashed-mouse-pointer", size: 20, className: "text-primary" });
-  };
+    return null;
+  }, [labelIcon, labelIconName]);
   const learnMoreContent = React.useMemo(() => {
     if (learnMoreSlot) return learnMoreSlot;
     if (!learnMoreAction) return null;
@@ -1025,7 +1025,7 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = (utility) => {
+  const renderUtilityImage = React__namespace.useCallback((utility) => {
     if (utility.imageSlot) return utility.imageSlot;
     if (utility.image) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1040,7 +1040,7 @@ function FeatureUtilityCardsGrid({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const utilitiesContent = React.useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
@@ -1051,7 +1051,7 @@ function FeatureUtilityCardsGrid({
         utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
       ] })
     ] }, index));
-  }, [utilitiesSlot, utilities, cardClassName, optixFlowConfig]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1063,19 +1063,21 @@ function FeatureUtilityCardsGrid({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-            renderLabelIcon(),
-            label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+        (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
+            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
+              renderLabelIcon,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+            ] }),
+            learnMoreContent
           ] }),
-          learnMoreContent
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
       ]
     }
   );

package/dist/feature-utility-cards-grid.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { Img } from '@page-speed/img';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -946,7 +946,7 @@ Section.displayName = "Section";
 function FeatureUtilityCardsGrid({
   label,
   labelIcon,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   title,
   description,
   learnMoreAction,
@@ -968,11 +968,11 @@ function FeatureUtilityCardsGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderLabelIcon = () => {
+  const renderLabelIcon = useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/square-dashed-mouse-pointer", size: 20, className: "text-primary" });
-  };
+    return null;
+  }, [labelIcon, labelIconName]);
   const learnMoreContent = useMemo(() => {
     if (learnMoreSlot) return learnMoreSlot;
     if (!learnMoreAction) return null;
@@ -1003,7 +1003,7 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = (utility) => {
+  const renderUtilityImage = React.useCallback((utility) => {
     if (utility.imageSlot) return utility.imageSlot;
     if (utility.image) {
       return /* @__PURE__ */ jsx(
@@ -1018,7 +1018,7 @@ function FeatureUtilityCardsGrid({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const utilitiesContent = useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
@@ -1029,7 +1029,7 @@ function FeatureUtilityCardsGrid({
         utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
       ] })
     ] }, index));
-  }, [utilitiesSlot, utilities, cardClassName, optixFlowConfig]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1041,19 +1041,21 @@ function FeatureUtilityCardsGrid({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-            renderLabelIcon(),
-            label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
+        (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
+            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
+              renderLabelIcon,
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
+            ] }),
+            learnMoreContent
           ] }),
-          learnMoreContent
+          /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
-        /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
       ]
     }
   );

package/dist/navbar-tabbed-sections.cjs

@@ -1481,22 +1481,29 @@ var NavbarTabbedSections = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[300px] overflow-y-auto", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
-                  renderMobileMenu,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-4 flex flex-col gap-2 border-t pt-4",
-                        actionsClassName
-                      ),
-                      children: renderAuthActions
-                    }
-                  )
-                ] })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                SheetContent,
+                {
+                  side: "right",
+                  className: "w-[300px] overflow-y-auto",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
+                      renderMobileMenu,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "mt-4 flex flex-col gap-2 border-t pt-4",
+                            actionsClassName
+                          ),
+                          children: renderAuthActions
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
             ] })
           ]
         }

package/dist/navbar-tabbed-sections.js

@@ -1457,22 +1457,29 @@ var NavbarTabbedSections = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-[300px] overflow-y-auto", children: [
-                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
-                  renderMobileMenu,
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-4 flex flex-col gap-2 border-t pt-4",
-                        actionsClassName
-                      ),
-                      children: renderAuthActions
-                    }
-                  )
-                ] })
-              ] })
+              /* @__PURE__ */ jsxs(
+                SheetContent,
+                {
+                  side: "right",
+                  className: "w-[300px] overflow-y-auto",
+                  children: [
+                    /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
+                      renderMobileMenu,
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "mt-4 flex flex-col gap-2 border-t pt-4",
+                            actionsClassName
+                          ),
+                          children: renderAuthActions
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
             ] })
           ]
         }