@opensite/ui 0.5.3 → 0.5.5

package/dist/banner-announcement-dismissible.cjs

@@ -556,13 +556,13 @@ function processSvgForCurrentColor(svg) {
 }
 function BannerAnnouncementDismissible({
   icon,
-  iconName = "mynaui/boat",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -572,15 +572,23 @@ function BannerAnnouncementDismissible({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderActions = () => {
+  }, [onDismiss]);
+  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,
         {
@@ -596,23 +604,35 @@ function BannerAnnouncementDismissible({
         index
       );
     });
-  };
-  const renderIcon = () => {
+  }, [actions, actionsSlot]);
+  const iconContent = React.useMemo(() => {
     if (icon) return icon;
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 20, className: cn("shrink-0", iconClassName) });
-  };
-  const renderDismissIcon = () => {
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const dismissIconContent = React.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const messageContent = React.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
   if (!isVisible) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-background border-b", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
-      renderIcon(),
-      message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+      iconContent,
+      messageContent,
+      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
@@ -623,8 +643,8 @@ function BannerAnnouncementDismissible({
         asButton: true,
         className: cn("size-8", 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-announcement-dismissible.d.cts

@@ -15,7 +15,6 @@ interface BannerAnnouncementDismissibleProps {
     icon?: React.ReactNode;
     /**
      * Icon name for DynamicIcon (used if icon prop is not provided)
-     * @default "mynaui/boat"
      */
     iconName?: string;
     /**
@@ -40,7 +39,6 @@ interface BannerAnnouncementDismissibleProps {
     dismissIcon?: React.ReactNode;
     /**
      * ARIA label for dismiss button
-     * @default "Dismiss banner"
      */
     dismissAriaLabel?: string;
     /**

package/dist/banner-announcement-dismissible.d.ts

@@ -15,7 +15,6 @@ interface BannerAnnouncementDismissibleProps {
     icon?: React.ReactNode;
     /**
      * Icon name for DynamicIcon (used if icon prop is not provided)
-     * @default "mynaui/boat"
      */
     iconName?: string;
     /**
@@ -40,7 +39,6 @@ interface BannerAnnouncementDismissibleProps {
     dismissIcon?: React.ReactNode;
     /**
      * ARIA label for dismiss button
-     * @default "Dismiss banner"
      */
     dismissAriaLabel?: string;
     /**

package/dist/banner-announcement-dismissible.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -535,13 +535,13 @@ function processSvgForCurrentColor(svg) {
 }
 function BannerAnnouncementDismissible({
   icon,
-  iconName = "mynaui/boat",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -551,15 +551,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,
         {
@@ -575,23 +583,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,
@@ -602,8 +622,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 })
         ]
       }
     )

package/dist/banner-countdown-sale.cjs

@@ -25,17 +25,16 @@ function BannerCountdownSale({
   timeUnitClassName,
   separatorClassName
 }) {
-  const defaultEndTime = react.useMemo(
-    () => new Date(Date.now() + 24 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = endTime ?? defaultEndTime;
+  const targetTime = endTime;
   const [timeLeft, setTimeLeft] = react.useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   react.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -55,10 +54,11 @@ function BannerCountdownSale({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderDefaultTimer = () => {
+  const pad = react.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const timerContent = react.useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 font-mono text-lg font-bold", timerClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.hours) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
@@ -66,11 +66,19 @@ function BannerCountdownSale({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
       /* @__PURE__ */ jsxRuntime.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 = react.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const descriptionContent = react.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full bg-destructive text-white", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message })),
-    renderDefaultTimer(),
-    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+    messageContent,
+    timerContent,
+    descriptionContent
   ] }) }) });
 }
 

package/dist/banner-countdown-sale.d.cts

