mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekayandHanzo Dev
01dc7b5306
Swapping the forked token layer for the inherited one silently orphaned two names. The fork declared --border-hairline (a solid #262626) and --border-card; the substrate draws every one of those boundaries with a single alpha --border, and explains at length why alpha beats a solid hex there — a solid edge reads on the page and vanishes the moment it lands on a lifted surface. Nineteen shipped files still asked for the old names: Card, Avatar, Badge, Table, Accordion, Dialog, DropdownMenu, Sheet, Toaster, seven specimen cards, and the generation prompts. An undefined custom property in `border:1px solid var(--gone)` does not fail. The declaration is invalid at computed-value time, border-color falls back to currentColor, and every one of those surfaces draws its edge in the INK colour — a stark near-white hairline on black that reads as a bold design choice rather than as nineteen broken files. They are not re-declared as aliases. Both mapped to the substrate's --border, so keeping them would be two names for one thing — exactly the duplication this package exists to remove. The components now speak the substrate's vocabulary. check-tokens gains the check that would have caught it. Check 4 proves the STYLESHEET is internally consistent and says nothing about the components, kits, specimen cards and prompts shipped beside it — which are the files a consumer actually renders. Now every var() in all 78 of them must resolve against the sheet. Mutation-proven: pointing one card back at --border-hairline fails the build. Co-authored-by: Hanzo Dev <[email protected]>
50 lines
2.5 KiB
React
50 lines
2.5 KiB
React
import React from 'react'
|
|
|
|
/** Hover-and-click dropdown, matching the nav's Log in / Try Lux menus. */
|
|
export function DropdownMenu({ align = 'right', hover = false, trigger, style, children }) {
|
|
const [open, setOpen] = React.useState(false)
|
|
const ref = React.useRef(null)
|
|
React.useEffect(() => {
|
|
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
|
|
document.addEventListener('mousedown', onDoc)
|
|
return () => document.removeEventListener('mousedown', onDoc)
|
|
}, [])
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
onMouseEnter={hover ? () => setOpen(true) : undefined}
|
|
onMouseLeave={hover ? () => setOpen(false) : undefined}
|
|
style={{position:'relative',display:'inline-flex',...style}}
|
|
>
|
|
<span onClick={() => setOpen((v) => !v)} style={{display:'inline-flex'}}>{trigger}</span>
|
|
{open && (
|
|
<div style={{position:'absolute',top:'100%',[align]:0,paddingTop:12,zIndex:70,minWidth:208}}>
|
|
<div style={{display:'flex',flexDirection:'column',padding:8,background:'var(--surface-overlay)',border:'1px solid var(--border)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',animation:'lux-fade-down var(--duration-fast) var(--ease-out)'}}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function DropdownMenuItem({ desc, style, children, ...rest }) {
|
|
const [hover, setHover] = React.useState(false)
|
|
return (
|
|
<a
|
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
|
style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--neutral-900)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
|
|
{...rest}
|
|
>
|
|
<span style={{display:'block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--neutral-100)'}}>{children}</span>
|
|
{desc && <span style={{display:'block',marginTop:2,fontSize:'var(--text-xs)',color:'var(--neutral-500)'}}>{desc}</span>}
|
|
</a>
|
|
)
|
|
}
|
|
export function DropdownMenuLabel({ style, children, ...rest }) {
|
|
return <span style={{padding:'6px 12px',fontSize:'var(--text-xs)',fontWeight:'var(--weight-medium)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)',color:'var(--neutral-500)',...style}} {...rest}>{children}</span>
|
|
}
|
|
export function DropdownMenuSeparator({ style }) {
|
|
return <span style={{height:1,margin:'6px 4px',background:'var(--border)',...style}} />
|
|
}
|