@flaredev/cli 0.1.0

package/templates/app/components/admin/resource-table.tsx

@@ -0,0 +1,251 @@
+import Link from "next/link";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { formatValue, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
+import { isSortable } from "@flaredev/core/server";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { adminPath, adminPermissions, adminResources, adminStore, requireAccess } from "@/lib/admin";
+import { cn } from "@/lib/utils";
+import { hrefWith, toSearchParams, type SearchParams } from "./query";
+import { ResourceTableToolbar } from "./resource-table-toolbar";
+import { RowActions } from "./row-actions";
+
+type Column = { key: string; label: string; def: StoredField | { kind: "timestamp" } };
+
+const NUMERIC = new Set(["int", "float"]);
+
+/**
+ * Paginated, sortable, filterable list of a resource's records. Everything comes from the
+ * descriptor: columns (fields with `list`), sortable headers, search, and filters. State
+ * lives in the URL (?page, ?sort, ?q, ?filter[field]), so views are linkable and work
+ * without client-side data fetching.
+ */
+export async function ResourceTable({ resource, searchParams }: { resource: Resource; searchParams: SearchParams }) {
+  await requireAccess(resource, "read");
+  const basePath = adminPath(resource);
+  const permissions = await adminPermissions(resource.name);
+  const params = toSearchParams(searchParams);
+  const store = adminStore(resource.name);
+
+  let result = await store.list(params);
+  let ignoredQuery = false;
+  if (!result.ok) {
+    ignoredQuery = true;
+    result = await store.list(new URLSearchParams());
+  }
+  if (!result.ok) throw new Error(result.error);
+  const { data: rows, meta } = result.data;
+
+  const fields = storedFields(resource);
+  const columns: Column[] = [
+    ...fields.filter(([, def]) => def.list !== false).map(([key, def]) => ({ key, label: def.label, def })),
+    { key: "createdAt", label: "Created", def: { kind: "timestamp" } },
+  ];
+
+  // Resolve belongsTo ids to their related record titles, one query per relation.
+  const byName = new Map(adminResources().map((r) => [r.name, r]));
+  const titles: Record<string, Record<string, string>> = {};
+  await Promise.all(
+    columns.map(async ({ key, def }) => {
+      if (def.kind !== "belongsTo") return;
+      const ids = rows.map((row) => row[key]).filter((id): id is string => typeof id === "string");
+      titles[key] = byName.has(def.target) ? await adminStore(def.target).titles(ids) : {};
+    }),
+  );
+
+  const sort = params.get("sort") ?? `${resource.defaultSort.direction === "desc" ? "-" : ""}${resource.defaultSort.field}`;
+  const sortField = sort.replace(/^-/, "");
+  const sortDescending = sort.startsWith("-");
+  const activeFilters = [...params.keys()].filter((key) => key.startsWith("filter[")).length + (params.get("q") ? 1 : 0);
+  const first = meta.total === 0 ? 0 : (meta.page - 1) * meta.perPage + 1;
+  const last = Math.min(meta.page * meta.perPage, meta.total);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <ResourceTableToolbar resource={resource} />
+        {permissions.create && (
+          <Button asChild>
+            <Link href={adminPath(resource, "new")}>
+              <PlusIcon data-icon="inline-start" />
+              New {resource.label.toLowerCase()}
+            </Link>
+          </Button>
+        )}
+      </div>
+
+      {ignoredQuery && (
+        <Alert>
+          <AlertDescription>Some filters or sorting in the address weren&apos;t valid for {resource.pluralLabel.toLowerCase()} and were ignored.</AlertDescription>
+        </Alert>
+      )}
+
+      {rows.length === 0 ? (
+        <Empty className="rounded-lg border border-dashed">
+          <EmptyHeader>
+            <EmptyTitle>{activeFilters ? `No ${resource.pluralLabel.toLowerCase()} match` : `No ${resource.pluralLabel.toLowerCase()} yet`}</EmptyTitle>
+            <EmptyDescription>
+              {activeFilters ? "Try a different search or clear the filters." : `Create the first ${resource.label.toLowerCase()} to see it here.`}
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            {activeFilters || !permissions.create ? (
+              <Button variant="outline" asChild>
+                <Link href={basePath}>Clear filters</Link>
+              </Button>
+            ) : (
+              <Button asChild>
+                <Link href={adminPath(resource, "new")}>
+                  <PlusIcon data-icon="inline-start" />
+                  New {resource.label.toLowerCase()}
+                </Link>
+              </Button>
+            )}
+          </EmptyContent>
+        </Empty>
+      ) : (
+        <div className="overflow-hidden rounded-lg border bg-card">
+          <Table>
+            <TableHeader className="bg-muted">
+              <TableRow className="hover:bg-muted">
+                {columns.map((column) => {
+                  const sortable = column.key === "createdAt" || (column.def.kind !== "timestamp" && isSortable(column.def));
+                  const active = sortField === column.key;
+                  const nextSort = active && !sortDescending ? `-${column.key}` : column.key;
+                  const SortIcon = !active ? ChevronsUpDownIcon : sortDescending ? ArrowDownIcon : ArrowUpIcon;
+                  return (
+                    <TableHead key={column.key} className={cn(NUMERIC.has(column.def.kind) && "text-right")}>
+                      {sortable ? (
+                        <Link
+                          href={hrefWith(basePath, params, { sort: nextSort })}
+                          className="group inline-flex items-center gap-1 hover:text-foreground"
+                          aria-label={`Sort by ${column.label}`}
+                        >
+                          {column.label}
+                          <SortIcon className={cn("size-3.5", active ? "opacity-100" : "opacity-0 group-hover:opacity-60")} />
+                        </Link>
+                      ) : (
+                        column.label
+                      )}
+                    </TableHead>
+                  );
+                })}
+                <TableHead className="w-12">
+                  <span className="sr-only">Actions</span>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((row) => {
+                const id = String(row.id);
+                return (
+                  <TableRow key={id}>
+                    {columns.map((column, index) => {
+                      const value = row[column.key];
+                      let content: React.ReactNode = formatValue(column.def, value);
+                      if (column.def.kind === "enum" && value != null) {
+                        const tone = statusTone(value);
+                        content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+                      } else if (column.def.kind === "belongsTo" && typeof value === "string") {
+                        const target = byName.get(column.def.target);
+                        content = target ? (
+                          <Link href={adminPath(target, value, "edit")} className="hover:underline">
+                            {titles[column.key]?.[value] ?? value}
+                          </Link>
+                        ) : (
+                          value
+                        );
+                      } else if (index === 0) {
+                        content = (
+                          <Link href={adminPath(resource, id, "edit")} className="font-medium hover:underline">
+                            {content}
+                          </Link>
+                        );
+                      }
+                      return (
+                        <TableCell
+                          key={column.key}
+                          className={cn(
+                            "max-w-80 truncate",
+                            NUMERIC.has(column.def.kind) && "text-right tabular-nums",
+                            (column.def.kind === "timestamp" || column.def.kind === "datetime" || column.def.kind === "date") &&
+                              "text-muted-foreground tabular-nums",
+                          )}
+                        >
+                          {content}
+                        </TableCell>
+                      );
+                    })}
+                    <TableCell className="text-right">
+                      <RowActions
+                        resourceName={resource.name}
+                        label={resource.label}
+                        id={id}
+                        editHref={adminPath(resource, id, "edit")}
+                        canUpdate={permissions.update}
+                        canDelete={permissions.delete}
+                      />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {meta.total > 0 && (
+        <div className="flex flex-col items-center justify-between gap-3 text-sm text-muted-foreground sm:flex-row">
+          <p className="tabular-nums">
+            {first}–{last} of {meta.total} {meta.total === 1 ? resource.label.toLowerCase() : resource.pluralLabel.toLowerCase()}
+            {activeFilters > 0 && ` · ${activeFilters} filter${activeFilters === 1 ? "" : "s"} applied`}
+          </p>
+          {meta.totalPages > 1 && (
+            <Pagination className="mx-0 w-auto">
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    href={hrefWith(basePath, params, { page: String(Math.max(1, meta.page - 1)) })}
+                    aria-disabled={meta.page === 1}
+                    className={cn(meta.page === 1 && "pointer-events-none opacity-50")}
+                  />
+                </PaginationItem>
+                {pageWindow(meta.page, meta.totalPages).map((page) => (
+                  <PaginationItem key={page}>
+                    <PaginationLink href={hrefWith(basePath, params, { page: String(page) })} isActive={page === meta.page}>
+                      {page}
+                    </PaginationLink>
+                  </PaginationItem>
+                ))}
+                <PaginationItem>
+                  <PaginationNext
+                    href={hrefWith(basePath, params, { page: String(Math.min(meta.totalPages, meta.page + 1)) })}
+                    aria-disabled={meta.page === meta.totalPages}
+                    className={cn(meta.page === meta.totalPages && "pointer-events-none opacity-50")}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Up to five page numbers centred on the current page. */
+function pageWindow(page: number, totalPages: number): number[] {
+  const start = Math.max(1, Math.min(page - 2, totalPages - 4));
+  return Array.from({ length: Math.min(5, totalPages) }, (_, i) => start + i);
+}

package/templates/app/components/admin/row-actions.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import { deleteRecordAction } from "@/app/admin/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+
+export function RowActions({
+  resourceName,
+  label,
+  id,
+  editHref,
+  canUpdate = true,
+  canDelete = true,
+}: {
+  resourceName: string;
+  label: string;
+  id: string;
+  editHref: string;
+  canUpdate?: boolean;
+  canDelete?: boolean;
+}) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  function onDelete() {
+    startTransition(async () => {
+      const result = await deleteRecordAction(resourceName, id);
+      if (result.ok) {
+        toast.success(`${label} deleted.`);
+        setConfirming(false);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  if (!canUpdate && !canDelete) return null;
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" aria-label="Row actions">
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {canUpdate && (
+            <DropdownMenuGroup>
+              <DropdownMenuItem asChild>
+                <Link href={editHref}>
+                  <PencilIcon />
+                  Edit
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+          {canUpdate && canDelete && <DropdownMenuSeparator />}
+          {canDelete && (
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
+                <Trash2Icon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={onDelete} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/templates/app/components/auth-form.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { authClient } from "@/lib/auth-client";
+
+const PROVIDER_LABELS: Record<string, string> = { google: "Google", github: "GitHub" };
+
+const inputClass =
+  "w-full rounded-md border border-[var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:border-[var(--foreground)]";
+
+export function AuthForm({
+  mode,
+  next,
+  socialProviders = [],
+  initialError = null,
+}: {
+  mode: "sign-in" | "sign-up";
+  next: string;
+  socialProviders?: string[];
+  initialError?: string | null;
+}) {
+  const [error, setError] = useState<string | null>(initialError);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    const form = new FormData(event.currentTarget);
+    const email = String(form.get("email"));
+    const password = String(form.get("password"));
+
+    const { error } =
+      mode === "sign-up"
+        ? await authClient.signUp.email({ email, password, name: String(form.get("name")) })
+        : await authClient.signIn.email({ email, password });
+
+    if (error) {
+      setError(error.message ?? "Something went wrong. Please try again.");
+      setPending(false);
+      return;
+    }
+    // Full navigation so server components re-render with the new session cookie.
+    window.location.assign(next);
+  }
+
+  async function signInWithProvider(provider: string) {
+    setError(null);
+    setPending(true);
+    // Redirects the browser to the provider; failures come back to /sign-in?error=...
+    const { error } = await authClient.signIn.social({
+      provider,
+      callbackURL: next,
+      errorCallbackURL: `/sign-in?next=${encodeURIComponent(next)}`,
+    });
+    if (error) {
+      setError(error.message ?? "Could not start sign-in. Please try again.");
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {socialProviders.length > 0 && (
+        <>
+          <div className="flex flex-col gap-2">
+            {socialProviders.map((provider) => (
+              <button
+                key={provider}
+                type="button"
+                disabled={pending}
+                onClick={() => signInWithProvider(provider)}
+                className="rounded-md border border-[var(--border)] px-4 py-2 text-sm font-medium hover:bg-[var(--surface-muted)] disabled:opacity-60"
+              >
+                Continue with {PROVIDER_LABELS[provider] ?? provider}
+              </button>
+            ))}
+          </div>
+          <p className="text-center text-xs text-[var(--foreground-muted)]">or use email</p>
+        </>
+      )}
+
+      <form onSubmit={onSubmit} className="flex flex-col gap-4">
+        {mode === "sign-up" && (
+          <label className="flex flex-col gap-1.5 text-sm font-medium">
+            Name
+            <input name="name" required autoComplete="name" className={inputClass} />
+          </label>
+        )}
+        <label className="flex flex-col gap-1.5 text-sm font-medium">
+          Email
+          <input name="email" type="email" required autoComplete="email" className={inputClass} />
+        </label>
+        <label className="flex flex-col gap-1.5 text-sm font-medium">
+          Password
+          <input
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            autoComplete={mode === "sign-up" ? "new-password" : "current-password"}
+            className={inputClass}
+          />
+        </label>
+        {error && (
+          <p role="alert" className="text-sm text-[var(--danger)]">
+            {error}
+          </p>
+        )}
+        <button
+          type="submit"
+          disabled={pending}
+          className="rounded-md bg-[var(--foreground)] px-4 py-2 text-sm font-medium text-[var(--background)] disabled:opacity-60"
+        >
+          {pending ? "Please wait…" : mode === "sign-up" ? "Create account" : "Sign in"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/app/components/sign-out-button.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+
+export function SignOutButton() {
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        await authClient.signOut();
+        window.location.assign("/sign-in");
+      }}
+      className="rounded-md border border-[var(--border)] px-3 py-1.5 text-sm font-medium hover:bg-[var(--surface-muted)]"
+    >
+      Sign out
+    </button>
+  );
+}

package/templates/app/components/ui/alert-dialog.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}