Signup

"use client";

import { useState, type FormEvent, type ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-signup-width) max-w-full flex-col gap-(--tui-signup-gap) rounded-(--tui-signup-radius) bg-(--tui-signup-bg) p-(--tui-signup-padding) font-(family-name:--tui-font) text-(length:--tui-signup-font-size) leading-none text-(--tui-signup-fg) shadow-(--tui-signup-shadow)",
  head: "flex h-9 shrink-0 items-center justify-between gap-3 px-3 text-[0.93em] font-medium text-(--tui-signup-muted)",
  well: "rounded-[calc(var(--tui-signup-radius)_-_var(--tui-signup-padding))] bg-(--tui-signup-well)",
  detail: "text-[0.93em] leading-snug text-(--tui-signup-muted)",
  focus: "outline-none focus-visible:[outline:2px_solid_var(--tui-ring)] focus-visible:[outline-offset:2px]",
};

export interface SignupProps {
  /** A quiet label over the field. */
  label?: ReactNode;
  /** Written in the empty field, and read out as its name. */
  placeholder?: string;
  /** What the button says. */
  action?: string;
  /** A quiet line under the field: what they are signing up to, how often. */
  note?: ReactNode;
  /** Shown in place of the field once an address has been sent. */
  success?: ReactNode;
  /** Shown under the field when sending fails. */
  failure?: ReactNode;
  /** Called with the address. Return a promise to hold the button until it settles. */
  onSubmit?: (email: string) => void | Promise<void>;
  isDisabled?: boolean;
  className?: string;
}

/**
 * A place to leave an email address, as a small floating panel: a quiet
 * label, then one tile that holds the field with its button set into the
 * end. Once an address is sent the tile says so in place of asking again.
 */
export function Signup({ label, placeholder = "you@example.com", action = "Join", note, success = "You are on the list.", failure = "That did not go through. Try again.", onSubmit, isDisabled, className }: SignupProps) {
  const [state, setState] = useState<"idle" | "busy" | "done" | "failed">("idle");
  const busy = state === "busy";

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const email = String(new FormData(event.currentTarget).get("email") ?? "").trim();
    if (!email) return;
    setState("busy");
    try {
      await onSubmit?.(email);
      setState("done");
    } catch {
      setState("failed");
    }
  };

  const line = state === "failed" ? failure : note;
  return (
    <div data-slot="signup" data-disabled={isDisabled || undefined} className={[air.panel, "data-disabled:opacity-50", className].filter(Boolean).join(" ")}>
      {label && <div className={air.head}>{label}</div>}
      {state === "done" ? (
        <p role="status" data-slot="signup-success" className={"m-0 flex h-(--tui-signup-row-height) items-center gap-3 px-3 font-medium " + air.well}>
          <span aria-hidden className="flex size-6 shrink-0 items-center justify-center rounded-full bg-(--tui-signup-accent) text-(--tui-signup-accent-fg)">
            <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-3">
            <path d="M3.500 8.500l3 3 6-7" />
          </svg>
          </span>
          {success}
        </p>
      ) : (
        <form onSubmit={submit} data-slot="signup-field" className={"flex h-(--tui-signup-row-height) items-center gap-2 p-1 pl-3 focus-within:[outline:2px_solid_var(--tui-ring)] focus-within:[outline-offset:2px] " + air.well}>
          <input
            type="email"
            name="email"
            required
            disabled={isDisabled || busy}
            aria-label={placeholder}
            aria-invalid={state === "failed" || undefined}
            placeholder={placeholder}
            autoComplete="email"
            className="h-full min-w-0 flex-1 border-none bg-transparent p-0 font-[inherit] text-[length:inherit] text-(--tui-signup-fg) outline-none placeholder:text-(--tui-signup-muted)"
          />
          <button
            type="submit"
            disabled={isDisabled || busy}
            data-slot="signup-button"
            className={["inline-flex h-full shrink-0 cursor-default items-center justify-center gap-2 rounded-[calc(var(--tui-signup-radius)_-_var(--tui-signup-padding)_-_4px)] border-none bg-(--tui-signup-accent) px-4 font-[inherit] text-[length:inherit] leading-none font-medium whitespace-nowrap text-(--tui-signup-accent-fg) transition-[opacity,scale] duration-(--tui-duration) hover:opacity-90 active:scale-[0.97]", air.focus].join(" ")}
          >
            {action}
            {busy && <span aria-hidden className="size-[0.9em] animate-spin rounded-full border-2 border-current border-t-transparent" />}
          </button>
        </form>
      )}
      {line && (
        <p role={state === "failed" ? "alert" : undefined} className={"m-0 px-3 pt-1 pb-2 " + air.detail + (state === "failed" ? " font-medium text-(--tui-signup-fg)!" : "")}>
          {line}
        </p>
      )}
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Signup */
  --tui-signup-width: 360px;
  --tui-signup-padding: calc(var(--tui-space) * 2);
  --tui-signup-gap: calc(var(--tui-space) * 1.5);
  --tui-signup-radius: calc(var(--tui-radius) * 3.25);
  --tui-signup-font-size: var(--tui-text);
  --tui-signup-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-signup-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-signup-fg: var(--tui-fg);
  --tui-signup-muted: var(--tui-muted-fg);
  --tui-signup-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-signup-accent: var(--tui-primary);
  --tui-signup-accent-fg: var(--tui-primary-fg);
  --tui-signup-row-height: calc(var(--tui-space) * 12);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}