@rqdhw3n/react-auth-flow 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +261 -631
  2. package/dist/index.cjs.js +422 -350
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.d.ts +6 -6
  5. package/dist/index.es.js +422 -350
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/style.css +253 -0
  8. package/package.json +3 -2
package/dist/index.cjs.js CHANGED
@@ -3,6 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const reactRouterDom = require("react-router-dom");
6
+ const authStyles = ".rq-auth-container,\n.rq-auth-container * {\n box-sizing: border-box;\n}\n\n.rq-auth-container {\n --rq-auth-primary: #2563eb;\n --rq-auth-primary-hover: #1d4ed8;\n --rq-auth-primary-soft: rgba(37, 99, 235, 0.16);\n --rq-auth-border: #dbe4f0;\n --rq-auth-border-strong: #c7d4e5;\n --rq-auth-text: #0f172a;\n --rq-auth-muted: #64748b;\n --rq-auth-surface: #ffffff;\n --rq-auth-surface-alt: #f8fbff;\n --rq-auth-disabled: #eef2f7;\n --rq-auth-error: #b91c1c;\n --rq-auth-error-border: #fecaca;\n --rq-auth-error-bg: #fef2f2;\n --rq-auth-success: #047857;\n --rq-auth-success-border: #a7f3d0;\n --rq-auth-success-bg: #ecfdf5;\n width: min(100%, 28rem);\n margin: 0 auto;\n padding: clamp(1.25rem, 3vw, 2rem);\n border: 1px solid var(--rq-auth-border);\n border-radius: 1.5rem;\n background:\n radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 34%),\n linear-gradient(180deg, var(--rq-auth-surface) 0%, var(--rq-auth-surface-alt) 100%);\n box-shadow:\n 0 24px 48px rgba(15, 23, 42, 0.08),\n 0 8px 20px rgba(15, 23, 42, 0.05);\n color: var(--rq-auth-text);\n}\n\n.rq-auth-header {\n margin-bottom: 1.5rem;\n}\n\n.rq-auth-title {\n margin: 0;\n font-size: clamp(1.625rem, 4vw, 2rem);\n font-weight: 700;\n line-height: 1.15;\n letter-spacing: -0.02em;\n color: var(--rq-auth-text);\n}\n\n.rq-auth-subtitle {\n margin: 0.5rem 0 0;\n font-size: 0.95rem;\n line-height: 1.6;\n color: var(--rq-auth-muted);\n}\n\n.rq-auth-form {\n display: grid;\n gap: 1rem;\n}\n\n.rq-auth-field {\n display: grid;\n gap: 0.5rem;\n}\n\n.rq-auth-label {\n font-size: 0.94rem;\n font-weight: 600;\n line-height: 1.4;\n color: var(--rq-auth-text);\n}\n\n.rq-auth-input {\n width: 100%;\n min-width: 0;\n padding: 0.9rem 1rem;\n border: 1px solid var(--rq-auth-border);\n border-radius: 0.95rem;\n background: rgba(255, 255, 255, 0.92);\n color: var(--rq-auth-text);\n font: inherit;\n line-height: 1.5;\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease,\n transform 0.2s ease;\n box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n}\n\n.rq-auth-input::placeholder {\n color: #94a3b8;\n}\n\n.rq-auth-input:hover {\n border-color: var(--rq-auth-border-strong);\n}\n\n.rq-auth-input:focus {\n border-color: var(--rq-auth-primary);\n box-shadow:\n 0 0 0 4px var(--rq-auth-primary-soft),\n inset 0 1px 2px rgba(15, 23, 42, 0.03);\n}\n\n.rq-auth-input:disabled {\n cursor: not-allowed;\n background: var(--rq-auth-disabled);\n color: #94a3b8;\n}\n\n.rq-auth-checkbox {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n font-size: 0.94rem;\n line-height: 1.5;\n color: var(--rq-auth-muted);\n}\n\n.rq-auth-checkbox-input {\n width: 1.05rem;\n height: 1.05rem;\n margin: 0.2rem 0 0;\n border-radius: 0.35rem;\n accent-color: var(--rq-auth-primary);\n flex: 0 0 auto;\n}\n\n.rq-auth-checkbox-input:disabled {\n cursor: not-allowed;\n}\n\n.rq-auth-checkbox-label {\n color: var(--rq-auth-muted);\n}\n\n.rq-auth-button {\n width: 100%;\n border: 0;\n border-radius: 0.95rem;\n padding: 0.95rem 1.15rem;\n background: linear-gradient(180deg, #3b82f6 0%, var(--rq-auth-primary) 100%);\n color: #ffffff;\n font: inherit;\n font-size: 0.98rem;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n transition:\n background 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.2s ease,\n opacity 0.2s ease;\n box-shadow:\n 0 14px 28px rgba(37, 99, 235, 0.22),\n inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n\n.rq-auth-button:hover:not(:disabled) {\n background: linear-gradient(180deg, #2563eb 0%, var(--rq-auth-primary-hover) 100%);\n transform: translateY(-1px);\n}\n\n.rq-auth-button:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 4px var(--rq-auth-primary-soft),\n 0 14px 28px rgba(37, 99, 235, 0.22);\n}\n\n.rq-auth-button:disabled {\n cursor: not-allowed;\n opacity: 0.68;\n transform: none;\n box-shadow: none;\n}\n\n.rq-auth-button-content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.625rem;\n}\n\n.rq-auth-button-spinner {\n width: 1rem;\n height: 1rem;\n border: 2px solid rgba(255, 255, 255, 0.4);\n border-top-color: #ffffff;\n border-radius: 999px;\n animation: rq-auth-spin 0.75s linear infinite;\n}\n\n.rq-auth-error,\n.rq-auth-success,\n.auth-loading,\n.auth-forbidden {\n padding: 0.95rem 1rem;\n border-radius: 1rem;\n border: 1px solid transparent;\n font-size: 0.94rem;\n line-height: 1.55;\n}\n\n.rq-auth-error {\n border-color: var(--rq-auth-error-border);\n background: var(--rq-auth-error-bg);\n color: var(--rq-auth-error);\n}\n\n.rq-auth-success {\n border-color: var(--rq-auth-success-border);\n background: var(--rq-auth-success-bg);\n color: var(--rq-auth-success);\n}\n\n.auth-loading {\n border-color: var(--rq-auth-border);\n background: var(--rq-auth-surface-alt);\n color: var(--rq-auth-muted);\n}\n\n.auth-forbidden {\n border-color: var(--rq-auth-error-border);\n background: var(--rq-auth-error-bg);\n color: var(--rq-auth-error);\n}\n\n@keyframes rq-auth-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n@media (max-width: 640px) {\n .rq-auth-container {\n width: 100%;\n padding: 1.125rem;\n border-radius: 1.25rem;\n }\n\n .rq-auth-form {\n gap: 0.9rem;\n }\n\n .rq-auth-input,\n .rq-auth-button {\n padding-inline: 0.95rem;\n }\n}\n";
7
+ const STYLE_ELEMENT_ID = "rq-auth-flow-styles";
8
+ if (typeof document !== "undefined" && !document.getElementById(STYLE_ELEMENT_ID)) {
9
+ const styleElement = document.createElement("style");
10
+ styleElement.id = STYLE_ELEMENT_ID;
11
+ styleElement.textContent = authStyles;
12
+ document.head.appendChild(styleElement);
13
+ }
6
14
  const AuthContext = React.createContext(
7
15
  void 0
8
16
  );
