@opensite/ui 0.5.3 → 0.5.4

package/dist/registry.js

@@ -76210,7 +76210,7 @@ function ProjectDetailParallaxScroll(props) {
 }
 function BannerPromoCta({
   message,
-  discount = "Up to 50% off",
+  discount,
   separator,
   actions,
   actionsSlot,
@@ -76222,11 +76222,18 @@ function BannerPromoCta({
   discountClassName,
   actionsClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76241,20 +76248,28 @@ function BannerPromoCta({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsx("span", { className: cn("hidden sm:inline", separatorClassName), children: "\xB7" });
-  };
+  }, [separator, separatorClassName]);
+  const messageContent = useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-semibold", messageClassName), children: message }) : /* @__PURE__ */ jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const discountContent = useMemo(() => {
+    if (!discount) return null;
+    return /* @__PURE__ */ jsx("span", { className: discountClassName, children: discount });
+  }, [discount, discountClassName]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn("w-full bg-primary text-primary-foreground", className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm", contentClassName), children: [
-        message && (typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-semibold", messageClassName), children: message }) : /* @__PURE__ */ jsx("span", { className: messageClassName, children: message })),
-        renderSeparator(),
-        discount && (typeof discount === "string" ? /* @__PURE__ */ jsx("span", { className: discountClassName, children: discount }) : /* @__PURE__ */ jsx("span", { className: discountClassName, children: discount })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: renderActions() })
+        messageContent,
+        messageContent && discountContent && separatorContent,
+        discountContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: actionsContent })
       ] }) })
     }
   );
@@ -76274,17 +76289,16 @@ function BannerCountdownSale({
   timeUnitClassName,
   separatorClassName
 }) {
-  const defaultEndTime = useMemo(
-    () => new Date(Date.now() + 24 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = endTime ?? defaultEndTime;
+  const targetTime = endTime;
   const [timeLeft, setTimeLeft] = useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -76304,10 +76318,11 @@ function BannerCountdownSale({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderDefaultTimer = () => {
+  const pad = useCallback((n) => n.toString().padStart(2, "0"), []);
+  const timerContent = useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 font-mono text-lg font-bold", timerClassName), children: [
       /* @__PURE__ */ jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.hours) }),
       /* @__PURE__ */ jsx("span", { className: separatorClassName, children: ":" }),
@@ -76315,20 +76330,28 @@ function BannerCountdownSale({
       /* @__PURE__ */ jsx("span", { className: separatorClassName, children: ":" }),
       /* @__PURE__ */ jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.seconds) })
     ] });
