UI Signup Flow

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