@@ -408,15 +416,23 @@ function useAuth() {
408
416
  function cn(...classes) {
409
417
  return classes.filter(Boolean).join(" ");
410
418
  }
411
- const DEFAULT_CLASSES$4 = {
412
- form: "space-y-5",
413
- field: "space-y-2",
414
- label: "block text-sm font-medium text-slate-700",
415
- input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
416
- button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
417
- error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
418
- title: "text-2xl font-bold text-slate-900",
419
- subtitle: "mt-1 text-sm text-slate-500"
419
+ const AUTH_FORM_CLASSES = {
420
+ container: "rq-auth-container",
421
+ header: "rq-auth-header",
422
+ form: "rq-auth-form",
423
+ field: "rq-auth-field",
424
+ label: "rq-auth-label",
425
+ input: "rq-auth-input",
426
+ button: "rq-auth-button",
427
+ buttonContent: "rq-auth-button-content",
428
+ buttonSpinner: "rq-auth-button-spinner",
429
+ error: "rq-auth-error",
430
+ success: "rq-auth-success",
431
+ title: "rq-auth-title",
432
+ subtitle: "rq-auth-subtitle",
433
+ checkbox: "rq-auth-checkbox",
434
+ checkboxInput: "rq-auth-checkbox-input",
435
+ checkboxLabel: "rq-auth-checkbox-label"
420
436
  };
421
437
  const LoginForm = ({
422
438
  className,
@@ -464,89 +480,93 @@ const LoginForm = ({
464
480
  });
465
481
  }
466
482
  };
467
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
468
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
469
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$4.title, titleClassName), children: title }),
470
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$4.subtitle, subtitleClassName), children: subtitle })
483
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
484
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
485
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
486
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
471
487
  ] }),
