A field that knows what an email looks like, and fixes the typo for you.
The prompt23,439 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-5
--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.
5. IF YOU CHANGE IT, GO ALL THE WAY. This block is
built for every state its object can really be
in — empty, one, full, refused, undone, pressed
twice, interrupted halfway — and not only the one
the demo opens on. Adapt it and the same standard
holds: work out that list before you write, and
build the whole of it. Never settle for the
minimum that makes the screenshot right. A
component somebody has to come back and finish is
the thing this was written to replace.
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 FINISHES THE ADDRESS FOR YOU. Type the @ and the
rest of the domain is already there, in the faintest ink,
ahead of the caret: Tab takes it, the right arrow takes it,
and typing straight through it ignores it. Six domains
cover most of the addresses anybody types, and the one
thing this saves — eight characters everybody has typed ten
thousand times — is the difference between a field you fill
in and a field that is filling itself in. The ghost is a
layer under the input, in the same face at the same
The rest — the source and its comments — is what the plan opens.