Drawer

import { Drawer, Button } from 'fluxo-ui';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  header="Drawer Title"
>
  <p>Drawer body content goes here.</p>
</Drawer>

import { Drawer } from 'fluxo-ui';
import type { DrawerPosition } from 'fluxo-ui';

<Drawer open={open} onClose={close} position="left" header="Left Drawer">
  ...
</Drawer>

<Drawer open={open} onClose={close} position="top" header="Top Drawer" size="300px">
  ...
</Drawer>

<Drawer open={open} onClose={close} position="bottom" header="Bottom Drawer" size="300px">
  ...
</Drawer>

import { Drawer, Button, TextInput } from 'fluxo-ui';

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  header="Edit Profile"
  footer={
    <div className="flex gap-2 justify-end">
      <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="primary" onClick={handleSave}>Save</Button>
    </div>
  }
  size="480px"
>
  <form className="space-y-4">
    <TextInput label="Full Name" value={name} onChange={setName} />
    <TextInput label="Email" value={email} onChange={setEmail} />
  </form>
</Drawer>