Aurora Input

1"use client"
2 
3import * as React from "react"
4import { X } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7function devWarn(message: string): void {
8  if (process.env.NODE_ENV !== "production") {
9    console.warn(message)
10  }
11}
12 
13export type InputState = "error" | "warn" | "success"
14export type InputSize = "sm" | "default" | "lg"
15 
16export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
17  /** Optional leading icon or adornment */
18  startAdornment?: React.ReactNode
19  /** Optional trailing icon or adornment */
20  endAdornment?: React.ReactNode
21  /**
22   * Validation state. Sets border color and glow ring using Aurora status tokens.
23   * - error: --aurora-error border + ring
24   * - warn:  --aurora-warn border + ring
25   * - success: --aurora-success border + ring
26   */
27  state?: InputState
28  /**
29   * Convenience alias for state="error". When both are set, `state` takes precedence.
30   */
31  error?: boolean
32  /**
33   * Input size variant.
34   * - sm: h-7, caption font, px-2.5
35   * - default: h-9 (original), body-sm font, px-3
36   * - lg: h-10, control font, px-3.5
37   * @default "default"
38   */
39  size?: InputSize
40  /**
41   * When true and the input has a value, shows a clear (×) button as the end adornment.
42   * The clear button calls `onClear` if provided, otherwise fires `onChange` with an
43   * empty synthetic-like event.
44   */
45  clearable?: boolean
46  /** Callback fired when the clear button is clicked. Escape hatch for controlled inputs. */
47  onClear?: () => void
48  /**
49   * Escape hatch. When true, renders a BARE `<input>` with no wrapper, no inline
50   * style skin, no imperative focus handlers, and no adornment/clear logic — only
51   * `className`, the forwarded `ref`, `type`, and the remaining props are applied,
52   * so the consumer's className/CSS owns 100% of the appearance. The styled path
53   * (default) is unaffected.
54   * @default false
55   */
56  unstyled?: boolean
57}
58 
59/** Token map for validation states */
60const STATE_TOKENS = {
61  error: {
62    border: "var(--aurora-error)",
63    ring: "var(--aurora-error)",
64  },
65  warn: {
66    border: "var(--aurora-warn)",
67    ring: "var(--aurora-warn)",
68  },
69  success: {
70    border: "var(--aurora-success)",
71    ring: "var(--aurora-success)",
72  },
73} as const
74 
75/** Resting box-shadow for a state — subtle 1px ring */
76function stateRestShadow(color: string): string {
77  return `0 0 0 1px color-mix(in srgb, ${color} 30%, transparent)`
78}
79 
80// … truncated