A field that knows what an email looks like, and fixes the typo for you.
The prompt21,935 characters
Add the "Input" component from notboring to my project.
It is licensed for use in my projects — notboring.dev/license. Please:
1. Create the component at a sensible path for this
project, named Input, from the source below.
2. It needs nothing beyond React.
3. Add the CSS to the project's stylesheet.
4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
these custom properties and does not define them:
--card
--font-ui
--ink
--ink-3
--ink-4
--ink-rgb
--pane-edge
They are notboring's design tokens. Map each one to
whatever this project already uses for the same
job — its own ink, ground, surface and UI font —
rather than defining them as new globals. If the
project has no equivalent, define it locally on
the component's own root so nothing leaks out.
Anything ending -rgb wants three bare numbers,
because the CSS builds rgba() from it.
Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.
--- Input.tsx ---
import { useEffect, useId, useRef, useState } from "react";
/* ══ Input ════════════════════════════════════════════════
An email field.
THE FIELD KNOWS WHAT AN EMAIL LOOKS LIKE, AND SAYS SO AS
YOU TYPE. Most fields wait for a submit to tell you the
address was wrong, which is the one moment you have stopped
looking at it. This one answers while the caret is still in
it: a check draws itself at the right end the moment the
value has the shape of an address, and undraws the moment
it loses it. There is no red — the check being there or not
is the whole verdict, and a verdict you can see arrive is
one you do not have to be told.
AND IT CATCHES THE SLIP. Nobody misspells their own name;
they misspell the domain — gmial, hotmal, yaho — and every
one of those is a valid address that goes nowhere. So a
short table of the usual slips watches the domain, and when
it recognizes one, a line offers the address you meant. One
press replaces the value. That line is worth more than any
validation message, because it is the only one that fixes
something rather than reporting it.
The rest — the source and its comments — is what you are buying.