@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.0

package/dist/chunk-EJQ73FJ5.js

@@ -0,0 +1,383 @@
+import { nn } from './chunk-2NMP3J5R.js';
+import { TreeView } from './chunk-7IVXTSZK.js';
+import { Timeline } from './chunk-YQIABLDO.js';
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { SuccessCheck } from './chunk-7X3GXC7C.js';
+import { RoleBadge } from './chunk-OHCQPI3W.js';
+import { SettingsModal } from './chunk-KKBTPNXT.js';
+import { NotificationCenter } from './chunk-KL43KGCK.js';
+import { Progress } from './chunk-JWQXBRE7.js';
+import { ProgressRing } from './chunk-2LBEV4YF.js';
+import { PromoCard } from './chunk-FOXDDL2Z.js';
+import { MetricCard } from './chunk-JWWXY7XR.js';
+import { TrendIndicator } from './chunk-3R2VLZUR.js';
+import { StatusDot } from './chunk-B5QL76GA.js';
+import { Item } from './chunk-34MKVVGB.js';
+import { DataFreshness } from './chunk-WST5NLLC.js';
+import { DataTable } from './chunk-V5RSV4ZV.js';
+import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { DiffStat } from './chunk-ZSU5ZI4O.js';
+import { CheckStatus } from './chunk-TV6CJ5NI.js';
+import { Carousel, CarouselContent, CarouselPrevious, CarouselNext } from './chunk-L4Q724G2.js';
+import { ChartCard } from './chunk-TKT6WW4E.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-4TF4QFIM.js';
+import { Skeleton } from './chunk-RASEB2XI.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Avatar3D } from './chunk-R3LESSOE.js';
+import { AvatarUpload } from './chunk-FAQZPQF7.js';
+import { AnnouncementBanner } from './chunk-44NVO477.js';
+import { AudioWaveform } from './chunk-5UESKK6S.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { Alert, AlertTitle, AlertDescription } from './chunk-6CLSVCWP.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var displayComponents = {
+  Alert: ({ props, children }) => {
+    return /* @__PURE__ */ jsxs(Alert, { variant: props.variant ?? "default", children: [
+      children,
+      props.title && /* @__PURE__ */ jsx(AlertTitle, { children: props.title }),
+      props.description && /* @__PURE__ */ jsx(AlertDescription, { children: props.description })
+    ] });
+  },
+  Avatar: ({ props }) => {
+    const fallback = props.fallback ?? (props.alt ? props.alt.slice(0, 2).toUpperCase() : "??");
+    const sizeClass = props.size === "sm" ? "h-6 w-6" : props.size === "lg" ? "h-14 w-14" : void 0;
+    return /* @__PURE__ */ jsxs(Avatar, { className: sizeClass, children: [
+      props.src && /* @__PURE__ */ jsx(AvatarImage, { src: props.src, alt: props.alt ?? "" }),
+      /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+    ] });
+  },
+  Badge: ({ props }) => {
+    return /* @__PURE__ */ jsx(Badge, { variant: props.variant ?? "primary", children: props.text });
+  },
+  ChartCard: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(
+      ChartCard,
+      {
+        title: props.title,
+        description: nn(props.description),
+        loading: props.loading ?? false,
+        data: props.hasData !== false ? [1] : [],
+        chart: children,
+        emptyTitle: nn(props.emptyTitle),
+        emptyDescription: nn(props.emptyDescription)
+      }
+    );
+  },
+  DataTable: ({ props, emit }) => {
+    const catalogColumns = props.columns ?? [];
+    const rows = props.rows ?? [];
+    const columns = catalogColumns.map((col) => ({
+      accessorKey: col.key,
+      header: col.header,
+      enableSorting: col.sortable ?? false
+    }));
+    return /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns,
+        data: rows,
+        searchKey: nn(props.searchKey),
+        onRowClick: () => emit("select")
+      }
+    );
+  },
+  Empty: ({ props, children }) => {
+    return /* @__PURE__ */ jsxs(Empty, { children: [
+      children,
+      props.title && /* @__PURE__ */ jsx(EmptyTitle, { children: props.title }),
+      props.description && /* @__PURE__ */ jsx(EmptyDescription, { children: props.description })
+    ] });
+  },
+  MetricCard: ({ props }) => {
+    const trend = props.trend ? { value: props.trend.value, direction: nn(props.trend.direction) } : void 0;
+    return /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        label: props.label,
+        value: props.value,
+        trend,
+        sparklineData: nn(props.sparklineData),
+        prefix: nn(props.prefix),
+        suffix: nn(props.suffix),
+        loading: props.loading ?? false
+      }
+    );
+  },
+  Progress: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      Progress,
+      {
+        value: props.value ?? 0,
+        max: nn(props.max),
+        "aria-label": nn(props.label)
+      }
+    );
+  },
+  RoleBadge: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      RoleBadge,
+      {
+        role: props.role,
+        description: nn(props.description)
+      }
+    );
+  },
+  Skeleton: ({ props }) => {
+    const style = {};
+    if (props.width) style.width = props.width;
+    if (props.height) style.height = props.height;
+    return /* @__PURE__ */ jsx(Skeleton, { className: nn(props.className), style: Object.keys(style).length > 0 ? style : void 0 });
+  },
+  Spinner: ({ props }) => {
+    const sizeClass = props.size === "sm" ? "h-3 w-3" : props.size === "lg" ? "h-6 w-6" : void 0;
+    const className = [props.className, sizeClass].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx(Spinner, { className, "aria-label": nn(props.label) });
+  },
+  Table: ({ props }) => {
+    const columns = props.columns ?? [];
+    const rows = props.rows ?? [];
+    return /* @__PURE__ */ jsxs(
+      Table,
+      {
+        density: props.density ?? "default",
+        striped: props.striped ?? false,
+        children: [
+          props.caption && /* @__PURE__ */ jsx(TableCaption, { children: props.caption }),
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { children: col }, col)) }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, i) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell, j) => /* @__PURE__ */ jsx(TableCell, { children: cell }, j)) }, i)) })
+        ]
+      }
+    );
+  },
+  Timeline: ({ props }) => {
+    const items = (props.items ?? []).map((item) => ({
+      title: item.title,
+      description: nn(item.description),
+      timestamp: nn(item.timestamp)
+    }));
+    return /* @__PURE__ */ jsx(Timeline, { items });
+  },
+  TrendIndicator: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      TrendIndicator,
+      {
+        value: props.value,
+        direction: nn(props.direction),
+        format: props.format ?? "percent",
+        showIcon: props.showIcon ?? true
+      }
+    );
+  },
+  AnnouncementBanner: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(
+      AnnouncementBanner,
+      {
+        variant: nn(props.variant),
+        storageKey: nn(props.storageKey),
+        className: nn(props.className),
+        children
+      }
+    );
+  },
+  AudioWaveform: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      AudioWaveform,
+      {
+        variant: nn(props.variant),
+        size: nn(props.size),
+        bars: nn(props.bars),
+        active: nn(props.active),
+        barWidth: nn(props.barWidth),
+        className: nn(props.className)
+      }
+    );
+  },
+  CheckStatus: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      CheckStatus,
+      {
+        status: nn(props.status),
+        count: nn(props.count),
+        label: nn(props.label),
+        className: nn(props.className)
+      }
+    );
+  },
+  DataFreshness: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      DataFreshness,
+      {
+        lastUpdated: new Date(props.lastUpdated),
+        isLive: nn(props.isLive),
+        staleThresholdMs: nn(props.staleThresholdMs),
+        className: nn(props.className)
+      }
+    );
+  },
+  DiffStat: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      DiffStat,
+      {
+        additions: nn(props.additions),
+        deletions: nn(props.deletions),
+        className: nn(props.className)
+      }
+    );
+  },
+  NotificationCenter: ({ props, emit }) => {
+    const notifications = (props.notifications ?? []).map((n) => ({
+      id: n.id,
+      title: n.title,
+      description: nn(n.description),
+      type: nn(n.type),
+      timestamp: nn(n.timestamp),
+      read: nn(n.read)
+    }));
+    return /* @__PURE__ */ jsx(
+      NotificationCenter,
+      {
+        notifications,
+        onDismiss: () => emit("dismiss"),
+        onNotificationClick: () => emit("select"),
+        emptyMessage: nn(props.emptyMessage),
+        className: nn(props.className)
+      }
+    );
+  },
+  Avatar3D: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(
+      Avatar3D,
+      {
+        src: props.src,
+        name: props.name,
+        state: nn(props.state),
+        size: nn(props.size),
+        enableTilt: nn(props.enableTilt),
+        maxTilt: nn(props.maxTilt),
+        interactive: nn(props.interactive),
+        className: nn(props.className),
+        onSelect: () => emit("select")
+      }
+    );
+  },
+  Carousel: ({ props, children }) => {
+    return /* @__PURE__ */ jsxs(
+      Carousel,
+      {
+        orientation: nn(props.orientation),
+        className: nn(props.className),
+        children: [
+          /* @__PURE__ */ jsx(CarouselContent, { children }),
+          /* @__PURE__ */ jsx(CarouselPrevious, {}),
+          /* @__PURE__ */ jsx(CarouselNext, {})
+        ]
+      }
+    );
+  },
+  Item: ({ props, children, emit }) => {
+    return /* @__PURE__ */ jsx(
+      Item,
+      {
+        variant: nn(props.variant),
+        size: nn(props.size),
+        className: nn(props.className),
+        onClick: () => emit("press"),
+        children
+      }
+    );
+  },
+  ProgressRing: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      ProgressRing,
+      {
+        value: props.value,
+        max: nn(props.max),
+        size: nn(props.size),
+        color: nn(props.color),
+        trackColor: nn(props.trackColor),
+        showValue: nn(props.showValue),
+        label: nn(props.label),
+        className: nn(props.className)
+      }
+    );
+  },
+  PromoCard: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(
+      PromoCard,
+      {
+        title: nn(props.title),
+        description: nn(props.description),
+        actionLabel: nn(props.actionLabel),
+        onAction: () => emit("action"),
+        className: nn(props.className)
+      }
+    );
+  },
+  StatusDot: ({ props }) => {
+    return /* @__PURE__ */ jsx(
+      StatusDot,
+      {
+        status: nn(props.status),
+        size: nn(props.size),
+        className: nn(props.className)
+      }
+    );
+  },
+  SuccessCheck: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(
+      SuccessCheck,
+      {
+        size: nn(props.size),
+        className: nn(props.className),
+        onComplete: () => emit("complete")
+      }
+    );
+  },
+  TreeView: ({ props, emit }) => {
+    const toTreeNodes = (nodes) => nodes.map((n) => ({
+      id: n.id,
+      label: n.label,
+      children: Array.isArray(n.children) ? toTreeNodes(n.children) : void 0
+    }));
+    return /* @__PURE__ */ jsx(
+      TreeView,
+      {
+        data: toTreeNodes(props.data),
+        onSelect: () => emit("select"),
+        className: nn(props.className)
+      }
+    );
+  },
+  AvatarUpload: ({ props, emit }) => {
+    return /* @__PURE__ */ jsx(
+      AvatarUpload,
+      {
+        value: nn(props.value),
+        onChange: () => emit("change"),
+        className: nn(props.className)
+      }
+    );
+  },
+  SettingsModal: ({ props, emit, children }) => {
+    const tabs = (props.tabs ?? []).map((t) => ({
+      id: t.id,
+      label: nn(t.label),
+      icon: /* @__PURE__ */ jsx("span", { children: t.id })
+    }));
+    return /* @__PURE__ */ jsx(
+      SettingsModal,
+      {
+        open: nn(props.open),
+        onOpenChange: (v) => {
+          if (!v) emit("close");
+        },
+        defaultTab: nn(props.defaultTab),
+        tabs: tabs.length > 0 ? tabs : void 0,
+        renderContent: () => children
+      }
+    );
+  }
+};
+
+export { displayComponents };

