Input Component

• Prefer combined utilities like input-subtle-primary over separate input-subtle input-primary — smaller CSS output.
• Variants: input-subtle, input-ghost, input-underline, input-outline.
• Sizes: input-4 ~ input-15 (row height increases by 1 spacing unit per step).
• Shapes: input-pill, input-rounded, input-square, input-fluid.
• Width: input-scale, input-scale-*, input-ratio, input-ratio-*, input-full.
• Colors: input-* dynamic utilities (e.g. input-primary, input-error, input-teal-500). Works with all variants as compound classes like input-subtle-primary.
• States: disabled, readonly, required, pattern all work natively with styling.

Multiple color formats are supported:

• 1. Theme semantic colors, e.g. *-error, *-error-hover
• 2. Tailwind built-in colors, e.g. *-indigo-500
• 3. Raw color values, e.g. *-[#ff0000]
• 4. CSS named colors, e.g. *-[red], *-[green]