"use client";

import * as stylex from "@stylexjs/stylex";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import * as Card from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import * as Field from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Spinner } from "@/components/ui/spinner";
import { media } from "@/styles/shelf/conditions.stylex";
import { colors, radius, spacing, typography } from "@/styles/shelf/tokens.stylex";

export interface SignupValues {
  name: string;
  email: string;
  password: string;
}

export interface SignupFormProps {
  /** Called with the values once every field is valid. Return a promise to show the pending state. */
  onSubmit: (values: SignupValues) => void | Promise<void>;
}

/** A card that creates an account with a name, email, and password, after accepting the terms. */
export function SignupForm({ onSubmit }: SignupFormProps) {
  const [pending, setPending] = useState(false);

  async function submit(values: SignupValues) {
    setPending(true);
    try {
      await onSubmit(values);
    } finally {
      setPending(false);
    }
  }

  return (
    <Card.Root style={styles.card}>
      <Card.Header>
        <Card.Title>Create an account</Card.Title>
        <Card.Description>Start with a free workspace. No card required.</Card.Description>
      </Card.Header>
      <Card.Content>
        <Form
          onFormSubmit={(values) => {
            void submit({
              name: String(values["name"]),
              email: String(values["email"]),
              password: String(values["password"]),
            });
          }}
        >
          <Field.Root name="name">
            <Field.Label>Name</Field.Label>
            <Input autoComplete="name" required />
            <Field.Error match="valueMissing">Enter your name.</Field.Error>
          </Field.Root>
          <Field.Root name="email">
            <Field.Label>Email</Field.Label>
            <Input type="email" autoComplete="email" placeholder="you@example.com" required />
            <Field.Error match="valueMissing">Enter your email.</Field.Error>
            <Field.Error match="typeMismatch">Enter a valid email address.</Field.Error>
          </Field.Root>
          <Field.Root
            name="password"
            validate={(value) => {
              const password = typeof value === "string" ? value : "";
              return password && password.length < 8 ? "Use at least 8 characters." : null;
            }}
          >
            <Field.Label>Password</Field.Label>
            <Input type="password" autoComplete="new-password" required />
            <Field.Description>At least 8 characters.</Field.Description>
            <Field.Error match="valueMissing">Choose a password.</Field.Error>
            <Field.Error match="customError" />
          </Field.Root>
          <Field.Root name="terms">
            <Field.Label style={styles.terms}>
              <Checkbox required />
              <span>
                I agree to the{" "}
                <a href="/terms" {...stylex.props(styles.link)}>
                  terms
                </a>{" "}
                and{" "}
                <a href="/privacy" {...stylex.props(styles.link)}>
                  privacy policy
                </a>
                .
              </span>
            </Field.Label>
            <Field.Error match="valueMissing">Accept the terms to continue.</Field.Error>
          </Field.Root>
          <Button type="submit" disabled={pending}>
            {pending && <Spinner aria-hidden />}
            Create account
          </Button>
        </Form>
      </Card.Content>
      <Card.Footer style={styles.footer}>
        <p {...stylex.props(styles.footerText)}>
          Already have an account?{" "}
          <a href="/login" {...stylex.props(styles.link)}>
            Log in
          </a>
        </p>
      </Card.Footer>
    </Card.Root>
  );
}

const styles = stylex.create({
  card: {
    maxWidth: "24rem",
    width: "100%",
  },
  terms: {
    gap: spacing["2"],
    alignItems: "flex-start",
    display: "flex",
    fontWeight: typography.fontWeightRegular,
  },
  link: {
    borderRadius: radius.sm,
    color: {
      default: "inherit",
      ":hover": {
        default: null,
        [media.hover]: colors.foreground,
      },
    },
    outlineColor: colors.ring,
    outlineOffset: 2,
    outlineStyle: { default: "none", ":focus-visible": "solid" },
    outlineWidth: 2,
    textDecorationLine: "underline",
    textUnderlineOffset: "0.2em",
  },
  footer: {
    justifyContent: "center",
  },
  footerText: {
    margin: 0,
    color: colors.mutedForeground,
    fontSize: typography.fontSizeSm,
    lineHeight: typography.lineHeightSm,
  },
});

3e:["$","$L41",null,{"style":["$3a:props:style:0","$3a:props:style:1"],"children":["$","div",null,{"className":"xxhlesw x1in1o3d x1dcheo9 xnunrkz xh8ff3j x521ovy x1qivamn xeq4nuv xezivpi","dangerouslySetInnerHTML":{"__html":"$44"}}]}] 45:T75a9,

"use client";

import * as stylex from "@stylexjs/stylex";
import { useId, useState } from "react";
import { Button } from "@/components/ui/button";
import * as Card from "@/components/ui/card";
import * as InputOTP from "@/components/ui/input-otp";
import { Label } from "@/components/ui/label";
import { colors, spacing, typography } from "@/styles/shelf/tokens.stylex";

const LENGTH = 6;

export interface OtpVerificationProps {
  /** Where the code was sent, shown in the description. */
  email: string;
  onVerify: (code: string) => void;
  onResend?: () => void;
}

/** A card that asks for the six-digit code sent to the user. Verify enables once it's complete. */
export function OtpVerification({ email, onVerify, onResend }: OtpVerificationProps) {
  const id = useId();
  const [code, setCode] = useState("");
  const complete = code.length === LENGTH;

  return (
    <Card.Root style={styles.card}>
      <Card.Header style={styles.center}>
        <Card.Title>Check your email</Card.Title>
        <Card.Description>
          We sent a {LENGTH}-digit code to <span {...stylex.props(styles.email)}>{email}</span>.
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <form
          onSubmit={(event) => {
            event.preventDefault();
            if (complete) onVerify(code);
          }}
          {...stylex.props(styles.form)}
        >
          <div {...stylex.props(styles.field)}>
            <Label htmlFor={id}>Verification code</Label>
            <InputOTP.Root
              id={id}
              length={LENGTH}
              value={code}
              onValueChange={setCode}
              style={styles.otp}
            >
              {Array.from({ length: LENGTH }, (_, index) => (
                <InputOTP.Slot
                  key={index}
                  aria-label={index === 0 ? undefined : `Character ${index + 1} of ${LENGTH}`}
                />
              ))}
            </InputOTP.Root>
          </div>
          <Button type="submit" disabled={!complete}>
            Verify
          </Button>
        </form>
      </Card.Content>
      <Card.Footer style={styles.footer}>
        <span {...stylex.props(styles.footerText)}>Didn’t get it?</span>
        <Button variant="link" size="sm" onClick={onResend}>
          Resend code
        </Button>
      </Card.Footer>
    </Card.Root>
  );
}

const styles = stylex.create({
  card: {
    maxWidth: "24rem",
    width: "100%",
  },
  center: {
    textAlign: "center",
  },
  email: {
    color: colors.foreground,
    fontWeight: typography.fontWeightMedium,
  },
  form: {
    gap: spacing["4"],
    display: "flex",
    flexDirection: "column",
  },
  field: {
    gap: spacing["2"],
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
  },
  otp: {
    justifyContent: "center",
  },
  footer: {
    gap: spacing["1"],
    justifyContent: "center",
  },
  footerText: {
    color: colors.mutedForeground,
    fontSize: typography.fontSizeSm,
    lineHeight: typography.lineHeightSm,
  },
});

Login Form

Split Login

Signup Form

OTP Verification