472
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$4.form, formClassName), children: [
473
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
474
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.email || "Email" }),
475
- /* @__PURE__ */ jsxRuntime.jsx(
476
- "input",
477
- {
478
- id: "email",
479
- type: "email",
480
- value: email,
481
- onChange: (e) => setEmail(e.target.value),
482
- placeholder: placeholders.email || "your@email.com",
483
- disabled: isLoading,
484
- className: cn(DEFAULT_CLASSES$4.input, inputClassName),
485
- required: true
486
- }
487
- )
488
- ] }),
489
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$4.field, fieldClassName), children: [
490
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$4.label, labelClassName), children: labels.password || "Password" }),
491
- /* @__PURE__ */ jsxRuntime.jsx(
492
- "input",
493
- {
494
- id: "password",
495
- type: "password",
496
- value: password,
497
- onChange: (e) => setPassword(e.target.value),
498
- placeholder: placeholders.password || "••••••••",
499
- disabled: isLoading,
500
- className: cn(DEFAULT_CLASSES$4.input, inputClassName),
501
- required: true
502
- }
503
- )
504
- ] }),
505
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
506
- /* @__PURE__ */ jsxRuntime.jsx(
507
- "input",
508
- {
509
- id: "rememberMe",
510
- type: "checkbox",
511
- checked: rememberMe,
512
- onChange: (e) => setRememberMe(e.target.checked),
513
- disabled: isLoading,
514
- className: "h-4 w-4 rounded border-slate-300"
515
- }
516
- ),
517
- /* @__PURE__ */ jsxRuntime.jsx(
518
- "label",
519
- {
520
- htmlFor: "rememberMe",
521
- className: "ml-2 text-sm text-slate-700",
522
- children: labels.rememberMe || "Remember me"
523
- }
524
- )
525
- ] }),
526
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$4.error, errorClassName), children: error }),
527
- /* @__PURE__ */ jsxRuntime.jsx(
528
- "button",
529
- {
530
- type: "submit",
531
- disabled: isLoading,
532
- className: cn(DEFAULT_CLASSES$4.button, buttonClassName),
533
- children: isLoading ? loadingText : submitButtonText
534
- }
535
- )
536
- ] })
488
+ /* @__PURE__ */ jsxRuntime.jsxs(
489
+ "form",
490
+ {
491
+ onSubmit: handleSubmit,
492
+ className: cn(AUTH_FORM_CLASSES.form, formClassName),
493
+ "aria-busy": isLoading,
494
+ children: [
495
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
496
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
497
+ /* @__PURE__ */ jsxRuntime.jsx(
498
+ "input",
499
+ {
500
+ id: "email",
501
+ type: "email",
502
+ value: email,
503
+ onChange: (e) => setEmail(e.target.value),
504
+ placeholder: placeholders.email || "your@email.com",
505
+ disabled: isLoading,
506
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
507
+ autoComplete: "username",
508
+ required: true
509
+ }
510
+ )
511
+ ] }),
512
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
513
+ /* @__PURE__ */ jsxRuntime.jsx(
514
+ "label",
515
+ {
516
+ htmlFor: "password",
517
+ className: cn(AUTH_FORM_CLASSES.label, labelClassName),
518
+ children: labels.password || "Password"
519
+ }
520
+ ),
521
+ /* @__PURE__ */ jsxRuntime.jsx(
522
+ "input",
523
+ {
524
+ id: "password",
525
+ type: "password",
526
+ value: password,
527
+ onChange: (e) => setPassword(e.target.value),
528
+ placeholder: placeholders.password || "Enter your password",
529
+ disabled: isLoading,
530
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
531
+ autoComplete: "current-password",
532
+ required: true
533
+ }
534
+ )
535
+ ] }),
536
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: "rememberMe", className: AUTH_FORM_CLASSES.checkbox, children: [
537
+ /* @__PURE__ */ jsxRuntime.jsx(
538
+ "input",
539
+ {
540
+ id: "rememberMe",
541
+ type: "checkbox",
542
+ checked: rememberMe,
543
+ onChange: (e) => setRememberMe(e.target.checked),
544
+ disabled: isLoading,
545
+ className: AUTH_FORM_CLASSES.checkboxInput
546
+ }
547
+ ),
548
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.checkboxLabel, children: labels.rememberMe || "Remember me" })
549
+ ] }),
550
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
551
+ /* @__PURE__ */ jsxRuntime.jsx(
552
+ "button",
553
+ {
554
+ type: "submit",
555
+ disabled: isLoading,
556
+ className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
557
+ "aria-busy": isLoading,
558
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
559
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
560
+ loadingText
561
+ ] }) : submitButtonText
562
+ }
563
+ )
564
+ ]
565
+ }
566
+ )
537
567
  ] });
