@quanticjs/notification-ui 8.1.0 → 9.0.0

package/dist/index.js

@@ -363,7 +363,7 @@ function NotificationBell({
           "span",
           {
             "aria-hidden": "true",
-            className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold text-destructive-foreground",
+            className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-coral px-1.5 text-xs font-semibold text-coral-foreground ring-2 ring-background",
             children: count > 99 ? "99+" : count
           }
         )
@@ -451,7 +451,7 @@ function InboxRow({
       ),
       children: [
         /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
-          !item.isRead && /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "h-2 w-2 rounded-full bg-primary" }),
+          !item.isRead && /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "h-2 w-2 rounded-full bg-coral" }),
           item.title
         ] }),
         item.body && /* @__PURE__ */ jsx5("span", { className: "text-xs text-muted-foreground", children: item.body })
@@ -533,7 +533,7 @@ function NotificationCenter({
             "span",
             {
               "aria-hidden": true,
-              className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold text-destructive-foreground",
+              className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-coral px-1.5 text-xs font-semibold text-coral-foreground ring-2 ring-background",
               children: badge
             }
           )
@@ -663,14 +663,14 @@ import {
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function TrendChart({ data, className }) {
   return /* @__PURE__ */ jsx8("div", { className: cn6("h-72 w-full", className), role: "img", "aria-label": "Delivery trend over time", children: /* @__PURE__ */ jsx8(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs6(LineChart, { data, margin: { top: 8, right: 16, bottom: 8, left: 0 }, children: [
-    /* @__PURE__ */ jsx8(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
-    /* @__PURE__ */ jsx8(XAxis, { dataKey: "day", stroke: "hsl(var(--muted-foreground))", fontSize: 12 }),
-    /* @__PURE__ */ jsx8(YAxis, { stroke: "hsl(var(--muted-foreground))", fontSize: 12, allowDecimals: false }),
+    /* @__PURE__ */ jsx8(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }),
+    /* @__PURE__ */ jsx8(XAxis, { dataKey: "day", stroke: "var(--muted-foreground)", fontSize: 12 }),
+    /* @__PURE__ */ jsx8(YAxis, { stroke: "var(--muted-foreground)", fontSize: 12, allowDecimals: false }),
     /* @__PURE__ */ jsx8(Tooltip, {}),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "sends", stroke: "hsl(var(--primary))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "delivered", stroke: "hsl(var(--chart-2, var(--primary)))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "opened", stroke: "hsl(var(--chart-3, var(--primary)))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "clicked", stroke: "hsl(var(--chart-4, var(--primary)))", dot: false })
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "sends", stroke: "var(--primary)", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "delivered", stroke: "var(--chart-2, var(--primary))", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "opened", stroke: "var(--chart-3, var(--primary))", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "clicked", stroke: "var(--chart-4, var(--primary))", dot: false })
   ] }) }) });
 }