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.
39 lines
2.9 KiB
HTML
39 lines
2.9 KiB
HTML
<!-- @dsCard group="Components" viewport="700x300" name="Forms" subtitle="Input, Label, Textarea, Checkbox, Select, Slider" -->
|
|
<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Form components</title>
|
|
<link rel="stylesheet" href="../../styles.css">
|
|
<script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/[email protected]/dist/umd/lucide.js"></script>
|
|
<script src="../../_ds_bundle.js"></script>
|
|
<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:14px}.lbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--neutral-600)}</style></head><body><div id="root"></div>
|
|
<script type="text/babel">
|
|
const { Input, Label, Textarea, Checkbox, Select, Slider, Icon } = window.LuxDesignSystem_0a9445;
|
|
function Demo(){
|
|
const [seats,setSeats] = React.useState(24);
|
|
return (<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
|
|
<div className="col">
|
|
<div><Label htmlFor="a" required>Organization name</Label><div style={{height:8}} /><Input id="a" defaultValue="Lux Network" /></div>
|
|
<div style={{position:'relative'}}>
|
|
<Icon name="Search" size={16} color="var(--text-helper)" style={{position:'absolute',left:12,top:10}} />
|
|
<Input placeholder="Search agents…" style={{paddingLeft:36}} />
|
|
</div>
|
|
<Input placeholder="[email protected]" invalid defaultValue="not-an-email" />
|
|
<div className="row" style={{gap:20}}>
|
|
<Checkbox label="Auto-recharge" defaultChecked />
|
|
<Checkbox label="Email receipts" />
|
|
</div>
|
|
</div>
|
|
<div className="col">
|
|
<div><Label htmlFor="m">Default model</Label><div style={{height:8}} /><Select id="m" options={[{value:'flash',label:'Lux Flash'},{value:'pro',label:'Lux Pro'},{value:'ultra',label:'Lux Ultra'}]} /></div>
|
|
<Textarea rows={3} placeholder="System prompt…" />
|
|
<div>
|
|
<div style={{display:'flex',justifyContent:'space-between',fontSize:'var(--text-sm)',color:'var(--text-secondary)'}}><span>Seats</span><span style={{color:'#fff'}}>{seats}</span></div>
|
|
<div style={{height:8}} />
|
|
<Slider min={1} max={200} value={seats} onChange={setSeats} />
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
}
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
|
|
</script></body></html> |