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

package/src/components/field/field.test.tsx

@@ -0,0 +1,324 @@
+import { render, screen } from "@testing-library/react";
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+  FieldLabel,
+  FieldLegend,
+  FieldPrimitive,
+  FieldRoot,
+  FieldSet,
+  FieldValidity,
+  FieldsetPrimitive,
+  normalizeError,
+  useFieldName,
+  useIsInsideFieldRoot,
+} from "../../components";
+
+// ── normalizeError ────────────────────────────────────────────────────────────
+
+describe("normalizeError", () => {
+  it("returns [] for undefined", () => {
+    expect(normalizeError(undefined)).toEqual([]);
+  });
+
+  it("wraps a string with match: true", () => {
+    expect(normalizeError("Required")).toEqual([
+      { message: "Required", match: true },
+    ]);
+  });
+
+  it("wraps a single FieldErrorItem in an array", () => {
+    const item = { message: "Too short", match: "tooShort" as const };
+    expect(normalizeError(item)).toEqual([item]);
+  });
+
+  it("returns an array as-is", () => {
+    const items = [
+      { message: "Required", match: "valueMissing" as const },
+      { message: "Bad email", match: "typeMismatch" as const },
+    ];
+    expect(normalizeError(items)).toBe(items);
+  });
+});
+
+// ── Context hooks ──────────────────────────────────────────────────────────
+
+describe("useIsInsideFieldRoot", () => {
+  it("returns false outside FieldRoot", () => {
+    const { result } = renderHook(() => useIsInsideFieldRoot());
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true inside FieldRoot", () => {
+    const { result } = renderHook(() => useIsInsideFieldRoot(), {
+      wrapper: ({ children }) => (
+        <FieldRoot name="test">{children}</FieldRoot>
+      ),
+    });
+    expect(result.current).toBe(true);
+  });
+});
+
+describe("useFieldName", () => {
+  it("returns undefined outside FieldRoot", () => {
+    const { result } = renderHook(() => useFieldName());
+    expect(result.current).toBeUndefined();
+  });
+
+  it("returns the name provided to FieldRoot", () => {
+    const { result } = renderHook(() => useFieldName(), {
+      wrapper: ({ children }) => (
+        <FieldRoot name="email">{children}</FieldRoot>
+      ),
+    });
+    expect(result.current).toBe("email");
+  });
+});
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+describe("FieldRoot", () => {
+  it("renders with data-slot='field'", () => {
+    render(<FieldRoot name="x" />);
+    expect(document.querySelector('[data-slot="field"]')).toBeInTheDocument();
+  });
+
+  it("sets data-required when required prop is true", () => {
+    render(<FieldRoot name="x" required />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveAttribute(
+      "data-required",
+    );
+  });
+
+  it("does not set data-required when required is absent", () => {
+    render(<FieldRoot name="x" />);
+    expect(
+      document.querySelector('[data-slot="field"]'),
+    ).not.toHaveAttribute("data-required");
+  });
+
+  it("forwards className", () => {
+    render(<FieldRoot name="x" className="field-cls" />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveClass(
+      "field-cls",
+    );
+  });
+});
+
+describe("FieldLabel", () => {
+  it("renders with data-slot='field-label'", () => {
+    render(
+      <FieldRoot name="x">
+        <FieldLabel>Label</FieldLabel>
+      </FieldRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="field-label"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("FieldItem", () => {
+  it("renders with data-slot='field-item'", () => {
+    render(
+      <FieldRoot name="x">
+        <FieldItem>Item</FieldItem>
+      </FieldRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="field-item"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("FieldDescription", () => {
+  it("renders with data-slot='field-description'", () => {
+    render(
+      <FieldRoot name="x">
+        <FieldDescription>Helper text</FieldDescription>
+      </FieldRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="field-description"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("FieldError", () => {
+  it("is exported and defined", () => {
+    expect(FieldError).toBeDefined();
+  });
+});
+
+describe("FieldSet", () => {
+  it("renders with data-slot='fieldset'", () => {
+    render(<FieldSet />);
+    expect(
+      document.querySelector('[data-slot="fieldset"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("FieldLegend", () => {
+  it("renders with data-slot='fieldset-legend'", () => {
+    render(
+      <FieldSet>
+        <FieldLegend>Legend</FieldLegend>
+      </FieldSet>,
+    );
+    expect(
+      document.querySelector('[data-slot="fieldset-legend"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("FieldControl / FieldValidity / FieldPrimitive / FieldsetPrimitive exports", () => {
+  it("FieldControl is exported and defined", () => {
+    expect(FieldControl).toBeDefined();
+  });
+
+  it("FieldValidity is exported and defined", () => {
+    expect(FieldValidity).toBeDefined();
+  });
+
+  it("FieldPrimitive is exported and defined", () => {
+    expect(FieldPrimitive).toBeDefined();
+  });
+
+  it("FieldsetPrimitive is exported and defined", () => {
+    expect(FieldsetPrimitive).toBeDefined();
+  });
+});
+
+// ── Field composite ───────────────────────────────────────────────────────────
+
+describe("Field composite", () => {
+  it("renders root with data-slot='field'", () => {
+    render(<Field />);
+    expect(document.querySelector('[data-slot="field"]')).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(<Field><input placeholder="ctrl" /></Field>);
+    expect(screen.getByPlaceholderText("ctrl")).toBeInTheDocument();
+  });
+
+  it("renders label when label prop is provided", () => {
+    render(<Field label="Email" />);
+    expect(screen.getByText("Email")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="field-label"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render label when label is absent", () => {
+    render(<Field />);
+    expect(
+      document.querySelector('[data-slot="field-label"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<Field description="Helper text" />);
+    expect(screen.getByText("Helper text")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="field-description"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render description when absent", () => {
+    render(<Field />);
+    expect(
+      document.querySelector('[data-slot="field-description"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("sets data-required when required is true", () => {
+    render(<Field required />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveAttribute(
+      "data-required",
+    );
+  });
+
+  it("renders inline layout when inline=true", () => {
+    render(
+      <Field inline label="Accept" data-testid="field">
+        <input type="checkbox" />
+      </Field>,
+    );
+    const checkbox = screen.getByRole("checkbox");
+    const label = document.querySelector('[data-slot="field-label"]');
+    expect(checkbox).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    // In inline mode both are siblings inside a flex div
+    expect(checkbox.parentElement).toBe(label!.parentElement);
+  });
+
+  it("renders stacked layout when inline=false (default)", () => {
+    render(
+      <Field label="Name">
+        <input placeholder="name" />
+      </Field>,
+    );
+    const field = document.querySelector('[data-slot="field"]');
+    const label = document.querySelector('[data-slot="field-label"]');
+    // label is a direct child of the field root (not wrapped in inline div)
+    expect(label!.parentElement).toBe(field);
+  });
+
+  it("applies classNames.label to the label slot", () => {
+    render(<Field label="Email" classNames={{ label: "lbl-cls" }} />);
+    expect(document.querySelector('[data-slot="field-label"]')).toHaveClass(
+      "lbl-cls",
+    );
+  });
+
+  it("applies classNames.description to the description slot", () => {
+    render(
+      <Field description="Helper" classNames={{ description: "desc-cls" }} />,
+    );
+    expect(
+      document.querySelector('[data-slot="field-description"]'),
+    ).toHaveClass("desc-cls");
+  });
+
+  it("accepts error as an array of FieldErrorItem without crashing", () => {
+    render(
+      <Field
+        name="email"
+        invalid
+        error={[
+          { message: "Required", match: "valueMissing" },
+          { message: "Bad email", match: "typeMismatch" },
+        ]}
+      />,
+    );
+    expect(document.querySelector('[data-slot="field"]')).toBeInTheDocument();
+  });
+
+  it("marks field as invalid when error string is provided", () => {
+    render(<Field name="x" error="Enter a valid value." />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveAttribute(
+      "data-invalid",
+    );
+  });
+
+  it("marks field as invalid when invalid prop is true", () => {
+    render(<Field name="x" invalid />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveAttribute(
+      "data-invalid",
+    );
+  });
+
+  it("forwards className to root", () => {
+    render(<Field className="root-cls" />);
+    expect(document.querySelector('[data-slot="field"]')).toHaveClass(
+      "root-cls",
+    );
+  });
+});

package/src/components/field/field.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Field as FieldPrimitive } from "@base-ui/react/field";
 import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset";
 import { createContext, type ReactNode, useContext } from "react";

package/src/components/form/form.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Form, FormPrimitive } from "../../components";
+
+describe("Form", () => {
+  it("renders with data-slot='form'", () => {
+    render(<Form />);
+    expect(document.querySelector('[data-slot="form"]')).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(
+      <Form>
+        <input name="email" placeholder="email" />
+      </Form>,
+    );
+    expect(screen.getByPlaceholderText("email")).toBeInTheDocument();
+  });
+
+  it("forwards className", () => {
+    render(<Form className="form-cls" />);
+    expect(document.querySelector('[data-slot="form"]')).toHaveClass(
+      "form-cls",
+    );
+  });
+
+  it("calls onSubmit when form is submitted", async () => {
+    const onSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+    render(
+      <Form onSubmit={onSubmit}>
+        <button type="submit">Send</button>
+      </Form>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Send" }));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("FormPrimitive", () => {
+  it("is exported and defined", () => {
+    expect(FormPrimitive).toBeDefined();
+  });
+});

package/src/components/form/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Form as FormPrimitive } from "@base-ui/react/form";
 import type React from "react";
 

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./accordion";
+export * from "./alert";
 export * from "./alert-dialog";
 export * from "./auto-complete";
 export * from "./avatar";

package/src/components/input/input.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Input as BaseInput } from "@base-ui/react/input";
 import { type ChangeEvent, type ComponentPropsWithoutRef } from "react";
 import { cn } from "../../lib";

package/src/components/kbd/kbd.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Kbd, KbdGroup } from "../../components";
+
+describe("Kbd", () => {
+  it("renders with data-slot='kbd'", () => {
+    render(<Kbd>⌘</Kbd>);
+    expect(document.querySelector('[data-slot="kbd"]')).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(<Kbd>Ctrl</Kbd>);
+    expect(screen.getByText("Ctrl")).toBeInTheDocument();
+  });
+
+  it("forwards className", () => {
+    render(<Kbd className="custom-kbd">K</Kbd>);
+    expect(document.querySelector('[data-slot="kbd"]')).toHaveClass(
+      "custom-kbd",
+    );
+  });
+
+  it("renders as a kbd element", () => {
+    render(<Kbd>K</Kbd>);
+    expect(document.querySelector('[data-slot="kbd"]')!.tagName).toBe("KBD");
+  });
+});
+
+describe("KbdGroup", () => {
+  it("renders with data-slot='kbd-group'", () => {
+    render(
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>,
+    );
+    expect(
+      document.querySelector('[data-slot="kbd-group"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>,
+    );
+    expect(screen.getByText("⌘")).toBeInTheDocument();
+    expect(screen.getByText("K")).toBeInTheDocument();
+  });
+
+  it("forwards className", () => {
+    render(<KbdGroup className="group-cls" />);
+    expect(document.querySelector('[data-slot="kbd-group"]')).toHaveClass(
+      "group-cls",
+    );
+  });
+
+  it("renders as a kbd element", () => {
+    render(<KbdGroup />);
+    expect(document.querySelector('[data-slot="kbd-group"]')!.tagName).toBe(
+      "KBD",
+    );
+  });
+});

package/src/components/kbd/kbd.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type * as React from "react";
 import { cn } from "../../lib";
 

package/src/components/label/label.test.tsx

@@ -58,4 +58,50 @@ describe("Label component", () => {
     expect(label.tagName).toBe("SPAN");
     expect(label).toHaveTextContent("Custom render");
   });
+
+  it("renders an asterisk with aria-hidden when required is true", () => {
+    render(<Label required>Email</Label>);
+    const asterisk = screen.getByText("*");
+    expect(asterisk).toBeInTheDocument();
+    expect(asterisk).toHaveAttribute("aria-hidden");
+  });
+
+  it("does not render asterisk when required is absent", () => {
+    render(<Label>Email</Label>);
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+
+  it("renders tooltip trigger button when tooltip is provided", () => {
+    render(<Label tooltip="More info">Email</Label>);
+    expect(
+      screen.getByRole("button", { name: "Más información" }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render tooltip button when tooltip is absent", () => {
+    render(<Label>Email</Label>);
+    expect(
+      screen.queryByRole("button", { name: "Más información" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies classNames.asterisk to the asterisk span", () => {
+    render(
+      <Label required classNames={{ asterisk: "asterisk-cls" }}>
+        Email
+      </Label>,
+    );
+    expect(screen.getByText("*")).toHaveClass("asterisk-cls");
+  });
+
+  it("applies classNames.tooltip to the tooltip button", () => {
+    render(
+      <Label tooltip="Info" classNames={{ tooltip: "tooltip-btn-cls" }}>
+        Email
+      </Label>,
+    );
+    expect(
+      screen.getByRole("button", { name: "Más información" }),
+    ).toHaveClass("tooltip-btn-cls");
+  });
 });

package/src/components/label/label.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Info } from "lucide-react";

package/src/components/loader/loader.test.tsx

@@ -21,6 +21,68 @@ describe("Loader component", () => {
     render(<Loader size="lg" data-testid="loader" />);
 
     const loader = screen.getByTestId("loader");
-    expect(loader).toHaveClass("w-10 h-10");
+    expect(loader).toHaveClass("size-10");
+  });
+});
+
+describe("Loader data-slots", () => {
+  it("renders wrapper with data-slot='loader'", () => {
+    render(<Loader />);
+    expect(document.querySelector('[data-slot="loader"]')).toBeInTheDocument();
+  });
+
+  it("renders icon with data-slot='loader-icon'", () => {
+    render(<Loader />);
+    expect(
+      document.querySelector('[data-slot="loader-icon"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Loader variants", () => {
+  it.each([
+    ["primary", "text-primary"],
+    ["secondary", "text-secondary"],
+    ["ghost", "text-muted-foreground"],
+    ["error", "text-error"],
+    ["success", "text-success"],
+    ["warning", "text-warning"],
+    ["info", "text-info"],
+  ] as const)("variant '%s' applies '%s' to icon", (variant, cls) => {
+    render(<Loader variant={variant} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader sizes", () => {
+  it.each([
+    ["xs", "size-3"],
+    ["sm", "size-4"],
+    ["default", "size-7"],
+    ["lg", "size-10"],
+    ["xl", "size-14"],
+  ] as const)("size '%s' applies '%s' to icon", (size, cls) => {
+    render(<Loader size={size} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader center + classNames", () => {
+  it("center=true adds fixed overlay classes to wrapper", () => {
+    render(<Loader center />);
+    const wrapper = document.querySelector('[data-slot="loader"]');
+    expect(wrapper).toHaveClass("fixed");
+    expect(wrapper).toHaveClass("inset-0");
+  });
+
+  it("classNames.container adds class to wrapper", () => {
+    render(<Loader classNames={{ container: "overlay-cls" }} />);
+    expect(document.querySelector('[data-slot="loader"]')).toHaveClass(
+      "overlay-cls",
+    );
   });
 });

package/src/components/loader/loader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { LoaderCircle, type LucideProps } from "lucide-react";
 import { cn } from "../../lib";