4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1d35,"use client"; import { useId, useMemo, type ReactElement } from "react"; import { FormProvider } from "react-hook-form"; import { cn } from "@/lib/utils"; import { useSignupForm } from "./hooks/use-signup-form"; import { mergeSignupLabels } from "./parts/labels"; import { EmailField } from "./parts/email-field"; import { PasswordField } from "./parts/password-field"; import { ConsentCheckbox } from "./parts/consent-checkbox"; import { HoneypotField } from "./parts/honeypot-field"; import { OptionalFieldsFieldset } from "./parts/optional-fields-fieldset"; import { StepIndicator } from "./parts/step-indicator"; import { StepShell } from "./parts/step-shell"; import { ServerError } from "./parts/server-error"; import { SuccessScreen } from "./parts/success-screen"; import { SubmitRow } from "./parts/submit-row"; import { SignInLink } from "./parts/sign-in-link"; import { OauthRow } from "./parts/oauth-row"; import { StrengthMeter } from "./parts/strength-meter"; import type { SignupFormProps } from "./types"; import "./signup-form.css"; /** * Schema-driven sign-up surface — hand-rolled on RHF v7 + zod v4. Two * flow variants (single-step / two-step) × two password strategies * (password / magic-link) × two densities (compact / default) × optional * OAuth row + declarative optional-fields bag + off-screen honeypot. * * See `docs/procomps/signup-form-procomp/` for the GATE 1 + * GATE 2 contract and `usage.tsx` (C6) for the consumer guide. The * load-bearing public-API surfaces are: * * 1. The **discriminated submit payload**: `onSubmit` receives one of * three envelope shapes (`stepCompleted: "single" | "step1" | "step2"`). * Consumers MUST switch on the discriminant. Narrowing optional * profile fields as `| undefined` was rejected because it silently * lets naïve destructuring send `undefined` values to backend APIs. * * 2. The **status mutual-exclusion contract**: if `status` is provided, * internal state is read-only — the component reads `status` as * source of truth and fires `onStatusChange` for observers only. * Mixing the two (passing `status` AND expecting internal * transitions) is a contract violation. * * 3. The **honeypot two-key duality**: HTML `name="website"` (spam-bait) * + RHF register key `_honeypot` (clean values shape). Off-screen * rendering is load-bearing — `display: none` is bot-detectable. */ export function SignupForm(props: SignupFormProps): ReactElement { const { heading, subheading, headingAs: HeadingTag = "h2", flow = "single-step", passwordStrategy = "password", density = "default", skippableStepTwo = true, fields = {}, passwordPolicy, strengthCalculator, consent, oauthProviders = [], oauthIcons, onOAuthClick, submitButton, signInHref, errorMessage, successMessage, status, onStatusChange, onSubmit, labels: labelsOverride, className, style, } = props; const headingId = useId(); const labels = useMemo( () => mergeSignupLabels(labelsOverride), [labelsOverride], ); const { form, status: effectiveStatus, step, goBack, submit, skip, } = useSignupForm({ flow, passwordStrategy, skippableStepTwo, fields, passwordPolicy, consent, labels, status, onStatusChange, onSubmit, }); const showStrengthMeter = passwordStrategy === "password" && (passwordPolicy?.showStrengthMeter ?? true); const showPasswordField = passwordStrategy === "password"; const showOptionalFields = flow === "single-step" || (flow === "two-step" && step === "step2"); const showStep1Fields = flow === "single-step" || (flow === "two-step" && step === "step1"); const isSubmitting = effectiveStatus === "submitting"; const isSuccess = effectiveStatus === "success"; const submitLabel = submitButton?.label ?? labels.createAccountLabel; if (isSuccess) { return (

{heading ? ( {heading} ) : null}

); } return (

{heading ? ( {heading} ) : null} {subheading ? (

{subheading}

) : null} {flow === "two-step" ? ( ) : null} {errorMessage ? : null} onOAuthClick?.({ provider })} /> {signInHref ? ( ) : null}

); } 51:T274e,import type { CSSProperties, ReactNode } from "react"; /** * Variant of the standard shadcn Button — matches `ButtonProps["variant"]` * without taking a runtime dep on the primitive. */ export type ButtonVariant = | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"; /** Built-in OAuth providers the signup form knows about. */ export type OAuthProvider = | "google" | "github" | "apple" | "facebook" | "microsoft" | "x"; /** Optional profile fields the consumer can opt into via the `fields` prop. */ export type OptionalFieldName = | "firstName" | "lastName" | "displayName" | "phone" | "company"; /** * Lifecycle status. Internal state machine by default; mutable via the * controlled `status` / `onStatusChange` escape hatch. */ export type SignupFormStatus = | "idle" | "submitting" | "success" | "error"; /** * Pluggable password-strength calculator. 0 = empty / unrated. 1–4 = * weak / fair / strong / excellent. * * v0.1 default is the built-in `(length, character-class-count)` heuristic * in `lib/strength-calculator.ts`. Consumers with corporate password * policies or who want to drop in zxcvbn replace this slot; v0.2 may ship * an opt-in zxcvbn adapter that satisfies the same shape. */ export type StrengthCalculator = (password: string) => 0 | 1 | 2 | 3 | 4; /** * Field-config entry. `true` = show + optional. `{ required: true }` = * show + required. `false` (or omitted key) = hidden. */ export type OptionalFieldConfig = boolean | { required: boolean }; // ─── Values ────────────────────────────────────────────────────────────────── /** * Step-1 values. Email + (optional, magic-link drops it) password + consent * + honeypot. Always present at the bottom of the values stack regardless * of flow. * * **`password` is statically typed as optional** because the magic-link * strategy drops the field entirely. The Zod resolver enforces required * at runtime under `passwordStrategy: "password"`; the static type stays * permissive to keep one shape across both strategies. */ export interface SignupStep1Values { email: string; password?: string; consentAccepted: boolean; /** * Honeypot field value. **Should always be `""`.** A non-empty value * means a spam bot filled the off-screen `` — * the discriminated payload flag `isHoneypotTripped` reflects this. */ _honeypot: string; } /** Step-2 values: step-1 plus the optional profile bag. */ export interface SignupStep2Values extends SignupStep1Values { firstName?: string; lastName?: string; displayName?: string; phone?: string; company?: string; } /** * Discriminated submit-payload envelope. * * Consumers MUST switch on `stepCompleted` to know whether the optional * profile fields are populated. Narrowing optional fields as * `string | undefined` was rejected because it silently lets naïve * destructuring (`const { firstName, lastName } = payload.values`) send * `undefined` values to backend APIs. The envelope forces the discriminant. * * - `"single"` — `flow: "single-step"`. * - `"step1"` — `flow: "two-step"` + user clicked "Skip for now". * - `"step2"` — `flow: "two-step"` + user completed step 2. */ export type SignupSubmitPayload = | { stepCompleted: "single"; values: SignupStep2Values; isHoneypotTripped: boolean; } | { stepCompleted: "step1"; values: SignupStep1Values; isHoneypotTripped: boolean; } | { stepCompleted: "step2"; values: SignupStep2Values; isHoneypotTripped: boolean; }; // ─── Labels (i18n bag) ─────────────────────────────────────────────────────── export interface SignupLabels { // Field labels + placeholders emailLabel: string; emailPlaceholder: string; passwordLabel: string; passwordPlaceholder: string; firstNameLabel: string; firstNamePlaceholder: string; lastNameLabel: string; lastNamePlaceholder: string; displayNameLabel: string; displayNamePlaceholder: string; phoneLabel: string; phonePlaceholder: string; companyLabel: string; companyPlaceholder: string; // Buttons createAccountLabel: string; continueLabel: string; backLabel: string; skipForNowLabel: string; signInLabel: string; // OAuth orContinueWith: string; /** Template — `{provider}` interpolated with capitalized provider name. */ oauthLabelTemplate: string; // Step indicator /** Template — `{current}` and `{total}` interpolated. */ stepOf: string; // Error messages emailRequired: string; emailInvalid: string; passwordRequired: string; /** Template — `{min}` interpolated with the minLength policy value. */ passwordTooShort: string; passwordMissingUppercase: string; passwordMissingNumber: string; passwordMissingSymbol: string; consentRequired: string; // Strength meter strengthWeak: string; strengthFair: string; strengthStrong: string; strengthExcellent: string; /** Template — `{level}` interpolated with the bucketed strength label. */ strengthLabel: string; // Server-error fallback serverError: string; // Success successDefaultMessage: string; // sr-only accessibility hints passwordToggleShow: string; passwordToggleHide: string; honeypotLabel: string; } // ─── Component props ───────────────────────────────────────────────────────── export interface SignupFormProps { /** Heading rendered above the form. Optional — consumer may render their own. */ heading?: string; /** Subheading below the heading. */ subheading?: string; /** Semantic level for the heading. Defaults to `h2`. */ headingAs?: "h1" | "h2" | "h3"; /** Flow shape. Default `"single-step"`. */ flow?: "single-step" | "two-step"; /** Password vs magic-link strategy. Default `"password"`. */ passwordStrategy?: "password" | "magic-link"; /** Vertical-rhythm density. Default `"default"`. */ density?: "compact" | "default"; /** * Controls whether step 2 of the two-step flow renders a "Skip for now" * button. Default `true`. Ignored when `flow === "single-step"`. */ skippableStepTwo?: boolean; /** * Optional-fields bag. Each key: * - `true` → show + optional * - `false` (or omitted key) → hidden * - `{ required: true }` → show + required */ fields?: Partial>; /** * Password validators + strength-meter toggle. Ignored under * `passwordStrategy: "magic-link"`. */ passwordPolicy?: { /** Default 8. */ minLength?: number; requireUppercase?: boolean; requireNumber?: boolean; requireSymbol?: boolean; /** Default `true`. */ showStrengthMeter?: boolean; }; /** * BYO strength heuristic — v0.1 contract for the v0.2 zxcvbn opt-in. * Default is the built-in `(length, character-class-count)` scorer in * `lib/strength-calculator.ts`. */ strengthCalculator?: StrengthCalculator; /** * ToS consent gate. `required: true` blocks submit until checked. * `label` accepts a `ReactNode` for inline `` composition; * the `string + href?` convenience overload renders a plain anchor. */ consent: { required: boolean; label: ReactNode | string; /** Only used when `label` is a string. */ href?: string; }; /** * Render OAuth buttons above the email field. Empty array (or omitted) * renders no OAuth row and no divider. */ oauthProviders?: ReadonlyArray; /** Per-provider icon override slot. Default: text-only buttons. */ oauthIcons?: Partial>; /** * Fires on OAuth button click. The component does NOT handle the * redirect / SDK call — consumer drives the actual OAuth handshake. */ onOAuthClick?: (args: { provider: OAuthProvider }) => void; /** * Submit button label + variant override. Defaults: * `{ label: "Create account", variant: "default" }`. On step 1 of the * two-step flow, label auto-overrides to `"Continue"`. */ submitButton?: { label?: string; variant?: ButtonVariant }; /** * Renders "Already have an account? Sign in" link below the form when * provided. Omit to hide the link. */ signInHref?: string; /** * Controlled server-error message. When set, renders a `role="alert"` * banner above the form. Takes display precedence over the internal * `error` status fallback. */ errorMessage?: string; /** * Success-screen content. Renders on `onSubmit` resolving without * throwing (default), or on `status === "success"` (controlled). */ successMessage?: ReactNode | string; /** * Controlled status escape hatch. **Mutual exclusion:** if provided, * internal state becomes read-only — the component reads `status` as * source of truth and fires `onStatusChange` for observers only. If * omitted, internal state owns transitions and `onStatusChange` fires * on each one. Mixing the two (passing `status` AND expecting internal * transitions) is a contract violation. */ status?: SignupFormStatus; /** Fires on every status transition (internal or controlled-mode echo). */ onStatusChange?: (status: SignupFormStatus) => void; /** Submit handler — receives the discriminated envelope. */ onSubmit: (payload: SignupSubmitPayload) => void | Promise; /** Per-string overrides. Falls back to `defaultSignupLabels`. */ labels?: Partial; /** Container className — applied to the outermost wrapper. */ className?: string; /** Container style — applied to the outermost wrapper. */ style?: CSSProperties; } 52:T5a4,"use client"; import { useId } from "react"; import { useFormContext } from "react-hook-form"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; import type { SignupLabels, SignupStep2Values, } from "../types"; export interface EmailFieldProps { labels: Pick; } /** * Email input + label + inline error. ARIA: `aria-describedby` points * to the inline-error region; the region carries `role="alert"` only * when populated. */ export function EmailField({ labels }: EmailFieldProps) { const id = useId(); const errorId = `${id}-error`; const { register, formState: { errors }, } = useFormContext(); const error = errors.email?.message; return (