538
568
  };
539
569
  LoginForm.displayName = "LoginForm";
540
- const DEFAULT_CLASSES$3 = {
541
- form: "space-y-5",
542
- field: "space-y-2",
543
- label: "block text-sm font-medium text-slate-700",
544
- input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
545
- button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
546
- error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
547
- title: "text-2xl font-bold text-slate-900",
548
- subtitle: "mt-1 text-sm text-slate-500"
549
- };
550
570
  const RegisterForm = ({
551
571
  className,
552
572
  formClassName,
@@ -607,101 +627,120 @@ const RegisterForm = ({
607
627
  });
608
628
  }
609
629
  };
610
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
611
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
612
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$3.title, titleClassName), children: title }),
613
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$3.subtitle, subtitleClassName), children: subtitle })
630
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
631
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
632
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
633
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
614
634
  ] }),
615
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$3.form, formClassName), children: [
616
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
617
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.name || "Full Name" }),
618
- /* @__PURE__ */ jsxRuntime.jsx(
619
- "input",
620
- {
621
- id: "name",
622
- type: "text",
623
- value: name,
624
- onChange: (e) => setName(e.target.value),
625
- placeholder: placeholders.name || "John Doe",
626
- disabled: isLoading,
627
- className: cn(DEFAULT_CLASSES$3.input, inputClassName),
628
- required: true
629
- }
630
- )
631
- ] }),
632
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
633
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.email || "Email" }),
634
- /* @__PURE__ */ jsxRuntime.jsx(
635
- "input",
636
- {
637
- id: "email",
638
- type: "email",
639
- value: email,
640
- onChange: (e) => setEmail(e.target.value),
641
- placeholder: placeholders.email || "your@email.com",
642
- disabled: isLoading,
643
- className: cn(DEFAULT_CLASSES$3.input, inputClassName),
644
- required: true
645
- }
646
- )
647
- ] }),
648
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
649
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.password || "Password" }),
650
- /* @__PURE__ */ jsxRuntime.jsx(
651
- "input",
652
- {
653
- id: "password",
654
- type: "password",
655
- value: password,
656
- onChange: (e) => setPassword(e.target.value),
657
- placeholder: placeholders.password || "••••••••",
658
- disabled: isLoading,
659
- className: cn(DEFAULT_CLASSES$3.input, inputClassName),
660
- required: true
661
- }
662
- )
663
- ] }),
664
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$3.field, fieldClassName), children: [
665
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$3.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
666
- /* @__PURE__ */ jsxRuntime.jsx(
667
- "input",
668
- {
669
- id: "confirmPassword",
670
- type: "password",
671
- value: confirmPassword,
672
- onChange: (e) => setConfirmPassword(e.target.value),
673
- placeholder: placeholders.confirmPassword || "••••••••",
674
- disabled: isLoading,
675
- className: cn(DEFAULT_CLASSES$3.input, inputClassName),
676
- required: true
677
- }
678
- )
679
- ] }),
680
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$3.error, errorClassName), children: error }),
681
- /* @__PURE__ */ jsxRuntime.jsx(
682
- "button",
683
- {
684
- type: "submit",
685
- disabled: isLoading,
686
- className: cn(DEFAULT_CLASSES$3.button, buttonClassName),
687
- children: isLoading ? loadingText : submitButtonText
688
- }
689
- )
690
- ] })
635
+ /* @__PURE__ */ jsxRuntime.jsxs(
636
+ "form",
637
+ {
638
+ onSubmit: handleSubmit,
639
+ className: cn(AUTH_FORM_CLASSES.form, formClassName),
640
+ "aria-busy": isLoading,
641
+ children: [
642
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
643
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "name", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.name || "Full Name" }),
644
+ /* @__PURE__ */ jsxRuntime.jsx(
645
+ "input",
646
+ {
647
+ id: "name",
648
+ type: "text",
649
+ value: name,
650
+ onChange: (e) => setName(e.target.value),
651
+ placeholder: placeholders.name || "John Doe",
652
+ disabled: isLoading,
653
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
654
+ autoComplete: "name",
655
+ required: true
656
+ }
657
+ )
658
+ ] }),
659
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
660
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
661
+ /* @__PURE__ */ jsxRuntime.jsx(
662
+ "input",
663
+ {
664
+ id: "email",
665
+ type: "email",
666
+ value: email,
667
+ onChange: (e) => setEmail(e.target.value),
668
+ placeholder: placeholders.email || "your@email.com",
669
+ disabled: isLoading,
670
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
671
+ autoComplete: "email",
672
+ required: true
673
+ }
674
+ )
675
+ ] }),
676
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
677
+ /* @__PURE__ */ jsxRuntime.jsx(
678
+ "label",
679
+ {
680
+ htmlFor: "password",
681
+ className: cn(AUTH_FORM_CLASSES.label, labelClassName),
682
+ children: labels.password || "Password"
683
+ }
684
+ ),
685
+ /* @__PURE__ */ jsxRuntime.jsx(
686
+ "input",
687
+ {
688
+ id: "password",
689
+ type: "password",
690
+ value: password,
691
+ onChange: (e) => setPassword(e.target.value),
692
+ placeholder: placeholders.password || "Create a password",
693
+ disabled: isLoading,
694
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
695
+ autoComplete: "new-password",
696
+ required: true
697
+ }
698
+ )
699
+ ] }),
700
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
701
+ /* @__PURE__ */ jsxRuntime.jsx(
702
+ "label",
703
+ {
704
+ htmlFor: "confirmPassword",
705
+ className: cn(AUTH_FORM_CLASSES.label, labelClassName),
706
+ children: labels.confirmPassword || "Confirm Password"
707
+ }
708
+ ),
709
+ /* @__PURE__ */ jsxRuntime.jsx(
710
+ "input",
711
+ {
712
+ id: "confirmPassword",
713
+ type: "password",
714
+ value: confirmPassword,
715
+ onChange: (e) => setConfirmPassword(e.target.value),
716
+ placeholder: placeholders.confirmPassword || "Confirm your password",
717
+ disabled: isLoading,
718
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
719
+ autoComplete: "new-password",
720
+ required: true
721
+ }
722
+ )
723
+ ] }),
724
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
725
+ /* @__PURE__ */ jsxRuntime.jsx(
726
+ "button",
727
+ {
728
+ type: "submit",
729
+ disabled: isLoading,
730
+ className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
731
+ "aria-busy": isLoading,
732
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
733
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
734
+ loadingText
735
+ ] }) : submitButtonText
736
+ }
737
+ )
738
+ ]
739
+ }
740
+ )
691
741
  ] });