package/dist/chunk-F3QIIOOL.js

@@ -0,0 +1,71 @@
+import { cn } from './chunk-QYZT24TS.js';
+import { cva } from 'class-variance-authority';
+import { useTranslations } from 'next-intl';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var agentStatusVariants = cva(
+  "inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-medium transition-colors border",
+  {
+    variants: {
+      status: {
+        idle: "border-border bg-surface text-text-secondary",
+        thinking: "border-accent/30 bg-accent/5 text-accent",
+        streaming: "border-info/30 bg-info/5 text-info",
+        error: "border-destructive/30 bg-destructive/5 text-destructive",
+        complete: "border-success/30 bg-success/5 text-success"
+      },
+      size: {
+        sm: "px-2 py-1.5 text-[10px] gap-1.5",
+        default: "px-4 py-1.5 text-xs gap-2",
+        lg: "px-4 py-2 text-sm gap-2.5"
+      }
+    },
+    defaultVariants: {
+      status: "idle",
+      size: "default"
+    }
+  }
+);
+var dotVariants = cva(
+  "rounded-full",
+  {
+    variants: {
+      status: {
+        idle: "bg-text-tertiary",
+        thinking: "bg-accent animate-pulse motion-reduce:animate-none",
+        streaming: "bg-info animate-pulse motion-reduce:animate-none",
+        error: "bg-destructive",
+        complete: "bg-success"
+      },
+      size: {
+        sm: "h-1.5 w-1.5",
+        default: "h-2 w-2",
+        lg: "h-2.5 w-2.5"
+      }
+    },
+    defaultVariants: {
+      status: "idle",
+      size: "default"
+    }
+  }
+);
+function AgentStatus({ className, status = "idle", size, label, showDot = true, ref, ...props }) {
+  const t = useTranslations("components.agentStatus");
+  const displayLabel = label ?? t(status);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(agentStatusVariants({ status, size }), className),
+      role: "status",
+      "aria-label": `Agent status: ${displayLabel}`,
+      ...props,
+      children: [
+        !!showDot && /* @__PURE__ */ jsx("span", { className: cn(dotVariants({ status, size })), "aria-hidden": "true" }),
+        displayLabel
+      ]
+    }
+  );
+}
+
+export { AgentStatus, agentStatusVariants };