{labels.emailLabel}

{error ?? ""}

); } 53:Ta2a,"use client"; import { useId, useState, type ReactNode } from "react"; import { useFormContext } from "react-hook-form"; import { Eye, EyeOff } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; import type { SignupLabels, SignupStep2Values, } from "../types"; export interface PasswordFieldProps { labels: Pick< SignupLabels, | "passwordLabel" | "passwordPlaceholder" | "passwordToggleShow" | "passwordToggleHide" >; /** Optional strength meter slot — passed in from the root component. */ strengthMeter?: ReactNode; } /** * Password input + label + inline error + show/hide eye toggle. * * The toggle is local state (uncontrolled — irrelevant to the form * values). `aria-pressed` + `aria-label` are surfaced for SR users so * the button state is announced. The strength meter is passed in as a * slot from the root component so the password value sub doesn't have * to thread the calculator + labels here. */ export function PasswordField({ labels, strengthMeter, }: PasswordFieldProps) { const id = useId(); const errorId = `${id}-error`; const [shown, setShown] = useState(false); const { register, formState: { errors }, } = useFormContext(); const error = errors.password?.message; return (

{labels.passwordLabel}

{strengthMeter}

{error ?? ""}

); } 54:Tbe9,"use client"; import { useId, type ReactNode } from "react"; import { Controller, useFormContext } from "react-hook-form"; import { Checkbox } from "@/components/ui/checkbox"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; import type { SignupLabels, SignupStep2Values, } from "../types"; export interface ConsentCheckboxProps { consent: { required: boolean; label: ReactNode | string; href?: string; }; labels: Pick; } /** * Consent checkbox + label. Wired via `` because the * underlying Radix Checkbox is controlled via `checked` / `onCheckedChange` * rather than the native `` interface. * * **F-cross-13 defensive callback shape:** `onCheckedChange` receives * `boolean | "indeterminate"` (Radix) or `boolean` (Base UI). The * coercion `typeof v === "boolean" ? v : true` widens both backends. * * Label accepts `ReactNode` for inline `` composition; the * `string + href?` convenience overload renders a plain ``. */ export function ConsentCheckbox({ consent, labels, }: ConsentCheckboxProps) { const id = useId(); const errorId = `${id}-error`; const { control, formState: { errors }, } = useFormContext(); const error = errors.consentAccepted?.message; const labelNode: ReactNode = typeof consent.label === "string" ? ( consent.href ? ( {consent.label} ) : ( consent.label ) ) : ( consent.label ); return (

( field.onChange(typeof v === "boolean" ? v : true) } onBlur={field.onBlur} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : undefined} aria-required={consent.required ? true : undefined} /> )} /> {labelNode}

