@wealthx/shadcn 1.5.28 → 1.5.30

package/dist/components/ui/two-fa-setup-form.js

@@ -367,7 +367,7 @@ function FieldError(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      className: cn("text-caption text-destructive", className),
+      className: cn("text-left text-caption text-destructive", className),
       "data-slot": "field-error",
       role: "alert"
     }, props), {
@@ -483,6 +483,16 @@ var DEFAULT_APPS = [
   { name: "Google Authenticator" },
   { name: "Microsoft Authenticator" }
 ];
+var STEP_META = {
+  1: {
+    subtitle: "We recommend Google Authenticator or Microsoft Authenticator",
+    defaultTitle: "2FA Setup"
+  },
+  2: {
+    title: "Open Auth App and Scan Code",
+    subtitle: "Open your authenticator app and scan the QR code"
+  }
+};
 function AppDownloadStep({
   apps,
   onNext,
@@ -490,18 +500,21 @@ function AppDownloadStep({
   required
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-4", children: apps.map((app) => {
-      var _a;
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-3", children: apps.map((app) => {
+      var _a, _b;
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
-          className: "flex flex-1 flex-col items-center gap-3 border border-border bg-muted/30 p-4 text-center",
+          className: "flex items-center gap-4 border border-border bg-muted/30 p-4",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
-              (_a = app.icon) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Smartphone, { size: 18, className: "text-muted-foreground" }),
-              app.name
-            ] }),
-            app.qrNode ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center justify-center", children: app.qrNode }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-[100px] w-[100px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground", children: "Scan to download" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex shrink-0 items-center justify-center", children: (_a = app.qrNode) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-[80px] w-[80px] items-center justify-center border border-dashed border-border bg-muted/50 text-[11px] text-muted-foreground", children: "Scan" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+                (_b = app.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Smartphone, { size: 16, className: "text-muted-foreground" }),
+                app.name
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: "Scan to download" })
+            ] })
           ]
         },
         app.name
@@ -533,15 +546,17 @@ function VerificationStep({
     setIsLoading(true);
     try {
       yield onVerify(token);
-    } catch (e) {
-      setError("Invalid code. Please try again.");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Invalid code. Please try again."
+      );
     } finally {
       setIsLoading(false);
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      qrCodeNode ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center justify-center", children: qrCodeNode }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-[140px] w-[140px] items-center justify-center border border-dashed border-border bg-muted/50 text-xs text-muted-foreground", children: "QR Code" }),
+      qrCodeNode != null ? qrCodeNode : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-[140px] w-[140px] items-center justify-center border border-dashed border-border bg-muted/50 text-xs text-muted-foreground", children: "QR Code" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-center text-sm text-muted-foreground", children: "The temporary code will show for authentication. Insert below." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { children: [
@@ -583,7 +598,7 @@ function VerificationStep({
   ] });
 }
 function TwoFASetupForm({
-  title = "2FA Setup",
+  title,
   apps = DEFAULT_APPS,
   qrCodeNode,
   onVerify,
@@ -592,10 +607,10 @@ function TwoFASetupForm({
   className
 }) {
   const [step, setStep] = (0, import_react3.useState)(1);
-  const stepTitle = step === 1 ? title : "Open Auth App and Scan Code";
-  const stepSubtitle = step === 1 ? "We recommend Google Authenticator or Microsoft Authenticator" : "Open your authenticator app and scan the QR code";
+  const stepTitle = step === 1 ? title != null ? title : STEP_META[1].defaultTitle : STEP_META[2].title;
+  const stepSubtitle = STEP_META[step].subtitle;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex flex-col gap-6", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "text-xl font-semibold text-foreground", children: stepTitle }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-muted-foreground", children: stepSubtitle })
     ] }),

package/dist/components/ui/two-fa-setup-form.mjs

@@ -1,8 +1,8 @@
 import {
   TwoFASetupForm
-} from "../../chunk-7T4TYUO3.mjs";
+} from "../../chunk-H5ZD63NT.mjs";
 import "../../chunk-7YI3HEBH.mjs";
-import "../../chunk-KPGARKFC.mjs";
+import "../../chunk-MS3GNXMB.mjs";
 import "../../chunk-2GIYVERS.mjs";
 import "../../chunk-BS75ICOO.mjs";
 import "../../chunk-LSRGA5BI.mjs";