Input

1"use client";
2 
3import { Input as InputPrimitive } from "@base-ui/react/input";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import { fieldControl, readOnlyFieldControl } from "@/lib/recipes";
7import { Spinner } from "@/components/ui/spinner";
8 
9export type InputSize = "sm" | "md" | "lg";
10export type InputVariant = "default" | "unstyled";
11 
12export type InputProps = Omit<
13  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,
14  "size" | "prefix"
15> & {
16  size?: InputSize;
17  /**
18   * Visual variant of the input container.
19   * - `default` (unset): filled, borderless, rounded, with state-aware hover and focus.
20   * - `unstyled`: no border, no rounded, no hover, no focus outline.
21   *   Use when embedding an Input inside a surface that owns its
22   *   own container styling (panels, table cells, composite fields).
23   */
24  variant?: InputVariant;
25  /** Content rendered at the start (icon, unit symbol, or text like `https://`). */
26  prefix?: React.ReactNode;
27  /** Content rendered at the end (icon, unit label, or text like `.com`). */
28  suffix?: React.ReactNode;
29  /** Disables the input and renders a spinner in the trailing slot. */
30  loading?: boolean;
31};
32 
33// Heights per DESIGN.md: sm=24, md=32, lg=40. Text drops to body-13 at
34// sm so the label fits comfortably inside 24px; md and lg carry body-14
35// and body-16 respectively.
36const heightBySize: Record<InputSize, string> = {
37  sm: "h-6 text-small",
38  md: "h-8 text-small",
39  lg: "h-10 text-regular",
40};
41 
42// Padding ramps stored as literal ps-/pe- strings so Tailwind's JIT
43// picks them up in source (a computed `"px-2.5".replace(...)` would
44// yield `ps-2.5` at runtime but the class rule would never get emitted).
45// Padding scales with height. sm/md/lg heights are 24/32/40, so 8/12/14
46// keeps roughly the same padding-to-height ratio (~33-37%) across sizes.
47const startPadBySize: Record<InputSize, string> = {
48  sm: "ps-3",
49  md: "ps-3",
50  lg: "ps-3.5",
51};
52 
53const endPadBySize: Record<InputSize, string> = {
54  sm: "pe-3",
55  md: "pe-3",
56  lg: "pe-3.5",
57};
58 
59/** Inline affix. No background, no border, no hover -- just a muted
60 *  glyph or short label rendered inline with the input text. When a
61 *  prefix or suffix is present, it takes over the leading / trailing
62 *  padding on that side so nothing double-pads. */
63function Affix({
64  side,
65  children,
66}: {
67  side: "start" | "end";
68  children: React.ReactNode;
69}) {
70  return (
71    <span
72      className={cn(
73// … truncated