Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Input styles, focus states, and field patterns
| State | Effect | Timing |
|---|---|---|
| Default | Subtle border, neutral background | - |
| Hover | Border lightens slightly | 150ms ease |
| Focus | Lime border + ring glow | 150ms ease |
| Invalid | Red border + ring | 150ms ease |
| Disabled | opacity(0.5), cursor: not-allowed | - |
/* Tailwind classes for all inputs */
border border-gray-200 dark:border-white/10
bg-white dark:bg-white/5
rounded-xl outline-none transition-colors duration-150
focus:border-lime dark:focus:border-lime-light focus:ring-2 focus:ring-lime/20
| Size | Height | Font Size |
|---|---|---|
| sm | h-9 (36px) | text-[13px] |
| md | h-11 (44px) | text-sm (14px) |
| lg | h-12 (48px) | text-[15px] |
/* Standard input */
h-11 px-4 rounded-xl border border-gray-200 dark:border-white/10
bg-white dark:bg-white/5
text-sm text-black dark:text-white
placeholder:text-gray-400 dark:placeholder:text-white/40
focus:border-lime dark:focus:border-lime-light focus:ring-2 focus:ring-lime/20
outline-none transition-colors duration-150
disabled:cursor-not-allowed disabled:opacity-50
/* Focus ring */
focus:border-lime dark:focus:border-lime-light
focus:ring-2 focus:ring-lime/20
/* Invalid state */
border-red-500/40 focus:border-red-500/60
focus:ring-2 focus:ring-red-500/20
/* Add font-mono for addresses & seeds */
font-mono text-[13px]
/* Search icon (left slot) */
h-4 w-4 text-gray-400
/* Clear button (right slot) */
rounded p-0.5 text-gray-400 transition-colors
hover:bg-gray-100 hover:text-gray-600
dark:hover:bg-white/10 dark:hover:text-gray-300