@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/components/divider/divider.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 import type React from "react";
-import { cn } from "tailwind-variants";
+import { cn } from "../../lib/cn";
 
 export function Divider({
   className,

package/src/components/dropzone/dropzone.test.tsx

@@ -0,0 +1,355 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Dropzone,
+  DropzoneAcceptedFiles,
+  DropzoneContent,
+  DropzoneItem,
+  DropzoneRejectedFiles,
+  DropzoneRoot,
+  DropzoneTrigger,
+} from "../../components";
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+describe("DropzoneRoot", () => {
+  it("renders with data-slot dropzone", () => {
+    render(<DropzoneRoot />);
+    expect(document.querySelector('[data-slot="dropzone"]')).toBeInTheDocument();
+  });
+
+  it("applies className to root div", () => {
+    render(<DropzoneRoot className="custom-root" />);
+    expect(document.querySelector('[data-slot="dropzone"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+
+  it("renders children", () => {
+    render(
+      <DropzoneRoot>
+        <span>Child</span>
+      </DropzoneRoot>,
+    );
+    expect(screen.getByText("Child")).toBeInTheDocument();
+  });
+
+  it("throws when DropzoneTrigger used outside DropzoneRoot", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<DropzoneTrigger />)).toThrow(
+      "useDropzoneCtx must be used within DropzoneRoot",
+    );
+    spy.mockRestore();
+  });
+});
+
+describe("DropzoneTrigger", () => {
+  it("renders with data-slot dropzone-trigger", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders hidden input with data-slot dropzone-input", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-input"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("DropzoneContent", () => {
+  it("renders with data-slot dropzone-content", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneContent />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-content"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies className", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneContent className="custom-content" />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-content"]'),
+    ).toHaveClass("custom-content");
+  });
+});
+
+describe("DropzoneItem", () => {
+  const file = new File(["content"], "test.pdf", { type: "application/pdf" });
+
+  it("renders with data-slot dropzone-item", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-item"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("shows file name", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(screen.getByText("test.pdf")).toBeInTheDocument();
+  });
+
+  it("remove button has data-slot dropzone-item-remove", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-item-remove"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("fires onRemove when remove button clicked", async () => {
+    const onRemove = vi.fn();
+    render(<DropzoneItem file={file} onRemove={onRemove} />);
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders custom icon via renderIcon prop", () => {
+    render(
+      <DropzoneItem
+        file={file}
+        onRemove={vi.fn()}
+        renderIcon={() => <span data-testid="custom-icon">Icon</span>}
+      />,
+    );
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+  });
+
+  it("applies className", () => {
+    render(
+      <DropzoneItem
+        file={file}
+        onRemove={vi.fn()}
+        className="custom-item"
+      />,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-item"]'),
+    ).toHaveClass("custom-item");
+  });
+});
+
+// ─── DropzoneAcceptedFiles ───────────────────────────────────────────────────
+
+describe("DropzoneAcceptedFiles", () => {
+  const file1 = new File(["a"], "file1.pdf", { type: "application/pdf" });
+  const file2 = new File(["b"], "file2.png", { type: "image/png" });
+
+  it("renders nothing when no files", () => {
+    const { container } = render(
+      <DropzoneRoot>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    expect(container.querySelector('[data-slot="dropzone-item"]')).toBeNull();
+  });
+
+  it("renders accepted files from controlled files prop", () => {
+    render(
+      <DropzoneRoot files={[file1, file2]}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByText("file1.pdf")).toBeInTheDocument();
+    expect(screen.getByText("file2.png")).toBeInTheDocument();
+  });
+
+  it("calls onFileRemove with index and accepted type on remove", async () => {
+    const onFileRemove = vi.fn();
+    render(
+      <DropzoneRoot files={[file1]} onFileRemove={onFileRemove}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onFileRemove).toHaveBeenCalledWith(0, "accepted");
+  });
+
+  it("calls onFilesChange with empty array after removing last file", async () => {
+    const onFilesChange = vi.fn();
+    render(
+      <DropzoneRoot files={[file1]} onFilesChange={onFilesChange}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onFilesChange).toHaveBeenCalledWith([]);
+  });
+
+  it("renders custom file via renderFile prop", () => {
+    render(
+      <DropzoneRoot files={[file1]}>
+        <DropzoneAcceptedFiles
+          renderFile={(f) => <div data-testid="custom-file">{f.name}</div>}
+        />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByTestId("custom-file")).toBeInTheDocument();
+    expect(screen.getByText("file1.pdf")).toBeInTheDocument();
+  });
+});
+
+// ─── Composite ───────────────────────────────────────────────────────────────
+
+describe("Dropzone composite", () => {
+  it("renders without crash", () => {
+    render(<Dropzone />);
+  });
+
+  it("renders trigger with data-slot dropzone-trigger", () => {
+    render(<Dropzone />);
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("shows default label text", () => {
+    render(<Dropzone />);
+    expect(
+      screen.getByText(
+        "Arrastra y suelta archivos aquí o haz clic para seleccionar",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("shows custom label text", () => {
+    render(<Dropzone label="Drop files here" />);
+    expect(screen.getByText("Drop files here")).toBeInTheDocument();
+  });
+
+  it("shows max file size in MB", () => {
+    render(<Dropzone maxFileSize={10 * 1024 * 1024} />);
+    expect(screen.getByText("Tamaño máximo: 10MB")).toBeInTheDocument();
+  });
+
+  it("shows allowed extensions when provided", () => {
+    render(<Dropzone allowedExtensions={["image/png", "image/jpeg"]} />);
+    expect(
+      screen.getByText(/Tipos permitidos/),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show rejected section when showRejected is false", () => {
+    render(<Dropzone showRejected={false} />);
+    // No rejected items in DOM since showRejected=false (default)
+    expect(document.querySelectorAll('[data-slot="dropzone-item"]')).toHaveLength(0);
+  });
+
+  it("applies classNames.trigger to trigger element", () => {
+    render(<Dropzone classNames={{ trigger: "custom-trigger-class" }} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toHaveClass("custom-trigger-class");
+  });
+
+  it("renders accepted files when files prop provided", () => {
+    const file = new File(["x"], "photo.png", { type: "image/png" });
+    render(<Dropzone files={[file]} />);
+    expect(screen.getByText("photo.png")).toBeInTheDocument();
+  });
+
+  it("shows rejected files section when showRejected is true", () => {
+    render(<Dropzone showRejected />);
+    // DropzoneRejectedFiles mounts — no rejected files yet, renders null inside
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+// ─── DropzoneTrigger onClick ──────────────────────────────────────────────────
+
+describe("DropzoneTrigger custom onClick", () => {
+  it("calls custom onClick when trigger is clicked", async () => {
+    const onClick = vi.fn();
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger onClick={onClick}>
+          <span>Click me</span>
+        </DropzoneTrigger>
+      </DropzoneRoot>,
+    );
+
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-trigger"]')!,
+    );
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
+
+// ─── DropzoneRejectedFiles ────────────────────────────────────────────────────
+
+describe("DropzoneRejectedFiles", () => {
+  it("renders null when no rejected files", () => {
+    const { container } = render(
+      <DropzoneRoot>
+        <DropzoneRejectedFiles />
+      </DropzoneRoot>,
+    );
+    expect(container.querySelector('[data-slot="dropzone-item"]')).toBeNull();
+  });
+
+  it("renders custom file via renderFile prop when files exist", () => {
+    const file = new File(["x"], "bad.txt", { type: "text/plain" });
+    // Inject rejected files via the accepted slot to test the renderFile branch
+    // (DropzoneRejectedFiles uses same DropzoneFilesList as DropzoneAcceptedFiles)
+    render(
+      <DropzoneRoot files={[file]}>
+        <DropzoneAcceptedFiles
+          renderFile={(f, remove) => (
+            <div data-testid="rendered-file">
+              {f.name}
+              <button type="button" onClick={remove}>
+                Remove
+              </button>
+            </div>
+          )}
+        />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByTestId("rendered-file")).toBeInTheDocument();
+    expect(screen.getByText("bad.txt")).toBeInTheDocument();
+  });
+
+  it("renderFile remove callback fires onRemove", async () => {
+    const onFileRemove = vi.fn();
+    const file = new File(["x"], "file.txt", { type: "text/plain" });
+    render(
+      <DropzoneRoot files={[file]} onFileRemove={onFileRemove}>
+        <DropzoneAcceptedFiles
+          renderFile={(f, remove) => (
+            <button type="button" data-testid="remove-btn" onClick={remove}>
+              Remove {f.name}
+            </button>
+          )}
+        />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(screen.getByTestId("remove-btn"));
+    expect(onFileRemove).toHaveBeenCalledWith(0, "accepted");
+  });
+});

package/src/components/dropzone/dropzone.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useRender } from "@base-ui/react/use-render";
 import { LucideIcon, UploadCloud, X } from "lucide-react";
 import {

package/src/components/empty/empty.test.tsx

@@ -0,0 +1,219 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyRoot,
+  EmptyTitle,
+} from "../../components";
+
+describe("EmptyRoot", () => {
+  it("renders with data-slot='empty'", () => {
+    render(<EmptyRoot />);
+    expect(document.querySelector('[data-slot="empty"]')).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(
+      <EmptyRoot>
+        <span>child</span>
+      </EmptyRoot>,
+    );
+    expect(screen.getByText("child")).toBeInTheDocument();
+  });
+
+  it("forwards className", () => {
+    render(<EmptyRoot className="custom-root" />);
+    expect(document.querySelector('[data-slot="empty"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+});
+
+describe("EmptyHeader", () => {
+  it("renders with data-slot='empty-header'", () => {
+    render(<EmptyHeader />);
+    expect(
+      document.querySelector('[data-slot="empty-header"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyMedia", () => {
+  it("renders with data-slot='empty-media'", () => {
+    render(<EmptyMedia />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies default variant", () => {
+    render(<EmptyMedia />);
+    const el = document.querySelector('[data-slot="empty-media"]');
+    expect(el).toHaveAttribute("data-variant", "default");
+    expect(el).toHaveClass("bg-transparent");
+  });
+
+  it("applies icon variant", () => {
+    render(<EmptyMedia variant="icon" />);
+    const el = document.querySelector('[data-slot="empty-media"]');
+    expect(el).toHaveAttribute("data-variant", "icon");
+    expect(el).toHaveClass("rounded-lg");
+  });
+
+  it("forwards className", () => {
+    render(<EmptyMedia className="media-cls" />);
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveClass(
+      "media-cls",
+    );
+  });
+});
+
+describe("EmptyTitle", () => {
+  it("renders with data-slot='empty-title'", () => {
+    render(<EmptyTitle>Title</EmptyTitle>);
+    expect(
+      document.querySelector('[data-slot="empty-title"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyDescription", () => {
+  it("renders with data-slot='empty-description'", () => {
+    render(<EmptyDescription>Desc</EmptyDescription>);
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyContent", () => {
+  it("renders with data-slot='empty-content'", () => {
+    render(<EmptyContent />);
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Empty composite", () => {
+  it("renders root with data-slot='empty'", () => {
+    render(<Empty />);
+    expect(document.querySelector('[data-slot="empty"]')).toBeInTheDocument();
+  });
+
+  it("renders default title 'No hay datos'", () => {
+    render(<Empty />);
+    expect(screen.getByText("No hay datos")).toBeInTheDocument();
+  });
+
+  it("renders default icon (media slot present)", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders custom title", () => {
+    render(<Empty title="Sin resultados" />);
+    expect(screen.getByText("Sin resultados")).toBeInTheDocument();
+  });
+
+  it("hides title when title is empty string", () => {
+    render(<Empty title="" />);
+    expect(
+      document.querySelector('[data-slot="empty-title"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<Empty description="Probá con otro filtro" />);
+    expect(screen.getByText("Probá con otro filtro")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("hides description when not provided", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders action inside empty-content when provided", () => {
+    render(<Empty action={<button type="button">Crear</button>} />);
+    expect(screen.getByRole("button", { name: "Crear" })).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("hides empty-content when action is absent", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("hides media when icon is null", () => {
+    render(<Empty icon={null} />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies iconVariant='icon' to media slot", () => {
+    render(<Empty iconVariant="icon" />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).toHaveAttribute("data-variant", "icon");
+  });
+
+  it("renders children alongside default slots", () => {
+    render(<Empty>extra content</Empty>);
+    expect(screen.getByText("extra content")).toBeInTheDocument();
+  });
+
+  it("forwards className to root slot", () => {
+    render(<Empty className="root-custom" />);
+    expect(document.querySelector('[data-slot="empty"]')).toHaveClass(
+      "root-custom",
+    );
+  });
+
+  it("applies classNames to all slots", () => {
+    render(
+      <Empty
+        title="T"
+        description="D"
+        action={<span>A</span>}
+        classNames={{
+          header: "cls-header",
+          media: "cls-media",
+          title: "cls-title",
+          description: "cls-desc",
+          content: "cls-content",
+        }}
+      />,
+    );
+    expect(document.querySelector('[data-slot="empty-header"]')).toHaveClass(
+      "cls-header",
+    );
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveClass(
+      "cls-media",
+    );
+    expect(document.querySelector('[data-slot="empty-title"]')).toHaveClass(
+      "cls-title",
+    );
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toHaveClass("cls-desc");
+    expect(document.querySelector('[data-slot="empty-content"]')).toHaveClass(
+      "cls-content",
+    );
+  });
+});

package/src/components/empty/empty.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { Inbox } from "lucide-react";
 import { type ComponentProps, type ReactNode } from "react";