@vadimcomanescu/nadicode-design-system 4.0.3 → 4.0.5

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 };

package/dist/chunk-WVKJNHQM.js

@@ -0,0 +1,120 @@
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { Separator } from './chunk-CUZJIDU7.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Alert, AlertDescription } from './chunk-GJUR6HT3.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { SparklesIcon } from './chunk-CGUCH322.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 MagicLinkBlock({
+  className,
+  onSubmit,
+  onBackToLogin,
+  title = "Sign in with magic link",
+  subtitle = "No password needed",
+  successTitle = "Check your email",
+  expiryMinutes = 15,
+  placeholder = "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);
+  };
+  if (state === "success") {
+    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("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(MailIcon, { size: 48, className: "text-accent" }) }),
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: successTitle }),
+        /* @__PURE__ */ jsxs(CardDescription, { children: [
+          "We sent a magic link to ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-text-primary", children: email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "grid gap-4", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-2 text-sm text-text-secondary", children: [
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "text-success mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: "Click the link in the email to sign in" })
+        ] }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "text-success mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "The link expires in ",
+            expiryMinutes,
+            " minutes"
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBackToLogin,
+          className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+          children: "Back to login"
+        }
+      ) })
+    ] }) });
+  }
+  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("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(SparklesIcon, { size: 32, className: "text-accent" }) }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "magic-email", children: "Email" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "magic-email",
+              name: "email",
+              type: "email",
+              placeholder,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              autoComplete: "email",
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsxs(AlertDescription, { className: "text-xs text-text-tertiary", children: [
+          "We",
+          "'",
+          "ll send you a link that expires in ",
+          expiryMinutes,
+          " minutes."
+        ] }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "accent", className: "w-full", disabled: state === "loading", children: state === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Spinner, { className: "mr-2" }),
+          "Sending..."
+        ] }) : "Send magic link" })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+      /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBackToLogin,
+          className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+          children: "Prefer password? Sign in normally"
+        }
+      ) })
+    ] })
+  ] }) });
+}
+
+export { MagicLinkBlock };

package/dist/chunk-XAAJBX6R.js

@@ -0,0 +1,100 @@
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_PLANS = [
+  {
+    name: "Free",
+    price: "$0",
+    period: "mo",
+    description: "Per editor",
+    features: ["Basic Analytics Dashboard", "5GB Cloud Storage", "Email and Chat Support"],
+    buttonVariant: "outline"
+  },
+  {
+    name: "Pro",
+    price: "$19",
+    period: "mo",
+    description: "Per editor",
+    features: [
+      "Everything in Free Plan",
+      "5GB Cloud Storage",
+      "Email and Chat Support",
+      "Access to Community Forum",
+      "Single User Access",
+      "Access to Basic Templates",
+      "Mobile App Access",
+      "1 Custom Report Per Month",
+      "Monthly Product Updates",
+      "Standard Security Features"
+    ],
+    highlighted: true,
+    badge: "Popular"
+  },
+  {
+    name: "Startup",
+    price: "$29",
+    period: "mo",
+    description: "Per editor",
+    features: ["Everything in Pro Plan", "5GB Cloud Storage", "Email and Chat Support"],
+    buttonVariant: "outline"
+  }
+];
+function PricingTableBlock({
+  heading = "Pricing that Scales with You",
+  subheading = "Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.",
+  plans = DEFAULT_PLANS,
+  onSelectPlan,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl space-y-6 text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, className: "text-center", children: heading }),
+      /* @__PURE__ */ jsx("p", { children: subheading })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8 grid gap-6 md:mt-20 md:grid-cols-3", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: plan.highlighted ? "relative" : "flex flex-col",
+        interactive: true,
+        children: [
+          !!plan.badge && /* @__PURE__ */ jsx(Badge, { className: "absolute inset-x-0 -top-3 mx-auto w-fit", children: plan.badge }),
+          /* @__PURE__ */ jsxs("div", { className: plan.highlighted ? "flex flex-col" : void 0, children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "font-medium", children: plan.name }),
+              /* @__PURE__ */ jsxs("span", { className: "my-3 block text-2xl font-semibold tabular-nums", children: [
+                plan.price,
+                " / ",
+                plan.period
+              ] }),
+              /* @__PURE__ */ jsx(CardDescription, { className: "text-sm", children: plan.description })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("hr", { className: "border-dashed" }),
+              /* @__PURE__ */ jsx("ul", { className: "list-outside space-y-3 text-sm", children: plan.features.map((feature, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                feature
+              ] }, index)) })
+            ] }),
+            /* @__PURE__ */ jsx(CardFooter, { className: plan.highlighted ? void 0 : "mt-auto", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: plan.buttonVariant ?? "primary",
+                className: "w-full",
+                onClick: () => onSelectPlan?.(plan.name),
+                children: "Get Started"
+              }
+            ) })
+          ] })
+        ]
+      },
+      plan.name
+    )) })
+  ] }) });
+}
+
+export { PricingTableBlock };

package/dist/chunk-ZXVDDZZL.js

@@ -0,0 +1,96 @@
+import { getTimezoneGroups } from './chunk-PTJPPKDR.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-UYT33NG6.js';
+import { Command } from './chunk-2HDB6MDK.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 { 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
+}) {
+  const [open, setOpen] = useState(false);
+  const entries = useMemo(() => groups.flatMap((group) => group.timezones), [groups]);
+  const selectedTimezone = useMemo(
+    () => entries.find((timezone) => timezone.value === value) ?? null,
+    [entries, value]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" }) : null,
+    /* @__PURE__ */ jsxs(Popover, { modal: false, open, onOpenChange: setOpen, children: [
+      /* @__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),
+          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: [
+              /* @__PURE__ */ jsx("path", { d: "M6 8l4-4 4 4", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
+              /* @__PURE__ */ jsx("path", { d: "M6 12l4 4 4-4", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
+            ] }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-[min(90vw,32rem)] p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center border-b px-4", children: /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            className: "h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-text-tertiary focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            placeholder: "Search timezone by city, region, or offset..."
+          }
+        ) }),
+        /* @__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(
+            Command$1.Group,
+            {
+              heading: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: group.region }),
+              className: "overflow-hidden p-1.5 text-text-primary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+              children: group.timezones.map((timezone) => /* @__PURE__ */ jsxs(
+                Command$1.Item,
+                {
+                  value: `${timezone.value} ${timezone.label} ${timezone.region} ${timezone.offset}`,
+                  onSelect: () => {
+                    onChange?.(timezone.value);
+                    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",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn("mr-2 shrink-0 text-xs", value === timezone.value ? "opacity-100" : "opacity-0"),
+                        "aria-hidden": "true",
+                        children: "\u2713"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: timezone.value }),
+                    /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2 text-xs text-text-tertiary", children: timezone.offset })
+                  ]
+                },
+                timezone.value
+              ))
+            },
+            group.region
+          ))
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+export { TimezonePickerBlock };

package/dist/components/blocks/ApiKeysBlock.d.ts

@@ -0,0 +1,18 @@
+interface ApiKey {
+    id: string;
+    name: string;
+    prefix: string;
+    createdAt: string;
+    lastUsedAt: string | null;
+    revokedAt: string | null;
+}
+interface ApiKeysBlockProps {
+    keys?: ApiKey[];
+    onCreate?: (name: string) => Promise<string | void> | string | void;
+    onRevoke?: (keyId: string) => void | Promise<void>;
+    title?: string;
+    description?: string;
+    className?: string;
+}
+export declare function ApiKeysBlock({ keys, onCreate, onRevoke, title, description, className, }: ApiKeysBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};