@vadimcomanescu/nadicode-design-system 4.0.4 → 4.0.5

package/dist/chunk-LIJYUSSE.js

@@ -0,0 +1,152 @@
+import { SearchIcon } from './chunk-T6BRD7TS.js';
+import { CornerDownLeftIcon } from './chunk-4FEAWXJD.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var searchCommandVariants = cva(
+  "flex flex-col rounded-xl glass-panel overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "",
+        floating: "shadow-lg shadow-black/20"
+      },
+      size: {
+        sm: "max-w-sm",
+        default: "max-w-lg",
+        lg: "max-w-2xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var EMPTY_RESULTS = [];
+function SearchCommand({
+  className,
+  variant,
+  size,
+  value = "",
+  onChange,
+  results = EMPTY_RESULTS,
+  onSelect,
+  placeholder,
+  loading = false,
+  showShortcut = true,
+  ref,
+  ...props
+}) {
+  const t = useTranslations("components.searchCommand");
+  const resolvedPlaceholder = placeholder ?? t("placeholder");
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const inputRef = React.useRef(null);
+  const prevResultsRef = React.useRef(results);
+  if (prevResultsRef.current !== results) {
+    prevResultsRef.current = results;
+    if (selectedIndex !== 0) setSelectedIndex(0);
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev + 1) % Math.max(results.length, 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex(
+        (prev) => prev <= 0 ? Math.max(results.length - 1, 0) : prev - 1
+      );
+    } else if (e.key === "Enter" && results[selectedIndex]) {
+      e.preventDefault();
+      onSelect?.(results[selectedIndex]);
+    }
+  };
+  const groupedResults = React.useMemo(() => results.reduce(
+    (acc, result) => {
+      const category = result.category ?? "Results";
+      if (!acc[category]) acc[category] = [];
+      acc[category].push(result);
+      return acc;
+    },
+    {}
+  ), [results]);
+  let flatIndex = -1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(searchCommandVariants({ variant, size }), "w-full", className),
+      role: "combobox",
+      "aria-expanded": results.length > 0,
+      "aria-controls": "search-command-listbox",
+      "aria-haspopup": "listbox",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border pl-4 pr-12 transition-[border-color]", children: [
+          /* @__PURE__ */ jsx(SearchIcon, { size: 16, className: "shrink-0 text-text-tertiary" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "flex-1 bg-transparent py-4 text-sm text-text-primary placeholder:text-text-tertiary outline-none focus-visible:outline-1 focus-visible:outline-border",
+              placeholder: resolvedPlaceholder,
+              value,
+              onChange: (e) => onChange?.(e.target.value),
+              onKeyDown: handleKeyDown,
+              role: "searchbox",
+              "aria-label": "Search",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": results[selectedIndex] ? `search-option-${results[selectedIndex].id}` : void 0
+            }
+          ),
+          !!showShortcut && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 text-text-tertiary", children: /* @__PURE__ */ jsx(CornerDownLeftIcon, { size: 12 }) })
+        ] }),
+        !!loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-text-tertiary animate-pulse", children: t("searching") }) }),
+        !loading && results.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            id: "search-command-listbox",
+            className: "max-h-[300px] overflow-y-auto py-1.5",
+            role: "listbox",
+            "aria-label": "Search results",
+            children: Object.entries(groupedResults).map(([category, items]) => /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
+              /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary", children: category }),
+              /* @__PURE__ */ jsx("ul", { role: "group", "aria-label": category, children: items.map((result) => {
+                flatIndex++;
+                const idx = flatIndex;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    id: `search-option-${result.id}`,
+                    role: "option",
+                    "aria-selected": idx === selectedIndex,
+                    className: cn(
+                      "flex items-center gap-4 cursor-pointer px-4 py-2 text-sm transition-colors",
+                      idx === selectedIndex ? "bg-accent/10 text-accent" : "text-text-primary hover:bg-surface-hover"
+                    ),
+                    onClick: () => onSelect?.(result),
+                    onMouseEnter: () => setSelectedIndex(idx),
+                    children: [
+                      result.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-tertiary", children: result.icon }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsx("p", { className: "truncate", children: result.title }),
+                        result.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-tertiary truncate", children: result.description })
+                      ] })
+                    ]
+                  },
+                  result.id
+                );
+              }) })
+            ] }, category))
+          }
+        ),
+        !loading && value && results.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-text-tertiary", children: t("noResults") }) })
+      ]
+    }
+  );
+}
+
+export { SearchCommand, searchCommandVariants };

