@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.1

package/dist/chunk-TCQIJ3DO.js

@@ -0,0 +1,85 @@
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction } from './chunk-J2DCQDXO.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-CQEUNASC.js';
+import { Empty, EmptyDescription } from './chunk-55HD4L6G.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { Trash2Icon } from './chunk-S4GKGKON.js';
+import { StarIcon } from './chunk-ELKIUARM.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
+import { HomeIcon } from './chunk-IQEBXXB5.js';
+import { FolderIcon } from './chunk-I3TH7PIB.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultNavItems = [
+  { name: "Home", icon: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }), isActive: true },
+  { name: "Dashboard", icon: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) },
+  { name: "Team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }) },
+  { name: "Settings", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) }
+];
+var defaultProjects = [
+  { name: "Design Engineering", url: "#" },
+  { name: "Sales & Marketing", url: "#" },
+  { name: "Travel", url: "#" }
+];
+function DirectoryBlock({
+  navItems = defaultNavItems,
+  projects = defaultProjects,
+  className
+}) {
+  const t = useTranslations("blocks.directoryBlock");
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "h-[500px] border border-border rounded-lg overflow-hidden flex bg-surface text-text-primary", children: [
+    /* @__PURE__ */ jsx(SidebarProvider, { className: "h-full", children: /* @__PURE__ */ jsx(Sidebar, { collapsible: "none", className: "h-full border-r border-border", children: /* @__PURE__ */ jsxs(SidebarContent, { children: [
+      /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+        /* @__PURE__ */ jsx(SidebarGroupLabel, { children: t("platform") }),
+        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { isActive: item.isActive, children: [
+          item.icon,
+          /* @__PURE__ */ jsx("span", { children: item.name })
+        ] }) }, item.name)) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+        /* @__PURE__ */ jsx(SidebarGroupLabel, { children: t("projects") }),
+        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: projects.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+          /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: item.url, children: [
+            /* @__PURE__ */ jsx(FolderIcon, { size: 16 }),
+            /* @__PURE__ */ jsx("span", { children: item.name })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuAction, { showOnHover: true, children: [
+              /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("more") })
+            ] }) }),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuContent,
+              {
+                className: "w-48 rounded-lg",
+                side: "bottom",
+                align: "end",
+                children: [
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(FolderIcon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("viewProject") })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(StarIcon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("addToFavorites") })
+                  ] }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(Trash2Icon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("deleteProject") })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }, item.name)) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 p-8 bg-background", children: /* @__PURE__ */ jsx(Empty, { className: "h-full", children: /* @__PURE__ */ jsx(EmptyDescription, { children: t("selectProject") }) }) })
+  ] });
+}
+
+export { DirectoryBlock };

package/dist/chunk-TPJ6JJ2F.js

