Signup Flow

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4import { Cursor } from "@/components/remocn/cursor";
5import { useCursorPath } from "@/components/remocn/use-cursor-path";
6import { Input } from "@/components/remocn/input";
7import { useInputTransition } from "@/components/remocn/use-input-transition";
8import { Button } from "@/components/remocn/button";
9import { useButtonTransition } from "@/components/remocn/use-button-transition";
10import { Toast } from "@/components/remocn/toast";
11import { useToastTransition } from "@/components/remocn/use-toast-transition";
12import { BlurIn } from "@/components/remocn/blur-in";
13import { useBlurInTransition } from "@/components/remocn/use-blur-in-transition";
14import {
15  Field,
16  FieldControl,
17  FieldDescription,
18  FieldGroup,
19  FieldLabel,
20} from "@/components/remocn/field";
21 
22export interface SignupFlowProps {
23  title?: string;
24  description?: string;
25  fullName?: string;
26  email?: string;
27  password?: string;
28  createLabel?: string;
29  googleLabel?: string;
30  signinText?: string;
31  toastTitle?: string;
32  mode?: "light" | "dark";
33  theme?: Partial<RemocnTheme>;
34}
35 
36const STAGE_W = 1280;
37const CARD_W = 376;
38const CARD_TOP = 48;
39const CARD_LEFT = (STAGE_W - CARD_W) / 2;
40const CENTER_X = STAGE_W / 2;
41 
42const NAME_Y = 216;
43const EMAIL_Y = 296;
44const PASS_Y = 398;
45const CONFIRM_Y = 500;
46const CREATE_Y = 564;
47 
48export function SignupFlow({
49  title = "Create an account",
50  description = "Enter your information below to create your account",
51  fullName = "John Doe",
52  email = "m@example.com",
53  password = "••••••••",
54  createLabel = "Create account",
55  toastTitle = "Account created",
56  mode = "light",
57  theme,
58}: SignupFlowProps) {
59  const resolved = useRemocnTheme(theme, mode);
60  const opts = { mode, theme };
61 
62  const cardEnter = useBlurInTransition(
63    [{ at: 0, state: "revealed", duration: 18 }],
64    { distance: 0 },
65  );
66  const enterHeader = useBlurInTransition([
67    { at: 18, state: "revealed", duration: 16 },
68  ]);
69  const enterName = useBlurInTransition([
70    { at: 24, state: "revealed", duration: 16 },
71  ]);
72  const enterEmail = useBlurInTransition([
73    { at: 30, state: "revealed", duration: 16 },
74  ]);
75  const enterPass = useBlurInTransition([
76    { at: 36, state: "revealed", duration: 16 },
77  ]);
78  const enterConfirm = useBlurInTransition([
79    { at: 42, state: "revealed", duration: 16 },
80  ]);
81  const enterButton = useBlurInTransition([
82// … truncated