Dialog

import { useState } from "react";
import {
  Button, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Field, Input,
} from "@arcadia/ui";

function AsyncSave() {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [name, setName] = useState("Acme web");
  const save = async () => {
    setSaving(true);
    await saveName(name);
    setSaving(false);
    setOpen(false);
  };
  return (
    <Dialog open={open} onOpenChange={(next) => !saving && setOpen(next)}>
      <DialogTrigger render={<Button variant="outline">Rename: {name}</Button>} />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rename project</DialogTitle>
          <DialogDescription>Saved for everyone in this workspace.</DialogDescription>
        </DialogHeader>
        <DialogBody>
          <Field label="Name">
            <Input value={name} onChange={(e) => setName(e.target.value)} disabled={saving} />
          </Field>
        </DialogBody>
        <DialogFooter>
          <DialogClose render={<Button disabled={saving}>Cancel</Button>} />
          <Button variant="primary" loading={saving} onClick={save}>Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

import {
  Button, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Switch,
} from "@arcadia/ui";

<Dialog>
  <DialogTrigger render={<Button variant="outline">Notification settings</Button>} />
  <DialogContent size="lg">
    <DialogHeader>
      <DialogTitle>Notifications</DialogTitle>
      <DialogDescription>Changes apply to every chat in this workspace.</DialogDescription>
    </DialogHeader>
    <DialogBody className="cmp-settings" style={settingsBodyStyle}>
      <Switch
        label="Chime when a turn ends"
        description="Plays in background tabs only"
        defaultChecked
        rootStyle={cmp.settingsChild as never}
      />
      <Switch label="Reduce motion" description="Follows the system while off"
        rootStyle={[cmp.settingsChild, cmp.settingsRest] as never} />
      <Switch label="Send with ⌘⏎"
        rootStyle={[cmp.settingsChild, cmp.settingsRest] as never} />
      <Switch label="Show token usage" defaultChecked
        rootStyle={[cmp.settingsChild, cmp.settingsRest] as never} />
    </DialogBody>
    <DialogFooter divided>
      <DialogClose render={<Button>Cancel</Button>} />
      <DialogClose render={<Button variant="primary">Save</Button>} />
    </DialogFooter>
  </DialogContent>
</Dialog>