692
742
  };
693
743
  RegisterForm.displayName = "RegisterForm";
694
- const DEFAULT_CLASSES$2 = {
695
- form: "space-y-5",
696
- field: "space-y-2",
697
- label: "block text-sm font-medium text-slate-700",
698
- input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
699
- button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
700
- error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
701
- success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
702
- title: "text-2xl font-bold text-slate-900",
703
- subtitle: "mt-1 text-sm text-slate-500"
704
- };
705
744
  const ForgotPasswordForm = ({
706
745
  className,
707
746
  formClassName,
@@ -756,61 +795,63 @@ const ForgotPasswordForm = ({
756
795
  }
757
796
  };
758
797
  if (successMessage) {
759
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
760
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
761
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
762
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
798
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
799
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
800
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
801
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
763
802
  ] }),
764
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$2.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
803
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
765
804
  ] });
766
805
  }
767
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
768
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
769
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$2.title, titleClassName), children: title }),
770
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$2.subtitle, subtitleClassName), children: subtitle })
806
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
807
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
808
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
809
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
771
810
  ] }),
772
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$2.form, formClassName), children: [
773
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$2.field, fieldClassName), children: [
774
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES$2.label, labelClassName), children: labels.email || "Email" }),
775
- /* @__PURE__ */ jsxRuntime.jsx(
776
- "input",
777
- {
778
- id: "email",
779
- type: "email",
780
- value: email,
781
- onChange: (e) => setEmail(e.target.value),
782
- placeholder: placeholders.email || "your@email.com",
783
- disabled: isLoading,
784
- className: cn(DEFAULT_CLASSES$2.input, inputClassName),
785
- required: true
786
- }
787
- )
788
- ] }),
789
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$2.error, errorClassName), children: error }),
790
- /* @__PURE__ */ jsxRuntime.jsx(
791
- "button",
792
- {
793
- type: "submit",
794
- disabled: isLoading,
795
- className: cn(DEFAULT_CLASSES$2.button, buttonClassName),
796
- children: isLoading ? loadingText : submitButtonText
797
- }
798
- )
799
- ] })
811
+ /* @__PURE__ */ jsxRuntime.jsxs(
812
+ "form",
813
+ {
814
+ onSubmit: handleSubmit,
815
+ className: cn(AUTH_FORM_CLASSES.form, formClassName),
816
+ "aria-busy": isLoading,
817
+ children: [
818
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
819
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
820
+ /* @__PURE__ */ jsxRuntime.jsx(
821
+ "input",
822
+ {
823
+ id: "email",
824
+ type: "email",
825
+ value: email,
826
+ onChange: (e) => setEmail(e.target.value),
827
+ placeholder: placeholders.email || "your@email.com",
828
+ disabled: isLoading,
829
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
830
+ autoComplete: "email",
831
+ required: true
832
+ }
833
+ )
834
+ ] }),
835
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
836
+ /* @__PURE__ */ jsxRuntime.jsx(
837
+ "button",
838
+ {
839
+ type: "submit",
840
+ disabled: isLoading,
841
+ className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
842
+ "aria-busy": isLoading,
843
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
844
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
845
+ loadingText
846
+ ] }) : submitButtonText
847
+ }
848
+ )
849
+ ]
850
+ }
851
+ )
800
852
  ] });
