@opensite/ui 0.5.3 → 0.5.4

package/dist/banner-delivery-countdown.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import { useMemo, useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -116,11 +116,11 @@ function processSvgForCurrentColor(svg) {
 }
 function BannerDeliveryCountdown({
   icon,
-  iconName = "lucide/gift",
-  deliveryDate = "Dec 24",
+  iconName,
+  deliveryDate,
   cutoffTime,
-  prefixText = "Order within",
-  middleText = "for delivery by",
+  prefixText,
+  middleText,
   timerSlot,
   renderTimer,
   className,
@@ -131,17 +131,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();
@@ -161,14 +160,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),
       ":",
@@ -176,18 +177,22 @@ 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(React.Fragment, { children: [
+      index > 0 ? " " : null,
+      part
+    ] }, index)) })
   ] }) }) }) });
 }
 

package/dist/banner-event-promo.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/banner/banner-event-promo.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -450,8 +450,8 @@ var Pressable = React__namespace.forwardRef(
 );
 Pressable.displayName = "Pressable";
 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,
@@ -464,11 +464,18 @@ function BannerEventPromo({
   eventDetailsClassName,
   actionsClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = React.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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -484,8 +491,8 @@ function BannerEventPromo({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = React.useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -496,14 +503,22 @@ function BannerEventPromo({
         children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
+  }, [separator, separatorClassName]);
+  const eventNameContent = React.useMemo(() => {
+    if (!eventName) return null;
+    return typeof eventName === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventNameClassName, children: eventName });
+  }, [eventName, eventNameClassName]);
+  const eventDetailsContent = React.useMemo(() => {
+    if (!eventDetails) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails });
+  }, [eventDetails, eventDetailsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-primary text-primary-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6", children: [
-      eventName && (typeof eventName === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventNameClassName, children: eventName })),
-      renderSeparator(),
-      eventDetails && (typeof eventDetails === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails }))
+      eventNameContent,
+      eventNameContent && eventDetailsContent && separatorContent,
+      eventDetailsContent
     ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
   ] }) }) }) });
 }
 

package/dist/banner-event-promo.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/banner-event-promo.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/banner-event-promo.js

@@ -1,11 +1,12 @@
 "use client";
+import * as React from 'react';
+import { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/banner/banner-event-promo.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -428,8 +429,8 @@ var Pressable = React.forwardRef(
 );
 Pressable.displayName = "Pressable";
 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,
@@ -442,11 +443,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,
         {
@@ -462,8 +470,8 @@ function BannerEventPromo({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsx(
       "svg",
@@ -474,14 +482,22 @@ 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 })
   ] }) }) }) });
 }
 

package/dist/banner-floating-offer.cjs

@@ -555,17 +555,17 @@ function processSvgForCurrentColor(svg) {
   return processed;
 }
 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,
@@ -576,24 +576,34 @@ function BannerFloatingOffer({
   dismissButtonClassName
 }) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const initialOpen = defaultOpen ?? true;
+  const [internalOpen, setInternalOpen] = React.useState(initialOpen);
   const isVisible = isControlled ? open : internalOpen;
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const isDismissible = dismissible ?? false;
   React.useEffect(() => {
     if (!isControlled && defaultOpen !== internalOpen) {
-      setInternalOpen(defaultOpen);
+      setInternalOpen(initialOpen);
     }
-  }, [defaultOpen, isControlled, internalOpen]);
-  const handleDismiss = () => {
+  }, [defaultOpen, initialOpen, isControlled, internalOpen]);
+  const handleDismiss = React.useCallback(() => {
     if (!isControlled) {
       setInternalOpen(false);
     }
     onOpenChange?.(false);
-  };
-  const renderActions = () => {
+  }, [isControlled, onOpenChange]);
+  const actionsContent = React.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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -609,8 +619,8 @@ function BannerFloatingOffer({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = React.useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -621,11 +631,19 @@ function BannerFloatingOffer({
         children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
-  const renderDismissIcon = () => {
+  }, [separator, separatorClassName]);
+  const dismissIconContent = React.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const offerTitleContent = React.useMemo(() => {
+    if (!offerTitle) return null;
+    return typeof offerTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerTitleClassName, children: offerTitle });
+  }, [offerTitle, offerTitleClassName]);
+  const offerDescriptionContent = React.useMemo(() => {
+    if (!offerDescription) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription });
+  }, [offerDescription, offerDescriptionClassName]);
   if (!isVisible) {
     return null;
   }
@@ -638,13 +656,13 @@ function BannerFloatingOffer({
       ),
       children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: cn("text-sm leading-6 text-primary-foreground", textClassName), children: [
-          offerTitle && (typeof offerTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerTitleClassName, children: offerTitle })),
-          renderSeparator(),
-          offerDescription && (typeof offerDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription }))
+          offerTitleContent,
+          offerTitleContent && offerDescriptionContent && separatorContent,
+          offerDescriptionContent
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", actionsClassName), children: [
-          renderActions(),
-          dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+          actionsContent,
+          isDismissible && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               onClick: handleDismiss,
@@ -653,8 +671,8 @@ function BannerFloatingOffer({
               asButton: true,
               className: cn("size-8 text-primary-foreground hover:text-primary-foreground/80", dismissButtonClassName),
               children: [
-                renderDismissIcon(),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+                dismissIconContent,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
               ]
             }
           )

package/dist/banner-floating-offer.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -35,7 +35,6 @@ interface BannerFloatingOfferProps {
     open?: boolean;
     /**
      * Default visibility state for uncontrolled mode
-     * @default true
      */
     defaultOpen?: boolean;
     /**
@@ -44,7 +43,6 @@ interface BannerFloatingOfferProps {
     onOpenChange?: (open: boolean) => void;
     /**
      * Whether the banner can be dismissed
-     * @default false
      */
     dismissible?: boolean;
     /**
@@ -53,7 +51,6 @@ interface BannerFloatingOfferProps {
     dismissIcon?: React.ReactNode;
     /**
      * ARIA label for dismiss button
-     * @default "Dismiss banner"
      */
     dismissAriaLabel?: string;
     /**

package/dist/banner-floating-offer.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -35,7 +35,6 @@ interface BannerFloatingOfferProps {
     open?: boolean;
     /**
      * Default visibility state for uncontrolled mode
-     * @default true
      */
     defaultOpen?: boolean;
     /**
@@ -44,7 +43,6 @@ interface BannerFloatingOfferProps {
     onOpenChange?: (open: boolean) => void;
     /**
      * Whether the banner can be dismissed
-     * @default false
      */
     dismissible?: boolean;
     /**
@@ -53,7 +51,6 @@ interface BannerFloatingOfferProps {
     dismissIcon?: React.ReactNode;
     /**
      * ARIA label for dismiss button
-     * @default "Dismiss banner"
      */
     dismissAriaLabel?: string;
     /**

package/dist/banner-floating-offer.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -534,17 +534,17 @@ function processSvgForCurrentColor(svg) {
   return processed;
 }
 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,
@@ -555,24 +555,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,
         {
@@ -588,8 +598,8 @@ function BannerFloatingOffer({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsx(
       "svg",
@@ -600,11 +610,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;
   }
@@ -617,13 +635,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,
@@ -632,8 +650,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 })
               ]
             }
           )