mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
22 lines
774 B
React
22 lines
774 B
React
import React from 'react'
|
|
|
|
export function Input({ invalid = false, style, ...rest }) {
|
|
const [focus, setFocus] = React.useState(false)
|
|
return (
|
|
<input
|
|
onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
|
|
onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
|
|
style={{
|
|
width:'100%',height:36,padding:'0 12px',
|
|
fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',color:'var(--foreground)',
|
|
background:'var(--black)',
|
|
border:'1px solid ' + (invalid ? 'var(--state-error)' : focus ? 'var(--ring)' : 'var(--border)'),
|
|
borderRadius:'var(--radius-sm)',outline:'none',
|
|
transition:'border-color var(--duration-fast) var(--ease-out)',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|