@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/feedback/InlineCallout/InlineCallout.tsx

@@ -0,0 +1,81 @@
+import { Alert, Button, Link, type AlertTone } from '@gntik-ai/ui';
+import type { LucideIcon } from '@gntik-ai/icons';
+import { useState, type ReactNode } from 'react';
+import type { FeedbackAction } from '../types';
+
+export interface InlineCalloutProps {
+  tone?: AlertTone;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Buttons (or links when `href` is set) under the text; the first is the main one. */
+  actions?: FeedbackAction[];
+  /** Replaces the tone icon; `null` hides it. */
+  icon?: LucideIcon | null;
+  /** Shows a dismiss button; the callout hides itself unless `open` is controlled. */
+  dismissible?: boolean;
+  open?: boolean;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+const inlineCalloutDefaultActions: FeedbackAction[] = [
+  { label: 'Upgrade plan', variant: 'secondary' },
+  { label: 'View usage', href: '#usage' },
+];
+
+/** In-content callout built on Alert: tone, title, body and a row of actions. */
+export function InlineCallout({
+  tone = 'warning',
+  title = 'You have used 92% of your build minutes',
+  description = 'Builds will queue once the monthly limit is reached. Upgrade the plan or reduce concurrent builds.',
+  actions = inlineCalloutDefaultActions,
+  icon,
+  dismissible = false,
+  open,
+  onDismiss,
+  className,
+}: InlineCalloutProps) {
+  const [dismissed, setDismissed] = useState(false);
+  if (!(open ?? !dismissed)) return null;
+  return (
+    <Alert
+      tone={tone}
+      title={title}
+      description={description}
+      icon={icon}
+      className={className}
+      onDismiss={
+        dismissible
+          ? () => {
+              setDismissed(true);
+              onDismiss?.();
+            }
+          : undefined
+      }
+      actions={
+        actions.length > 0 ? (
+          <>
+            {actions.map((a, i) =>
+              a.href ? (
+                <Link key={a.id ?? a.label} href={a.href} className="text-[12.5px] font-semibold">
+                  {a.label}
+                </Link>
+              ) : (
+                <Button
+                  key={a.id ?? a.label}
+                  size="sm"
+                  variant={a.variant ?? (i === 0 ? 'secondary' : 'ghost')}
+                  icon={a.icon}
+                  disabled={a.disabled}
+                  onClick={a.onClick}
+                >
+                  {a.label}
+                </Button>
+              ),
+            )}
+          </>
+        ) : undefined
+      }
+    />
+  );
+}

package/src/feedback/InlineCallout/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Inline callout',
+  family: 'feedback',
+  status: 'beta',
+  description: 'Alert-based in-content callout with a tone, title, body, action buttons or links and optional dismiss.',
+  uses: ['Alert', 'Button', 'Link'],
+};

