@janovix/blocks 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/index.cjs

@@ -10,6 +10,8 @@ var SliderPrimitive = require('@radix-ui/react-slider');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var vaul = require('vaul');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,6 +36,8 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -9652,9 +9656,11 @@ function AvatarEditor({
   const [dragStart, setDragStart] = React32.useState({ x: 0, y: 0 });
   const [showGrid, setShowGrid] = React32.useState(initialShowGrid);
   React32.useEffect(() => {
-    if (imageSource && !imageSource.startsWith("data:")) {
+    if (imageSource) {
       const img = new Image();
-      img.crossOrigin = "anonymous";
+      if (!imageSource.startsWith("data:")) {
+        img.crossOrigin = "anonymous";
+      }
       img.onload = () => {
         setImage(img);
         setImageLoaded(true);
@@ -9842,6 +9848,7 @@ function AvatarEditor({
   const handleTouchMove = React32.useCallback(
     (e) => {
       if (!isDragging) return;
+      e.preventDefault();
       const touch = e.touches[0];
       setPosition({
         x: touch.clientX - dragStart.x,
@@ -10424,14 +10431,13 @@ function DrawerDescription({
 function useMediaQuery(query) {
   const [matches, setMatches] = React32.useState(false);
   React32.useEffect(() => {
+    if (typeof window === "undefined") return;
     const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
+    setMatches(media.matches);
     const listener = () => setMatches(media.matches);
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [matches, query]);
+  }, [query]);
   return matches;
 }
 function AvatarEditorDialog({
@@ -10454,7 +10460,15 @@ function AvatarEditorDialog({
   const [editedValue, setEditedValue] = React32.useState(value ?? null);
   const [isSaving, setIsSaving] = React32.useState(false);
   const [feedback, setFeedback] = React32.useState(null);
+  const [mobileEditorSize, setMobileEditorSize] = React32.useState(editorSize);
   const isMobile = useMediaQuery("(max-width: 640px)");
+  React32.useEffect(() => {
+    if (typeof window !== "undefined" && isMobile) {
+      setMobileEditorSize(Math.min(editorSize + 40, window.innerWidth - 48));
+    } else {
+      setMobileEditorSize(editorSize);
+    }
+  }, [isMobile, editorSize]);
   const handleOpenChange = React32.useCallback(
     (open) => {
       if (open) {
@@ -10529,7 +10543,6 @@ function AvatarEditorDialog({
       ]
     }
   );
-  const mobileEditorSize = isMobile ? Math.min(editorSize + 40, window.innerWidth - 48) : editorSize;
   const EditorContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       AvatarEditor,
@@ -10614,6 +10627,453 @@ function AvatarEditorDialog({
     ] }) })
   ] });
 }
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "h-full w-full rounded-[inherit]",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-bar",
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+var sizeConfig = {
+  sm: {
+    button: "h-8 w-8",
+    icon: "w-4 h-4",
+    badge: "min-w-[16px] h-4 text-[10px] -top-1 -right-1",
+    dot: "w-2.5 h-2.5 -top-0.5 -right-0.5"
+  },
+  md: {
+    button: "h-9 w-9",
+    icon: "w-5 h-5",
+    badge: "min-w-[18px] h-[18px] text-[11px] -top-1 -right-1",
+    dot: "w-3 h-3 -top-0.5 -right-0.5"
+  },
+  lg: {
+    button: "h-10 w-10",
+    icon: "w-6 h-6",
+    badge: "min-w-[20px] h-5 text-xs -top-1.5 -right-1.5",
+    dot: "w-3.5 h-3.5 -top-0.5 -right-0.5"
+  }
+};
+var typeConfig = {
+  info: {
+    icon: lucideReact.Info,
+    color: "text-blue-500",
+    bg: "bg-blue-500/10"
+  },
+  success: {
+    icon: lucideReact.CheckCircle,
+    color: "text-green-500",
+    bg: "bg-green-500/10"
+  },
+  warning: {
+    icon: lucideReact.AlertTriangle,
+    color: "text-amber-500",
+    bg: "bg-amber-500/10"
+  },
+  error: {
+    icon: lucideReact.XCircle,
+    color: "text-red-500",
+    bg: "bg-red-500/10"
+  }
+};
+var dotColorConfig = {
+  red: "bg-red-500",
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  amber: "bg-amber-500",
+  purple: "bg-purple-500",
+  primary: "bg-primary"
+};
+var soundConfig = {
+  chime: {
+    frequencies: [880, 1100],
+    durations: [0.1, 0.2],
+    gain: 0.3
+  },
+  bell: {
+    frequencies: [523, 659, 784],
+    durations: [0.15, 0.15, 0.2],
+    gain: 0.25
+  },
+  pop: {
+    frequencies: [400, 600],
+    durations: [0.05, 0.08],
+    gain: 0.4
+  },
+  ding: {
+    frequencies: [1200],
+    durations: [0.15],
+    gain: 0.2
+  }
+};
+var pulseVariants = {
+  ring: {
+    animate: { scale: [1, 1.8], opacity: [0.6, 0] },
+    transition: {
+      duration: 1.2,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeOut"
+    }
+  },
+  glow: {
+    animate: { scale: [1, 1.3, 1], opacity: [0.8, 0.4, 0.8] },
+    transition: {
+      duration: 1.5,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut"
+    }
+  },
+  bounce: {
+    animate: { scale: [1, 1.2, 1], y: [0, -2, 0] },
+    transition: {
+      duration: 0.6,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut"
+    }
+  }
+};
+function formatTimeAgo(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffSecs < 60) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+function playNotificationSound(soundType = "chime", soundUrl) {
+  if (typeof window === "undefined" || soundType === "none") return;
+  if (soundUrl) {
+    const audio = new Audio(soundUrl);
+    audio.volume = 0.5;
+    audio.play().catch(() => {
+    });
+    return;
+  }
+  const config = soundConfig[soundType];
+  if (!config) return;
+  try {
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    let currentTime = audioContext.currentTime;
+    config.frequencies.forEach((freq, i) => {
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      oscillator.frequency.setValueAtTime(freq, currentTime);
+      gainNode.gain.setValueAtTime(config.gain, currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.01,
+        currentTime + config.durations[i]
+      );
+      oscillator.start(currentTime);
+      oscillator.stop(currentTime + config.durations[i]);
+      currentTime += config.durations[i] * 0.7;
+    });
+  } catch {
+  }
+}
+function NotificationsWidget({
+  notifications,
+  onMarkAsRead,
+  onMarkAllAsRead,
+  onDismiss,
+  onClearAll,
+  onNotificationClick,
+  size: size4 = "md",
+  maxVisible = 5,
+  playSound = true,
+  soundUrl,
+  className,
+  emptyMessage = "No notifications",
+  title = "Notifications",
+  dotColor = "red",
+  showPulse = true,
+  soundType = "chime",
+  pulseStyle = "ring",
+  soundCooldown = 2e3
+}) {
+  const [isOpen, setIsOpen] = React32__namespace.useState(false);
+  const [prevCount, setPrevCount] = React32__namespace.useState(0);
+  const lastSoundPlayedRef = React32__namespace.useRef(0);
+  const styles = sizeConfig[size4];
+  const dotBgColor = dotColorConfig[dotColor];
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  const visibleNotifications = React32__namespace.useMemo(
+    () => notifications.slice(0, maxVisible),
+    [notifications, maxVisible]
+  );
+  const hasMore = notifications.length > maxVisible;
+  React32__namespace.useEffect(() => {
+    if (playSound && soundType !== "none" && unreadCount > prevCount && prevCount > 0) {
+      const now = Date.now();
+      if (now - lastSoundPlayedRef.current >= soundCooldown) {
+        playNotificationSound(soundType, soundUrl);
+        lastSoundPlayedRef.current = now;
+      }
+    }
+    setPrevCount(unreadCount);
+  }, [unreadCount, prevCount, soundType, soundUrl, soundCooldown, playSound]);
+  React32__namespace.useEffect(() => {
+    if (isOpen && onMarkAsRead) {
+      visibleNotifications.forEach((notification) => {
+        if (!notification.read) {
+          onMarkAsRead(notification.id);
+        }
+      });
+    }
+  }, [isOpen, onMarkAsRead, visibleNotifications]);
+  const handleNotificationClick = (notification) => {
+    if (notification.href) {
+      onNotificationClick?.(notification);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      react.motion.button,
+      {
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-lg",
+          "bg-muted/50 border border-border/50 hover:bg-muted/70 transition-colors",
+          styles.button,
+          className
+        ),
+        whileTap: { scale: 0.95 },
+        "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: cn(styles.icon, "text-muted-foreground") }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              initial: { scale: 0, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: { scale: 0, opacity: 0 },
+              className: cn(
+                "absolute flex items-center justify-center rounded-full",
+                dotBgColor,
+                "text-white font-medium",
+                unreadCount > 9 ? styles.badge : styles.dot,
+                unreadCount > 9 && "px-1"
+              ),
+              children: unreadCount > 9 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: unreadCount > 99 ? "99+" : unreadCount }) : null
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: unreadCount > 0 && showPulse && pulseStyle !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              initial: { scale: 1, opacity: 0.5 },
+              animate: pulseVariants[pulseStyle].animate,
+              transition: pulseVariants[pulseStyle].transition,
+              className: cn("absolute rounded-full", dotBgColor, styles.dot)
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        className: "w-80 p-0 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: title }),
+              unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 py-0.5 text-xs font-medium rounded-full bg-primary/10 text-primary", children: [
+                unreadCount,
+                " new"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs",
+                onClick: () => onMarkAllAsRead(),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { className: "w-3.5 h-3.5 mr-1" }),
+                  "Mark all read"
+                ]
+              }
+            ) })
+          ] }),
+          notifications.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "w-6 h-6 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[320px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border", children: visibleNotifications.map((notification) => {
+              const config = typeConfig[notification.type || "info"];
+              const Icon = config.icon;
+              const hasLink = !!notification.href;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                react.motion.div,
+                {
+                  initial: { opacity: 0, y: -10 },
+                  animate: { opacity: 1, y: 0 },
+                  className: cn(
+                    "relative flex gap-3 px-4 py-3 transition-colors group",
+                    hasLink && "cursor-pointer hover:bg-muted/50",
+                    !hasLink && "cursor-default",
+                    !notification.read && "bg-primary/5"
+                  ),
+                  onClick: () => handleNotificationClick(notification),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+                          config.bg
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("w-4 h-4", config.color) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-sm line-clamp-1",
+                            !notification.read ? "font-semibold" : "font-medium",
+                            hasLink && "group-hover:underline"
+                          ),
+                          children: notification.title
+                        }
+                      ) }),
+                      notification.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: notification.message }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-1", children: formatTimeAgo(notification.timestamp) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-start gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-6 w-6 text-muted-foreground hover:text-destructive",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDismiss(notification.id);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
+                      }
+                    ) })
+                  ]
+                },
+                notification.id
+              );
+            }) }) }),
+            (hasMore || onClearAll) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
+              hasMore && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                "+",
+                notifications.length - maxVisible,
+                " more"
+              ] }),
+              onClearAll && notifications.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs text-muted-foreground hover:text-destructive",
+                  onClick: () => onClearAll(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-3 h-3 mr-1" }),
+                    "Clear all"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
@@ -10654,6 +11114,13 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent2;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger2;
 exports.DropdownMenuTrigger = DropdownMenuTrigger2;
 exports.LanguageSwitcher = LanguageSwitcher;
+exports.NotificationsWidget = NotificationsWidget;
+exports.Popover = Popover;
+exports.PopoverAnchor = PopoverAnchor;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.Slider = Slider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.Toggle = Toggle;