app/components/button.tsx Example +16 1 'use client' ; 2 3 import { useState, type FormEvent } from 'react' ; 4 import { Button, Input, Select } from '@helios-ui/react' ; 5 import '@helios-ui/react/styles.css' ; 6 7 /** A reusable local React form. No service connection is required. */ 8 export default function Example() { 9 const [project, setProject] = useState( 'Helios UI' ); 10 const [variant, setVariant] = useState< 'primary' | 'secondary' >( 'primary' ); 11 const [updates, setUpdates] = useState<string[]>([]); 12 13 function saveProject(event: FormEvent<HTMLFormElement>) { 14 event.preventDefault(); 15 if (!project.trim()) return ; 16 setUpdates(previous => [project.trim(), ...previous]); 17 } 18 19 return ( 20 <main style={{ maxWidth: 720, padding: 24, margin: 'auto' }}> 21 <header> 22 <h1>Component playground</h1> 23 <p>Build accessible interfaces with shared React components.</p> 24 </header> 25 26 <section aria-labelledby= "project-heading" > 27 <h2 id= "project-heading" >Your project</h2> 28 <form onSubmit={saveProject}> 29 <Input 30 label= "Project name" 31 required 32 value={project} 33 onChange={event => setProject(event.target.value)} 34 /> 35 <Select 36 label= "Button style" 37 value={variant} 38 options={[ 39 { value: 'primary' , label: 'Primary' }, 40 { value: 'secondary' , label: 'Secondary' }, 41 ]} 42 onChange={event => setVariant( 43 event.target.value === 'secondary' ? 'secondary' : 'primary' 44 )} 45 /> 46 <Button type = "submit" variant={variant}> 47 Save project 48 </Button> 49 </form> 50 </section> 51 52 <section aria-label= "Saved projects" aria-live= "polite" > 53 <h2>Recent updates</h2> 54 {updates.length ? ( 55 <ul>{updates.map((name, index) => <li key={index}>{name}</li>)}</ul> 56 ) : ( 57 <p>No saved projects yet. Submit the form to create one.</p> 58 )} 59 </section> 60 </main> 61 ); 62 } 63 components/theme-toggle.tsx Example +16 1 import { useState } from 'react' ; 2 import { Button } from '@helios-ui/react' ; 3 4 export function ThemeToggle() { 5 const [dark, setDark] = useState(false); 6 return <Button onClick={() => setDark(!dark)}> 7 {dark ? 'Dark' : 'Light' } 8 </Button>; 9 } styles/tokens.css Example +16 1 :root { 2 --surface: #ffffff; 3 --text: #121212; 4 --accent: #2b7fff; 5 } 6 [data-theme= "dark" ] { 7 --surface: #262626; 8 --text: #f7f7f7; 9 } app/layout.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/input.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/button.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/dialog.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/select.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/tabs.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; components/checkbox.tsx Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; lib/utils.ts Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ; index.ts Reference +0 1 export { Button, Input, Select, Dialog } from '@helios-ui/react' ;