g1t/apps/web/app/components/ui/input.tsx
Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Workspace names and icons, and a component kit for every control | 1 | import type { ComponentProps } from "react"; |
| 2 | ||
| 3 | import { cn } from "../../lib/cn"; | |
| 4 | import { notACredential } from "./index"; | |
| 5 | ||
| 6 | // shadcn/ui's input, styled with g1t's tokens. Unlike the older `Input` in | |
| 7 | // ./index it takes a className, and fields that are not part of signing in | |
| 8 | // still keep password managers out. | |
| 9 | ||
| 10 | export const CONTROL = | |
| 11 | "w-full min-w-0 rounded-md border border-line bg-bg px-3 py-2 text-sm text-fg outline-none transition-[border-color,box-shadow] placeholder:text-faint hover:border-line-strong focus-visible:border-accent-dim focus-visible:ring-2 focus-visible:ring-accent/25 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger/70"; | |
| 12 | ||
| 13 | export function Input({ className, ...props }: ComponentProps<"input">) { | |
| 14 | return <input {...notACredential(props.autoComplete)} {...props} className={cn(CONTROL, "h-9", className)} />; | |
| 15 | } | |
| 16 | ||
| 17 | /** | |
| 18 | * Text either side of an input, joined into one control, as in | |
| 19 | * `workspace / name` or `https:// … .g1t.page`. Put addons and an input | |
| 20 | * inside; the group draws the border and the focus ring. | |
| 21 | */ | |
| 22 | export function InputGroup({ className, ...props }: ComponentProps<"div">) { | |
| 23 | return ( | |
| 24 | <div | |
| 25 | className={cn( | |
| 26 | "flex h-9 w-full min-w-0 items-stretch overflow-hidden rounded-md border border-line bg-bg text-sm transition-[border-color,box-shadow]", | |
| 27 | "hover:border-line-strong has-[:focus-visible]:border-accent-dim has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/25", | |
| 28 | "[&_input]:h-full [&_input]:rounded-none [&_input]:border-0 [&_input]:bg-transparent [&_input]:ring-0 [&_input]:focus-visible:ring-0", | |
| 29 | className, | |
| 30 | )} | |
| 31 | {...props} | |
| 32 | /> | |
| 33 | ); | |
| 34 | } | |
| 35 | ||
| 36 | export function InputAddon({ className, ...props }: ComponentProps<"span">) { | |
| 37 | return ( | |
| 38 | <span | |
| 39 | className={cn("flex shrink-0 items-center px-2.5 text-faint select-none", className)} | |
| 40 | {...props} | |
| 41 | /> | |
| 42 | ); | |
| 43 | } |