@@ -0,0 +1,290 @@
+import { AreaChart } from './chunk-IPXL7WX7.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultTimeRanges = [
+  { value: "90d", label: "Last 3 months", days: 90 },
+  { value: "30d", label: "Last 30 days", days: 30 },
+  { value: "7d", label: "Last 7 days", days: 7 }
+];
+var defaultData = (() => {
+  const base = /* @__PURE__ */ new Date("2024-06-15");
+  const desktopValues = [
+    312,
+    245,
+    178,
+    389,
+    267,
+    334,
+    198,
+    421,
+    156,
+    290,
+    375,
+    203,
+    348,
+    187,
+    412,
+    256,
+    301,
+    169,
+    395,
+    228,
+    367,
+    194,
+    340,
+    275,
+    403,
+    215,
+    352,
+    183,
+    298,
+    246,
+    385,
+    210,
+    327,
+    171,
+    416,
+    263,
+    309,
+    195,
+    388,
+    231,
+    370,
+    201,
+    345,
+    278,
+    407,
+    219,
+    356,
+    186,
+    302,
+    249,
+    380,
+    207,
+    332,
+    174,
+    413,
+    260,
+    305,
+    192,
+    392,
+    234,
+    373,
+    198,
+    342,
+    272,
+    405,
+    222,
+    359,
+    189,
+    306,
+    252,
+    377,
+    204,
+    335,
+    177,
+    410,
+    257,
+    308,
+    196,
+    390,
+    237,
+    376,
+    200,
+    339,
+    270,
+    408,
+    225,
+    362,
+    191,
+    303,
+    248,
+    382,
+    209,
+    330,
+    173,
+    415,
+    261,
+    311,
+    193,
+    387,
+    233
+  ];
+  const mobileValues = [
+    215,
+    312,
+    178,
+    256,
+    345,
+    189,
+    278,
+    367,
+    201,
+    290,
+    234,
+    156,
+    323,
+    198,
+    267,
+    389,
+    212,
+    345,
+    176,
+    301,
+    248,
+    167,
+    334,
+    205,
+    278,
+    356,
+    189,
+    312,
+    223,
+    267,
+    241,
+    159,
+    328,
+    201,
+    271,
+    382,
+    195,
+    338,
+    179,
+    305,
+    245,
+    162,
+    330,
+    208,
+    274,
+    360,
+    192,
+    315,
+    226,
+    270,
+    238,
+    155,
+    325,
+    198,
+    268,
+    385,
+    191,
+    342,
+    182,
+    308,
+    242,
+    164,
+    332,
+    210,
+    276,
+    358,
+    188,
+    318,
+    220,
+    264,
+    240,
+    157,
+    322,
+    195,
+    265,
+    388,
+    194,
+    340,
+    180,
+    302,
+    247,
+    166,
+    336,
+    212,
+    280,
+    362,
+    190,
+    320,
+    228,
+    272,
+    236,
+    153,
+    327,
+    200,
+    270,
+    380,
+    193,
+    335,
+    175,
+    310
+  ];
+  return Array.from({ length: 100 }, (_, i) => {
+    const date = new Date(base);
+    date.setDate(date.getDate() - (99 - i));
+    return {
+      date: date.toISOString().split("T")[0],
+      desktop: desktopValues[i],
+      mobile: mobileValues[i]
+    };
+  });
+})();
+var defaultConfig = {
+  visitors: {
+    label: "Visitors"
+  },
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))"
+  },
+  mobile: {
+    label: "Mobile",
+    color: "rgb(var(--chart-2))"
+  }
+};
+function InteractiveAreaChartBlock({
+  data = defaultData,
+  config = defaultConfig,
+  title = "Traffic Analysis",
+  description = "Showing total visitors for the last 3 months",
+  timeRanges = defaultTimeRanges,
+  className
+}) {
+  const [timeRange, setTimeRange] = React.useState(timeRanges[0]?.value ?? "90d");
+  const filteredData = React.useMemo(() => data.filter((item) => {
+    const date = new Date(item.date);
+    const now = /* @__PURE__ */ new Date();
+    const selectedRange = timeRanges.find((r) => r.value === timeRange);
+    const daysToSubtract = selectedRange?.days ?? 90;
+    now.setDate(now.getDate() - daysToSubtract);
+    return date >= now;
+  }), [data, timeRanges, timeRange]);
+  return /* @__PURE__ */ jsxs(Card, { className: cn(className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex items-center gap-2 space-y-0 border-b border-border py-6 sm:flex-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1.5 text-center sm:text-left", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: title }),
+        /* @__PURE__ */ jsx(CardDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(Select, { value: timeRange, onValueChange: setTimeRange, children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: "w-[160px] rounded-lg sm:ml-auto",
+            "aria-label": "Select a value",
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: timeRanges[0]?.label ?? "Last 3 months" })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { className: "rounded-xl", children: timeRanges.map((range) => /* @__PURE__ */ jsx(SelectItem, { value: range.value, className: "rounded-lg", children: range.label }, range.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children: /* @__PURE__ */ jsx(
+      AreaChart,
+      {
+        data: filteredData,
+        config,
+        indexKey: "date",
+        areas: ["mobile", "desktop"],
+        stacked: true
+      }
+    ) })
+  ] });
+}
+
+export { InteractiveAreaChartBlock };

package/dist/chunk-UR43ANYS.js

@@ -0,0 +1,159 @@
+import { NavigationShellPageKit } from './chunk-ZKLB5N3Q.js';
+import { AgentConversationBlock } from './chunk-4IGBBIYW.js';
+import { ToolCallCard } from './chunk-4WPZ6T7V.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var EMPTY_MESSAGES = [];
+var EMPTY_TOOL_CALLS = [];
+var EMPTY_ARTIFACTS = [];
+var EMPTY_TRACE_EVENTS = [];
+function stateLabel(state) {
+  switch (state) {
+    case "empty":
+      return "Empty";
+    case "loading":
+      return "Loading";
+    case "thinking":
+      return "Thinking";
+    case "blocked-approval":
+      return "Blocked on approval";
+    case "failed":
+      return "Failed";
+    case "running":
+      return "Running";
+    case "complete":
+      return "Complete";
+    default:
+      return "Running";
+  }
+}
+function placeholderContent(state) {
+  switch (state) {
+    case "empty":
+      return "No messages yet. Start the run from the composer.";
+    case "loading":
+      return "Loading run context...";
+    case "thinking":
+      return "Agent is thinking through the next step.";
+    default:
+      return "Waiting for conversation updates.";
+  }
+}
+function AgentsChatPageKit({
+  shell,
+  state = "running",
+  messages = EMPTY_MESSAGES,
+  toolCalls = EMPTY_TOOL_CALLS,
+  artifacts = EMPTY_ARTIFACTS,
+  traceEvents = EMPTY_TRACE_EVENTS,
+  approval,
+  composer,
+  errorMessage,
+  className
+}) {
+  const [draft, setDraft] = React.useState(composer?.value ?? "");
+  const composerValue = composer?.value ?? draft;
+  const composerPlaceholder = composer?.placeholder ?? "Type a message to the active run...";
+  const composerDisabled = composer?.disabled ?? false;
+  function handleComposerChange(value) {
+    if (composer?.value == null) {
+      setDraft(value);
+    }
+    composer?.onChange?.(value);
+  }
+  function handleComposerSend() {
+    const payload = composerValue.trim();
+    if (!payload || composerDisabled) {
+      return;
+    }
+    composer?.onSend?.(payload);
+    if (composer?.value == null) {
+      setDraft("");
+    }
+  }
+  const conversationMessages = messages.length > 0 ? messages : [{
+    id: "state-placeholder",
+    role: "system",
+    content: placeholderContent(state)
+  }];
+  return /* @__PURE__ */ jsx(NavigationShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, children: "Agents chat" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: "Conversation-driven agent workflow surface with explicit tooling and traceability layers." }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: state === "failed" ? "destructive" : "outline", children: stateLabel(state) }) })
+    ] }),
+    state === "failed" ? /* @__PURE__ */ jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: errorMessage ?? "The run failed. Inspect tooling and traceability details before retrying." }) : null,
+    state === "blocked-approval" && approval ? /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Approval required" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", children: approval.pendingReason }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: approval.onApprove, children: "Approve run" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: approval.onReject, children: "Reject run" })
+        ] })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Conversation" }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(AgentConversationBlock, { messages: conversationMessages }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "agents-chat-composer", className: "text-sm font-medium text-text-primary", children: "Message composer" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "agents-chat-composer",
+                value: composerValue,
+                disabled: composerDisabled,
+                placeholder: composerPlaceholder,
+                onChange: (event) => handleComposerChange(event.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleComposerSend, disabled: composerDisabled || composerValue.trim().length === 0, children: "Send message" }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Tooling" }) }),
+          /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: toolCalls.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "No tool calls yet." }) : toolCalls.map((toolCall) => /* @__PURE__ */ jsx(
+            ToolCallCard,
+            {
+              toolName: toolCall.toolName,
+              status: toolCall.status,
+              result: toolCall.result,
+              duration: toolCall.durationMs
+            },
+            toolCall.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Traceability" }) }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+            artifacts.length === 0 && traceEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "No artifacts or trace events recorded yet." }) : null,
+            artifacts.map((artifact) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/70 p-3", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: artifact.title }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-tertiary uppercase tracking-wide", children: artifact.kind }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-text-secondary", children: artifact.summary })
+            ] }, artifact.id)),
+            traceEvents.map((event) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/70 p-3", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: event.label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-text-secondary", children: event.detail })
+            ] }, event.id))
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+export { AgentsChatPageKit };