801
853
  };
802
854
  ForgotPasswordForm.displayName = "ForgotPasswordForm";
803
- const DEFAULT_CLASSES$1 = {
804
- form: "space-y-5",
805
- field: "space-y-2",
806
- label: "block text-sm font-medium text-slate-700",
807
- input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
808
- button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
809
- error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
810
- success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
811
- title: "text-2xl font-bold text-slate-900",
812
- subtitle: "mt-1 text-sm text-slate-500"
813
- };
814
855
  const ResetPasswordForm = ({
815
856
  token,
816
857
  className,
@@ -876,77 +917,94 @@ const ResetPasswordForm = ({
876
917
  }
877
918
  };
878
919
  if (successMessage) {
879
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
880
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
881
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
882
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
920
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
921
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
922
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
923
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
883
924
  ] }),
884
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$1.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
925
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
885
926
  ] });
886
927
  }
887
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
888
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
889
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES$1.title, titleClassName), children: title }),
890
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES$1.subtitle, subtitleClassName), children: subtitle })
928
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
929
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
930
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
931
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
891
932
  ] }),
892
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES$1.form, formClassName), children: [
893
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
894
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "password", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.password || "New Password" }),
895
- /* @__PURE__ */ jsxRuntime.jsx(
896
- "input",
897
- {
898
- id: "password",
899
- type: "password",
900
- value: password,
901
- onChange: (e) => setPassword(e.target.value),
902
- placeholder: placeholders.password || "••••••••",
903
- disabled: isLoading,
904
- className: cn(DEFAULT_CLASSES$1.input, inputClassName),
905
- required: true
906
- }
907
- )
908
- ] }),
909
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES$1.field, fieldClassName), children: [
910
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "confirmPassword", className: cn(DEFAULT_CLASSES$1.label, labelClassName), children: labels.confirmPassword || "Confirm Password" }),
911
- /* @__PURE__ */ jsxRuntime.jsx(
912
- "input",
913
- {
914
- id: "confirmPassword",
915
- type: "password",
916
- value: confirmPassword,
917
- onChange: (e) => setConfirmPassword(e.target.value),
918
- placeholder: placeholders.confirmPassword || "••••••••",
919
- disabled: isLoading,
920
- className: cn(DEFAULT_CLASSES$1.input, inputClassName),
921
- required: true
922
- }
923
- )
924
- ] }),
925
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES$1.error, errorClassName), children: error }),
926
- /* @__PURE__ */ jsxRuntime.jsx(
927
- "button",
928
- {
929
- type: "submit",
930
- disabled: isLoading,
931
- className: cn(DEFAULT_CLASSES$1.button, buttonClassName),
932
- children: isLoading ? loadingText : submitButtonText
933
- }
934
- )
935
- ] })
933
+ /* @__PURE__ */ jsxRuntime.jsxs(
934
+ "form",
935
+ {
936
+ onSubmit: handleSubmit,
937
+ className: cn(AUTH_FORM_CLASSES.form, formClassName),
938
+ "aria-busy": isLoading,
939
+ children: [
940
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
941
+ /* @__PURE__ */ jsxRuntime.jsx(
942
+ "label",
943
+ {
944
+ htmlFor: "password",
945
+ className: cn(AUTH_FORM_CLASSES.label, labelClassName),
946
+ children: labels.password || "New Password"
947
+ }
948
+ ),
949
+ /* @__PURE__ */ jsxRuntime.jsx(
950
+ "input",
951
+ {
952
+ id: "password",
953
+ type: "password",
954
+ value: password,
955
+ onChange: (e) => setPassword(e.target.value),
956
+ placeholder: placeholders.password || "Enter a new password",
957
+ disabled: isLoading,
958
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
959
+ autoComplete: "new-password",
960
+ required: true
961
+ }
962
+ )
963
+ ] }),
964
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
965
+ /* @__PURE__ */ jsxRuntime.jsx(
966
+ "label",
967
+ {
968
+ htmlFor: "confirmPassword",
969
+ className: cn(AUTH_FORM_CLASSES.label, labelClassName),
970
+ children: labels.confirmPassword || "Confirm Password"
971
+ }
972
+ ),
973
+ /* @__PURE__ */ jsxRuntime.jsx(
974
+ "input",
975
+ {
976
+ id: "confirmPassword",
977
+ type: "password",
978
+ value: confirmPassword,
979
+ onChange: (e) => setConfirmPassword(e.target.value),
980
+ placeholder: placeholders.confirmPassword || "Confirm your new password",
981
+ disabled: isLoading,
982
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
983
+ autoComplete: "new-password",
984
+ required: true
985
+ }
986
+ )
987
+ ] }),
988
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
989
+ /* @__PURE__ */ jsxRuntime.jsx(
990
+ "button",
991
+ {
992
+ type: "submit",
993
+ disabled: isLoading,
994
+ className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
995
+ "aria-busy": isLoading,
996
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
997
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
998
+ loadingText
999
+ ] }) : submitButtonText
1000
+ }
1001
+ )
1002
+ ]
1003
+ }
1004
+ )
936
1005
  ] });