package/dist/chunk-MB6TIORE.js

@@ -0,0 +1,103 @@
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_DATASETS = [
+  {
+    name: "Latency (p95)",
+    description: "End-to-end response time under load",
+    columns: ["Configuration", "p95 (ms)", "Throughput"],
+    rows: [
+      { cells: ["Baseline", "420ms", "1.2K rps"] },
+      { cells: ["+ Cache layer", "185ms", "3.1K rps"], highlight: true },
+      { cells: ["+ Connection pool", "210ms", "2.8K rps"] }
+    ]
+  },
+  {
+    name: "Accuracy",
+    description: "Precision and recall across evaluation sets",
+    columns: ["Model", "Precision", "Recall"],
+    rows: [
+      { cells: ["v1.0", "82.3%", "78.1%"] },
+      { cells: ["v2.0", "89.7%", "85.4%"] },
+      { cells: ["v2.1 (current)", "91.2%", "88.6%"], highlight: true }
+    ]
+  },
+  {
+    name: "Resource usage",
+    description: "Memory and CPU utilization per instance",
+    columns: ["Tier", "Memory", "CPU"],
+    rows: [
+      { cells: ["Small", "256 MB", "0.25 vCPU"] },
+      { cells: ["Medium", "512 MB", "0.5 vCPU"], highlight: true },
+      { cells: ["Large", "1024 MB", "1.0 vCPU"] }
+    ]
+  },
+  {
+    name: "Cost efficiency",
+    description: "Normalized cost per 1M operations",
+    columns: ["Provider", "Cost", "Savings"],
+    rows: [
+      { cells: ["Legacy", "$4.20", "-"] },
+      { cells: ["Current", "$1.85", "56%"], highlight: true },
+      { cells: ["Projected", "$0.92", "78%"] }
+    ]
+  }
+];
+function BenchmarksBlock({
+  badgeLabel = "Benchmarks",
+  title = "Performance at a glance",
+  subtitle = "Key metrics across latency, accuracy, resource usage, and cost.",
+  datasets = DEFAULT_DATASETS,
+  staggerMs = 120,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-16 max-w-2xl mx-auto", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-4", children: badgeLabel }),
+      /* @__PURE__ */ jsx(Heading, { level: 2, className: "mb-4", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-text-secondary text-lg", children: subtitle })
+    ] }),
+    datasets.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-text-secondary py-12", children: "No benchmark data available." }) : /* @__PURE__ */ jsx(StaggerChildren, { staggerMs, className: "grid gap-8 lg:grid-cols-2 [grid-auto-rows:1fr]", children: datasets.map((dataset) => /* @__PURE__ */ jsxs(Card, { className: "h-full", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: dataset.name }),
+        /* @__PURE__ */ jsx(CardDescription, { children: dataset.description })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "flex-1 overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: dataset.columns.map((col) => /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: col === dataset.columns[0] ? void 0 : "text-right",
+            children: col
+          },
+          col
+        )) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: dataset.rows.map((row, rowIdx) => /* @__PURE__ */ jsx(
+          TableRow,
+          {
+            className: row.highlight ? "bg-accent/5 font-semibold" : void 0,
+            children: row.cells.map((cell, cellIdx) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(
+                  cellIdx === 0 ? "font-medium" : "text-right",
+                  row.highlight && cellIdx === 0 && "text-accent",
+                  row.highlight && cellIdx > 0 && "text-chart-4"
+                ),
+                children: cell
+              },
+              cellIdx
+            ))
+          },
+          rowIdx
+        )) })
+      ] }) })
+    ] }, dataset.name)) })
+  ] }) });
+}
+
+export { BenchmarksBlock };

package/dist/chunk-PV62D7H6.js

