useDisclosure

import { useDisclosure } from '@kivora/react';

function Example() {
  const { isOpen, open, close, toggle } = useDisclosure();

  return (
    <>
      <Button onClick={open}>Open Modal</Button>
      <Modal open={isOpen} onClose={close}>
        <p>Modal content</p>
        <Button onClick={close}>Close</Button>
      </Modal>
    </>
  );
}

import { useDisclosure } from '@kivora/react';

function DeleteConfirmation() {
  const { isOpen, open, close } = useDisclosure();

  return (
    <>
      <Button onClick={open} color="danger">Delete</Button>
      <Modal open={isOpen} onClose={close}>
        <h2>Confirm Deletion</h2>
        <p>Are you sure you want to delete this item?</p>
        <Button onClick={close}>Cancel</Button>
        <Button onClick={() => {
          // Perform delete
          close();
        }}>Delete</Button>
      </Modal>
    </>
  );
}

import { useDisclosure } from '@kivora/react';

function UserMenu() {
  const { isOpen, toggle, close } = useDisclosure();

  return (
    <div>
      <Button onClick={toggle}>Menu</Button>
      {isOpen && (
        <Dropdown onClickOutside={close}>
          <MenuItem>Profile</MenuItem>
          <MenuItem>Settings</MenuItem>
          <MenuItem>Logout</MenuItem>
        </Dropdown>
      )}
    </div>
  );
}

import { useDisclosure } from '@kivora/react';

function Sidebar() {
  // Start with drawer open
  const { isOpen, close, toggle } = useDisclosure(true);

  return (
    <>
      <Button onClick={toggle}>
        {isOpen ? 'Close' : 'Open'} Sidebar
      </Button>
      <Drawer open={isOpen} onClose={close}>
        <nav>
          <a href="/home">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </nav>
      </Drawer>
    </>
  );
}

interface UseDisclosureReturn {
  isOpen: boolean;
  open: () => void;
  close: () => void;
  toggle: () => void;
}

function useDisclosure(initialState?: boolean): UseDisclosureReturn;