937
1006
  };
938
1007
  ResetPasswordForm.displayName = "ResetPasswordForm";
939
- const DEFAULT_CLASSES = {
940
- form: "space-y-5",
941
- field: "space-y-2",
942
- label: "block text-sm font-medium text-slate-700",
943
- input: "w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:bg-slate-100",
944
- button: "w-full rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60",
945
- error: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600",
946
- success: "rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700",
947
- title: "text-2xl font-bold text-slate-900",
948
- subtitle: "mt-1 text-sm text-slate-500"
949
- };
950
1008
  const VerifyEmailForm = ({
951
1009
  token: initialToken,
952
1010
  email: initialEmail,
@@ -981,12 +1039,6 @@ const VerifyEmailForm = ({
981
1039
  const [successMessage, setSuccessMessage] = React.useState("");
982
1040
  const isLoading = authLoading;
983
1041
  const error = formError || authError?.message;
984
- React.useEffect(() => {
985
- if (token && email && !successMessage && !error) {
986
- handleSubmit({ preventDefault: () => {
987
- } });
988
- }
989
- }, [token, email]);
990
1042
  const handleSubmit = async (e) => {
991
1043
  e.preventDefault();
992
1044
  setFormError("");
@@ -1012,64 +1064,84 @@ const VerifyEmailForm = ({
1012
1064
  });
1013
1065
  }
1014
1066
  };
1067
+ React.useEffect(() => {
1068
+ if (token && email && !successMessage && !error) {
1069
+ void handleSubmit({ preventDefault: () => {
1070
+ } });
1071
+ }
1072
+ }, [token, email]);
1015
1073
  if (successMessage) {
1016
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
1017
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
1018
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
1019
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
1074
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
1075
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
1076
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
1077
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
1020
1078
  ] }),
1021
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES.success, successClassName), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
1079
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.success, successClassName), role: "status", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: successMessage }) })
1022
1080
  ] });
1023
1081
  }
1024
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
1025
- showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
1026
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(DEFAULT_CLASSES.title, titleClassName), children: title }),
1027
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(DEFAULT_CLASSES.subtitle, subtitleClassName), children: subtitle })
1082
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.container, className), children: [
1083
+ showTitle && title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AUTH_FORM_CLASSES.header, children: [
1084
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(AUTH_FORM_CLASSES.title, titleClassName), children: title }),
1085
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(AUTH_FORM_CLASSES.subtitle, subtitleClassName), children: subtitle })
1028
1086
  ] }),