@@ -0,0 +1,75 @@
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { MailIcon } from './chunk-XQ2UDMPO.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ForgotPasswordBlock({
+  className,
+  onSubmit,
+  onBackToLogin,
+  title = "Forgot password?",
+  description = "Enter your email to reset your password",
+  successTitle = "Email sent",
+  submitLabel = "Send reset link",
+  loadingLabel = "Sending...",
+  backLabel = "Back to login",
+  emailPlaceholder = "name@example.com"
+}) {
+  const [email, setEmail] = React.useState("");
+  const [state, setState] = React.useState("idle");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email) return;
+    setState("loading");
+    onSubmit?.(email);
+    setTimeout(() => setState("success"), 1500);
+  };
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      state === "success" ? /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-full bg-success/10 shadow-[0_0_24px_rgba(61,214,140,0.2)]", children: /* @__PURE__ */ jsx(CheckIcon, { size: 32, className: "text-success" }) }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(MailIcon, { size: 32, className: "text-text-secondary" }) }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: state === "success" ? successTitle : title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: state === "success" ? `We sent a reset link to ${email}` : description })
+    ] }),
+    state !== "success" && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "forgot-email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "forgot-email",
+            name: "email",
+            type: "email",
+            placeholder: emailPlaceholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            autoComplete: "email",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "accent", className: "w-full", disabled: state === "loading", children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "mr-2" }),
+        loadingLabel
+      ] }) : submitLabel })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBackToLogin,
+        "aria-label": backLabel,
+        className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+        children: backLabel
+      }
+    ) })
+  ] }) });
+}
+
+export { ForgotPasswordBlock };

package/dist/chunk-QVAV4MA2.js

@@ -0,0 +1,60 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { useMotionConfig, m, scaleIn, motionSpring } from './chunk-PD2YEH3H.js';
+import { ShieldCheckIcon } from './chunk-BFLN54VR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PasswordChangedBlock({
+  className,
+  onContinue,
+  autoRedirectSeconds,
+  title = "Password changed!",
+  description = "Your password has been successfully updated.",
+  buttonLabel = "Continue to login"
+}) {
+  const motionConfig = useMotionConfig();
+  const [countdown, setCountdown] = React.useState(autoRedirectSeconds ?? 0);
+  React.useEffect(() => {
+    if (!autoRedirectSeconds) return;
+    setCountdown(autoRedirectSeconds);
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          onContinue?.();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [autoRedirectSeconds, onContinue]);
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: "mx-auto mb-2",
+          initial: { scale: 0.8, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { ...motionSpring.bouncy, ...motionConfig },
+          children: /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-success/10 shadow-[0_0_24px_rgba(61,214,140,0.2)]", children: /* @__PURE__ */ jsx(ShieldCheckIcon, { size: 32, className: "text-success" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
+      autoRedirectSeconds !== void 0 && countdown > 0 && /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-text-tertiary tabular-nums", children: [
+        "Redirecting in ",
+        countdown,
+        "..."
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "accent", className: "w-full", onClick: onContinue, children: buttonLabel })
+    ] })
+  ] }) });
+}
+
+export { PasswordChangedBlock };

package/dist/chunk-RPVG37RB.js

@@ -0,0 +1,24 @@
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-J2DCQDXO.js';
+import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_NAME = "My Workspace";
+var DEFAULT_PLAN = "Free Plan";
+var DEFAULT_HREF = "/dashboard";
+function WorkspaceSwitcherBlock({
+  name = DEFAULT_NAME,
+  plan = DEFAULT_PLAN,
+  href = DEFAULT_HREF,
+  className
+}) {
+  return /* @__PURE__ */ jsx(SidebarMenu, { className: cn(className), children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs("a", { href, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-text-primary", children: name }),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-tertiary", children: plan })
+    ] })
+  ] }) }) }) });
+}
+
+export { WorkspaceSwitcherBlock };

package/dist/{chunk-QW5II6YK.js → chunk-TEWCCMRH.js}

@@ -1,7 +1,7 @@
-import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
+import { MarketingShellPageKit } from './chunk-E4L6LR6P.js';
 import { TeamBlock } from './chunk-VBZQ4DBE.js';
-import { ContactBlock } from './chunk-U4GYSYGN.js';
 import { FAQBlock } from './chunk-NEHCPO53.js';
+import { ContactBlock } from './chunk-U4GYSYGN.js';
 import { CallToActionBlock } from './chunk-GJPTPLCQ.js';
 import { Typography } from './chunk-N53OMWW2.js';
 import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';

package/dist/chunk-W74WK3HB.js

