Input

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Native <input> with shadcn styling. Source of truth:
5//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx
6//
7// We render a real <input> so every native behaviour is preserved:
8// constraint validation (required, pattern, min/max), client-side autofill,
9// browser autocomplete, and the input-mode keyboards on mobile.
10 
11export type InputType =
12  | "text"
13  | "password"
14  | "email"
15  | "number"
16  | "search"
17  | "tel"
18  | "url"
19  | "date"
20  | "time"
21  | "datetime-local"
22  | "month"
23  | "week"
24  | "color"
25  | "file"
26  | "hidden"
27 
28const base =
29  "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none " +
30  "selection:bg-primary selection:text-primary-foreground " +
31  "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground " +
32  "placeholder:text-muted-foreground " +
33  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
34  "md:text-sm dark:bg-input/30 " +
35  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
36  "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " +
37  // htmx-request: dim while a request triggered by/targeting this input is
38  // in flight (e.g. live-validation patterns).
39  "[&.htmx-request]:opacity-70"
40 
41export function inputClasses(opts?: { class?: ClassValue }): string {
42  return cn(base, opts?.class)
43}
44 
45type InputProps = {
46  type?: InputType
47  class?: ClassValue
48  id?: string
49  name?: string
50  value?: string | number
51  defaultValue?: string | number
52  placeholder?: string
53  required?: boolean
54  disabled?: boolean
55  readonly?: boolean
56 
57  // String/numeric constraints. The browser enforces these natively when the
58  // input is inside a <form> that submits.
59  minLength?: number
60  maxLength?: number
61  min?: number | string
62  max?: number | string
63  step?: number | string
64  pattern?: string
65 
66  // Mobile UX: hint to the OS keyboard layout (numeric, decimal, email, …)
67  // and the Enter key label (done, search, send, …).
68  inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"
69  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send"
70 
71  // Submits the text directionality (ltr/rtl) as a separate form field
72// … truncated