@elevasis/ui 1.3.1 → 1.3.2

package/dist/chunk-TMFCNFLW.js

@@ -1,107 +0,0 @@
-import { useMarkAsRead, useMarkAllAsRead, useNotificationCount, useNotifications } from './chunk-BLO4SISK.js';
-import { UnstyledButton, Group, Box, Stack, Text, Center, Loader, Button, Divider, ScrollArea, Popover, Tooltip, Indicator, ActionIcon } from '@mantine/core';
-import { IconCircle, IconCircleFilled, IconBell } from '@tabler/icons-react';
-import { formatDistanceToNow } from 'date-fns';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useDisclosure } from '@mantine/hooks';
-
-var categoryColors = {
-  info: "blue",
-  queue: "cyan",
-  alert: "yellow",
-  error: "red",
-  system: "gray"
-};
-function NotificationItem({ notification, onClose, onNavigate }) {
-  const markAsRead = useMarkAsRead();
-  const handleClick = async () => {
-    if (!notification.read) {
-      await markAsRead.mutateAsync(notification.id);
-    }
-    if (notification.actionUrl) {
-      onNavigate?.(notification.actionUrl);
-    }
-    onClose?.();
-  };
-  const categoryColor = categoryColors[notification.category] || "gray";
-  return /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      onClick: handleClick,
-      style: {
-        width: "100%",
-        padding: "12px",
-        backgroundColor: "transparent",
-        transition: "background-color var(--duration-fast) var(--easing)"
-      },
-      styles: {
-        root: {
-          "&:hover": {
-            backgroundColor: "var(--color-surface-hover)"
-          }
-        }
-      },
-      children: /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(Box, { mt: 4, children: notification.read ? /* @__PURE__ */ jsx(IconCircle, { size: 12, color: "var(--mantine-color-gray-5)" }) : /* @__PURE__ */ jsx(IconCircleFilled, { size: 12, color: `var(--mantine-color-${categoryColor}-6)` }) }),
-        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", fw: notification.read ? 400 : 600, children: notification.title }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: notification.message }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true }) })
-        ] })
-      ] })
-    }
-  );
-}
-function NotificationList({ notifications, isLoading, onClose, onNavigate }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) });
-  }
-  if (notifications.length === 0) {
-    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No notifications" }) });
-  }
-  return /* @__PURE__ */ jsx(Stack, { gap: 0, children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose, onNavigate }, notification.id)) });
-}
-function NotificationPanel({ notifications, isLoading, onClose, onNavigate }) {
-  const markAllAsRead = useMarkAllAsRead();
-  const hasUnread = notifications.some((n) => !n.read);
-  const handleMarkAllAsRead = async () => {
-    await markAllAsRead.mutateAsync();
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Group, { justify: "space-between", p: "md", pb: "sm", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Notifications" }),
-      hasUnread && /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "xs", onClick: handleMarkAllAsRead, loading: markAllAsRead.isPending, children: "Mark all as read" })
-    ] }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(ScrollArea, { h: 400, type: "auto", children: /* @__PURE__ */ jsx(
-      NotificationList,
-      {
-        notifications,
-        isLoading,
-        onClose,
-        onNavigate
-      }
-    ) })
-  ] });
-}
-function NotificationBell({ unreadCount, onNavigate }) {
-  const [opened, { toggle, close }] = useDisclosure(false);
-  const { data: apiCount = 0 } = useNotificationCount();
-  const { data, isLoading } = useNotifications({ limit: 20 });
-  const notifications = data?.notifications ?? [];
-  const count = unreadCount ?? apiCount;
-  return /* @__PURE__ */ jsxs(Popover, { opened, onChange: toggle, position: "bottom-end", width: 400, children: [
-    /* @__PURE__ */ jsx(Tooltip, { label: "Notifications", disabled: opened, children: /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Indicator, { label: count > 99 ? "99+" : count, disabled: count === 0, size: 16, offset: 4, children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "lg", onClick: toggle, children: /* @__PURE__ */ jsx(IconBell, { size: 20, color: "var(--color-text-subtle)" }) }) }) }) }),
-    /* @__PURE__ */ jsx(Popover.Dropdown, { p: 0, children: /* @__PURE__ */ jsx(
-      NotificationPanel,
-      {
-        notifications,
-        isLoading,
-        onClose: close,
-        onNavigate
-      }
-    ) })
-  ] });
-}
-
-export { NotificationBell, NotificationItem, NotificationList, NotificationPanel };