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
795 B
React
22 lines
795 B
React
import React from 'react'
|
|
|
|
export function Textarea({ rows = 4, style, ...rest }) {
|
|
const [focus, setFocus] = React.useState(false)
|
|
return (
|
|
<textarea
|
|
rows={rows}
|
|
onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
|
|
onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
|
|
style={{
|
|
width:'100%',padding:'8px 12px',resize:'vertical',
|
|
fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
|
|
background:'var(--black)',border:'1px solid ' + (focus ? 'var(--ring)' : 'var(--border)'),
|
|
borderRadius:'var(--radius-sm)',outline:'none',
|
|
transition:'border-color var(--duration-fast) var(--ease-out)',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|