mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zeekayandHanzo Dev
57dc3597d3
0.4.2 gave the text field an 8px radius, a hover that lifts the surface, and a focus halo, and left its two siblings at 6px with a bare border swap. Three controls that sit in the same form and are meant to read as one control type diverged, which is worse than all three being wrong together. All three are now byte-identical in chrome — verified from the rendered DOM, not the source: radius 8px, border rgba(255,255,255,0.15), surface #171717. Co-authored-by: Hanzo Dev <[email protected]>
31 lines
1.4 KiB
React
31 lines
1.4 KiB
React
import React from 'react'
|
|
|
|
// Same chrome as Input, to the pixel — radius, hover lift, focus halo. A
|
|
// textarea that rounds one step tighter than the field above it and lights up
|
|
// differently on focus is the kind of drift nobody reports and everybody feels.
|
|
export function Textarea({ rows = 4, style, ...rest }) {
|
|
const [focus, setFocus] = React.useState(false)
|
|
const [hover, setHover] = 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)}}
|
|
onMouseEnter={()=>setHover(true)}
|
|
onMouseLeave={()=>setHover(false)}
|
|
style={{
|
|
width:'100%',padding:'8px 12px',resize:'vertical',
|
|
fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
|
|
background: hover && !focus ? 'var(--surface-3)' : 'var(--surface-2)',
|
|
border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
|
|
borderRadius:'var(--radius-md)',
|
|
outline:'none',
|
|
boxShadow: focus ? 'var(--ring-focus)' : 'none',
|
|
transition:'border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|