Modal Components

import { Modal } from "@repo/ui";
import { useState } from "react";

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        description="This is a description of the modal"
      >
        <p>Modal content goes here</p>
      </Modal>
    </>
  );
}

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  Content
</Modal>

// Automatically included - no need to add your own
<Modal isOpen={isOpen} onClose={handleClose}>
  Content
</Modal>

import { ConfirmDialog } from "@repo/ui";
import { useState } from "react";

function DeleteButton() {
  const [showConfirm, setShowConfirm] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  
  const handleDelete = async () => {
    setIsDeleting(true);
    await deleteItem();
    setIsDeleting(false);
    setShowConfirm(false);
  };
  
  return (
    <>
      <button onClick={() => setShowConfirm(true)}>Delete</button>
      
      <ConfirmDialog
        isOpen={showConfirm}
        onClose={() => setShowConfirm(false)}
        onConfirm={handleDelete}
        title="Delete Item"
        message="Are you sure you want to delete this item? This action cannot be undone."
        confirmText="Delete"
        cancelText="Cancel"
        variant="danger"
        isLoading={isDeleting}
      />
    </>
  );
}

import { Modal, ConfirmDialog, Button } from "@repo/ui";
import { useState } from "react";

function UserProfile() {
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [name, setName] = useState("John Doe");
  
  const handleSave = () => {
    // Save logic
    setEditOpen(false);
  };
  
  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteUser();
      // Handle success
    } finally {
      setIsDeleting(false);
      setDeleteOpen(false);
    }
  };
  
  return (
    <div>
      <h1>{name}</h1>
      
      <div className="flex gap-2">
        <Button onClick={() => setEditOpen(true)}>Edit Profile</Button>
        <Button 
          variant="destructive"
          onClick={() => setDeleteOpen(true)}
        >
          Delete Account
        </Button>
      </div>
      
      {/* Edit Modal */}
      <Modal
        isOpen={editOpen}
        onClose={() => setEditOpen(false)}
        title="Edit Profile"
        description="Update your profile information"
        size="md"
      >
        <div className="space-y-4">
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full p-2 border rounded"
          />
          <div className="flex gap-2 justify-end">
            <Button variant="outline" onClick={() => setEditOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave}>Save Changes</Button>
          </div>
        </div>
      </Modal>
      
      {/* Delete Confirmation */}
      <ConfirmDialog
        isOpen={deleteOpen}
        onClose={() => setDeleteOpen(false)}
        onConfirm={handleDelete}
        title="Delete Account"
        message="Are you sure you want to delete your account? This action cannot be undone and all your data will be permanently removed."
        confirmText="Delete Account"
        cancelText="Keep Account"
        variant="danger"
        isLoading={isDeleting}
      />
    </div>
  );
}

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  description?: string;
  children: React.ReactNode;
  size?: "sm" | "md" | "lg" | "xl";
}

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  variant?: "danger" | "warning" | "info";
  isLoading?: boolean;
}