Overlays

import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
} from "@solarius/onset";
import { useState } from "react";

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open settings</Button>
      <Modal open={open} onClose={() => setOpen(false)} width={480}>
        <ModalHeader sub="Account preferences" onClose={() => setOpen(false)}>
          Settings
        </ModalHeader>
        <ModalBody>
          <p>Configure your account settings here.</p>
        </ModalBody>
        <ModalFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Save
          </Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

import {
  Drawer,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  Button,
} from "@solarius/onset";
import { useState } from "react";

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>View details</Button>
      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        side="right"
        width={420}
      >
        <DrawerHeader sub="node—i-0a1b2c3d" onClose={() => setOpen(false)}>
          web-prod-01
        </DrawerHeader>
        <DrawerBody>
          <p>Detailed resource information…</p>
        </DrawerBody>
        <DrawerFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>
            Close
          </Button>
        </DrawerFooter>
      </Drawer>
    </>
  );
}

import { AlertDialog, Button } from "@solarius/onset";
import type { AlertTone } from "@solarius/onset";
import { useState } from "react";

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

  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>
        Delete cluster
      </Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={() => deleteCluster()}
        title="Delete cluster"
        description="This action is irreversible. All data, backups, and logs will be permanently removed."
        tone="danger"
        confirmLabel="Delete"
        confirmText="web-prod-01"
      >
        <p>Cluster web-prod-01 has 3 active nodes and 12 TB of data.</p>
      </AlertDialog>
    </>
  );
}

import {
  PopoverPanel,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  Button,
  Input,
} from "@solarius/onset";

function FilterPopover() {
  return (
    <PopoverPanel
      trigger={<Button variant="outline">Filters</Button>}
      placement="bottom-start"
      width={300}
    >
      {({ close }) => (
        <>
          <PopoverHeader right={<button onClick={close}>×</button>}>
            Filters
          </PopoverHeader>
          <PopoverBody>
            <Input placeholder="Search…" mono />
          </PopoverBody>
          <PopoverFooter>
            <Button variant="ghost" size="sm" onClick={close}>
              Clear
            </Button>
            <Button variant="primary" size="sm" onClick={close}>
              Apply
            </Button>
          </PopoverFooter>
        </>
      )}
    </PopoverPanel>
  );
}

import {
  HoverCard,
  HoverCardHeader,
  HoverCardBody,
  HoverCardStats,
  Avatar,
  Button,
} from "@solarius/onset";
import { IconUser } from "@tabler/icons-react";

function UserCard() {
  return (
    <HoverCard
      trigger={<Button variant="ghost">@janedoe</Button>}
      placement="bottom-start"
    >
      <HoverCardHeader
        media={<Avatar initials="JD" size="sm" />}
        title="Jane Doe"
        subtitle="@janedoe"
        action={
          <Button variant="ghost" size="sm">
            Follow
          </Button>
        }
      />
      <HoverCardBody>
        Senior infrastructure engineer. Works on the platform team.
      </HoverCardBody>
      <HoverCardStats
        stats={[
          { label: "Repos", value: "24" },
          { label: "Commits", value: "1.2K" },
          { label: "Teams", value: "3" },
        ]}
      />
    </HoverCard>
  );
}

import { Tooltip } from "@solarius/onset";

<Tooltip content="Delete this item" side="bottom">
  <button>🗑</button>
</Tooltip>;

import { DropdownMenu, MenuItem, MenuDivider } from "@solarius/onset";
import { IconDownload, IconCopy, IconTrash } from "@tabler/icons-react";

function MoreMenu() {
  return (
    <DropdownMenu
      trigger={
        <Button variant="ghost" size="sm">
          Actions ▾
        </Button>
      }
      placement="bottom-end"
    >
      <MenuItem icon={<IconDownload size={13} />} shortcut="⌘D">
        Download
      </MenuItem>
      <MenuItem icon={<IconCopy size={13} />} shortcut="⌘C">
        Copy
      </MenuItem>
      <MenuDivider />
      <MenuItem icon={<IconTrash size={13} />} danger shortcut="⌘⌫">
        Delete
      </MenuItem>
    </DropdownMenu>
  );
}

import {
  ContextMenuArea,
  ContextMenu,
  MenuItem,
  MenuDivider,
} from "@solarius/onset";
import { IconCopy, IconEdit, IconTrash } from "@tabler/icons-react";

function EditableRow() {
  return (
    <ContextMenuArea
      menu={
        <>
          <MenuItem icon={<IconEdit size={13} />}>Edit</MenuItem>
          <MenuItem icon={<IconCopy size={13} />}>Duplicate</MenuItem>
          <MenuDivider />
          <MenuItem icon={<IconTrash size={13} />} danger>
            Delete
          </MenuItem>
        </>
      }
    >
      <div>Right-click this row to see the context menu.</div>
    </ContextMenuArea>
  );
}

import {
  SettingsModal,
  SettingsGroup,
  SettingsRow,
  Switch,
} from "@solarius/onset";
import type { SettingsSection } from "@solarius/onset";
import { IconUserCircle, IconBell } from "@tabler/icons-react";
import { useState } from "react";

const sections: SettingsSection[] = [
  {
    id: "profile",
    label: "Profile",
    icon: <IconUserCircle size={15} />,
    group: "Account",
  },
  {
    id: "notifications",
    label: "Notifications",
    icon: <IconBell size={15} />,
    group: "Account",
  },
];

function Settings() {
  const [open, setOpen] = useState(false);
  const [section, setSection] = useState("profile");

  return (
    <SettingsModal
      open={open}
      onClose={() => setOpen(false)}
      sections={sections}
      activeSection={section}
      onSectionChange={setSection}
      search
    >
      {section === "notifications" && (
        <SettingsGroup title="Alerts">
          <SettingsRow
            label="Disputes opened"
            description="A cardholder opened a chargeback."
          >
            <Switch checked onChange={() => {}} />
          </SettingsRow>
        </SettingsGroup>
      )}
    </SettingsModal>
  );
}

import { CommandPalette, useCommandK } from "@solarius/onset";
import type { Command, CommandGroup } from "@solarius/onset";
import {
  IconDashboard,
  IconSettings,
  IconUser,
  IconServer,
} from "@tabler/icons-react";
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);
  useCommandK(() => setOpen(true));

  const groups: CommandGroup[] = [
    {
      label: "Navigation",
      commands: [
        {
          id: "dashboard",
          label: "Dashboard",
          icon: <IconDashboard size={13} />,
          hint: "Navigation",
        },
        {
          id: "settings",
          label: "Settings",
          icon: <IconSettings size={13} />,
          hint: "Navigation",
        },
      ],
    },
    {
      label: "Actions",
      commands: [
        {
          id: "new-user",
          label: "New user",
          icon: <IconUser size={13} />,
          keywords: "add create invite",
        },
        {
          id: "new-node",
          label: "New node",
          icon: <IconServer size={13} />,
          keywords: "add create provision",
        },
      ],
    },
  ];

  return (
    <CommandPalette
      open={open}
      onClose={() => setOpen(false)}
      groups={groups}
      onRun={(cmd) => {
        console.log("Running:", cmd.id);
        // Navigate or dispatch based on cmd.id
      }}
    />
  );
}