@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/alert-dialog/alert-dialog.test.tsx

@@ -0,0 +1,239 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogPopup,
+  AlertDialogPrimitive,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+describe("AlertDialog composite", () => {
+  it("renders title and description when open", () => {
+    render(
+      <AlertDialog
+        open
+        title="Custom title"
+        description="Custom description"
+      />,
+    );
+
+    expect(screen.getByText("Custom title")).toBeInTheDocument();
+    expect(screen.getByText("Custom description")).toBeInTheDocument();
+  });
+
+  it("uses Spanish defaults for cancel and action buttons", () => {
+    render(<AlertDialog open title="Title" />);
+
+    expect(
+      screen.getByRole("button", { name: "Cancelar" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Confirmar" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders custom closeText and actionText", () => {
+    render(
+      <AlertDialog
+        open
+        title="Delete"
+        closeText="Mantener"
+        actionText="Eliminar"
+      />,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Mantener" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Eliminar" }),
+    ).toBeInTheDocument();
+  });
+
+  it("calls onClose when cancel button is clicked", () => {
+    const onClose = vi.fn();
+    render(<AlertDialog open title="Title" onClose={onClose} />);
+
+    click(screen.getByRole("button", { name: "Cancelar" }));
+
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("calls onAction when action button is clicked", () => {
+    const onAction = vi.fn();
+    render(<AlertDialog open title="Title" onAction={onAction} />);
+
+    click(screen.getByRole("button", { name: "Confirmar" }));
+
+    expect(onAction).toHaveBeenCalledOnce();
+  });
+
+  it("opens on trigger click", async () => {
+    render(
+      <AlertDialog
+        trigger={<Button>Abrir</Button>}
+        title="Title"
+        description="Description"
+      />,
+    );
+
+    expect(screen.queryByText("Title")).not.toBeInTheDocument();
+
+    click(screen.getByRole("button", { name: "Abrir" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(screen.getByText("Description")).toBeInTheDocument();
+    });
+  });
+
+  it("closes after clicking the action button", async () => {
+    render(
+      <AlertDialog
+        trigger={<Button>Abrir</Button>}
+        title="Title"
+        actionText="Confirmar"
+      />,
+    );
+
+    click(screen.getByRole("button", { name: "Abrir" }));
+    await waitFor(() => expect(screen.getByText("Title")).toBeInTheDocument());
+
+    click(screen.getByRole("button", { name: "Confirmar" }));
+
+    await waitFor(() =>
+      expect(screen.queryByText("Title")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("renders children between description and footer", () => {
+    render(
+      <AlertDialog open title="Title" description="Description">
+        <div data-testid="custom-body">Extra content</div>
+      </AlertDialog>,
+    );
+
+    expect(screen.getByTestId("custom-body")).toBeInTheDocument();
+  });
+
+  it("omits the header when no title or description is provided", () => {
+    render(<AlertDialog open />);
+
+    expect(
+      document.querySelector('[data-slot="alert-dialog-header"]'),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Cancelar" }),
+    ).toBeInTheDocument();
+  });
+
+  it("applies className to the popup and classNames to internal slots", () => {
+    render(
+      <AlertDialog
+        open
+        title="Title"
+        description="Description"
+        className="popup-class"
+        classNames={{
+          backdrop: "backdrop-class",
+          header: "header-class",
+          title: "title-class",
+          description: "description-class",
+          footer: "footer-class",
+          closeButton: "close-class",
+          actionButton: "action-class",
+        }}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="alert-dialog-popup"]'),
+    ).toHaveClass("popup-class");
+    expect(
+      document.querySelector('[data-slot="alert-dialog-backdrop"]'),
+    ).toHaveClass("backdrop-class");
+    expect(
+      document.querySelector('[data-slot="alert-dialog-header"]'),
+    ).toHaveClass("header-class");
+    expect(screen.getByText("Title")).toHaveClass("title-class");
+    expect(screen.getByText("Description")).toHaveClass("description-class");
+    expect(
+      document.querySelector('[data-slot="alert-dialog-footer"]'),
+    ).toHaveClass("footer-class");
+    expect(screen.getByRole("button", { name: "Cancelar" })).toHaveClass(
+      "close-class",
+    );
+    expect(screen.getByRole("button", { name: "Confirmar" })).toHaveClass(
+      "action-class",
+    );
+  });
+});
+
+describe("AlertDialog primitives", () => {
+  const setup = () =>
+    render(
+      <AlertDialogRoot>
+        <AlertDialogTrigger render={<Button>Abrir</Button>} />
+        <AlertDialogPopup>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Title</AlertDialogTitle>
+            <AlertDialogDescription>Description</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogClose render={<Button>Cancelar</Button>} />
+            <AlertDialogClose render={<Button>Confirmar</Button>} />
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialogRoot>,
+    );
+
+  it("opens on trigger click", async () => {
+    setup();
+
+    click(screen.getByRole("button", { name: "Abrir" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(screen.getByText("Description")).toBeInTheDocument();
+    });
+  });
+
+  it("closes when AlertDialogClose is clicked", async () => {
+    setup();
+
+    click(screen.getByRole("button", { name: "Abrir" }));
+    await waitFor(() => expect(screen.getByText("Title")).toBeInTheDocument());
+
+    click(screen.getByRole("button", { name: "Cancelar" }));
+
+    await waitFor(() =>
+      expect(screen.queryByText("Title")).not.toBeInTheDocument(),
+    );
+  });
+
+  it("is controlled by the open prop on the Root", () => {
+    render(
+      <AlertDialogRoot open>
+        <AlertDialogPopup>
+          <AlertDialogTitle>Controlled title</AlertDialogTitle>
+        </AlertDialogPopup>
+      </AlertDialogRoot>,
+    );
+
+    expect(screen.getByText("Controlled title")).toBeInTheDocument();
+  });
+
+  it("exposes the Base UI namespace via AlertDialogPrimitive", () => {
+    expect(AlertDialogPrimitive).toBeDefined();
+    expect(AlertDialogPrimitive.Root).toBeDefined();
+    expect(AlertDialogPrimitive.Popup).toBeDefined();
+  });
+});

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { AlertDialog as AlertDialogBase } from "@base-ui/react/alert-dialog";
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { cn } from "../../lib";
+import { Button, buttonVariants } from "../button";
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+/** Context root. Holds open state and wraps all dialog parts. */
+export function AlertDialogRoot(props: AlertDialogBase.Root.Props) {
+  return <AlertDialogBase.Root {...props} />;
+}
+
+/**
+ * Renders as its `render` element (defaults to `<button>`).
+ * Because it uses Base UI's render prop — not Radix Slot — it composes cleanly
+ * with `<Tooltip>` and other Base UI triggers on the same DOM element.
+ */
+export function AlertDialogTrigger({
+  className,
+  ...props
+}: AlertDialogBase.Trigger.Props) {
+  return (
+    <AlertDialogBase.Trigger
+      data-slot="alert-dialog-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Semi-transparent overlay rendered behind the popup. */
+export function AlertDialogBackdrop({
+  className,
+  ...props
+}: AlertDialogBase.Backdrop.Props) {
+  return (
+    <AlertDialogBase.Backdrop
+      data-slot="alert-dialog-backdrop"
+      forceRender
+      className={cn(
+        "fixed inset-0 z-overlay bg-black/50",
+        "transition-opacity duration-200",
+        "data-starting-style:opacity-0 data-ending-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Full-screen container that centers the popup. */
+export function AlertDialogViewport({
+  className,
+  ...props
+}: AlertDialogBase.Viewport.Props) {
+  return (
+    <AlertDialogBase.Viewport
+      data-slot="alert-dialog-viewport"
+      className={cn(
+        "fixed inset-0 z-overlay flex items-center justify-center p-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog content container. Includes Portal, Backdrop and Viewport internally.
+ * Pass `portalProps` to configure the portal (e.g. a custom `container`).
+ * `classNames` styles the internal `backdrop` and `viewport` slots.
+ */
+export function AlertDialogPopup({
+  className,
+  classNames,
+  portalProps,
+  ...props
+}: AlertDialogBase.Popup.Props & {
+  portalProps?: AlertDialogBase.Portal.Props;
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Full-screen container that centers the popup. */
+    viewport?: string;
+  };
+}) {
+  return (
+    <AlertDialogBase.Portal {...portalProps}>
+      <AlertDialogBackdrop className={classNames?.backdrop} />
+      <AlertDialogViewport className={classNames?.viewport}>
+        <AlertDialogBase.Popup
+          data-slot="alert-dialog-popup"
+          className={cn(
+            "relative flex w-full max-w-lg flex-col gap-4 rounded-lg border bg-background p-6 shadow-lg",
+            "transition-[scale,opacity] duration-200 ease-out",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0",
+            className,
+          )}
+          {...props}
+        />
+      </AlertDialogViewport>
+    </AlertDialogBase.Portal>
+  );
+}
+
+/** Closes the dialog and merges an optional `onClick` into the `render` element. */
+export function AlertDialogClose({
+  className,
+  ...props
+}: AlertDialogBase.Close.Props) {
+  return (
+    <AlertDialogBase.Close
+      data-slot="alert-dialog-close"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Accessible title rendered as `<h2>`. Required for a11y. */
+export function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogBase.Title.Props) {
+  return (
+    <AlertDialogBase.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Supplementary description rendered below the title. */
+export function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogBase.Description.Props) {
+  return (
+    <AlertDialogBase.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for title and description. */
+export function AlertDialogHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for action buttons. */
+export function AlertDialogFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type AlertDialogProps = Omit<AlertDialogBase.Root.Props, "children"> & {
+  /** Element that opens the dialog on click. Passed as Base UI `render` prop — no DOM wrapper added. */
+  trigger?: ReactElement;
+  /** Dialog heading. */
+  title?: ReactNode;
+  /** Supporting text rendered below the title. */
+  description?: ReactNode;
+  /** Custom content rendered between the description and the footer buttons. */
+  children?: ReactNode;
+  /** Called when the cancel button is clicked. */
+  onClose?: () => void;
+  /** Called when the action button is clicked. */
+  onAction?: () => void;
+  /** Visual variant for the action button. @default "default" */
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  /** Label for the cancel button. @default "Cancelar" */
+  closeText?: ReactNode;
+  /** Label for the action button. @default "Confirmar" */
+  actionText?: ReactNode;
+  /** Styles the dialog popup panel. */
+  className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Layout wrapper for title and description. */
+    header?: string;
+    /** Dialog heading. */
+    title?: string;
+    /** Supporting text below the title. */
+    description?: string;
+    /** Layout wrapper for action buttons. */
+    footer?: string;
+    /** Cancel button. */
+    closeButton?: string;
+    /** Action button. */
+    actionButton?: string;
+  };
+};
+
+/**
+ * Accessible confirmation dialog with cancel and action buttons.
+ *
+ * The `trigger` prop uses Base UI's `render` prop — no wrapper element is added —
+ * making it composable with `<Tooltip>` at the primitive level.
+ * For full structural control, use the exported primitives directly.
+ *
+ * `className` styles the popup panel. `classNames` exposes the `backdrop`,
+ * `header`, `title`, `description`, `footer`, `closeButton`, and `actionButton`
+ * slots for fine-grained tweaks without dropping to primitives.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   trigger={<Button variant="error">Delete account</Button>}
+ *   title="Delete account?"
+ *   description="This action cannot be undone."
+ *   variant="error"
+ *   actionText="Delete"
+ *   onAction={handleDelete}
+ * />
+ * ```
+ */
+export function AlertDialog({
+  trigger,
+  title,
+  description,
+  children,
+  onClose,
+  onAction,
+  variant = "default",
+  closeText = "Cancelar",
+  actionText = "Confirmar",
+  className,
+  classNames,
+  ...props
+}: AlertDialogProps) {
+  return (
+    <AlertDialogRoot {...props}>
+      {trigger && <AlertDialogTrigger render={trigger} />}
+      <AlertDialogPopup
+        className={className}
+        classNames={{ backdrop: classNames?.backdrop }}
+      >
+        {(title || description) && (
+          <AlertDialogHeader className={classNames?.header}>
+            {title && (
+              <AlertDialogTitle className={classNames?.title}>
+                {title}
+              </AlertDialogTitle>
+            )}
+            {description && (
+              <AlertDialogDescription className={classNames?.description}>
+                {description}
+              </AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+        )}
+        {children}
+        <AlertDialogFooter className={classNames?.footer}>
+          <AlertDialogClose
+            render={
+              <Button variant="secondary" className={classNames?.closeButton}>
+                {closeText}
+              </Button>
+            }
+            onClick={onClose}
+          />
+          <AlertDialogClose
+            render={
+              <Button
+                variant={variant ?? "default"}
+                className={classNames?.actionButton}
+              >
+                {actionText}
+              </Button>
+            }
+            onClick={onAction}
+          />
+        </AlertDialogFooter>
+      </AlertDialogPopup>
+    </AlertDialogRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { AlertDialogBase as AlertDialogPrimitive };

package/src/components/alert-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./alert-dialog";