@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.0

package/dist/{chunk-XTASI4IY.js → chunk-GVOWGEGX.js}

@@ -3,19 +3,15 @@ import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { CheckIcon } from './chunk-CXACRCZ4.js';
 import { CopyIcon } from './chunk-TV4RSQH4.js';
-import { cn } from './chunk-QYZT24TS.js';
 import * as React from 'react';
 import Prism from 'prismjs';
 import 'prismjs/themes/prism-tomorrow.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function CodeBlock({
-  code,
-  language = "javascript",
-  filename,
-  className,
-  ...props
-}) {
+function CodeBlock({ props, emit }) {
+  const { code } = props;
+  const language = props.language ?? "javascript";
+  const filename = props.filename ?? void 0;
   const [copied, setCopied] = React.useState(false);
   const setSafeTimeout = useSafeTimeout();
   React.useEffect(() => {
@@ -25,15 +21,12 @@ function CodeBlock({
     navigator.clipboard.writeText(code);
     setCopied(true);
     setSafeTimeout(() => setCopied(false), 2e3);
+    emit("copy");
   };
   return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
-        "relative overflow-hidden rounded-lg glass-panel",
-        className
-      ),
-      ...props,
+      className: "relative overflow-hidden rounded-lg glass-panel",
       children: [
         !!filename && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border/30 bg-surface-hover px-4 py-2 text-xs text-text-tertiary", children: /* @__PURE__ */ jsx("span", { children: filename }) }),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [

package/dist/chunk-GXUQFXT7.js

@@ -0,0 +1,282 @@
+import { nn } from './chunk-2NMP3J5R.js';
+import { ToggleGroup, ToggleGroupItem } from './chunk-NZXZ3PH2.js';
+import { ThemeToggle } from './chunk-UB6XJTRU.js';
+import { Toggle } from './chunk-73T6GXPA.js';
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationEllipsis, PaginationLink, PaginationNext } from './chunk-2BADJLMV.js';
+import { LanguageSwitcher } from './chunk-SEMWC3IT.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, DropdownMenuShortcut } from './chunk-ETS5O4ZQ.js';
+import { ButtonGroup } from './chunk-JDLCIPSC.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { useState } from 'react';
+import { useBoundProp } from '@json-render/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function getPaginationRange(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  pages.push(1);
+  if (current > 3) pages.push("ellipsis");
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 2) pages.push("ellipsis");
+  pages.push(total);
+  return pages;
+}
+var actionComponents = {
+  Button: ({
+    props,
+    emit
+  }) => {
+    const variantMap = {
+      primary: "primary",
+      secondary: "secondary",
+      outline: "outline",
+      ghost: "ghost",
+      link: "link",
+      destructive: "destructive",
+      accent: "accent",
+      glass: "glass"
+    };
+    const variant = (props.variant && variantMap[props.variant]) ?? "primary";
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size: props.size ?? "default",
+        disabled: props.disabled ?? false,
+        onClick: () => emit("press"),
+        children: props.label
+      }
+    );
+  },
+  DropdownMenu: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const items = props.items ?? [];
+    const [, setBoundValue] = useBoundProp(
+      void 0,
+      bindings?.value
+    );
+    const groups = items.reduce((acc, item) => {
+      const key = item.group ?? "";
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(item);
+      return acc;
+    }, {});
+    const groupKeys = Object.keys(groups);
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: props.trigger }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { children: groupKeys.map((groupKey, idx) => /* @__PURE__ */ jsxs("div", { children: [
+        !!groupKey && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: groupKey }),
+        idx > 0 && !groupKey && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        groups[groupKey].map((item) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            disabled: item.disabled ?? false,
+            onClick: () => {
+              setBoundValue(item.value);
+              emit("select");
+            },
+            children: [
+              item.label,
+              item.shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.shortcut })
+            ]
+          },
+          item.value
+        ))
+      ] }, groupKey || idx)) })
+    ] });
+  },
+  LanguageSwitcher: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundLocale, setBoundLocale] = useBoundProp(
+      props.locale,
+      bindings?.locale
+    );
+    const [localLocale, setLocalLocale] = useState(props.locale ?? "");
+    const isBound = !!bindings?.locale;
+    const locale = isBound ? boundLocale ?? "" : localLocale;
+    const setLocale = isBound ? setBoundLocale : setLocalLocale;
+    return /* @__PURE__ */ jsx(
+      LanguageSwitcher,
+      {
+        locales: nn(props.locales),
+        value: locale || void 0,
+        onLocaleChange: (next) => {
+          setLocale(next);
+          emit("change");
+        }
+      }
+    );
+  },
+  Pagination: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPage, setBoundPage] = useBoundProp(
+      props.current,
+      bindings?.current
+    );
+    const [localPage, setLocalPage] = useState(props.current ?? 1);
+    const isBound = !!bindings?.current;
+    const currentPage = isBound ? boundPage ?? 1 : localPage;
+    const setPage = isBound ? setBoundPage : setLocalPage;
+    const totalPages = Math.max(1, Math.ceil((props.total ?? 0) / (props.pageSize ?? 10)));
+    const pages = getPaginationRange(currentPage, totalPages);
+    return /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationPrevious,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            if (currentPage > 1) {
+              setPage(currentPage - 1);
+              emit("change");
+            }
+          }
+        }
+      ) }),
+      pages.map(
+        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+          PaginationLink,
+          {
+            href: "#",
+            isActive: page === currentPage,
+            onClick: (e) => {
+              e.preventDefault();
+              setPage(page);
+              emit("change");
+            },
+            children: page
+          }
+        ) }, page)
+      ),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationNext,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            if (currentPage < totalPages) {
+              setPage(currentPage + 1);
+              emit("change");
+            }
+          }
+        }
+      ) })
+    ] }) });
+  },
+  Toggle: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPressed, setBoundPressed] = useBoundProp(
+      props.pressed,
+      bindings?.pressed
+    );
+    const [localPressed, setLocalPressed] = useState(props.pressed ?? false);
+    const isBound = !!bindings?.pressed;
+    const pressed = isBound ? boundPressed ?? false : localPressed;
+    const setPressed = isBound ? setBoundPressed : setLocalPressed;
+    return /* @__PURE__ */ jsx(
+      Toggle,
+      {
+        variant: props.variant ?? "default",
+        size: props.size ?? "default",
+        disabled: props.disabled ?? false,
+        pressed,
+        onPressedChange: (v) => {
+          setPressed(v);
+          emit("toggle");
+        },
+        children: props.label ?? null
+      }
+    );
+  },
+  ToggleGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const type = props.type ?? "single";
+    const items = props.items ?? [];
+    const [boundValue, setBoundValue] = useBoundProp(
+      typeof props.value === "string" ? props.value : void 0,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(
+      typeof props.value === "string" ? props.value : items[0]?.value ?? ""
+    );
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    if (type === "multiple") {
+      const selected = value ? value.split(",").filter(Boolean) : [];
+      return /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "multiple",
+          variant: props.variant ?? "default",
+          size: props.size ?? "default",
+          value: selected,
+          onValueChange: (v) => {
+            setValue(v.join(","));
+            emit("change");
+          },
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            ToggleGroupItem,
+            {
+              value: item.value,
+              disabled: item.disabled ?? false,
+              children: item.label
+            },
+            item.value
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        type: "single",
+        variant: props.variant ?? "default",
+        size: props.size ?? "default",
+        value,
+        onValueChange: (v) => {
+          if (v) {
+            setValue(v);
+            emit("change");
+          }
+        },
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          ToggleGroupItem,
+          {
+            value: item.value,
+            disabled: item.disabled ?? false,
+            children: item.label
+          },
+          item.value
+        ))
+      }
+    );
+  },
+  ButtonGroup: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(ButtonGroup, { className: nn(props.className), children });
+  },
+  ThemeToggle: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(ThemeToggle, { className: nn(props.className), onChange: () => emit("change") });
+  }
+};
+
+export { actionComponents };