-  };
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, timeUnitClassName, separatorClassName, pad, targetTime]);
+  const messageContent = useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const descriptionContent = useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
   return /* @__PURE__ */ jsx("div", { className: cn("w-full bg-destructive text-white", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
-    message && (typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsx("div", { className: messageClassName, children: message })),
-    renderDefaultTimer(),
-    description && (typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+    messageContent,
+    timerContent,
+    descriptionContent
   ] }) }) });
 }
 function BannerDeliveryCountdown({
   icon,
-  iconName = "lucide/gift",
-  deliveryDate = "Dec 24",
+  iconName,
+  deliveryDate,
   cutoffTime,
-  prefixText = "Order within",
-  middleText = "for delivery by",
+  prefixText,
+  middleText,
   timerSlot,
   renderTimer,
   className,
@@ -76339,17 +76362,16 @@ function BannerDeliveryCountdown({
   timerClassName,
   deliveryDateClassName
 }) {
-  const defaultCutoffTime = useMemo(
-    () => new Date(Date.now() + 4 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = cutoffTime ?? defaultCutoffTime;
+  const targetTime = cutoffTime;
   const [timeLeft, setTimeLeft] = useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -76369,14 +76391,16 @@ function BannerDeliveryCountdown({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderIcon = () => {
+  const pad = useCallback((n) => n.toString().padStart(2, "0"), []);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 16, className: iconClassName });
-  };
-  const renderDefaultTimer = () => {
+  }, [icon, iconName, iconClassName]);
+  const timerContent = useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxs("span", { className: cn("font-mono font-bold", timerClassName), children: [
       pad(timeLeft.hours),
       ":",
@@ -76384,29 +76408,33 @@ function BannerDeliveryCountdown({
       ":",
       pad(timeLeft.seconds)
     ] });
-  };
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, pad, targetTime]);
+  const deliveryDateContent = useMemo(() => {
+    if (!deliveryDate) return null;
+    return typeof deliveryDate === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsx("span", { className: deliveryDateClassName, children: deliveryDate });
+  }, [deliveryDate, deliveryDateClassName]);
+  const messageParts = useMemo(() => {
+    return [prefixText, timerContent, middleText, deliveryDateContent].filter(
+      (part) => part !== null && part !== void 0
+    );
+  }, [prefixText, timerContent, middleText, deliveryDateContent]);
   return /* @__PURE__ */ jsx("div", { className: cn("w-full bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
-    renderIcon(),
-    /* @__PURE__ */ jsxs("span", { children: [
-      prefixText,
-      " ",
-      renderDefaultTimer(),
-      " ",
-      middleText,
-      " ",
-      deliveryDate && (typeof deliveryDate === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsx("span", { className: deliveryDateClassName, children: deliveryDate }))
-    ] })
+    iconContent,
+    messageParts.length > 0 && /* @__PURE__ */ jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxs(React13.Fragment, { children: [
+      index > 0 ? " " : null,
+      part
+    ] }, index)) })
   ] }) }) }) });
 }
 function BannerAnnouncementDismissible({
   icon,
-  iconName = "mynaui/boat",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76416,15 +76444,23 @@ function BannerAnnouncementDismissible({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderActions = () => {
+  }, [onDismiss]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76440,23 +76476,35 @@ function BannerAnnouncementDismissible({
         index
       );
     });
-  };
-  const renderIcon = () => {
+  }, [actions, actionsSlot]);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 20, className: cn("shrink-0", iconClassName) });
-  };
-  const renderDismissIcon = () => {
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const messageContent = useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
   if (!isVisible) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: cn("bg-background border-b", className), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
-      renderIcon(),
-      message && (typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsx("div", { className: messageClassName, children: message })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() })
+      iconContent,
+      messageContent,
+      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
     ] }),
     /* @__PURE__ */ jsxs(
       Pressable,
@@ -76467,8 +76515,8 @@ function BannerAnnouncementDismissible({
         asButton: true,
         className: cn("size-8", dismissButtonClassName),
         children: [
-          renderDismissIcon(),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+          dismissIconContent,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
         ]
       }
     )
@@ -76476,14 +76524,14 @@ function BannerAnnouncementDismissible({
 }
 function BannerPrivacyNotice({
   icon,
-  iconName = "mynaui/shield",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76494,12 +76542,14 @@ function BannerPrivacyNotice({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsx(
       DynamicIcon,
       {
@@ -76508,12 +76558,19 @@ function BannerPrivacyNotice({
         className: cn("mt-0.5 shrink-0", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76528,11 +76585,19 @@ function BannerPrivacyNotice({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description });
+  }, [description, descriptionClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76545,11 +76610,11 @@ function BannerPrivacyNotice({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-4", contentClassName), children: [
-          renderIcon(),
+          iconContent,
           /* @__PURE__ */ jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description })),
-            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() })
+            titleContent,
+            descriptionContent,
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
           ] })
         ] }),
         /* @__PURE__ */ jsxs(
@@ -76561,8 +76626,8 @@ function BannerPrivacyNotice({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76572,14 +76637,14 @@ function BannerPrivacyNotice({
 }
 function BannerSurveyIncentive({
   icon,
-  iconName = "mynaui/shopping-bag",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76591,12 +76656,14 @@ function BannerSurveyIncentive({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsx(
       DynamicIcon,
       {
@@ -76605,12 +76672,19 @@ function BannerSurveyIncentive({
         className: cn("shrink-0 hidden md:block", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76626,24 +76700,32 @@ function BannerSurveyIncentive({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", titleClassName), children: title }) : /* @__PURE__ */ jsx("span", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("span", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
   if (!isVisible) {
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: cn("bg-background border-b text-sm", className), children: /* @__PURE__ */ jsxs("div", { className: cn("flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", contentClassName), children: [
-      renderIcon(),
+      iconContent,
       /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col md:flex-row gap-1", textClassName), children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", titleClassName), children: title }) : /* @__PURE__ */ jsx("span", { className: titleClassName, children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("span", { className: descriptionClassName, children: description }))
+        titleContent,
+        descriptionContent
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", actionsClassName), children: [
-      renderActions(),
+      actionsContent,
       /* @__PURE__ */ jsxs(
         Pressable,
         {
@@ -76653,8 +76735,8 @@ function BannerSurveyIncentive({
           asButton: true,
           className: cn("size-8", dismissButtonClassName),
           children: [
-            renderDismissIcon(),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+            dismissIconContent,
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
           ]
         }
       )
@@ -76663,13 +76745,13 @@ function BannerSurveyIncentive({
 }
 function BannerSocialFollow({
   icon,
-  iconName = "mynaui/users",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   iconClassName,
@@ -76678,19 +76760,35 @@ function BannerSocialFollow({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: iconName, size: 20, className: cn("shrink-0", iconClassName) });
-  };
-  const renderActions = () => {
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76706,11 +76804,15 @@ function BannerSocialFollow({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const messageContent = useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76722,9 +76824,9 @@ function BannerSocialFollow({
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2", containerClassName), children: [
-        renderIcon(),
-        message && (typeof message === "string" ? /* @__PURE__ */ jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsx("span", { className: messageClassName, children: message })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: renderActions() }),
+        iconContent,
+        messageContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: actionsContent }),
         /* @__PURE__ */ jsxs(
           Pressable,
           {
@@ -76734,8 +76836,8 @@ function BannerSocialFollow({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76745,14 +76847,14 @@ function BannerSocialFollow({
 }
 function BannerGdprRights({
   icon,
-  iconName = "mynaui/globe",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76763,12 +76865,14 @@ function BannerGdprRights({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsx(
       DynamicIcon,
       {
@@ -76777,12 +76881,19 @@ function BannerGdprRights({
         className: cn("text-muted-foreground mt-0.5 shrink-0", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76797,11 +76908,22 @@ function BannerGdprRights({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = useMemo(() => {
+    if (!description && !actionsContent) return null;
+    return /* @__PURE__ */ jsxs("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: [
+      description,
+      actionsContent && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: actionsContent })
+    ] });
+  }, [description, actionsContent, descriptionClassName, actionsClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76814,13 +76936,10 @@ function BannerGdprRights({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", contentClassName), children: [
-          renderIcon(),
+          iconContent,
           /* @__PURE__ */ jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-            /* @__PURE__ */ jsxs("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: [
-              description,
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("span", { className: actionsClassName, children: renderActions() })
-            ] })
+            titleContent,
+            descriptionContent
           ] })
         ] }),
         /* @__PURE__ */ jsxs(
@@ -76832,8 +76951,8 @@ function BannerGdprRights({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76842,8 +76961,8 @@ function BannerGdprRights({
   );
 }
 function BannerEventPromo({
-  eventName = "GeneriCon 2024",
-  eventDetails = "Join us in Denver from June 7 - 9 to see what's coming next.",
+  eventName,
+  eventDetails,
   separator,
   actions,
   actionsSlot,
@@ -76856,11 +76975,18 @@ function BannerEventPromo({
   eventDetailsClassName,
   actionsClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76876,8 +77002,8 @@ function BannerEventPromo({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsx(
       "svg",
@@ -76888,28 +77014,36 @@ function BannerEventPromo({
         children: /* @__PURE__ */ jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
+  }, [separator, separatorClassName]);
+  const eventNameContent = useMemo(() => {
+    if (!eventName) return null;
+    return typeof eventName === "string" ? /* @__PURE__ */ jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsx("span", { className: eventNameClassName, children: eventName });
+  }, [eventName, eventNameClassName]);
+  const eventDetailsContent = useMemo(() => {
+    if (!eventDetails) return null;
+    return /* @__PURE__ */ jsx("span", { className: eventDetailsClassName, children: eventDetails });
+  }, [eventDetails, eventDetailsClassName]);
   return /* @__PURE__ */ jsx("div", { className: cn("bg-primary text-primary-foreground", className), children: /* @__PURE__ */ jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
     /* @__PURE__ */ jsxs("p", { className: "text-sm leading-6", children: [
-      eventName && (typeof eventName === "string" ? /* @__PURE__ */ jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsx("span", { className: eventNameClassName, children: eventName })),
-      renderSeparator(),
-      eventDetails && (typeof eventDetails === "string" ? /* @__PURE__ */ jsx("span", { className: eventDetailsClassName, children: eventDetails }) : /* @__PURE__ */ jsx("span", { className: eventDetailsClassName, children: eventDetails }))
+      eventNameContent,
+      eventNameContent && eventDetailsContent && separatorContent,
+      eventDetailsContent
     ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() })
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
   ] }) }) }) });
 }
 function BannerFloatingOffer({
-  offerTitle = "Limited time offer",
-  offerDescription = "Get 50% off for your first month",
+  offerTitle,
+  offerDescription,
   separator,
   actions,
   actionsSlot,
   open,
-  defaultOpen = true,
+  defaultOpen,
   onOpenChange,
-  dismissible = false,
+  dismissible,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   textClassName,
@@ -76920,24 +77054,34 @@ function BannerFloatingOffer({
   dismissButtonClassName
 }) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const initialOpen = defaultOpen ?? true;
+  const [internalOpen, setInternalOpen] = useState(initialOpen);
   const isVisible = isControlled ? open : internalOpen;
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const isDismissible = dismissible ?? false;
   useEffect(() => {
     if (!isControlled && defaultOpen !== internalOpen) {
-      setInternalOpen(defaultOpen);
+      setInternalOpen(initialOpen);
     }
-  }, [defaultOpen, isControlled, internalOpen]);
-  const handleDismiss = () => {
+  }, [defaultOpen, initialOpen, isControlled, internalOpen]);
+  const handleDismiss = useCallback(() => {
     if (!isControlled) {
       setInternalOpen(false);
     }
     onOpenChange?.(false);
-  };
-  const renderActions = () => {
+  }, [isControlled, onOpenChange]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -76953,8 +77097,8 @@ function BannerFloatingOffer({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsx(
       "svg",
@@ -76965,11 +77109,19 @@ function BannerFloatingOffer({
         children: /* @__PURE__ */ jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
-  const renderDismissIcon = () => {
+  }, [separator, separatorClassName]);
+  const dismissIconContent = useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const offerTitleContent = useMemo(() => {
+    if (!offerTitle) return null;
+    return typeof offerTitle === "string" ? /* @__PURE__ */ jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsx("span", { className: offerTitleClassName, children: offerTitle });
+  }, [offerTitle, offerTitleClassName]);
+  const offerDescriptionContent = useMemo(() => {
+    if (!offerDescription) return null;
+    return /* @__PURE__ */ jsx("span", { className: offerDescriptionClassName, children: offerDescription });
+  }, [offerDescription, offerDescriptionClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76982,13 +77134,13 @@ function BannerFloatingOffer({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-auto flex items-center justify-between gap-x-6 bg-primary px-6 py-2.5 sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5", containerClassName), children: [
         /* @__PURE__ */ jsxs("p", { className: cn("text-sm leading-6 text-primary-foreground", textClassName), children: [
-          offerTitle && (typeof offerTitle === "string" ? /* @__PURE__ */ jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsx("span", { className: offerTitleClassName, children: offerTitle })),
-          renderSeparator(),
-          offerDescription && (typeof offerDescription === "string" ? /* @__PURE__ */ jsx("span", { className: offerDescriptionClassName, children: offerDescription }) : /* @__PURE__ */ jsx("span", { className: offerDescriptionClassName, children: offerDescription }))
+          offerTitleContent,
+          offerTitleContent && offerDescriptionContent && separatorContent,
+          offerDescriptionContent
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", actionsClassName), children: [
-          renderActions(),
-          dismissible && /* @__PURE__ */ jsxs(
+          actionsContent,
+          isDismissible && /* @__PURE__ */ jsxs(
             Pressable,
             {
               onClick: handleDismiss,
@@ -76997,8 +77149,8 @@ function BannerFloatingOffer({
               asButton: true,
               className: cn("size-8 text-primary-foreground hover:text-primary-foreground/80", dismissButtonClassName),
               children: [
-                renderDismissIcon(),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissAriaLabel })
+                dismissIconContent,
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
               ]
             }
           )
@@ -102941,8 +103093,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerPromoCta
   message="Summer Sale"
   discount="Up to 70% off"
-  link="/sale"
-  linkText="Shop Now"
+  actions={[{ label: "Shop Now", href: "/sale" }]}
 />`.trim()
   },
   "banner-countdown-sale": {
@@ -103011,10 +103162,9 @@ var BLOCK_REGISTRY = {
     component: BannerAnnouncementDismissible,
     props: "BannerAnnouncementDismissibleProps",
     exampleUsage: `<BannerAnnouncementDismissible
-  icon="mynaui/rocket"
+  iconName="mynaui/rocket"
   message="New feature: AI-powered analytics is now live!"
-  buttonText="Try It Now"
-  buttonLink="/features/analytics"
+  actions={[{ label: "Try It Now", href: "/features/analytics", variant: "secondary", size: "sm" }]}
   onDismiss={() => console.log('Banner dismissed')}
 />`.trim()
   },
@@ -103039,8 +103189,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerPrivacyNotice
   title="Privacy Policy Updated"
   description="We've made changes to how we handle your data."
-  linkText="Read More"
-  linkUrl="/privacy"
+  actions={[{ label: "Read More", href: "/privacy", variant: "link" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -103064,8 +103213,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerSurveyIncentive
   title="Share your feedback!"
   description="Complete our quick survey and receive a 15% discount code."
-  buttonText="Start Survey"
-  buttonLink="/survey"
+  actions={[{ label: "Start Survey", href: "/survey", size: "sm" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -103088,15 +103236,14 @@ var BLOCK_REGISTRY = {
     props: "BannerSocialFollowProps",
     exampleUsage: `<BannerSocialFollow
   message="Join our community of 50,000+ developers!"
-  buttonText="Follow Now"
-  buttonLink="https://twitter.com/example"
+  actions={[{ label: "Follow Now", href: "https://twitter.com/example", variant: "secondary", size: "sm" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
   "banner-gdpr-rights": {
     id: "banner-gdpr-rights",
     name: "Banner GDPR Rights",
-    description: "A bottom-positioned GDPR privacy rights notice with globe icon, title, description, and manage data link. Features a fixed bottom position with border-top styling. Includes a dismiss button to close the banner. Ideal for GDPR compliance, data privacy notices, and user rights information.",
+    description: "A bottom-positioned privacy rights notice with icon, title, description, and manage data link. Features a fixed bottom position with border-top styling. Includes a dismiss button to close the banner. Ideal for privacy notices, data policy updates, and user rights information.",
     semanticTags: [
       "banner",
       "gdpr",
@@ -103115,8 +103262,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerGdprRights
   title="Your Privacy Rights"
   description="You can request access to or deletion of your personal data at any time."
-  linkText="Manage Data"
-  linkUrl="/privacy/manage"
+  actions={[{ label: "Manage Data", href: "/privacy/manage", variant: "link" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -103140,8 +103286,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerEventPromo
   eventName="TechSummit 2024"
   eventDetails="Join us in San Francisco from Sept 15 - 17 for the biggest tech event of the year."
-  buttonText="Get Tickets"
-  buttonLink="/events/techsummit"
+  actions={[{ label: "Get Tickets", href: "/events/techsummit", variant: "ghost", size: "sm" }]}
 />`.trim()
   },
   "banner-floating-offer": {
@@ -103166,10 +103311,9 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerFloatingOffer
   offerTitle="Black Friday Special"
   offerDescription="Save 60% on annual plans - ends tonight!"
-  buttonText="Claim Offer"
-  buttonLink="/pricing"
+  actions={[{ label: "Claim Offer", href: "/pricing", variant: "secondary", size: "sm" }]}
   dismissible={true}
-  onDismiss={() => console.log('Dismissed')}
+  onOpenChange={(open) => console.log('Visibility:', open)}
 />`.trim()
   },
   // Industries blocks