<!-- handoff copy (card tag removed) -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../styles.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="../../_ds_bundle.js"></script>
<style>
  body { padding: 18px 22px; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Input, Select, Checkbox, Radio, Switch } = window.CommiTeaDesignSystem_20e63b;

function Demo() {
  const [est, setEst] = React.useState('est/3d');
  const [inc, setInc] = React.useState(true);
  const [dl, setDl] = React.useState('hard');
  const [svc, setSvc] = React.useState(true);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 20px' }}>
      <Input label="Gitea base URL" icon="link" mono defaultValue="https://gitea.stephenmann.io" />
      <Input label="Milestone name" placeholder="Beta" error="Every milestone needs a name. Even a bad one." />
      <Select label="Estimate" options={['est/1d','est/2d','est/3d','est/5d','est/8d'].map(v => ({ value: v, label: v }))}
              value={est} onChange={(e) => setEst(e.target.value)} />
      <Input label="Search" icon="search" placeholder="Search the pot…" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Checkbox label="Include closed issues" checked={inc} onChange={(e) => setInc(e.target.checked)} />
        <Checkbox label="Disabled option" disabled />
        <Switch label="Morning service" checked={svc} onChange={(e) => setSvc(e.target.checked)} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Radio name="dl" value="hard" label="Hard deadline" checked={dl === 'hard'} onChange={() => setDl('hard')} />
        <Radio name="dl" value="soft" label="Soft deadline" checked={dl === 'soft'} onChange={() => setDl('soft')} />
        <Switch label="Off state" />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
</script>
</body>
</html>
