@vadimcomanescu/nadicode-design-system 4.0.4 → 4.0.6

package/dist/chunk-K5AFXZDL.js

@@ -0,0 +1,30 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot } from './chunk-WN5ONOHC.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function OTPBlock({
+  className,
+  title = "One-Time Password",
+  description = "Please enter the one-time password sent to your phone.",
+  maxLength = 6,
+  buttonText = "Verify",
+  onVerify
+}) {
+  const [otp, setOtp] = React.useState("");
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { className: "text-center", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4 justify-center", children: [
+      /* @__PURE__ */ jsx(InputOTP, { maxLength, value: otp, onChange: setOtp, children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i }, i)) }) }),
+      /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: () => onVerify?.(otp), children: buttonText })
+    ] })
+  ] }) });
+}
+
+export { OTPBlock };

package/dist/{chunk-LK2L3C7D.js → chunk-LCMAB2BX.js}

@@ -1,8 +1,8 @@
-import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
-import { SocialProofBlock } from './chunk-C7WHMSF3.js';
+import { MarketingShellPageKit } from './chunk-E4L6LR6P.js';
 import { StatsMarketingBlock } from './chunk-QIHA7S3A.js';
-import { NewsletterBlock } from './chunk-K7NQ6ZAW.js';
 import { PricingBlock } from './chunk-VNNAL4A6.js';
+import { SocialProofBlock } from './chunk-C7WHMSF3.js';
+import { NewsletterBlock } from './chunk-K7NQ6ZAW.js';
 import { HeroBlock } from './chunk-GJ557DGH.js';
 import { FAQBlock } from './chunk-NEHCPO53.js';
 import { FeatureBlock } from './chunk-HJ3A2YNO.js';

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