Dialog

import { Button } from "@brijbyte/agentic-ui/button";
import { Dialog } from "@brijbyte/agentic-ui/dialog";
import { Input } from "@brijbyte/agentic-ui/input";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/dialog.css";
import "@brijbyte/agentic-ui/input.css";

export default function HighLevelDemo() {
  return (
    <>
      <Dialog
        trigger={<Button>Confirm dialog</Button>}
        title="Confirm action"
        description="Are you sure you want to delete this resource? This action cannot be undone."
        footerStart={
          <Button variant="soft" tone="destructive" size="sm">
            Delete
          </Button>
        }
        footer={
          <Button variant="ghost" size="sm">
            Cancel
          </Button>
        }
      />

      <Dialog
        trigger={<Button variant="outline">API Settings</Button>}
        title="API Settings"
        description="Configure your API endpoint and credentials."
        footer={
          <>
            <Button variant="ghost" size="sm">
              Cancel
            </Button>
            <Button size="sm">Save changes</Button>
          </>
        }
      >
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
          <Input defaultValue="https://api.example.com/v1" />
          <Input type="password" placeholder="sk-…" />
        </div>
      </Dialog>
    </>
  );
}

import { Dialog as BaseDialog } from "@base-ui/react/dialog";
import { Button } from "@brijbyte/agentic-ui/button";
import { DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogDescription, DialogClose } from "@brijbyte/agentic-ui/dialog";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/dialog.css";

export default function ComposedDemo() {
  return (
    <BaseDialog.Root>
      <BaseDialog.Trigger render={<Button variant="outline">Composed dialog</Button>} />
      <BaseDialog.Portal>
        <DialogBackdrop />
        <DialogViewport>
          <DialogPopup>
            <DialogTitle>Composed with base-ui Root</DialogTitle>
            <DialogDescription>Raw base-ui Root combined with styled parts from agentic-ui.</DialogDescription>
            <DialogClose aria-label="Close">✕</DialogClose>
          </DialogPopup>
        </DialogViewport>
      </BaseDialog.Portal>
    </BaseDialog.Root>
  );
}