shared-features 0.0.4 → 0.0.6

package/dist/{AdBanner-DF1QuMxR.js → AnnouncementModal-sxH4K5gy.js}

@@ -2,9 +2,9 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, useCallback, useState } from "react";
 import { Box, IconButton, Flex, Text, Button, Card, Link, Badge, Dialog, Heading, Checkbox, Grid } from "@radix-ui/themes";
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { a as useCampaign, b as useOneTimeAdModal, c as useUpdateAdModal, u as useCampaigns } from "./useCampaigns-nwfsALsN.js";
-import { ExternalLink, X, Check, Sparkles, Gift, Quote, Play, ChevronLeft, ChevronRight } from "lucide-react";
-import { e as isInitialized, d as getConfig } from "./analytics-CdpCtTpu.js";
+import { a as useCampaign, b as useOneTimeAdModal, c as useUpdateAdModal, u as useCampaigns } from "./useCampaigns-D46b9zuf.js";
+import { ExternalLink, X, Check, Sparkles, Gift, Quote, Play, ChevronLeft, ChevronRight, Megaphone, CheckCircle, AlertTriangle, AlertCircle, Info, Bell } from "lucide-react";
+import { e as isInitialized, d as getConfig } from "./analytics-40-S_fHC.js";
 function AdPanel({
   placement,
   variant: _variant = "small_panel_2",
@@ -1407,8 +1407,431 @@ function AdBanner({
     }
   );
 }
+const TYPE_STYLES = {
+  info: {
+    icon: Info,
+    bgColor: "var(--blue-2)",
+    borderColor: "var(--blue-6)",
+    textColor: "var(--blue-11)",
+    iconColor: "var(--blue-9)"
+  },
+  success: {
+    icon: CheckCircle,
+    bgColor: "var(--green-2)",
+    borderColor: "var(--green-6)",
+    textColor: "var(--green-11)",
+    iconColor: "var(--green-9)"
+  },
+  warning: {
+    icon: AlertTriangle,
+    bgColor: "var(--yellow-2)",
+    borderColor: "var(--yellow-6)",
+    textColor: "var(--yellow-11)",
+    iconColor: "var(--yellow-9)"
+  },
+  error: {
+    icon: AlertCircle,
+    bgColor: "var(--red-2)",
+    borderColor: "var(--red-6)",
+    textColor: "var(--red-11)",
+    iconColor: "var(--red-9)"
+  },
+  reminder: {
+    icon: AlertTriangle,
+    bgColor: "var(--orange-2)",
+    borderColor: "var(--orange-6)",
+    textColor: "var(--orange-11)",
+    iconColor: "var(--orange-9)"
+  },
+  milestone: {
+    icon: CheckCircle,
+    bgColor: "var(--violet-2)",
+    borderColor: "var(--violet-6)",
+    textColor: "var(--violet-11)",
+    iconColor: "var(--violet-9)"
+  },
+  announcement: {
+    icon: Megaphone,
+    bgColor: "var(--iris-2)",
+    borderColor: "var(--iris-6)",
+    textColor: "var(--iris-11)",
+    iconColor: "var(--iris-9)"
+  }
+};
+function BroadcastBanner({
+  broadcast,
+  onActionClick,
+  onDismiss,
+  className
+}) {
+  const impressionTrackedRef = useRef(false);
+  useEffect(() => {
+    if (!impressionTrackedRef.current) {
+      impressionTrackedRef.current = true;
+    }
+  }, []);
+  const handleActionClick = useCallback(() => {
+    onActionClick?.();
+    if (broadcast.actionUrl) {
+      window.open(broadcast.actionUrl, "_blank");
+    }
+  }, [broadcast.actionUrl, onActionClick]);
+  const handleDismiss = useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+  if (!isInitialized()) {
+    return null;
+  }
+  const typeStyle = TYPE_STYLES[broadcast.type] || TYPE_STYLES.info;
+  const Icon = typeStyle.icon;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        background: typeStyle.bgColor,
+        borderBottom: `1px solid ${typeStyle.borderColor}`,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: 4,
+              background: typeStyle.iconColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            justify: "between",
+            gap: "3",
+            py: "3",
+            px: "4",
+            style: { paddingLeft: 20 },
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      background: `color-mix(in srgb, ${typeStyle.iconColor} 15%, transparent)`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { size: 18, color: typeStyle.iconColor })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "0", style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "2",
+                      weight: "bold",
+                      style: {
+                        color: typeStyle.textColor,
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: broadcast.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "2",
+                      style: {
+                        color: "var(--gray-11)",
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: broadcast.message
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", style: { flexShrink: 0 }, children: [
+                broadcast.actionUrl && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "1",
+                    variant: "soft",
+                    onClick: handleActionClick,
+                    style: {
+                      background: `color-mix(in srgb, ${typeStyle.iconColor} 15%, transparent)`,
+                      color: typeStyle.iconColor
+                    },
+                    children: [
+                      broadcast.actionText || "Learn More",
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+                    ]
+                  }
+                ),
+                broadcast.dismissible && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { opacity: 0.7 },
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BroadcastBanners({
+  broadcasts,
+  onDismiss,
+  onActionClick,
+  maxBanners = 3,
+  className
+}) {
+  const displayBroadcasts = broadcasts.slice(0, maxBanners);
+  if (displayBroadcasts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { className, children: displayBroadcasts.map((broadcast) => /* @__PURE__ */ jsx(
+    BroadcastBanner,
+    {
+      broadcast,
+      onDismiss: () => onDismiss?.(broadcast.id),
+      onActionClick: () => onActionClick?.(broadcast.id)
+    },
+    broadcast.id
+  )) });
+}
+const TYPE_CONFIG = {
+  info: {
+    icon: Info,
+    gradient: "linear-gradient(135deg, var(--blue-3) 0%, var(--blue-2) 100%)",
+    accentColor: "var(--blue-9)",
+    iconBg: "var(--blue-4)"
+  },
+  success: {
+    icon: CheckCircle,
+    gradient: "linear-gradient(135deg, var(--green-3) 0%, var(--green-2) 100%)",
+    accentColor: "var(--green-9)",
+    iconBg: "var(--green-4)"
+  },
+  warning: {
+    icon: AlertTriangle,
+    gradient: "linear-gradient(135deg, var(--yellow-3) 0%, var(--yellow-2) 100%)",
+    accentColor: "var(--yellow-9)",
+    iconBg: "var(--yellow-4)"
+  },
+  error: {
+    icon: AlertCircle,
+    gradient: "linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 100%)",
+    accentColor: "var(--red-9)",
+    iconBg: "var(--red-4)"
+  },
+  reminder: {
+    icon: Bell,
+    gradient: "linear-gradient(135deg, var(--orange-3) 0%, var(--orange-2) 100%)",
+    accentColor: "var(--orange-9)",
+    iconBg: "var(--orange-4)"
+  },
+  milestone: {
+    icon: Sparkles,
+    gradient: "linear-gradient(135deg, var(--violet-3) 0%, var(--violet-2) 100%)",
+    accentColor: "var(--violet-9)",
+    iconBg: "var(--violet-4)"
+  },
+  announcement: {
+    icon: Megaphone,
+    gradient: "linear-gradient(135deg, var(--iris-3) 0%, var(--iris-2) 100%)",
+    accentColor: "var(--iris-9)",
+    iconBg: "var(--iris-4)"
+  }
+};
+function AnnouncementModal({
+  broadcast,
+  isOpen,
+  onClose,
+  onActionClick
+}) {
+  const impressionTrackedRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && broadcast && !impressionTrackedRef.current) {
+      impressionTrackedRef.current = true;
+    }
+  }, [isOpen, broadcast]);
+  const handleActionClick = useCallback(() => {
+    onActionClick?.();
+    if (broadcast?.actionUrl) {
+      window.open(broadcast.actionUrl, "_blank");
+    }
+    onClose();
+  }, [broadcast, onActionClick, onClose]);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  if (!isInitialized() || !broadcast) {
+    return null;
+  }
+  const typeConfig = TYPE_CONFIG[broadcast.type] || TYPE_CONFIG.announcement;
+  const Icon = typeConfig.icon;
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(
+    Dialog.Content,
+    {
+      style: {
+        maxWidth: 480,
+        padding: 0,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              background: typeConfig.gradient,
+              padding: "var(--space-6)",
+              position: "relative"
+            },
+            children: [
+              broadcast.dismissible && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    position: "absolute",
+                    top: "var(--space-3)",
+                    right: "var(--space-3)"
+                  },
+                  children: /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "1", color: "gray", children: /* @__PURE__ */ jsx(X, { size: 18 }) }) })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", gap: "4", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: 72,
+                      height: 72,
+                      borderRadius: "var(--radius-4)",
+                      background: typeConfig.iconBg,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { size: 36, color: typeConfig.accentColor })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    size: "5",
+                    weight: "bold",
+                    align: "center",
+                    style: { color: "var(--gray-12)" },
+                    children: broadcast.title
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { p: "5", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              size: "3",
+              align: "center",
+              style: {
+                color: "var(--gray-11)",
+                lineHeight: 1.6
+              },
+              children: broadcast.message
+            }
+          ),
+          broadcast.isImportant && /* @__PURE__ */ jsx(Flex, { justify: "center", mt: "4", children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                padding: "var(--space-1) var(--space-3)",
+                borderRadius: "var(--radius-2)",
+                background: typeConfig.iconBg,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "var(--space-1)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Sparkles, { size: 12, color: typeConfig.accentColor }),
+                /* @__PURE__ */ jsx(Text, { size: "1", weight: "medium", style: { color: typeConfig.accentColor }, children: "Important" })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            gap: "3",
+            p: "4",
+            justify: "center",
+            style: {
+              borderTop: "1px solid var(--gray-4)",
+              background: "var(--gray-2)"
+            },
+            children: broadcast.actionUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "soft", color: "gray", size: "2", children: "Maybe Later" }) }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "2",
+                  onClick: handleActionClick,
+                  style: {
+                    background: typeConfig.accentColor
+                  },
+                  children: [
+                    broadcast.actionText || "Learn More",
+                    /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "2",
+                style: {
+                  background: typeConfig.accentColor,
+                  minWidth: 120
+                },
+                children: "Got It"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  ) });
+}
 export {
   AdPanel as A,
+  BroadcastBanner as B,
   CardVariant as C,
   FeaturesVariant as F,
   GradientVariant as G,
@@ -1426,6 +1849,8 @@ export {
   TestimonialVariant as f,
   getSmallPanelVariant as g,
   ComparisonVariant as h,
-  getLargePanelVariant as i
+  getLargePanelVariant as i,
+  BroadcastBanners as j,
+  AnnouncementModal as k
 };
-//# sourceMappingURL=AdBanner-DF1QuMxR.js.map
+//# sourceMappingURL=AnnouncementModal-sxH4K5gy.js.map