package/src/feedback/Skeletons/Skeletons.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { ListSkeleton, PageSkeleton, TableSkeleton } from './Skeletons';
+
+describe('Skeletons', () => {
+  it('renders the three defaults', async () => {
+    const { container } = render(
+      <>
+        <PageSkeleton />
+        <TableSkeleton />
+        <ListSkeleton />
+      </>,
+    );
+    expect(screen.getAllByRole('status')).toHaveLength(3);
+    expect(screen.getByText('Loading page')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('honours row counts and labels', () => {
+    const { container } = render(<ListSkeleton rows={7} label="Loading members" />);
+    expect(screen.getByRole('status')).toHaveTextContent('Loading members');
+    expect(screen.getByRole('status')).toHaveAttribute('aria-busy', 'true');
+    expect(container.querySelectorAll('li')).toHaveLength(7);
+  });
+});

package/src/feedback/Skeletons/Skeletons.tsx

@@ -0,0 +1,142 @@
+import { Skeleton, cn, useI18n } from '@gntik-ai/ui';
+import type { ReactNode } from 'react';
+
+/** Varying bar widths so placeholder rows don't look stamped. */
+const WIDTHS = ['w-3/5', 'w-2/5', 'w-4/5', 'w-1/2', 'w-2/3'] as const;
+const width = (i: number) => WIDTHS[i % WIDTHS.length];
+
+function LoadingRegion({ label, className, children }: { label: string; className?: string; children: ReactNode }) {
+  return (
+    <div role="status" aria-busy="true" className={className}>
+      <span className="sr-only">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+export interface TableSkeletonProps {
+  rows?: number;
+  columns?: number;
+  /** Screen-reader announcement. */
+  label?: string;
+  className?: string;
+}
+
+function TableSkeletonBody({ rows, columns }: { rows: number; columns: number }) {
+  const middle = Math.max(columns - 2, 0);
+  return (
+    <>
+      <div aria-hidden className="flex items-center gap-4 border-b border-border bg-secondary/40 px-4 py-2.5">
+        <Skeleton className="h-2.5 w-1/4" />
+        {Array.from({ length: middle }, (_, c) => (
+          <Skeleton key={c} className="hidden h-2.5 w-14 sm:block" />
+        ))}
+        <Skeleton className="ms-auto h-2.5 w-10" />
+      </div>
+      <div aria-hidden className="divide-y divide-border">
+        {Array.from({ length: rows }, (_, r) => (
+          <div key={r} className="flex items-center gap-4 px-4 py-3.5">
+            <div className="flex w-1/4 min-w-0 items-center gap-2.5">
+              <Skeleton className="size-7 shrink-0 rounded-md" />
+              <Skeleton className={cn('h-3', width(r))} />
+            </div>
+            {Array.from({ length: middle }, (_, c) =>
+              c === 1 ? (
+                <Skeleton key={c} className="hidden h-5 w-16 rounded-full sm:block" />
+              ) : (
+                <Skeleton key={c} className="hidden h-3 w-14 sm:block" />
+              ),
+            )}
+            <Skeleton className="ms-auto h-3 w-10" />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+const tableFrame = 'overflow-hidden rounded-lg border border-border bg-card';
+
+/** Table placeholder: header strip plus rows with an avatar cell, text cells and a status pill. */
+export function TableSkeleton({ rows = 5, columns = 5, label: labelProp, className }: TableSkeletonProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('loading.table');
+  return (
+    <LoadingRegion label={label} className={cn(tableFrame, className)}>
+      <TableSkeletonBody rows={rows} columns={columns} />
+    </LoadingRegion>
+  );
+}
+
+export interface ListSkeletonProps {
+  rows?: number;
+  label?: string;
+  className?: string;
+}
+
+/** List placeholder: avatar, two text lines, a pill and a row action. */
+export function ListSkeleton({ rows = 4, label: labelProp, className }: ListSkeletonProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('loading.list');
+  return (
+    <LoadingRegion label={label} className={cn('overflow-hidden rounded-lg border border-border bg-card', className)}>
+      <ul aria-hidden className="divide-y divide-border">
+        {Array.from({ length: rows }, (_, i) => (
+          <li key={i} className="flex items-center gap-3 px-4 py-3.5">
+            <Skeleton shape="circle" className="size-9" />
+            <div className="min-w-0 flex-1 space-y-2">
+              <Skeleton className={cn('h-3', width(i + 2))} />
+              <Skeleton className="h-2.5 w-2/5" />
+            </div>
+            <Skeleton className="hidden h-5 w-14 rounded-full sm:block" />
+            <Skeleton className="size-7 shrink-0 rounded-md" />
+          </li>
+        ))}
+      </ul>
+    </LoadingRegion>
+  );
+}
+
+export interface PageSkeletonProps {
+  /** Number of stat cards. */
+  stats?: number;
+  /** Rows of the table under the stats. */
+  rows?: number;
+  label?: string;
+  className?: string;
+}
+
+/** Whole-page placeholder: header (title, meta, actions), a stat row and a table. */
+export function PageSkeleton({ stats = 4, rows = 5, label: labelProp, className }: PageSkeletonProps) {
+  const { t } = useI18n();
+  const label = labelProp ?? t('loading.page');
+  return (
+    <LoadingRegion label={label} className={cn('space-y-6', className)}>
+      <div aria-hidden className="flex flex-wrap items-end justify-between gap-4">
+        <div className="min-w-0 flex-1 space-y-3">
+          <Skeleton className="h-2.5 w-24" />
+          <Skeleton className="h-7 w-56 max-w-full" />
+          <Skeleton className="h-3 w-80 max-w-full" />
+        </div>
+        <div className="flex gap-2.5">
+          <Skeleton className="h-9 w-24 rounded-lg" />
+          <Skeleton className="h-9 w-32 rounded-lg" />
+        </div>
+      </div>
+      {stats > 0 && (
+        <div aria-hidden className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          {Array.from({ length: stats }, (_, i) => (
+            <div key={i} className="rounded-lg border border-border bg-card p-4">
+              <Skeleton className="h-2.5 w-20" />
+              <Skeleton className="mt-3.5 h-7 w-24" />
+              <Skeleton className="mt-3 h-2.5 w-14" />
+            </div>
+          ))}
+        </div>
+      )}
+      <div className={tableFrame}>
+        <TableSkeletonBody rows={rows} columns={5} />
+      </div>
+    </LoadingRegion>
+  );
+}

package/src/feedback/Skeletons/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Skeletons',
+  family: 'feedback',
+  status: 'beta',
+  description:
+    'Loading placeholders for a whole page, a table and a list; each announces loading once via role="status".',
+  uses: ['Skeleton'],
+};

package/src/feedback/SystemBanner/SystemBanner.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SystemBanner } from './SystemBanner';
+
+describe('SystemBanner', () => {
+  it('renders the default maintenance banner', async () => {
+    const { container } = render(<SystemBanner />);
+    expect(screen.getByRole('status')).toHaveTextContent('Scheduled maintenance.');
+    expect(screen.getByRole('link', { name: 'View details' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('announces incidents assertively and hides on dismiss', async () => {
+    const onDismiss = vi.fn();
+    render(
+      <SystemBanner
+        kind="incident"
+        title="Degraded API."
+        message="Elevated error rates in eu-west-1."
+        onDismiss={onDismiss}
+      />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Degraded API.');
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Dismiss banner' }));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+});

package/src/feedback/SystemBanner/SystemBanner.tsx

@@ -0,0 +1,105 @@
+import { CircleAlert, Info, Wrench, X } from '@gntik-ai/icons';
+import type { LucideIcon } from '@gntik-ai/icons';
+import { Button, IconButton, Link, cn } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+import type { FeedbackAction } from '../types';
+
+export type SystemBannerKind = 'maintenance' | 'incident' | 'info';
+
+const KIND: Record<SystemBannerKind, { root: string; accent: string; icon: LucideIcon }> = {
+  info: { root: 'border-info/25 bg-info/10', accent: 'text-foreground', icon: Info },
+  maintenance: { root: 'border-warning/30 bg-warning/10', accent: 'text-warning-text', icon: Wrench },
+  incident: { root: 'border-destructive/30 bg-destructive/10', accent: 'text-destructive-text', icon: CircleAlert },
+};
+const ICON_TONE: Record<SystemBannerKind, string> = {
+  info: 'text-info',
+  maintenance: 'text-warning-text',
+  incident: 'text-destructive-text',
+};
+
+export interface SystemBannerProps {
+  kind?: SystemBannerKind;
+  /** Bold lead-in. */
+  title?: ReactNode;
+  message?: ReactNode;
+  /** Optional call to action (status page, details). */
+  action?: FeedbackAction | null;
+  /** Shows a dismiss button. Incidents are usually not dismissible. */
+  dismissible?: boolean;
+  /** Controlled visibility; omit to let the banner hide itself on dismiss. */
+  open?: boolean;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+/**
+ * Full-width banner above the app chrome for system-wide notices. Incidents are announced
+ * assertively (role="alert"); maintenance and info politely (role="status").
+ */
+export function SystemBanner({
+  kind = 'maintenance',
+  title = 'Scheduled maintenance.',
+  message = 'Services restart zone by zone on Jul 2 at 02:00 UTC. No downtime expected.',
+  action = { label: 'View details', href: '#status' },
+  dismissible = true,
+  open,
+  onDismiss,
+  className,
+}: SystemBannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+  if (!(open ?? !dismissed)) return null;
+  const k = KIND[kind];
+  const Icon = k.icon;
+  return (
+    <div
+      role={kind === 'incident' ? 'alert' : 'status'}
+      data-kind={kind}
+      className={cn(
+        'flex w-full flex-col gap-2.5 border-b px-4 py-2.5 sm:flex-row sm:items-center sm:gap-4 sm:px-6',
+        k.root,
+        className,
+      )}
+    >
+      <div className="flex min-w-0 flex-1 items-start gap-3 sm:items-center">
+        <Icon size={17} strokeWidth={1.9} aria-hidden className={cn('mt-0.5 shrink-0 sm:mt-0', ICON_TONE[kind])} />
+        <p className="min-w-0 text-[13px] leading-6 text-foreground">
+          {title != null && <span className={cn('font-semibold', k.accent)}>{title} </span>}
+          {message}
+        </p>
+      </div>
+      {(action || dismissible) && (
+        <div className="flex shrink-0 items-center gap-2 ps-7 sm:ps-0">
+          {action &&
+            (action.href ? (
+              <Link href={action.href} className="text-[12.5px] font-semibold">
+                {action.label}
+              </Link>
+            ) : (
+              <Button
+                size="sm"
+                variant={action.variant ?? 'secondary'}
+                icon={action.icon}
+                disabled={action.disabled}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            ))}
+          {dismissible && (
+            <IconButton
+              icon={X}
+              label="Dismiss banner"
+              size="sm"
+              variant="ghost"
+              className="ms-auto"
+              onClick={() => {
+                setDismissed(true);
+                onDismiss?.();
+              }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/feedback/SystemBanner/block.meta.ts

@@ -0,0 +1,9 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'System banner',
+  family: 'feedback',
+  status: 'beta',
+  description: 'Full-width, dismissible banner for maintenance windows, incidents and system-wide notices.',
+  uses: ['Button', 'Link'],
+};

package/src/feedback/index.ts

@@ -0,0 +1,14 @@
+export type { FeedbackAction } from './types';
+export * from './SystemBanner/SystemBanner';
+export { meta as systemBannerMeta } from './SystemBanner/block.meta';
+export * from './InlineCallout/InlineCallout';
+export { meta as inlineCalloutMeta } from './InlineCallout/block.meta';
+export * from './EmptyStates/EmptyStates';
+export * from './EmptyStates/fixtures';
+export { meta as emptyStatesMeta } from './EmptyStates/block.meta';
+export * from './Skeletons/Skeletons';
+export { meta as skeletonsMeta } from './Skeletons/block.meta';
+export * from './ConfirmDestructive/ConfirmDestructive';
+export { meta as confirmDestructiveMeta } from './ConfirmDestructive/block.meta';
+export * from './ErrorPanel/ErrorPanel';
+export { meta as errorPanelMeta } from './ErrorPanel/block.meta';

package/src/feedback/types.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from '@gntik-ai/ui';
+import type { LucideIcon } from '@gntik-ai/icons';
+
+/** An action rendered as a kit Button, or as a Link when `href` is set. */
+export interface FeedbackAction {
+  id?: string;
+  label: string;
+  href?: string;
+  icon?: LucideIcon;
+  variant?: ButtonProps['variant'];
+  disabled?: boolean;
+  onClick?: () => void;
+}

package/src/forms/CreateApiKeyDialog/CreateApiKeyDialog.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { CreateApiKeyDialog } from './CreateApiKeyDialog';
+
+describe('CreateApiKeyDialog', () => {
+  it('renders the trigger and an accessible form', async () => {
+    const { container } = render(<CreateApiKeyDialog />);
+    await expectNoAxeViolations(container);
+    await userEvent.click(screen.getByRole('button', { name: 'Create API key' }));
+    await expectNoAxeViolations(await screen.findByRole('dialog', { name: 'Create API key' }));
+  });
+
+  it('creates a key, shows the secret once and discards it on close', async () => {
+    const onCreate = vi.fn().mockResolvedValue('sk_test_123');
+    render(<CreateApiKeyDialog onCreate={onCreate} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Create API key' }));
+    await userEvent.click(await screen.findByRole('button', { name: 'Create key' }));
+    expect(screen.getByText('Give the key a name.')).toBeInTheDocument();
+    expect(onCreate).not.toHaveBeenCalled();
+
+    await userEvent.type(screen.getByLabelText(/Name/), 'ci');
+    await userEvent.click(screen.getByRole('checkbox', { name: 'projects:read' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Create key' }));
+    expect(onCreate).toHaveBeenCalledWith({ name: 'ci', scopes: ['projects:read'], expiry: '90d' });
+    const dialog = await screen.findByRole('dialog', { name: 'API key created' });
+    expect(screen.getByRole('region', { name: 'New API key' })).toHaveTextContent('sk_test_123');
+    await expectNoAxeViolations(dialog);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Done' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await userEvent.click(screen.getByRole('button', { name: 'Create API key' }));
+    expect(await screen.findByRole('dialog', { name: 'Create API key' })).toBeInTheDocument();
+    expect(screen.queryByText('sk_test_123')).not.toBeInTheDocument();
+  });
+});

package/src/forms/CreateApiKeyDialog/CreateApiKeyDialog.tsx

@@ -0,0 +1,197 @@
+import {
+  Alert,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  CodeBlock,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  FieldError,
+  FieldLabel,
+  Fieldset,
+  FieldsetLegend,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@gntik-ai/ui';
+import { KeyRound } from '@gntik-ai/icons';
+import { useState, type ReactElement } from 'react';
+import { apiKeyExpiries, apiKeyScopes, generateDemoSecret, type ApiKeyExpiry, type ApiKeyScope } from './fixtures';
+
+export type { ApiKeyExpiry, ApiKeyScope } from './fixtures';
+
+export interface CreateApiKeyInput {
+  name: string;
+  scopes: string[];
+  expiry: string;
+}
+
+export interface CreateApiKeyDialogProps {
+  scopes?: ApiKeyScope[];
+  expiries?: ApiKeyExpiry[];
+  defaultExpiry?: string;
+  /** Creates the key and returns its secret (shown once). Defaults to a demo generator. */
+  onCreate?: (input: CreateApiKeyInput) => string | Promise<string>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Trigger element (rendered through Dialog.Trigger). Pass `null` when controlling `open` yourself. */
+  trigger?: ReactElement | null;
+}
+
+/**
+ * Two-step API key dialog: name, scopes and expiry, then the secret shown once in a CodeBlock
+ * with copy. Closing the dialog discards the secret; it can't be shown again.
+ */
+export function CreateApiKeyDialog({
+  scopes = apiKeyScopes,
+  expiries = apiKeyExpiries,
+  defaultExpiry = '90d',
+  onCreate = () => generateDemoSecret(),
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = <Button icon={KeyRound} />,
+}: CreateApiKeyDialogProps) {
+  const [innerOpen, setInnerOpen] = useState(defaultOpen);
+  const [name, setName] = useState('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [expiry, setExpiry] = useState(defaultExpiry);
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [secret, setSecret] = useState<string | null>(null);
+  const open = openProp ?? innerOpen;
+  const nameInvalid = submitted && name.trim() === '';
+  const scopesInvalid = submitted && selected.length === 0;
+
+  const setOpen = (next: boolean) => {
+    if (loading && !next) return;
+    if (!next) {
+      setName('');
+      setSelected([]);
+      setExpiry(defaultExpiry);
+      setSubmitted(false);
+      setError(null);
+      setSecret(null);
+    }
+    setInnerOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const submit = async () => {
+    setSubmitted(true);
+    setError(null);
+    if (name.trim() === '' || selected.length === 0) return;
+    setLoading(true);
+    try {
+      const value = await onCreate({ name: name.trim(), scopes: selected, expiry });
+      setSecret(value);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'The key could not be created.');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger render={trigger}>Create API key</DialogTrigger>}
+      <DialogContent size="lg">
+        {secret == null ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Create API key</DialogTitle>
+              <DialogDescription>
+                Keys act on behalf of this workspace. Grant only the scopes the integration needs.
+              </DialogDescription>
+            </DialogHeader>
+            <form
+              noValidate
+              onSubmit={(e) => {
+                e.preventDefault();
+                void submit();
+              }}
+            >
+              <DialogBody className="grid gap-5">
+                <Field invalid={nameInvalid}>
+                  <FieldLabel required>Name</FieldLabel>
+                  <Input
+                    value={name}
+                    onValueChange={setName}
+                    placeholder="ci-deployments"
+                    required
+                    autoComplete="off"
+                  />
+                  <FieldError match={nameInvalid}>Give the key a name.</FieldError>
+                </Field>
+                <Fieldset
+                  render={<CheckboxGroup value={selected} onValueChange={setSelected} />}
+                  aria-invalid={scopesInvalid || undefined}
+                >
+                  <FieldsetLegend>Scopes</FieldsetLegend>
+                  {scopes.map((s) => (
+                    <Checkbox
+                      key={s.value}
+                      value={s.value}
+                      label={<span className="font-mono">{s.label}</span>}
+                      description={s.description}
+                    />
+                  ))}
+                  {scopesInvalid && <p className="text-[12.5px] text-destructive-text">Select at least one scope.</p>}
+                </Fieldset>
+                <Field>
+                  <FieldLabel>Expiration</FieldLabel>
+                  <Select value={expiry} onValueChange={(v) => v != null && setExpiry(v)} items={expiries}>
+                    <SelectTrigger className="w-full sm:w-56" />
+                    <SelectContent>
+                      {expiries.map((x) => (
+                        <SelectItem key={x.value} value={x.value}>
+                          {x.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+                {error && <Alert tone="destructive" title="Key not created" description={error} />}
+              </DialogBody>
+              <DialogFooter>
+                <DialogClose render={<Button variant="ghost" disabled={loading} />}>Cancel</DialogClose>
+                <Button type="submit" loading={loading}>
+                  Create key
+                </Button>
+              </DialogFooter>
+            </form>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>API key created</DialogTitle>
+              <DialogDescription>Store it in your secrets manager. Use it as a bearer token.</DialogDescription>
+            </DialogHeader>
+            <DialogBody className="grid gap-4">
+              <Alert
+                tone="warning"
+                title="Copy this key now"
+                description="For your security it is shown only once. If you lose it, revoke it and create a new one."
+              />
+              <CodeBlock code={secret} label="New API key" wrapToggle={false} defaultWrap />
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose render={<Button />}>Done</DialogClose>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}