@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/auth/SignInForm/SignInForm.tsx

@@ -0,0 +1,226 @@
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  Link,
+  PasswordInput,
+  cn,
+} from '@gntik-ai/ui';
+import { Lock, Mail } from '@gntik-ai/icons';
+import { useImperativeHandle, useRef, useState, type MouseEvent, type ReactNode, type Ref } from 'react';
+import { SsoButtons } from '../SsoButtons/SsoButtons';
+import {
+  AuthDivider,
+  AuthHeader,
+  authIdentifierError,
+  authFormClass,
+  useAsyncSubmit,
+  type AuthIdentifierConfig,
+  type AuthValidationMessages,
+  type AuthFormAccessibilityProps,
+  type AuthHeaderProps,
+} from '../shared';
+
+export interface SignInValues {
+  email: string;
+  /** Trimmed identifier in text mode. `email` remains available for existing consumers. */
+  identifier?: string;
+  password: string;
+  remember: boolean;
+}
+
+export interface SignInFormRef {
+  focus(field: 'identifier' | 'password'): void;
+}
+
+export interface SignInFormProps extends AuthFormAccessibilityProps {
+  /** React 19 ref for focus after a server response. */
+  ref?: Ref<SignInFormRef>;
+  identifier?: AuthIdentifierConfig;
+  /** The kit validates before submit. Supply copy here; do not add a second inline validator. */
+  messages?: AuthValidationMessages;
+  passwordHelp?: ReactNode;
+  passwordHelpId?: string;
+  /** Signs in. A returned promise shows the loading state; a rejection's message shows in the alert. */
+  onSubmit?: (values: SignInValues) => void | Promise<void>;
+  /** Error from the server (e.g. "Incorrect email or password"). */
+  error?: string | null;
+  /** Forces the loading state (when the parent tracks the request). */
+  loading?: boolean;
+  defaultEmail?: string;
+  forgotPasswordHref?: string;
+  onForgotPassword?: () => void;
+  signUpHref?: string;
+  onSignUp?: () => void;
+  /** Replaces the sign-up prompt; `null` hides it. Defaults to the existing account link. */
+  signUpPrompt?: ReactNode;
+  /** SSO area under the divider; defaults to SsoButtons, `null` hides it. */
+  sso?: ReactNode;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Omit the internal heading with null; the form keeps its accessible name. */
+  headingLevel?: AuthHeaderProps['headingLevel'];
+  className?: string;
+}
+
+const linkHandler = (fn?: () => void) =>
+  fn
+    ? (e: MouseEvent) => {
+        e.preventDefault();
+        fn();
+      }
+    : undefined;
+
+/** Email + password sign-in with remember me, forgot-password link, SSO slot, error alert and loading. */
+export function SignInForm({
+  identifier,
+  messages,
+  passwordHelp,
+  passwordHelpId,
+  ref,
+  fieldInvalid,
+  feedbackId,
+  'aria-describedby': describedBy,
+  'aria-label': ariaLabel = 'Sign in',
+  'aria-labelledby': labelledBy,
+  onSubmit,
+  error: errorProp,
+  loading: loadingProp,
+  defaultEmail = '',
+  forgotPasswordHref = '#',
+  onForgotPassword,
+  signUpHref = '#',
+  onSignUp,
+  signUpPrompt,
+  sso = <SsoButtons />,
+  eyebrow = 'Secure access',
+  title = 'Sign in to your workspace',
+  description = 'Use your work email to continue.',
+  headingLevel,
+  className,
+}: SignInFormProps) {
+  const [email, setEmail] = useState(defaultEmail);
+  const [password, setPassword] = useState('');
+  const [remember, setRemember] = useState(true);
+  const [submitted, setSubmitted] = useState(false);
+  const { loading, error, run } = useAsyncSubmit('Sign-in failed. Try again.');
+  const busy = loadingProp ?? loading;
+  const alert = errorProp ?? error;
+  const identifierInput = useRef<HTMLInputElement>(null);
+  const passwordInput = useRef<HTMLInputElement>(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: (field) => (field === 'password' ? passwordInput : identifierInput).current?.focus(),
+    }),
+    [],
+  );
+  const identifierError = authIdentifierError(email, identifier, messages);
+  const emailInvalid = submitted && identifierError !== null;
+  const passwordInvalid = submitted && password === '';
+
+  return (
+    <div className={cn(authFormClass, className)}>
+      <AuthHeader eyebrow={eyebrow} title={title} description={description} headingLevel={headingLevel} />
+      <form
+        noValidate
+        aria-label={ariaLabel}
+        aria-labelledby={labelledBy}
+        aria-describedby={describedBy}
+        className="flex flex-col gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          setSubmitted(true);
+          if (identifierError !== null) {
+            identifierInput.current?.focus();
+            return;
+          }
+          if (password === '') {
+            passwordInput.current?.focus();
+            return;
+          }
+          void run(() =>
+            onSubmit?.({
+              email: email.trim(),
+              ...(identifier?.type === 'text' ? { identifier: email.trim() } : {}),
+              password,
+              remember,
+            }),
+          );
+        }}
+      >
+        {alert && <Alert id={feedbackId} tone="destructive" description={alert} />}
+        <Field invalid={emailInvalid || fieldInvalid?.identifier === true}>
+          <FieldLabel>{identifier?.label ?? 'Email'}</FieldLabel>
+          <Input
+            ref={identifierInput}
+            aria-describedby={fieldInvalid?.identifier ? feedbackId : undefined}
+            type={identifier?.type ?? 'email'}
+            leadingIcon={Mail}
+            autoComplete={identifier?.autoComplete ?? 'email'}
+            placeholder={identifier?.placeholder ?? 'name@company.com'}
+            minLength={identifier?.minLength}
+            maxLength={identifier?.maxLength}
+            value={email}
+            onValueChange={setEmail}
+            required
+          />
+          {identifier?.help != null && <FieldDescription id={identifier.helpId}>{identifier.help}</FieldDescription>}
+          <FieldError role="alert" match={emailInvalid}>
+            {identifierError}
+          </FieldError>
+        </Field>
+        <Field invalid={passwordInvalid || fieldInvalid?.password === true}>
+          <div className="flex items-center justify-between gap-3">
+            <FieldLabel>Password</FieldLabel>
+            <Link href={forgotPasswordHref} onClick={linkHandler(onForgotPassword)} className="text-[12.5px]">
+              Forgot password?
+            </Link>
+          </div>
+          <PasswordInput
+            ref={passwordInput}
+            aria-describedby={fieldInvalid?.password ? feedbackId : undefined}
+            leadingIcon={Lock}
+            value={password}
+            onValueChange={setPassword}
+            required
+          />
+          {passwordHelp != null && <FieldDescription id={passwordHelpId}>{passwordHelp}</FieldDescription>}
+          <FieldError role="alert" match={passwordInvalid}>
+            {messages?.passwordRequired ?? 'Enter your password.'}
+          </FieldError>
+        </Field>
+        <Checkbox label="Keep me signed in" checked={remember} onCheckedChange={setRemember} />
+        <Button type="submit" size="lg" loading={busy} className="mt-2 w-full">
+          Sign in
+        </Button>
+      </form>
+      {sso != null && (
+        <>
+          <AuthDivider>Or continue with</AuthDivider>
+          {sso}
+        </>
+      )}
+      {signUpPrompt !== null && (
+        <p className="mt-7 text-center text-[13px] text-muted-foreground">
+          {signUpPrompt === undefined ? (
+            <>
+              New here?{' '}
+              <Link href={signUpHref} onClick={linkHandler(onSignUp)}>
+                Create an account
+              </Link>
+            </>
+          ) : (
+            signUpPrompt
+          )}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/auth/SignInForm/block.meta.ts

@@ -0,0 +1,22 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Sign-in form',
+  family: 'auth',
+  status: 'stable',
+  description:
+    'Email (default) or text identifier and password sign-in. Supports identifier (type, autoComplete, label, help/helpId, placeholder, minLength/maxLength), messages (identifierRequired/identifierInvalid/identifierTooShort/passwordRequired), and React 19 ref.focus. The kit owns inline validation and focuses the first invalid field; consumers supply messages, not a second inline validator. Server errors use error + fieldInvalid + feedbackId; aria-describedby describes the form, while flagged inputs also retain their help and error ids. headingLevel (h1/h2/h3/null) suppresses the heading without losing the form name; aria-label/aria-labelledby override the default name. passwordHelp/passwordHelpId describe the password. Text submissions add values.identifier and retain values.email; email-mode payloads are unchanged. sso and signUpPrompt accept replacements or null. Preview: sign-in-form--username.',
+  uses: [
+    'Field',
+    'FieldLabel',
+    'FieldDescription',
+    'FieldError',
+    'Input',
+    'PasswordInput',
+    'Checkbox',
+    'Button',
+    'Alert',
+    'Link',
+    'SsoButtons',
+  ],
+};

package/src/auth/SignInForm/examples/Username.tsx

@@ -0,0 +1,26 @@
+import { SignInForm, type SignInFormProps } from '../SignInForm';
+
+/** /preview.html?kind=block&id=sign-in-form--username */
+export default function Username(props: Pick<SignInFormProps, 'headingLevel'>) {
+  return (
+    <SignInForm
+      {...props}
+      identifier={{
+        type: 'text',
+        autoComplete: 'username',
+        label: 'Username',
+        help: 'Use your account name.',
+        placeholder: 'Account name',
+        minLength: 3,
+        maxLength: 120,
+      }}
+      messages={{
+        identifierRequired: 'Enter your username.',
+        identifierInvalid: 'Use at least three characters.',
+        passwordRequired: 'Enter your password.',
+      }}
+      description="Use your account name to continue."
+      sso={null}
+    />
+  );
+}

package/src/auth/SignUpForm/SignUpForm.configured.test.tsx

@@ -0,0 +1,316 @@
+import { render, screen, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SignUpForm } from './SignUpForm';
+
+const fields = [
+  {
+    id: 'username',
+    label: 'Username',
+    placeholder: 'Account name',
+    help: 'Choose an account name.',
+    required: true,
+    type: 'text' as const,
+    autoComplete: 'username',
+  },
+  {
+    id: 'displayName',
+    label: 'Display name',
+    placeholder: 'Your name',
+    help: 'Name shown to others.',
+    required: true,
+    type: 'text' as const,
+    autoComplete: 'name',
+  },
+  {
+    id: 'email',
+    label: 'Email',
+    placeholder: 'you@example.com',
+    help: 'For account notifications.',
+    required: true,
+    type: 'email' as const,
+    autoComplete: 'email',
+  },
+  {
+    id: 'tenant',
+    label: 'Tenant identifier',
+    placeholder: 'Tenant',
+    help: 'Your organization.',
+    required: true,
+    type: 'text' as const,
+    autoComplete: 'off',
+  },
+  {
+    id: 'workspace',
+    label: 'Workspace identifier',
+    placeholder: 'Workspace',
+    help: 'Optional workspace.',
+    required: false,
+    type: 'text' as const,
+    autoComplete: 'off',
+  },
+];
+
+describe('SignUpForm configured fields', () => {
+  it('blocks whitespace-only required fields independently of password and consent, and refocuses the summary on retry', async () => {
+    const onSubmit = vi.fn();
+    render(
+      <SignUpForm
+        fields={[
+          {
+            id: 'username',
+            label: 'Username',
+            required: true,
+            help: 'Choose an account name.',
+            messages: { required: 'An account name is required.' },
+          },
+          { id: 'workspace', label: 'Workspace identifier' },
+        ]}
+        terms={false}
+        sso={null}
+        onSubmit={onSubmit}
+      />,
+    );
+    await userEvent.type(screen.getByLabelText('Username'), '   ');
+    await userEvent.type(screen.getByLabelText('Password'), 'correct-horse-42');
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    const summary = screen.getByRole('region', { name: 'There is 1 problem with this form' });
+    expect(summary).toHaveFocus();
+    await userEvent.tab();
+    expect(within(summary).getByRole('link', { name: 'Username: An account name is required.' })).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+    expect(screen.getByLabelText('Username')).toHaveFocus();
+    expect(screen.getByLabelText('Username')).toHaveAccessibleDescription(
+      'Choose an account name. An account name is required.',
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(summary).toHaveFocus();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('renders ordered fields, links all errors to inputs, and submits trimmed values with an empty optional field', async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(<SignUpForm fields={fields} onSubmit={onSubmit} sso={null} />);
+    expect(
+      Array.from(container.querySelectorAll('input[type="text"], input[type="email"], input[type="password"]')).map(
+        (input) => input.getAttribute('placeholder'),
+      ),
+    ).toEqual(['Account name', 'Your name', 'you@example.com', 'Tenant', 'Workspace', null]);
+    for (const field of fields) {
+      const input = screen.getByLabelText(field.label);
+      expect(input).toHaveAttribute('type', field.type);
+      expect(input).toHaveAttribute('autocomplete', field.autoComplete);
+      expect(input).toHaveAccessibleDescription(field.help);
+      expect(input).toHaveProperty('required', field.required);
+    }
+    await expectNoAxeViolations(container);
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    const summary = screen.getByRole('region');
+    expect(summary).toHaveFocus();
+    expect(within(summary).getAllByRole('link')).toHaveLength(6);
+    await userEvent.click(within(summary).getByRole('link', { name: 'Username: Enter Username.' }));
+    expect(screen.getByLabelText('Username')).toHaveFocus();
+    expect(screen.getByLabelText('Username')).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByLabelText('Username')).toHaveAccessibleDescription('Choose an account name. Enter Username.');
+    await expectNoAxeViolations(container);
+    await userEvent.type(screen.getByLabelText('Username'), ' avery ');
+    await userEvent.type(screen.getByLabelText('Display name'), ' Avery Collins ');
+    await userEvent.type(screen.getByLabelText('Email'), ' avery@example.com ');
+    await userEvent.type(screen.getByLabelText('Tenant identifier'), ' team ');
+    await userEvent.type(screen.getByLabelText('Password'), 'correct-horse-42');
+    await userEvent.click(screen.getByRole('checkbox'));
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: '',
+      email: 'avery@example.com',
+      password: 'correct-horse-42',
+      fields: {
+        username: 'avery',
+        displayName: 'Avery Collins',
+        email: 'avery@example.com',
+        tenant: 'team',
+        workspace: '',
+      },
+    });
+  });
+});
+
+it('omits consent only when terms is explicitly false, in default and configured modes', async () => {
+  const onSubmit = vi.fn();
+  const { rerender } = render(<SignUpForm terms={false} sso={null} onSubmit={onSubmit} />);
+  expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText('Full name'), ' Avery ');
+  await userEvent.type(screen.getByLabelText('Work email'), 'avery@example.com');
+  await userEvent.type(screen.getByLabelText('Password'), 'correct-horse-42');
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  expect(onSubmit).toHaveBeenCalledWith({ name: 'Avery', email: 'avery@example.com', password: 'correct-horse-42' });
+  onSubmit.mockClear();
+  rerender(<SignUpForm fields={[]} terms={false} sso={null} onSubmit={onSubmit} />);
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  expect(onSubmit).toHaveBeenCalledWith({ name: '', email: '', password: 'correct-horse-42', fields: {} });
+});
+
+it.each([undefined, 8, 12])(
+  'uses the password minimum %s for inline validation, optional help and the meter',
+  async (minimum) => {
+    const onSubmit = vi.fn();
+    const min = minimum ?? 8;
+    const { container } = render(
+      <SignUpForm
+        fields={[]}
+        terms={false}
+        minPasswordLength={minimum}
+        passwordHelp={`Use at least ${min} characters to secure your account.`}
+        onSubmit={onSubmit}
+        sso={null}
+      />,
+    );
+    const password = screen.getByLabelText('Password');
+    expect(password).toHaveAccessibleDescription(
+      expect.stringContaining(`Use at least ${min} characters to secure your account.`),
+    );
+    await userEvent.type(password, min === 8 ? 'Abc1!xy' : 'Abc1!xyzabc');
+    expect(password).toHaveValue(min === 8 ? 'Abc1!xy' : 'Abc1!xyzabc');
+    expect(screen.getByText('Too weak')).toBeInTheDocument();
+    expect(screen.getByText(`Use at least ${min} characters.`)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(password).toHaveAttribute('aria-invalid', 'true');
+    await expectNoAxeViolations(container);
+    await userEvent.type(password, 'z');
+    expect(password).toHaveValue(min === 8 ? 'Abc1!xyz' : 'Abc1!xyzabcz');
+    await waitFor(() => expect(screen.queryByText(`Use at least ${min} characters.`)).not.toBeInTheDocument());
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  },
+);
+
+it('replaces the form with an unavailable callout and consumer action', async () => {
+  const onAction = vi.fn();
+  const { container } = render(
+    <SignUpForm
+      unavailable={{
+        title: 'Registration unavailable',
+        message: 'Contact your administrator.',
+        action: <button onClick={onAction}>Request access</button>,
+      }}
+    />,
+  );
+  expect(screen.getByText('Registration unavailable')).toBeInTheDocument();
+  expect(screen.getByText('Contact your administrator.')).toBeInTheDocument();
+  expect(screen.queryByRole('form')).not.toBeInTheDocument();
+  expect(container.querySelector('input')).toBeNull();
+  expect(screen.queryByRole('button', { name: 'Create account' })).not.toBeInTheDocument();
+  await userEvent.click(screen.getByRole('button', { name: 'Request access' }));
+  expect(onAction).toHaveBeenCalledTimes(1);
+  await expectNoAxeViolations(container);
+});
+
+it('shows skeletons and cannot submit while policy is loading, then restores the form', async () => {
+  const onSubmit = vi.fn();
+  const { container, rerender } = render(<SignUpForm policyLoading onSubmit={onSubmit} />);
+  expect(screen.getByRole('status')).toHaveTextContent('Loading sign-up policy');
+  expect(container.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThan(0);
+  expect(screen.queryByRole('form')).not.toBeInTheDocument();
+  expect(container.querySelector('input')).toBeNull();
+  expect(screen.queryByRole('button', { name: 'Create account' })).not.toBeInTheDocument();
+  expect(onSubmit).not.toHaveBeenCalled();
+  await expectNoAxeViolations(container);
+  rerender(<SignUpForm policyLoading={false} onSubmit={onSubmit} />);
+  expect(screen.getByRole('form')).toBeInTheDocument();
+});
+
+it('validates non-empty optional email and uses consumer-supplied messages', async () => {
+  const onSubmit = vi.fn();
+  render(
+    <SignUpForm
+      fields={[
+        {
+          id: 'contact',
+          label: 'Contact',
+          type: 'email',
+          help: 'Optional contact address.',
+          messages: { invalid: 'Check the contact address.' },
+        },
+      ]}
+      terms={false}
+      messages={{ passwordTooShort: (minimum) => `Password needs ${minimum} characters.` }}
+      onSubmit={onSubmit}
+      sso={null}
+    />,
+  );
+  await userEvent.type(screen.getByLabelText('Contact'), 'invalid');
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  const summary = screen.getByRole('region');
+  expect(within(summary).getByRole('link', { name: 'Contact: Check the contact address.' })).toBeInTheDocument();
+  await userEvent.click(within(summary).getByRole('link', { name: 'Password: Password needs 8 characters.' }));
+  expect(screen.getByLabelText('Password')).toHaveFocus();
+  expect(onSubmit).not.toHaveBeenCalled();
+});
+
+it('keeps password help, strength and error descriptions linked and focuses consent from the summary', async () => {
+  const { container } = render(
+    <SignUpForm fields={[]} passwordHelp="Choose at least 8 characters to secure your account." sso={null} />,
+  );
+  const password = screen.getByLabelText('Password');
+  await userEvent.type(password, 'Abc1!xy');
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  expect(password).toHaveAccessibleDescription(
+    'Strength: Too weak Choose at least 8 characters to secure your account. Use at least 8 characters.',
+  );
+  const summary = screen.getByRole('region');
+  await userEvent.click(within(summary).getByRole('link', { name: 'Password: Use at least 8 characters.' }));
+  expect(password).toHaveFocus();
+  await userEvent.click(screen.getByRole('button', { name: 'Show password' }));
+  expect(password).toHaveAttribute('type', 'text');
+  expect(password).toHaveAttribute('aria-invalid', 'true');
+  expect(password).toHaveAccessibleDescription(
+    'Strength: Too weak Choose at least 8 characters to secure your account. Use at least 8 characters.',
+  );
+  const termsLink = within(summary).getByRole('link', { name: 'Terms: Accept the terms to continue.' });
+  const termsTarget = termsLink.getAttribute('href')!.slice(1);
+  expect(document.getElementById(termsTarget)).toBe(screen.getByRole('checkbox'));
+  expect(container.querySelectorAll(`[id="${termsTarget}"]`)).toHaveLength(1);
+  termsLink.focus();
+  await userEvent.keyboard('{Enter}');
+  expect(screen.getByRole('checkbox')).toHaveFocus();
+  expect(screen.getByRole('checkbox')).toHaveAccessibleDescription('Accept the terms to continue.');
+  await userEvent.keyboard(' ');
+  expect(screen.getByRole('checkbox')).toBeChecked();
+  expect(within(summary).queryByRole('link', { name: 'Terms: Accept the terms to continue.' })).not.toBeInTheDocument();
+});
+
+it('treats field ids as consumer keys, including names inherited by ordinary objects', async () => {
+  const onSubmit = vi.fn();
+  render(
+    <SignUpForm
+      fields={[{ id: 'constructor', label: 'Account identifier', required: true }]}
+      terms={false}
+      sso={null}
+      onSubmit={onSubmit}
+    />,
+  );
+  expect(screen.getByLabelText('Account identifier')).toHaveValue('');
+  await userEvent.type(screen.getByLabelText('Account identifier'), ' account ');
+  await userEvent.type(screen.getByLabelText('Password'), 'correct-horse-42');
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  expect(onSubmit).toHaveBeenCalledWith({
+    name: '',
+    email: '',
+    password: 'correct-horse-42',
+    fields: { constructor: 'account' },
+  });
+});
+
+it('preserves default submit-time validation and omits a validation summary in default mode', async () => {
+  render(<SignUpForm sso={null} />);
+  await userEvent.type(screen.getByLabelText('Password'), 'Abc1!xy');
+  expect(screen.getByText('Too weak')).toBeInTheDocument();
+  expect(screen.queryByText('Use at least 8 characters.')).not.toBeInTheDocument();
+  expect(screen.getByLabelText('Password')).not.toHaveAttribute('aria-invalid', 'true');
+  await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+  expect(screen.getByText('Use at least 8 characters.')).toBeInTheDocument();
+  expect(screen.queryByRole('region')).not.toBeInTheDocument();
+});

package/src/auth/SignUpForm/SignUpForm.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SignUpForm } from './SignUpForm';
+
+describe('SignUpForm', () => {
+  it('renders the default form', async () => {
+    const { container } = render(<SignUpForm />);
+    expect(screen.getByRole('form', { name: 'Create account' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('requires the terms and submits the values', async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(<SignUpForm onSubmit={onSubmit} sso={null} />);
+    await userEvent.type(screen.getByLabelText('Full name'), 'Avery Collins');
+    await userEvent.type(screen.getByLabelText('Work email'), 'avery@example.com');
+    await userEvent.type(screen.getByLabelText('Password'), 'correct-horse-42');
+    expect(screen.getByText(/Strength:/)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).not.toHaveBeenCalled();
+    const terms = screen.getByRole('checkbox', { name: /I agree/ });
+    expect(terms).toHaveAccessibleDescription('Accept the terms to continue.');
+    await expectNoAxeViolations(container);
+    await userEvent.click(terms);
+    await userEvent.click(screen.getByRole('button', { name: 'Create account' }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: 'Avery Collins',
+      email: 'avery@example.com',
+      password: 'correct-horse-42',
+    });
+  });
+});