@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.13

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

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { AlertDialog } from "../../components";
+import { click } from "../../utils";
+
+describe("AlertDialog component", () => {
+  it("should show custom title and description", () => {
+    render(
+      <AlertDialog
+        open
+        title="Custom title"
+        description="Custom description"
+      />,
+    );
+
+    expect(screen.getByText("Custom title")).toBeInTheDocument();
+    expect(screen.getByText("Custom description")).toBeInTheDocument();
+  });
+
+  it("should cancel action", () => {
+    const onCancel = vi.fn();
+    render(
+      <AlertDialog
+        open
+        title="Custom title"
+        description="Custom description"
+        onClose={onCancel}
+      />,
+    );
+
+    click(screen.getByRole("button", { name: "Cancelar" }));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  it("should confirm action", () => {
+    const onConfirm = vi.fn();
+    render(
+      <AlertDialog
+        open
+        title="Custom title"
+        description="Custom description"
+        onAction={onConfirm}
+      />,
+    );
+
+    click(screen.getByRole("button", { name: "Aceptar" }));
+    expect(onConfirm).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,265 @@
+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`).
+ */
+export function AlertDialogPopup({
+  className,
+  portalProps,
+  ...props
+}: AlertDialogBase.Popup.Props & {
+  portalProps?: AlertDialogBase.Portal.Props;
+}) {
+  return (
+    <AlertDialogBase.Portal {...portalProps}>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport>
+        <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 "Cancel" */
+  closeText?: ReactNode;
+  /** Label for the action button. @default "Confirm" */
+  actionText?: ReactNode;
+  /** Additional className forwarded to the popup panel. */
+  className?: 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.
+ *
+ * @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 = "Cancel",
+  actionText = "Confirm",
+  className,
+  ...props
+}: AlertDialogProps) {
+  return (
+    <AlertDialogRoot {...props}>
+      {trigger && <AlertDialogTrigger render={trigger} />}
+      <AlertDialogPopup className={className}>
+        {(title || description) && (
+          <AlertDialogHeader>
+            {title && <AlertDialogTitle>{title}</AlertDialogTitle>}
+            {description && (
+              <AlertDialogDescription>{description}</AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+        )}
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogClose
+            render={<Button variant="secondary">{closeText}</Button>}
+            onClick={onClose}
+          />
+          <AlertDialogClose
+            render={
+              <Button variant={variant ?? "default"}>{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";

package/src/components/auto-complete/auto-complete-primitives.tsx

@@ -0,0 +1,155 @@
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib";
+import { DialogPopup, DialogRoot } from "../dialog";
+
+const AutoCompleteRoot = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command>) => (
+  <Command
+    data-slot="auto-complete"
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+interface AutoCompleteDialogProps extends DialogProps {}
+
+const AutoCompleteDialog = ({
+  children,
+  ...props
+}: AutoCompleteDialogProps) => {
+  return (
+    <DialogRoot {...props} data-slot="auto-complete-dialog">
+      <DialogPopup
+        className="p-0 overflow-hidden shadow-lg"
+        data-slot="auto-complete-dialog-content"
+      >
+        <AutoCompleteRoot className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </AutoCompleteRoot>
+      </DialogPopup>
+    </DialogRoot>
+  );
+};
+
+const AutoCompleteInput = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Input>) => (
+  <div
+    className="flex items-center px-3 border-b"
+    data-slot="auto-complete-input-container"
+  >
+    <Search
+      className="w-4 h-4 mr-2 opacity-50 shrink-0"
+      data-slot="auto-complete-input-icon"
+    />
+    <Command.Input
+      data-slot="auto-complete-input"
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+);
+
+const AutoCompleteList = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.List>) => (
+  <Command.List
+    data-slot="auto-complete-list"
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+);
+
+const AutoCompleteEmpty = (
+  props: React.ComponentProps<typeof Command.Empty>,
+) => (
+  <Command.Empty
+    className="py-6 text-sm text-center"
+    data-slot="auto-complete-empty"
+    {...props}
+  />
+);
+
+const AutoCompleteGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Group>) => (
+  <Command.Group
+    data-slot="auto-complete-group"
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+const AutoCompleteSeparator = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Separator>) => (
+  <Command.Separator
+    data-slot="auto-complete-separator"
+    className={cn("-mx-1 h-px bg-input", className)}
+    {...props}
+  />
+);
+
+const AutoCompleteItem = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Item>) => {
+  return (
+    <Command.Item
+      data-slot="auto-complete-item"
+      className={cn(
+        "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+        "relative flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+const AutoCompleteShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      data-slot="auto-complete-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export {
+  AutoCompleteDialog,
+  AutoCompleteEmpty,
+  AutoCompleteGroup,
+  AutoCompleteInput,
+  AutoCompleteItem,
+  AutoCompleteList,
+  AutoCompleteRoot,
+  AutoCompleteSeparator,
+  AutoCompleteShortcut,
+};