package/dist/chunk-VRGPG2YN.js

@@ -0,0 +1,79 @@
+import { PieChart } from './chunk-U7V6TREO.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var defaultData = [
+  { name: "Vector DB", value: 400, fill: "rgb(var(--chart-1))" },
+  { name: "Model Storage", value: 300, fill: "rgb(var(--chart-2))" },
+  { name: "Logs", value: 300, fill: "rgb(var(--chart-3))" },
+  { name: "Cache", value: 200, fill: "rgb(var(--chart-4))" }
+];
+var defaultConfig = {
+  "Vector DB": {
+    label: "Vector DB",
+    color: "rgb(var(--chart-1))"
+  },
+  "Model Storage": {
+    label: "Model Storage",
+    color: "rgb(var(--chart-2))"
+  },
+  "Logs": {
+    label: "Logs",
+    color: "rgb(var(--chart-3))"
+  },
+  "Cache": {
+    label: "Cache",
+    color: "rgb(var(--chart-4))"
+  }
+};
+var defaultCenterLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs("span", { className: "text-3xl font-bold text-text-primary", children: [
+    "1.2",
+    /* @__PURE__ */ jsx("span", { className: "text-lg text-text-secondary", children: "GB" })
+  ] }),
+  /* @__PURE__ */ jsx("span", { className: "text-xs text-text-tertiary uppercase tracking-wider", children: "Used" })
+] });
+function UsageDonutBlock({
+  data = defaultData,
+  config = defaultConfig,
+  title = "Storage",
+  description = "Distribution of data types",
+  centerLabel = defaultCenterLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-[350px]", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "pb-4", children: data.length === 0 ? /* @__PURE__ */ jsxs(Empty, { className: "min-h-[240px]", children: [
+      /* @__PURE__ */ jsx(EmptyTitle, { children: "No storage breakdown" }),
+      /* @__PURE__ */ jsx(EmptyDescription, { children: "Storage categories will appear here once usage data is available." })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "h-[240px] relative", children: [
+        /* @__PURE__ */ jsx(
+          PieChart,
+          {
+            data,
+            config,
+            dataKey: "value",
+            nameKey: "name",
+            innerRadius: 60,
+            outerRadius: 80,
+            showLegend: false,
+            className: "mx-auto aspect-square max-h-[240px]"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: centerLabel })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-2 gap-2 text-sm", children: data.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-text-secondary", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: item.fill } }),
+        item.name
+      ] }, item.name)) })
+    ] }) })
+  ] });
+}
+
+export { UsageDonutBlock };