{/* Always render the message text for layout stability; opacity collapses to transparent when no error so users don't see a premature "you must accept" warning at idle. */} {error ?? labels.consentRequired}

); } 55:T6e4,"use client"; import { useFormContext } from "react-hook-form"; import { HONEYPOT_HTML_NAME, HONEYPOT_RHF_KEY, HONEYPOT_STYLE, } from "../lib/honeypot"; import type { SignupLabels, SignupStep2Values } from "../types"; export interface HoneypotFieldProps { labels: Pick; } /** * Off-screen anti-spam honeypot. **Two non-obvious facts** worth keeping * in mind during refactors: * * 1. The `style` prop uses absolute off-screen position rather than * `display: none`. `display: none` is bot-detectable; serious form-fill * bots skip non-visible fields. The off-screen pattern keeps the field * *rendered* (and fillable by naïve bots) while invisible to real users. * * 2. **Attribute order matters.** `{...register(HONEYPOT_RHF_KEY)}` * returns `{ name: "_honeypot", onChange, onBlur, ref }`. The * `name={HONEYPOT_HTML_NAME}` override MUST come AFTER the spread, * otherwise React drops the override and the rendered HTML reads * `name="_honeypot"` — defeating the spam-bait. The two-key duality * (HTML name "website" vs RHF key "_honeypot") is intentional: * consumers see `payload.values._honeypot` cleanly without a confusing * `payload.values.website` shape. * * `aria-hidden="true"` + `tabIndex={-1}` keep the input out of the AT * tree and the keyboard tab order. */ export function HoneypotField({ labels }: HoneypotFieldProps) { const { register } = useFormContext(); return ( ); } 56:Te0b,"use client"; import { useId } from "react"; import { useFormContext } from "react-hook-form"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; import type { OptionalFieldConfig, OptionalFieldName, SignupLabels, SignupStep2Values, } from "../types"; const OPTIONAL_FIELDS: ReadonlyArray = [ "firstName", "lastName", "displayName", "phone", "company", ]; const AUTOCOMPLETE_MAP: Record = { firstName: "given-name", lastName: "family-name", displayName: "nickname", phone: "tel", company: "organization", }; const INPUT_TYPE_MAP: Record = { firstName: "text", lastName: "text", displayName: "text", phone: "tel", company: "text", }; export interface OptionalFieldsFieldsetProps { fields: Partial>; labels: Pick< SignupLabels, | "firstNameLabel" | "firstNamePlaceholder" | "lastNameLabel" | "lastNamePlaceholder" | "displayNameLabel" | "displayNamePlaceholder" | "phoneLabel" | "phonePlaceholder" | "companyLabel" | "companyPlaceholder" >; /** Two-column grid at `sm:` breakpoint under `default`; single-column under `compact`. */ density: "compact" | "default"; } /** * `

` containing each opted-in optional field. Iterates a fixed * `OPTIONAL_FIELDS` list so the rendering order is deterministic. */ export function OptionalFieldsFieldset({ fields, labels, density, }: OptionalFieldsFieldsetProps) { const visible = OPTIONAL_FIELDS.filter((name) => { const config = fields[name]; return config !== undefined && config !== false; }); if (visible.length === 0) return null; return (

{visible.map((name) => ( ))}

); } interface OptionalFieldProps { name: OptionalFieldName; required: boolean; label: string; placeholder: string; } function OptionalField({ name, required, label, placeholder, }: OptionalFieldProps) { const id = useId(); const errorId = `${id}-error`; const { register, formState: { errors }, } = useFormContext(); const error = errors[name]?.message; return (

{label} {required ? : null}

{error ?? ""}

); } 57:T4ab,"use client"; import { cn } from "@/lib/utils"; import type { SignupLabels } from "../types"; export interface StepIndicatorProps { current: 1 | 2; total: number; labels: Pick; } /** * `1 / 2` → `2 / 2` progress indicator for the two-step flow. * `role="status" aria-live="polite"` announces the step number on * transition. Hidden entirely under `flow === "single-step"` — root * component does not render this for single-step. */ export function StepIndicator({ current, total, labels }: StepIndicatorProps) { const text = labels.stepOf .replace("{current}", String(current)) .replace("{total}", String(total)); return (

{text}

); } 58:T426,"use client"; import { Check } from "lucide-react"; import type { ReactNode } from "react"; export interface SuccessScreenProps { message: ReactNode | string; } /** * `role="status" aria-live="polite"` region that replaces the form * after `onSubmit` resolves successfully. The caller swaps this in * place of the `

`. * * No "Back to sign-up" link by default — consumers either re-render * parent with a fresh `status: "idle"` or pop the user to a different * route (e.g., `/sign-in` after email verification). */ export function SuccessScreen({ message }: SuccessScreenProps) { return (

{message}

); } 59:Ta76,"use client"; import { Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { ButtonVariant, SignupFormStatus, SignupLabels, } from "../types"; export interface SubmitRowProps { status: SignupFormStatus; flow: "single-step" | "two-step"; step: "step1" | "step2"; skippableStepTwo: boolean; submitLabel: string; submitVariant?: ButtonVariant; labels: Pick; onBack: () => void; onSkip: () => void; } /** * Submit / Back / Skip-for-now button row. * * - Submit: always rendered, `type="submit"`, disabled during submitting. * On step-1 of two-step flow, label is `continueLabel`; otherwise it's * the consumer-provided `submitLabel` (or default "Create account"). * - Back: only on step-2 of two-step flow. `type="button"` so it doesn't * trip the form's submit handler. * - Skip-for-now: only on step-2 of two-step flow when `skippableStepTwo` * is true. `type="button"`. */ export function SubmitRow({ status, flow, step, skippableStepTwo, submitLabel, submitVariant, labels, onBack, onSkip, }: SubmitRowProps) { const isSubmitting = status === "submitting"; const isStep1OfTwoStep = flow === "two-step" && step === "step1"; const isStep2OfTwoStep = flow === "two-step" && step === "step2"; const effectiveLabel = isStep1OfTwoStep ? labels.continueLabel : submitLabel; const hasSecondaryActions = isStep2OfTwoStep; const submitButton = ( ); if (!hasSecondaryActions) { return submitButton; } return (

{skippableStepTwo ? ( ) : null}

{submitButton}

); } 5a:T826,"use client"; import type { ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { getOAuthProviderLabel } from "../lib/oauth-providers"; import type { OAuthProvider, SignupLabels } from "../types"; export interface OauthRowProps { providers: ReadonlyArray; icons?: Partial>; labels: Pick; disabled?: boolean; onClick: (provider: OAuthProvider) => void; } /** * OAuth button row + "or" divider. Stacks vertically on mobile, * flex-row on `sm:` breakpoint and up. Each button renders an optional * consumer-supplied icon (`oauthIcons` slot) followed by the * `{provider}`-interpolated template label. * * Returns `null` when `providers` is empty so the caller doesn't need * to guard the mount. */ export function OauthRow({ providers, icons, labels, disabled, onClick, }: OauthRowProps) { if (providers.length === 0) return null; return (

{providers.map((provider) => ( ))}

); } 5b:T694,"use client"; import { useStrengthMeter, type StrengthLabels } from "../hooks/use-strength-meter"; import { cn } from "@/lib/utils"; import type { StrengthCalculator } from "../types"; export interface StrengthMeterProps { calculator?: StrengthCalculator; labels: StrengthLabels; } /** * 4-segment password strength bar + descriptive text. The bar is * `role="presentation"` (the textual companion is the AT-readable * surface; the bar is purely visual). The companion has * `aria-live="polite"` so SR users hear "Strength: strong" on update. * * Segments highlight from left to right based on the score (0–4). * Color gradient mirrors json-form's strength conventions: destructive * → amber → primary (signal-lime) for "fair / strong / excellent". */ export function StrengthMeter({ calculator, labels }: StrengthMeterProps) { const { score, label } = useStrengthMeter({ calculator, labels }); return (

{label}

); } 5c:T9fa,import type { SignupLabels } from "../types"; /** * Default English labels for ``. Consumers override * any subset via the `labels?: Partial` prop; * `mergeSignupLabels` shallow-merges the override over these * defaults at the top of the component. * * The shape mirrors json-form's `defaultJsonFormStrings` + `mergeJsonFormStrings` * pattern. */ export const defaultSignupLabels: SignupLabels = { // Field labels emailLabel: "Email", emailPlaceholder: "you@example.com", passwordLabel: "Password", passwordPlaceholder: "At least 8 characters", firstNameLabel: "First name", firstNamePlaceholder: "", lastNameLabel: "Last name", lastNamePlaceholder: "", displayNameLabel: "Display name", displayNamePlaceholder: "", phoneLabel: "Phone", phonePlaceholder: "", companyLabel: "Company", companyPlaceholder: "", // Buttons createAccountLabel: "Create account", continueLabel: "Continue", backLabel: "Back", skipForNowLabel: "Skip for now", signInLabel: "Already have an account? Sign in", // OAuth orContinueWith: "or", oauthLabelTemplate: "Continue with {provider}", // Step indicator stepOf: "Step {current} of {total}", // Error messages emailRequired: "Email is required", emailInvalid: "Enter a valid email", passwordRequired: "Password is required", passwordTooShort: "Password must be at least {min} characters", passwordMissingUppercase: "Password must contain an uppercase letter", passwordMissingNumber: "Password must contain a number", passwordMissingSymbol: "Password must contain a symbol", consentRequired: "You must accept the terms to continue", // Strength meter strengthWeak: "weak", strengthFair: "fair", strengthStrong: "strong", strengthExcellent: "excellent", strengthLabel: "Strength: {level}", // Server-error fallback serverError: "Something went wrong. Please try again.", // Success successDefaultMessage: "You're in. Check your inbox to verify your email.", // sr-only accessibility hints passwordToggleShow: "Show password", passwordToggleHide: "Hide password", honeypotLabel: "Leave this field empty", }; /** * Shallow-merge consumer overrides over the English defaults. Returns * the full, populated `SignupLabels` object so downstream parts * can read by key without optional-chaining. */ export function mergeSignupLabels( override?: Partial, ): SignupLabels { if (!override) return defaultSignupLabels; return { ...defaultSignupLabels, ...override }; } 5d:T2448,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useForm, type UseFormReturn } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { buildSchema, type SchemaLabels, } from "../lib/build-schema"; import { HONEYPOT_RHF_KEY, isHoneypotTripped as computeHoneypotTripped, } from "../lib/honeypot"; import type { OptionalFieldConfig, OptionalFieldName, SignupFormProps, SignupFormStatus, SignupLabels, SignupStep1Values, SignupStep2Values, SignupSubmitPayload, } from "../types"; import { useFormStep, type FormStep } from "./use-form-step"; const DEFAULT_POLICY = { minLength: 8, requireUppercase: false, requireNumber: false, requireSymbol: false, }; export interface UseSignupFormArgs { flow: "single-step" | "two-step"; passwordStrategy: "password" | "magic-link"; skippableStepTwo: boolean; fields: Partial>; passwordPolicy: SignupFormProps["passwordPolicy"]; consent: SignupFormProps["consent"]; labels: SignupLabels; status?: SignupFormStatus; onStatusChange?: (status: SignupFormStatus) => void; onSubmit: (payload: SignupSubmitPayload) => void | Promise; } export interface UseSignupFormReturn { form: UseFormReturn; status: SignupFormStatus; step: FormStep; /** Step1 → step2 (two-step). Returns whether the transition succeeded. */ goNext: () => Promise; /** Step2 → step1 (two-step). */ goBack: () => void; /** Submit the form. Validates first; transitions status; calls onSubmit with the envelope. */ submit: () => Promise; /** Skip-for-now: submit with step-1 values only (`stepCompleted: "step1"`). Two-step + skippable only. */ skip: () => Promise; } /** * Substrate hook. Owns the RHF + Zod glue, the status state machine, * and the discriminated submit envelope assembly. * * **Mutual-exclusion contract (Q5 lock):** if `props.status` is provided, * the internal `setStatus` is a no-op for the internal state — the * component reads `props.status` as source of truth. `onStatusChange` * fires on every computed transition regardless (so observers can react * to "what the status WOULD be" in controlled mode). */ export function useSignupForm( args: UseSignupFormArgs, ): UseSignupFormReturn { const { flow, passwordStrategy, skippableStepTwo, fields, passwordPolicy: rawPolicy, consent, labels, status: controlledStatus, onStatusChange, onSubmit, } = args; const isControlled = controlledStatus !== undefined; const [internalStatus, setInternalStatus] = useState("idle"); // The onStatusChange callback can change identity every render if the // consumer passes an inline arrow function. Stable ref keeps our // setStatus identity steady so memoized actions don't re-bind every // render. const onStatusChangeRef = useRef(onStatusChange); useEffect(() => { onStatusChangeRef.current = onStatusChange; }, [onStatusChange]); const setStatus = useCallback( (next: SignupFormStatus) => { if (!isControlled) setInternalStatus(next); onStatusChangeRef.current?.(next); }, [isControlled], ); const status: SignupFormStatus = isControlled ? controlledStatus! : internalStatus; // Normalize the password policy: shipped + un-shipped flags both // collapse to the same shape used by build-schema. const policy = useMemo( () => ({ minLength: rawPolicy?.minLength ?? DEFAULT_POLICY.minLength, requireUppercase: rawPolicy?.requireUppercase ?? DEFAULT_POLICY.requireUppercase, requireNumber: rawPolicy?.requireNumber ?? DEFAULT_POLICY.requireNumber, requireSymbol: rawPolicy?.requireSymbol ?? DEFAULT_POLICY.requireSymbol, }), [ rawPolicy?.minLength, rawPolicy?.requireUppercase, rawPolicy?.requireNumber, rawPolicy?.requireSymbol, ], ); const schemaLabels = useMemo( () => ({ emailRequired: labels.emailRequired, emailInvalid: labels.emailInvalid, passwordRequired: labels.passwordRequired, passwordTooShort: labels.passwordTooShort, passwordMissingUppercase: labels.passwordMissingUppercase, passwordMissingNumber: labels.passwordMissingNumber, passwordMissingSymbol: labels.passwordMissingSymbol, consentRequired: labels.consentRequired, }), [ labels.emailRequired, labels.emailInvalid, labels.passwordRequired, labels.passwordTooShort, labels.passwordMissingUppercase, labels.passwordMissingNumber, labels.passwordMissingSymbol, labels.consentRequired, ], ); const schema = useMemo( () => buildSchema({ passwordStrategy, passwordPolicy: policy, fields, consent: { required: consent.required }, labels: schemaLabels, }), [passwordStrategy, policy, fields, consent.required, schemaLabels], ); const form = useForm({ // The resolver-cast pattern matches json-form's // `use-json-form.ts` precedent (RHF / Zod overload disambiguation). resolver: zodResolver(schema as never) as never, mode: "onSubmit", defaultValues: { email: "", password: passwordStrategy === "password" ? "" : undefined, consentAccepted: false, [HONEYPOT_RHF_KEY]: "", } as SignupStep2Values, }); const stepHook = useFormStep({ enabled: flow === "two-step", form, }); const submitInternal = useCallback( async (stepCompleted: "single" | "step1" | "step2") => { setStatus("submitting"); try { // form.handleSubmit returns a function that runs validation + // either the valid handler or the invalid handler. We invoke it // inline so the `await onSubmit(...)` happens within the same // try/catch. let didFire = false; await new Promise((resolve, reject) => { void form.handleSubmit( async (values) => { didFire = true; const honeypotValue = (values as unknown as Record)[HONEYPOT_RHF_KEY] ?? ""; const isHoneypotTripped = computeHoneypotTripped( String(honeypotValue), ); const payload = buildPayload( stepCompleted, values, isHoneypotTripped, ); try { await onSubmit(payload); resolve(); } catch (err) { reject(err); } }, () => { // Invalid handler — validation failed. We don't transition // to "error" here (that's reserved for onSubmit-throws); // RHF surfaces the per-field errors via formState. resolve(); }, )(); if (!didFire) { // Edge: handleSubmit may resolve synchronously when there's // no async work; the resolve() above covers that. } }); if (didFire) setStatus("success"); else setStatus("idle"); // validation failed; back to idle } catch { setStatus("error"); } }, [form, onSubmit, setStatus], ); const submit = useCallback(async () => { const stepCompleted: "single" | "step2" = flow === "single-step" ? "single" : "step2"; await submitInternal(stepCompleted); }, [flow, submitInternal]); const skip = useCallback(async () => { if (flow !== "two-step" || !skippableStepTwo) return; // Validate step-1 fields only. const ok = await form.trigger([ "email", "password", "consentAccepted", ] as const); if (!ok) return; setStatus("submitting"); try { const values = form.getValues(); const honeypotValue = (values as unknown as Record)[HONEYPOT_RHF_KEY] ?? ""; const isHoneypotTripped = computeHoneypotTripped(String(honeypotValue)); const step1Values: SignupStep1Values = { email: values.email, password: values.password, consentAccepted: values.consentAccepted, _honeypot: String(honeypotValue), }; await onSubmit({ stepCompleted: "step1", values: step1Values, isHoneypotTripped, }); setStatus("success"); } catch { setStatus("error"); } }, [flow, skippableStepTwo, form, onSubmit, setStatus]); return { form, status, step: stepHook.step, goNext: stepHook.goNext, goBack: stepHook.goBack, submit, skip, }; } function buildPayload( stepCompleted: "single" | "step1" | "step2", values: SignupStep2Values, isHoneypotTripped: boolean, ): SignupSubmitPayload { if (stepCompleted === "step1") { return { stepCompleted: "step1", values: { email: values.email, password: values.password, consentAccepted: values.consentAccepted, _honeypot: values._honeypot, }, isHoneypotTripped, }; } return { stepCompleted, values, isHoneypotTripped, }; } 5e:T866,"use client"; import { useMemo } from "react"; import { useWatch } from "react-hook-form"; import { defaultStrengthCalculator } from "../lib/strength-calculator"; import type { SignupLabels, StrengthCalculator } from "../types"; export type StrengthLabels = Pick< SignupLabels, | "strengthWeak" | "strengthFair" | "strengthStrong" | "strengthExcellent" | "strengthLabel" >; export interface UseStrengthMeterArgs { calculator?: StrengthCalculator; labels: StrengthLabels; } export interface UseStrengthMeterReturn { score: 0 | 1 | 2 | 3 | 4; label: string; } /** * Narrow-deps password-strength hook. Subscribes to the `password` field * via RHF's `useWatch({ name })` against the active FormProvider context; * re-computes when the password changes. The consumer-supplied * `strengthCalculator` is clamped defensively so a buggy BYO heuristic * returning out-of-range values can't crash the meter. * * `label` interpolates `labels.strengthLabel` (`"Strength: {level}"`) * with the bucketed `strengthWeak`/`Fair`/`Strong`/`Excellent` text. For * score 0 (empty), `label` is the empty string — the meter is rendered * but the descriptive text disappears. */ export function useStrengthMeter( args: UseStrengthMeterArgs, ): UseStrengthMeterReturn { const { calculator, labels } = args; const password = useWatch({ name: "password" }) as string | undefined; return useMemo(() => { const calc = calculator ?? defaultStrengthCalculator; const raw = calc(password ?? ""); const score = clampScore(raw); if (score === 0) return { score, label: "" }; const levelText = score === 1 ? labels.strengthWeak : score === 2 ? labels.strengthFair : score === 3 ? labels.strengthStrong : labels.strengthExcellent; return { score, label: labels.strengthLabel.replace("{level}", levelText) }; }, [calculator, password, labels]); } function clampScore(raw: number): 0 | 1 | 2 | 3 | 4 { if (raw <= 0) return 0; if (raw === 1) return 1; if (raw === 2) return 2; if (raw === 3) return 3; return 4; } 5f:T768,"use client"; import { useCallback, useMemo, useState } from "react"; import type { UseFormReturn } from "react-hook-form"; import type { SignupStep1Values, SignupStep2Values, } from "../types"; export type FormStep = "step1" | "step2"; export interface UseFormStepArgs { /** When `false`, the hook locks step at `"step1"` and goNext/goBack are no-ops. */ enabled: boolean; form: UseFormReturn; } export interface UseFormStepReturn { step: FormStep; /** Validate step-1 fields; advance to step-2 only if valid. Returns whether the transition succeeded. */ goNext: () => Promise; goBack: () => void; } /** * Step-state hook for the two-step flow. Encapsulates: * - `useState("step1")` * - Partial validation of step-1 fields via `form.trigger([...])` * - No-op behavior under `flow === "single-step"` (enabled=false) so the * hook is always called for hook-order stability without affecting * behavior. * * Step-1 fields = `email`, `password` (when present), `consentAccepted`. * Honeypot is NOT in the step-1 trigger list — it's intentionally * "validated" at submit time (where we read it for the trip flag) and * has no Zod check. */ export function useFormStep(args: UseFormStepArgs): UseFormStepReturn { const { enabled, form } = args; const [step, setStep] = useState("step1"); const step1Fields = useMemo< Array >(() => ["email", "password", "consentAccepted"], []); const goNext = useCallback(async () => { if (!enabled) return false; if (step === "step2") return true; const ok = await form.trigger(step1Fields); if (ok) setStep("step2"); return ok; }, [enabled, step, form, step1Fields]); const goBack = useCallback(() => { if (!enabled) return; setStep("step1"); }, [enabled]); return { step, goNext, goBack }; } 60:T113b,import { z, type ZodTypeAny } from "zod"; import type { OptionalFieldConfig, OptionalFieldName, SignupLabels, } from "../types"; const OPTIONAL_FIELDS: ReadonlyArray = [ "firstName", "lastName", "displayName", "phone", "company", ]; /** * Subset of `SignupLabels` carrying the error-message templates the * Zod schema bakes in. The hook passes the full merged labels bag; we * narrow here to make the function pure-ish. */ export type SchemaLabels = Pick< SignupLabels, | "emailRequired" | "emailInvalid" | "passwordRequired" | "passwordTooShort" | "passwordMissingUppercase" | "passwordMissingNumber" | "passwordMissingSymbol" | "consentRequired" >; export interface BuildSchemaArgs { passwordStrategy: "password" | "magic-link"; passwordPolicy: { minLength: number; requireUppercase: boolean; requireNumber: boolean; requireSymbol: boolean; }; fields: Partial>; consent: { required: boolean }; labels: SchemaLabels; } /** * Build the Zod schema for the whole form (step 1 + step 2 fields). * * The schema is **single** — step-1 vs step-2 partial validation is * driven by `form.trigger(name[])` at the call site in the hook (NOT by * swapping schemas). Step-2-only fields are always optional at the type * level so the "Skip for now" path can submit with step-1 values alone * without tripping a "required" error on the skipped step-2 fields. * * Field-by-field rules: * - `email`: required, valid email format (Zod's `email()` check). * - `password`: optional under `magic-link`; under `password`, required * + `minLength` + each policy class check. * - `consentAccepted`: required `true` when `consent.required`; otherwise * just `boolean` (no validation). * - `_honeypot`: passthrough string. **Never validated** — the honeypot * "trip" semantics live in `isHoneypotTripped()` at the submit handler, * not in the schema. Validating it here would block submission on a * bot fill, which is the WRONG behavior (we want the bot to think it * succeeded). * - Optional fields (`firstName` etc.): present in the schema with * `.optional()` if the consumer opted them in via `fields`. If * `{ required: true }` on the optional-field config AND the user * completes step 2, the field is required. The "Skip for now" path * bypasses step-2 validation entirely (see hook). */ export function buildSchema(args: BuildSchemaArgs) { const { passwordStrategy, passwordPolicy, fields, consent, labels } = args; const emailSchema = z .string({ message: labels.emailRequired }) .min(1, labels.emailRequired) .email(labels.emailInvalid); let passwordSchema: ZodTypeAny; if (passwordStrategy === "magic-link") { // Field absent at runtime under magic-link. We still register a // schema slot for shape stability (`.optional()`) so partial values // shapes line up between the two strategies. passwordSchema = z.string().optional(); } else { let chain = z .string({ message: labels.passwordRequired }) .min( passwordPolicy.minLength, labels.passwordTooShort.replace( "{min}", String(passwordPolicy.minLength), ), ); if (passwordPolicy.requireUppercase) { chain = chain.refine((s) => /[A-Z]/.test(s), { message: labels.passwordMissingUppercase, }); } if (passwordPolicy.requireNumber) { chain = chain.refine((s) => /[0-9]/.test(s), { message: labels.passwordMissingNumber, }); } if (passwordPolicy.requireSymbol) { chain = chain.refine((s) => /[^A-Za-z0-9]/.test(s), { message: labels.passwordMissingSymbol, }); } passwordSchema = chain; } const consentSchema = consent.required ? z.literal(true, { message: labels.consentRequired, }) : z.boolean(); const shape: Record = { email: emailSchema, password: passwordSchema, consentAccepted: consentSchema, _honeypot: z.string(), }; for (const name of OPTIONAL_FIELDS) { const config = fields[name]; if (config === undefined || config === false) continue; const required = config === true ? false : config.required; shape[name] = required ? z.string().min(1) : z.string().optional(); } return z.object(shape); } 61:T6b0,import type { CSSProperties } from "react"; /** * The rendered HTML `name` attribute on the honeypot input. Tuned to the * spam-bait names most form-fill bots target (`url`, `website`, * `homepage`); `website` has the broadest hit-rate. **This is NOT the * RHF register key** — see `HONEYPOT_RHF_KEY` below. */ export const HONEYPOT_HTML_NAME = "website"; /** * The RHF register key + values-bag key. The `_` prefix keeps it out of * the natural reading order of `payload.values` (consumers see * `payload.values._honeypot` and immediately read it as a meta field * rather than mistaking it for a real `website` field). */ export const HONEYPOT_RHF_KEY = "_honeypot"; /** * Off-screen rendering style. **Critical: `display: none` is * bot-detectable — bots skip non-visible fields.** The off-screen * absolute-position pattern keeps the field rendered (and fillable by * a naïve form-fill bot) while invisible to real users. * * The 1×1 pixel sizing + `overflow: hidden` prevents any focus-ring * leakage if the field somehow receives focus. `tabIndex={-1}` (set on * the input element, not here) keeps it off keyboard tab order; * `aria-hidden="true"` keeps it off the AT tree. */ export const HONEYPOT_STYLE: CSSProperties = { position: "absolute", left: "-9999px", top: "auto", width: "1px", height: "1px", overflow: "hidden", }; /** * A real user cannot tab into the honeypot field (tabIndex={-1}) and * cannot see it (off-screen), so any non-empty value means a spam bot * filled it. The submit handler surfaces this on the payload via * `isHoneypotTripped: boolean`. */ export function isHoneypotTripped(value: string): boolean { return value.length > 0; } 62:T51c,import type { OAuthProvider } from "../types"; /** * Built-in OAuth provider list — the runtime equivalent of the * `OAuthProvider` type literal union. Used to validate / iterate * consumer-provided `oauthProviders` arrays. */ export const OAUTH_PROVIDERS: ReadonlyArray = [ "google", "github", "apple", "facebook", "microsoft", "x", ]; /** * Per-provider display name. Used by `getOAuthProviderLabel` to * interpolate into `labels.oauthLabelTemplate`. Apple's brand guidelines * require "Sign in with Apple" specifically — but this component is * neutral on the verb (`Continue with` / `Sign up with`), so we surface * the capitalized provider name and let `oauthLabelTemplate` carry the * verb. */ const PROVIDER_DISPLAY_NAMES: Record = { google: "Google", github: "GitHub", apple: "Apple", facebook: "Facebook", microsoft: "Microsoft", x: "X", }; /** * Interpolate the provider name into the consumer-overridable template * (`labels.oauthLabelTemplate`). Default template is * `"Continue with {provider}"` — yields `"Continue with Google"`. */ export function getOAuthProviderLabel( provider: OAuthProvider, template: string, ): string { return template.replace("{provider}", PROVIDER_DISPLAY_NAMES[provider]); } 63:T545,import type { StrengthCalculator } from "../types"; /** * Built-in password-strength heuristic. Returns 0 for an empty string, * 1–4 for non-empty inputs based on length + character-class diversity. * * Algorithm: * - length 0 → 0 (empty / unrated) * - score = floor(length / 4) + characterClassCount − 1, clamped to [1, 4] * - length 4 contributes +1; length 12 contributes +3 * - character classes = { has-lowercase, has-uppercase, has-digit, * has-symbol } — each adds +1 * - then subtract 1 so a single-class short password lands at "weak" * * This is intentionally not a zxcvbn-style dictionary check — that would * pull a ~400KB peer dep for marginal value at v0.1. Consumers with * corporate password policies (or who want zxcvbn) plug a different * calculator via the `strengthCalculator` prop on ``. */ export const defaultStrengthCalculator: StrengthCalculator = (password) => { if (!password) return 0; let classes = 0; if (/[a-z]/.test(password)) classes++; if (/[A-Z]/.test(password)) classes++; if (/[0-9]/.test(password)) classes++; if (/[^A-Za-z0-9]/.test(password)) classes++; const lengthScore = Math.floor(password.length / 4); const raw = lengthScore + classes - 1; if (raw <= 1) return 1; if (raw === 2) return 2; if (raw === 3) return 3; return 4; }; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-hook-form@^7.75.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form@^7.75.0"}]]}]}],["$","li","@hookform/resolvers@^5.2.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hookform%2Fresolvers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hookform/resolvers@^5.2.2"}]]}]}],["$","li","zod@^4.4.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod@^4.4.3"}]]}]}],["$","li","lucide-react@^1.11.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.11.0"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ilinxa","registryDependencies":["input","label","button","checkbox"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/forms/signup-form/signup-form.tsx","content":"$50","type":"registry:component","target":"components/signup-form/signup-form.tsx"},{"path":"src/registry/components/forms/signup-form/signup-form.css","content":"/**\n * Sealed-folder CSS for the step-shell fade transition. Imported once\n * at the root component (`signup-form.tsx`). The fade collapses\n * to a hard 0ms swap under `prefers-reduced-motion: reduce` so a11y\n * tooling isn't disorientated.\n */\n\n@keyframes signup-form-step-fade-in {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n[data-signup-form-step] {\n animation: signup-form-step-fade-in 150ms ease-out both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-signup-form-step] {\n animation: none;\n }\n}\n","type":"registry:component","target":"components/signup-form/signup-form.css"},{"path":"src/registry/components/forms/signup-form/index.ts","content":"// Component\nexport { SignupForm } from \"./signup-form\";\n\n// Public types\nexport type {\n SignupFormProps,\n SignupFormStatus,\n SignupSubmitPayload,\n SignupStep1Values,\n SignupStep2Values,\n SignupLabels,\n OAuthProvider,\n OptionalFieldName,\n OptionalFieldConfig,\n StrengthCalculator,\n ButtonVariant,\n} from \"./types\";\n\n// Helpers\nexport {\n defaultSignupLabels,\n mergeSignupLabels,\n} from \"./parts/labels\";\nexport { defaultStrengthCalculator } from \"./lib/strength-calculator\";\nexport { OAUTH_PROVIDERS } from \"./lib/oauth-providers\";\n","type":"registry:component","target":"components/signup-form/index.ts"},{"path":"src/registry/components/forms/signup-form/types.ts","content":"$51","type":"registry:component","target":"components/signup-form/types.ts"},{"path":"src/registry/components/forms/signup-form/parts/email-field.tsx","content":"$52","type":"registry:component","target":"components/signup-form/parts/email-field.tsx"},{"path":"src/registry/components/forms/signup-form/parts/password-field.tsx","content":"$53","type":"registry:component","target":"components/signup-form/parts/password-field.tsx"},{"path":"src/registry/components/forms/signup-form/parts/consent-checkbox.tsx","content":"$54","type":"registry:component","target":"components/signup-form/parts/consent-checkbox.tsx"},{"path":"src/registry/components/forms/signup-form/parts/honeypot-field.tsx","content":"$55","type":"registry:component","target":"components/signup-form/parts/honeypot-field.tsx"},{"path":"src/registry/components/forms/signup-form/parts/optional-fields-fieldset.tsx","content":"$56","type":"registry:component","target":"components/signup-form/parts/optional-fields-fieldset.tsx"},{"path":"src/registry/components/forms/signup-form/parts/step-indicator.tsx","content":"$57","type":"registry:component","target":"components/signup-form/parts/step-indicator.tsx"},{"path":"src/registry/components/forms/signup-form/parts/step-shell.tsx","content":"\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport type { FormStep } from \"../hooks/use-form-step\";\n\nexport interface StepShellProps {\n step: FormStep;\n children: ReactNode;\n}\n\n/**\n * Wrapper that fades content in when the step changes. The `key`\n * collapses the children when the step transitions so the CSS\n * keyframe (`signup-form-step-fade-in`) replays from `opacity: 0`.\n *\n * The fade is purely cosmetic; `prefers-reduced-motion: reduce`\n * collapses it to a 0ms hard-swap via the CSS rule in\n * `signup-form.css`. Hard-swap = no animation, which is the\n * correct a11y behavior.\n */\nexport function StepShell({ step, children }: StepShellProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/signup-form/parts/step-shell.tsx"},{"path":"src/registry/components/forms/signup-form/parts/server-error.tsx","content":"\"use client\";\n\nimport { AlertCircle } from \"lucide-react\";\n\nexport interface ServerErrorProps {\n message: string;\n}\n\n/**\n * `role=\"alert\"` banner above the form for server-side errors (controlled\n * `errorMessage` prop). Returns null when no message — the caller checks\n * before mounting.\n */\nexport function ServerError({ message }: ServerErrorProps) {\n return (\n \n \n {message}\n \n );\n}\n","type":"registry:component","target":"components/signup-form/parts/server-error.tsx"},{"path":"src/registry/components/forms/signup-form/parts/success-screen.tsx","content":"$58","type":"registry:component","target":"components/signup-form/parts/success-screen.tsx"},{"path":"src/registry/components/forms/signup-form/parts/submit-row.tsx","content":"$59","type":"registry:component","target":"components/signup-form/parts/submit-row.tsx"},{"path":"src/registry/components/forms/signup-form/parts/sign-in-link.tsx","content":"\"use client\";\n\nimport type { SignupLabels } from \"../types\";\n\nexport interface SignInLinkProps {\n href: string;\n labels: Pick;\n}\n\n/**\n * \"Already have an account? Sign in\" link below the form. Plain ``\n * (registry portability lock — can't import `next/link`). Caller checks\n * for `signInHref` and skips mounting if undefined.\n */\nexport function SignInLink({ href, labels }: SignInLinkProps) {\n return (\n

\n \n {labels.signInLabel}\n \n

\n );\n}\n","type":"registry:component","target":"components/signup-form/parts/sign-in-link.tsx"},{"path":"src/registry/components/forms/signup-form/parts/oauth-row.tsx","content":"$5a","type":"registry:component","target":"components/signup-form/parts/oauth-row.tsx"},{"path":"src/registry/components/forms/signup-form/parts/strength-meter.tsx","content":"$5b","type":"registry:component","target":"components/signup-form/parts/strength-meter.tsx"},{"path":"src/registry/components/forms/signup-form/parts/labels.ts","content":"$5c","type":"registry:component","target":"components/signup-form/parts/labels.ts"},{"path":"src/registry/components/forms/signup-form/hooks/use-signup-form.ts","content":"$5d","type":"registry:component","target":"components/signup-form/hooks/use-signup-form.ts"},{"path":"src/registry/components/forms/signup-form/hooks/use-strength-meter.ts","content":"$5e","type":"registry:component","target":"components/signup-form/hooks/use-strength-meter.ts"},{"path":"src/registry/components/forms/signup-form/hooks/use-form-step.ts","content":"$5f","type":"registry:component","target":"components/signup-form/hooks/use-form-step.ts"},{"path":"src/registry/components/forms/signup-form/lib/build-schema.ts","content":"$60","type":"registry:component","target":"components/signup-form/lib/build-schema.ts"},{"path":"src/registry/components/forms/signup-form/lib/honeypot.ts","content":"$61","type":"registry:component","target":"components/signup-form/lib/honeypot.ts"},{"path":"src/registry/components/forms/signup-form/lib/oauth-providers.ts","content":"$62","type":"registry:component","target":"components/signup-form/lib/oauth-providers.ts"},{"path":"src/registry/components/forms/signup-form/lib/strength-calculator.ts","content":"$63","type":"registry:component","target":"components/signup-form/lib/strength-calculator.ts"}],"className":"h-[70svh] min-h-80"}]]}]