package/dist/chunk-GZ4DTYWM.js

@@ -0,0 +1,36 @@
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function InputGroup({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex w-full items-center", className),
+      ...props
+    }
+  );
+}
+function InputGroupAddon({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex h-9 items-center justify-center border border-border bg-secondary px-4 py-1.5 text-sm text-text-secondary first:rounded-l-md last:rounded-r-md first:border-r-0 last:border-l-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { InputGroup, InputGroupAddon };

package/dist/{chunk-7XRKBROR.js → chunk-HF2HNDE7.js}

@@ -1,24 +1,34 @@
 import { getTimezoneGroups } from './chunk-PTJPPKDR.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-UYT33NG6.js';
-import { Command } from './chunk-KFL4YCMI.js';
+import { Command } from './chunk-37LY27CX.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { Badge } from './chunk-S4JAHKOP.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { useState, useMemo } from 'react';
+import { useBoundProp } from '@json-render/react';
 import { Command as Command$1 } from 'cmdk';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var DEFAULT_GROUPS = getTimezoneGroups();
 function TimezonePickerBlock({
-  id,
-  value,
-  onChange,
-  name,
-  className,
-  groups = DEFAULT_GROUPS
+  props,
+  bindings,
+  emit
 }) {
+  const valueProp = props.value ?? void 0;
+  const name = props.name ?? void 0;
+  const groups = props.groups ?? void 0;
+  const [boundValue, setBoundValue] = useBoundProp(
+    valueProp,
+    bindings?.value
+  );
+  const [localValue, setLocalValue] = useState(void 0);
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue : valueProp ?? localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  const resolvedGroups = groups ?? DEFAULT_GROUPS;
   const [open, setOpen] = useState(false);
-  const entries = useMemo(() => groups.flatMap((group) => group.timezones), [groups]);
+  const entries = useMemo(() => resolvedGroups.flatMap((group) => group.timezones), [resolvedGroups]);
   const selectedTimezone = useMemo(
     () => entries.find((timezone) => timezone.value === value) ?? null,
     [entries, value]
@@ -29,13 +39,12 @@ function TimezonePickerBlock({
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         Button,
         {
-          id,
           type: "button",
           variant: "outline",
           role: "combobox",
           "aria-expanded": open,
           "aria-label": "Select timezone",
-          className: cn("w-full justify-between text-left", className),
+          className: cn("w-full justify-between text-left"),
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedTimezone ? `${selectedTimezone.value} (${selectedTimezone.offset})` : "Select timezone" }),
             /* @__PURE__ */ jsx("span", { className: "ml-2 shrink-0 opacity-50", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", width: "14", height: "14", fill: "none", stroke: "currentColor", children: [
@@ -55,7 +64,7 @@ function TimezonePickerBlock({
         ) }),
         /* @__PURE__ */ jsxs(Command$1.List, { className: "max-h-80 overflow-y-auto overflow-x-hidden", children: [
           /* @__PURE__ */ jsx(Command$1.Empty, { className: "py-6 text-center text-sm", children: "No timezone found." }),
-          groups.map((group) => /* @__PURE__ */ jsx(
+          resolvedGroups.map((group) => /* @__PURE__ */ jsx(
             Command$1.Group,
             {
               heading: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: group.region }),
@@ -65,7 +74,8 @@ function TimezonePickerBlock({
                 {
                   value: `${timezone.value} ${timezone.label} ${timezone.region} ${timezone.offset}`,
                   onSelect: () => {
-                    onChange?.(timezone.value);
+                    setValue(timezone.value);
+                    emit("change");
                     setOpen(false);
                   },
                   className: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[disabled=true]:pointer-events-none data-[selected='true']:bg-surface-active data-[selected=true]:text-text-primary data-[disabled=true]:opacity-50",

package/dist/chunk-HMN4K4L6.js

@@ -0,0 +1,44 @@
+import { overlayDefinitions } from './chunk-LYI5YMC6.js';
+import { textEffectsDefinitions } from './chunk-UXYLA2IV.js';
+import { textDefinitions } from './chunk-YXRIXTXW.js';
+import { chartDefinitions } from './chunk-UQB54LIA.js';
+import { chatDefinitions } from './chunk-6KRT337C.js';
+import { displayDefinitions } from './chunk-W4KI424V.js';
+import { effectsDefinitions } from './chunk-7SOMHO2L.js';
+import { formDefinitions } from './chunk-XI775QZZ.js';
+import { layoutDefinitions } from './chunk-P7JS4B7U.js';
+import { navigationDefinitions } from './chunk-QCL76CM6.js';
+import { agentDefinitions } from './chunk-5XDYCBR6.js';
+import { blocksAgentDefinitions } from './chunk-XYYZRQES.js';
+import { blocksAuthDefinitions } from './chunk-VUNXVYOH.js';
+import { blocksContentDefinitions } from './chunk-UOUERAB4.js';
+import { blocksCrudDefinitions } from './chunk-UGXI4PES.js';
+import { blocksDataDefinitions } from './chunk-ZND7AAWG.js';
+import { blocksMarketingDefinitions } from './chunk-FAKTXE3F.js';
+import { blocksMiscDefinitions } from './chunk-WAIZR4CR.js';
+import { actionDefinitions } from './chunk-XLIFWBE7.js';
+
+// src/catalog/definitions/index.ts
+var allDefinitions = {
+  ...displayDefinitions,
+  ...layoutDefinitions,
+  ...textDefinitions,
+  ...formDefinitions,
+  ...actionDefinitions,
+  ...overlayDefinitions,
+  ...navigationDefinitions,
+  ...effectsDefinitions,
+  ...agentDefinitions,
+  ...chartDefinitions,
+  ...textEffectsDefinitions,
+  ...chatDefinitions,
+  ...blocksAuthDefinitions,
+  ...blocksMarketingDefinitions,
+  ...blocksDataDefinitions,
+  ...blocksCrudDefinitions,
+  ...blocksAgentDefinitions,
+  ...blocksContentDefinitions,
+  ...blocksMiscDefinitions
+};
+
+export { allDefinitions };

package/dist/{chunk-2BXGWBD4.js → chunk-HX3VXWNJ.js}

@@ -1,7 +1,7 @@
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
 import { Heading } from './chunk-UXX6HHPS.js';
-import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { Card, CardHeader, CardContent } from './chunk-7UY24UWL.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { SparklesIcon } from './chunk-CGUCH322.js';
 import { RocketIcon } from './chunk-QPXTBZWN.js';
 import { CheckIcon } from './chunk-CXACRCZ4.js';
@@ -10,6 +10,15 @@ import { Badge } from './chunk-S4JAHKOP.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var SECTION_ICON_MAP = {
+  AlertTriangleIcon: /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 20, "aria-hidden": true }),
+  SparklesIcon: /* @__PURE__ */ jsx(SparklesIcon, { size: 20, "aria-hidden": true }),
+  RocketIcon: /* @__PURE__ */ jsx(RocketIcon, { size: 20, "aria-hidden": true })
+};
+function resolveSectionIcon(iconKey) {
+  if (!iconKey) return null;
+  return SECTION_ICON_MAP[iconKey] ?? null;
+}
 var sectionStyles = [
   { border: "border-destructive/30", badgeVariant: "destructive" },
   { border: "border-accent/30", badgeVariant: "accent" },
@@ -17,7 +26,7 @@ var sectionStyles = [
 ];
 var defaultSections = [
   {
-    icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 20, "aria-hidden": true }),
+    icon: "AlertTriangleIcon",
     label: "The Problem",
     title: "Manual processes drain your team",
     description: "Repetitive tasks consume valuable hours that could be spent on strategic work.",
@@ -28,7 +37,7 @@ var defaultSections = [
     ]
   },
   {
-    icon: /* @__PURE__ */ jsx(SparklesIcon, { size: 20, "aria-hidden": true }),
+    icon: "SparklesIcon",
     label: "Our Solution",
     title: "AI workers that integrate seamlessly",
     description: "Purpose-built digital workers that slot into your existing workflows.",
@@ -39,7 +48,7 @@ var defaultSections = [
     ]
   },
   {
-    icon: /* @__PURE__ */ jsx(RocketIcon, { size: 20, "aria-hidden": true }),
+    icon: "RocketIcon",
     label: "The Output",
     title: "Measurable business impact",
     description: "Concrete results from day one, with continuous improvement over time.",
@@ -50,14 +59,12 @@ var defaultSections = [
     ]
   }
 ];
-function SolutionShowcaseBlock({
-  title = "How we deliver results",
-  description = "A proven three-stage approach that transforms how your team operates.",
-  badge,
-  sections = defaultSections,
-  className
-}) {
-  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+function SolutionShowcaseBlock({ props }) {
+  const title = props.title ?? "How we deliver results";
+  const description = props.description ?? "A proven three-stage approach that transforms how your team operates.";
+  const badge = props.badge ?? void 0;
+  const sections = props.sections ?? defaultSections;
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className: "py-16 md:py-32", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       !!badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-4", children: badge }),
       /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: title }),
@@ -75,7 +82,7 @@ function SolutionShowcaseBlock({
           children: [
             /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 p-0 pb-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                section.icon && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: section.icon }),
+                section.icon && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: resolveSectionIcon(section.icon) }),
                 /* @__PURE__ */ jsx(Badge, { variant: style.badgeVariant, children: section.label })
               ] }),
               /* @__PURE__ */ jsx(Heading, { level: 3, size: "subsection", className: "text-xl sm:text-2xl", children: section.title })

package/dist/{chunk-NEECQ3IH.js → chunk-HZTWLK7C.js}

@@ -1,7 +1,6 @@
 import { PieChart } from './chunk-O4QTL2EQ.js';
 import { Empty, EmptyTitle, EmptyDescription } from './chunk-4TF4QFIM.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
-import { cn } from './chunk-QYZT24TS.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var defaultData = [
@@ -28,22 +27,15 @@ var defaultConfig = {
     color: "rgb(var(--chart-4))"
   }
 };
-var defaultCenterLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("span", { className: "text-3xl font-semibold 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: [
+function UsageDonutBlock({ props }) {
+  const data = props.data ?? defaultData;
+  const config = props.config ?? defaultConfig;
+  const title = props.title ?? "Storage";
+  const description = props.description ?? "Distribution of data types";
+  const centerValue = props.centerValue ?? "1.2";
+  const centerUnit = props.centerUnit ?? "GB";
+  const centerLabel = props.centerLabel ?? "Used";
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-[350px]", children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: title }),
       /* @__PURE__ */ jsx(CardDescription, { children: description })
@@ -66,7 +58,13 @@ function UsageDonutBlock({
             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__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center pointer-events-none", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-3xl font-semibold text-text-primary", children: [
+            centerValue,
+            /* @__PURE__ */ jsx("span", { className: "text-lg text-text-secondary", children: centerUnit })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-text-tertiary uppercase tracking-wider", 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 } }),