Input component

[DanWebb]

Wraps around the native <input> to provide styles and states.

This is kept pretty barebones at the moment

• Uses ninja input pattern to hide the input and apply states to the outer border instead
• Focus handled via focus within
• Disabled handled using :has selector
• Default colors use theme vars to be unopinionated
• State prop for valid/invalid, I considered using :has(:valid) but I think we still rarely use HTML validation(?)
• Affix is covered without any props but it does assume only 3 elements are inside the diamond-input
• Handling SVG under button and icon is the same, not sure about this yet, I think it's okay until we get into more depth with the icon component

Screen.Cast.2024-02-07.at.3.59.39.PM.mp4