@@ -15,7 +15,6 @@ interface CountdownTimeLeft {
 interface BannerCountdownSaleProps {
     /**
      * End time for the countdown
-     * @default 24 hours from now
      */
     endTime?: Date;
     /**

package/dist/banner-countdown-sale.d.ts

@@ -15,7 +15,6 @@ interface CountdownTimeLeft {
 interface BannerCountdownSaleProps {
     /**
      * End time for the countdown
-     * @default 24 hours from now
      */
     endTime?: Date;
     /**

package/dist/banner-countdown-sale.js

@@ -1,8 +1,8 @@
 "use client";
-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';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // components/blocks/banner/banner-countdown-sale.tsx
 function cn(...inputs) {
@@ -23,17 +23,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();
@@ -53,10 +52,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: ":" }),
@@ -64,11 +64,19 @@ 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
   ] }) }) });
 }
 

package/dist/banner-delivery-countdown.cjs

@@ -137,11 +137,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,
@@ -152,17 +152,16 @@ function BannerDeliveryCountdown({
   timerClassName,
   deliveryDateClassName
 }) {
-  const defaultCutoffTime = React.useMemo(
-    () => new Date(Date.now() + 4 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = cutoffTime ?? defaultCutoffTime;
+  const targetTime = cutoffTime;
   const [timeLeft, setTimeLeft] = React.useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   React.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -182,14 +181,16 @@ function BannerDeliveryCountdown({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderIcon = () => {
+  const pad = React.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const iconContent = React.useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 16, className: iconClassName });
-  };
-  const renderDefaultTimer = () => {
+  }, [icon, iconName, iconClassName]);
+  const timerContent = React.useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-mono font-bold", timerClassName), children: [
       pad(timeLeft.hours),
       ":",
@@ -197,18 +198,22 @@ function BannerDeliveryCountdown({
       ":",
       pad(timeLeft.seconds)
     ] });
-  };
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, pad, targetTime]);
+  const deliveryDateContent = React.useMemo(() => {
+    if (!deliveryDate) return null;
+    return typeof deliveryDate === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: deliveryDateClassName, children: deliveryDate });
+  }, [deliveryDate, deliveryDateClassName]);
+  const messageParts = React.useMemo(() => {
+    return [prefixText, timerContent, middleText, deliveryDateContent].filter(
+      (part) => part !== null && part !== void 0
+    );
+  }, [prefixText, timerContent, middleText, deliveryDateContent]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
-    renderIcon(),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      prefixText,
-      " ",
-      renderDefaultTimer(),
-      " ",
-      middleText,
-      " ",
-      deliveryDate && (typeof deliveryDate === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: deliveryDateClassName, children: deliveryDate }))
-    ] })
+    iconContent,
+    messageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+      index > 0 ? " " : null,
+      part
+    ] }, index)) })
   ] }) }) }) });
 }
 

package/dist/banner-delivery-countdown.d.cts

@@ -19,7 +19,6 @@ interface BannerDeliveryCountdownProps {
     icon?: React.ReactNode;
     /**
      * Icon name for DynamicIcon (used if icon prop is not provided)
-     * @default "lucide/gift"
      */
     iconName?: string;
     /**
@@ -28,7 +27,6 @@ interface BannerDeliveryCountdownProps {
     deliveryDate?: React.ReactNode;
     /**
      * Cutoff time for orders
-     * @default 4 hours from now
      */
     cutoffTime?: Date;
     /**

package/dist/banner-delivery-countdown.d.ts

@@ -19,7 +19,6 @@ interface BannerDeliveryCountdownProps {
     icon?: React.ReactNode;
     /**
      * Icon name for DynamicIcon (used if icon prop is not provided)
-     * @default "lucide/gift"
      */
     iconName?: string;
     /**
@@ -28,7 +27,6 @@ interface BannerDeliveryCountdownProps {
     deliveryDate?: React.ReactNode;
     /**
      * Cutoff time for orders
-     * @default 4 hours from now
      */
     cutoffTime?: Date;
     /**

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)) })
   ] }) }) }) });
 }