@@ -0,0 +1,184 @@
+import { Heading } from './chunk-WI547C47.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-W73JAOHW.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Trash2Icon } from './chunk-S4GKGKON.js';
+import { PlusIcon } from './chunk-E7RBK6ML.js';
+import { KeyIcon } from './chunk-QSU23VYZ.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { CopyIcon } from './chunk-TV4RSQH4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_KEYS = [];
+function ApiKeysBlock({
+  keys = DEFAULT_KEYS,
+  onCreate,
+  onRevoke,
+  title = "API Keys",
+  description = "Manage your API keys",
+  className
+}) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [createdKey, setCreatedKey] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const sortedKeys = useMemo(() => {
+    const active = keys.filter((k) => !k.revokedAt);
+    const revoked = keys.filter((k) => k.revokedAt);
+    return [...active, ...revoked];
+  }, [keys]);
+  const handleCreate = async () => {
+    if (!newKeyName.trim() || !onCreate) return;
+    setCreating(true);
+    try {
+      const result = await onCreate(newKeyName.trim());
+      if (typeof result === "string") {
+        setCreatedKey(result);
+      } else {
+        handleDialogClose();
+      }
+    } finally {
+      setCreating(false);
+      setNewKeyName("");
+    }
+  };
+  const handleCopy = async (text) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleDialogClose = () => {
+    setDialogOpen(false);
+    setCreatedKey(null);
+    setNewKeyName("");
+  };
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        !!title && /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary", children: title }),
+        !!description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-text-secondary", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Dialog,
+        {
+          open: dialogOpen,
+          onOpenChange: (open) => {
+            if (!open) handleDialogClose();
+            else setDialogOpen(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { children: [
+              /* @__PURE__ */ jsx(PlusIcon, { size: 16, className: "mr-2" }),
+              "Create API Key"
+            ] }) }),
+            /* @__PURE__ */ jsx(DialogContent, { children: createdKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: "API Key Created" }),
+                /* @__PURE__ */ jsxs(DialogDescription, { children: [
+                  "Copy this key now. You won",
+                  "'",
+                  "t be able to see it again."
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-surface/80 p-3 font-mono text-sm break-all", children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: createdKey }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "outline",
+                      onClick: () => handleCopy(createdKey),
+                      children: [
+                        /* @__PURE__ */ jsx(CopyIcon, { size: 14, className: "mr-1" }),
+                        copied ? "Copied!" : "Copy"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive/80", children: "This key will not be shown again. Store it securely." })
+              ] }),
+              /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { onClick: handleDialogClose, children: "Done" }) })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: "Create API Key" }),
+                /* @__PURE__ */ jsx(DialogDescription, { children: "Give your key a name to identify it later." })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-4 py-4", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  name: "name",
+                  placeholder: "e.g., Production server",
+                  value: newKeyName,
+                  onChange: (e) => setNewKeyName(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleCreate();
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleDialogClose, children: "Cancel" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleCreate,
+                    disabled: creating || !newKeyName.trim(),
+                    children: creating ? "Creating..." : "Create"
+                  }
+                )
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: keys.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-12 text-center", children: [
+      /* @__PURE__ */ jsx(KeyIcon, { size: 40, className: "mx-auto text-text-tertiary" }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "label", className: "text-text-primary", children: "No API keys yet" }),
+      /* @__PURE__ */ jsx("p", { className: "text-text-secondary", children: "Create your first API key to get started." })
+    ] }) : /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: "Name" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Key" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: "Created" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "hidden md:table-cell", children: "Last Used" }),
+        /* @__PURE__ */ jsx(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: "Action" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: sortedKeys.map((key) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: key.name }),
+        /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-xs text-text-tertiary", children: key.prefix }),
+        /* @__PURE__ */ jsx(TableCell, { className: "hidden text-text-secondary md:table-cell", children: new Date(key.createdAt).toLocaleDateString() }),
+        /* @__PURE__ */ jsx(TableCell, { className: "hidden text-text-secondary md:table-cell", children: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleDateString() : "Never" }),
+        /* @__PURE__ */ jsx(TableCell, { children: key.revokedAt ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "outline",
+            className: "text-destructive/80",
+            children: "Revoked"
+          }
+        ) : /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-chart-4", children: "Active" }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: !key.revokedAt && onRevoke && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "text-destructive/80 hover:text-destructive",
+            onClick: () => onRevoke(key.id),
+            children: [
+              /* @__PURE__ */ jsx(Trash2Icon, { size: 14, className: "mr-1" }),
+              "Revoke"
+            ]
+          }
+        ) })
+      ] }, key.id)) })
+    ] }) }) })
+  ] }) });
+}
+
+export { ApiKeysBlock };