1029
- /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn(DEFAULT_CLASSES.form, formClassName), children: [
1030
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
1031
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.email || "Email" }),
1032
- /* @__PURE__ */ jsxRuntime.jsx(
1033
- "input",
1034
- {
1035
- id: "email",
1036
- type: "email",
1037
- value: email,
1038
- onChange: (e) => setEmail(e.target.value),
1039
- placeholder: placeholders.email || "your@email.com",
1040
- disabled: isLoading,
1041
- className: cn(DEFAULT_CLASSES.input, inputClassName),
1042
- required: true
1043
- }
1044
- )
1045
- ] }),
1046
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(DEFAULT_CLASSES.field, fieldClassName), children: [
1047
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "token", className: cn(DEFAULT_CLASSES.label, labelClassName), children: labels.token || "Verification Code" }),
1048
- /* @__PURE__ */ jsxRuntime.jsx(
1049
- "input",
1050
- {
1051
- id: "token",
1052
- type: "text",
1053
- value: token,
1054
- onChange: (e) => setToken(e.target.value),
1055
- placeholder: placeholders.token || "Enter verification code",
1056
- disabled: isLoading,
1057
- className: cn(DEFAULT_CLASSES.input, inputClassName),
1058
- required: true
1059
- }
1060
- )
1061
- ] }),
1062
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DEFAULT_CLASSES.error, errorClassName), children: error }),
1063
- /* @__PURE__ */ jsxRuntime.jsx(
1064
- "button",
1065
- {
1066
- type: "submit",
1067
- disabled: isLoading,
1068
- className: cn(DEFAULT_CLASSES.button, buttonClassName),
1069
- children: isLoading ? loadingText : submitButtonText
1070
- }
1071
- )
1072
- ] })
1087
+ /* @__PURE__ */ jsxRuntime.jsxs(
1088
+ "form",
1089
+ {
1090
+ onSubmit: handleSubmit,
1091
+ className: cn(AUTH_FORM_CLASSES.form, formClassName),
1092
+ "aria-busy": isLoading,
1093
+ children: [
1094
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
1095
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.email || "Email" }),
1096
+ /* @__PURE__ */ jsxRuntime.jsx(
1097
+ "input",
1098
+ {
1099
+ id: "email",
1100
+ type: "email",
1101
+ value: email,
1102
+ onChange: (e) => setEmail(e.target.value),
1103
+ placeholder: placeholders.email || "your@email.com",
1104
+ disabled: isLoading,
1105
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
1106
+ autoComplete: "email",
1107
+ required: true
1108
+ }
1109
+ )
1110
+ ] }),
1111
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(AUTH_FORM_CLASSES.field, fieldClassName), children: [
1112
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "token", className: cn(AUTH_FORM_CLASSES.label, labelClassName), children: labels.token || "Verification Code" }),
1113
+ /* @__PURE__ */ jsxRuntime.jsx(
1114
+ "input",
1115
+ {
1116
+ id: "token",
1117
+ type: "text",
1118
+ value: token,
1119
+ onChange: (e) => setToken(e.target.value),
1120
+ placeholder: placeholders.token || "Enter verification code",
1121
+ disabled: isLoading,
1122
+ className: cn(AUTH_FORM_CLASSES.input, inputClassName),
1123
+ autoComplete: "one-time-code",
1124
+ required: true
1125
+ }
1126
+ )
1127
+ ] }),
1128
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(AUTH_FORM_CLASSES.error, errorClassName), role: "alert", children: error }),
1129
+ /* @__PURE__ */ jsxRuntime.jsx(
1130
+ "button",
1131
+ {
1132
+ type: "submit",
1133
+ disabled: isLoading,
1134
+ className: cn(AUTH_FORM_CLASSES.button, buttonClassName),
1135
+ "aria-busy": isLoading,
1136
+ children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AUTH_FORM_CLASSES.buttonContent, children: [
1137
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: AUTH_FORM_CLASSES.buttonSpinner, "aria-hidden": "true" }),
1138
+ loadingText
1139
+ ] }) : submitButtonText
1140
+ }
1141
+ )
1142
+ ]
1143
+ }
1144
+ )
1073
1145
  ] });
1074
1146
  };
1075
1147
  VerifyEmailForm.displayName = "VerifyEmailForm";