Modal

import { ThemeProvider, Modal } from '@vaneui/ui';

<ThemeProvider themeDefaults={{
  modal: { lg: true, border: true },
}}>
  <Modal open={open} onClose={onClose}>Content</Modal>
</ThemeProvider>

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

<Button onClick={() => setOpen(true)}>Open Modal</Button>
<Modal open={open} onClose={() => setOpen(false)}>
  <Stack>
    <Text bold>Confirm Action</Text>
    <Text>Are you sure?</Text>
    <Row justifyEnd>
      <Button onClick={() => setOpen(false)}>Cancel</Button>
      <Button primary filled onClick={() => setOpen(false)}>Confirm</Button>
    </Row>
  </Stack>
</Modal>

import { Modal, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, Button, Title, Input, Label, Stack } from "@vaneui/ui";

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

<Modal open={open} onClose={() => setOpen(false)}>
  <ModalHeader>
    <Title>Edit Profile</Title>
    <ModalCloseButton />
  </ModalHeader>
  <ModalBody>
    <Stack>
      <Label>Name</Label>
      <Input placeholder="Enter your name" />
      <Label>Email</Label>
      <Input placeholder="Enter your email" />
    </Stack>
  </ModalBody>
  <ModalFooter>
    <Button sm onClick={() => setOpen(false)}>Cancel</Button>
    <Button sm primary filled onClick={() => setOpen(false)}>Save</Button>
  </ModalFooter>
</Modal>

import { Modal, Button, Text, Row } from "@vaneui/ui";

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

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Quick Confirmation"
  footer={
    <Row justifyEnd>
      <Button sm onClick={() => setOpen(false)}>Cancel</Button>
      <Button sm primary filled onClick={() => setOpen(false)}>Confirm</Button>
    </Row>
  }
>
  <Text>Are you sure you want to proceed?</Text>
</Modal>

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

<Button danger filled onClick={() => setOpen(true)}>Delete Account</Button>
<Modal
  open={open}
  onClose={() => setOpen(false)}
  closeOnOverlayClick={false}
  title="Delete account?"
  footer={
    <Row justifyEnd>
      <Button sm onClick={() => setOpen(false)}>Cancel</Button>
      <Button sm danger filled onClick={() => setOpen(false)}>Delete</Button>
    </Row>
  }
>
  <Text>This action is permanent and cannot be undone.</Text>
</Modal>

const [open, setOpen] = useState(false);
const nameRef = useRef<HTMLInputElement>(null);

<Button onClick={() => setOpen(true)}>Edit Profile</Button>
<Modal
  open={open}
  onClose={() => setOpen(false)}
  initialFocus={nameRef}
  title="Edit Profile"
  footer={
    <Row justifyEnd>
      <Button sm onClick={() => setOpen(false)}>Cancel</Button>
      <Button sm primary filled onClick={() => setOpen(false)}>Save</Button>
    </Row>
  }
>
  <Stack>
    <Label>Name</Label>
    <Input ref={nameRef} placeholder="Enter your name" />
    <Label>Email</Label>
    <Input type="email" placeholder="you@example.com" />
    <Checkbox>Send me email updates</Checkbox>
  </Stack>
</Modal>

<Modal open={open} onClose={onClose} sm>Small modal</Modal>
<Modal open={open} onClose={onClose} lg>Large modal</Modal>

<Modal open={open} onClose={onClose} primary filled>Primary modal</Modal>
<Modal open={open} onClose={onClose} danger filled>Danger modal</Modal>

<Modal open={open} onClose={onClose} overlayProps={{ blur: true }}>
  <Text>Blurred background</Text>
</Modal>

<Modal
  open={open}
  onClose={onClose}
  closeOnOverlayClick={false}
  closeOnEscape={false}
>
  <Text>Must click a button to close</Text>
</Modal>

<Modal open={open} onClose={() => setOpen(false)} fullScreen>
  <ModalHeader>
    <Title>Full Screen View</Title>
    <ModalCloseButton />
  </ModalHeader>
  <ModalBody>
    <Text>Content fills the entire viewport.</Text>
  </ModalBody>
</Modal>

{/* Custom focus target */}
<Modal open={open} onClose={onClose} initialFocus={inputRef}>
  <Input ref={inputRef} placeholder="Auto-focused" />
</Modal>

{/* Keep mounted for animation or state preservation */}
<Modal open={open} onClose={onClose} keepMounted transitionDuration={300}>
  <Text>Stays in DOM when closed</Text>
</Modal>