@boxcustodia/library 2.0.0-alpha.17 → 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.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { action } from "storybook/actions";
 import { Input, InputPrimitive } from "./input";
 
 /**
@@ -13,9 +14,7 @@ const meta: Meta<typeof Input> = {
   parameters: { layout: "centered" },
   args: {
     placeholder: "Placeholder...",
-  },
-  argTypes: {
-    onValueChange: { control: false },
+    onValueChange: action("onValueChange"),
   },
 };
 

package/src/components/input/input.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Input, InputPrimitive } from "../../components";
+import { type } from "../../utils/tests";
+
+describe("Input composite", () => {
+  it("renders an input element with data-slot", () => {
+    render(<Input placeholder="Escribí algo" />);
+
+    const input = screen.getByPlaceholderText("Escribí algo");
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe("INPUT");
+    expect(input).toHaveAttribute("data-slot", "input");
+  });
+
+  it("forwards the value prop", () => {
+    render(<Input value="hola" onValueChange={() => {}} />);
+
+    expect(screen.getByDisplayValue("hola")).toBeInTheDocument();
+  });
+
+  it("calls onValueChange with the current value and the original event", () => {
+    const onValueChange = vi.fn();
+    render(<Input onValueChange={onValueChange} placeholder="Escribí" />);
+
+    type(screen.getByPlaceholderText("Escribí"), "abc");
+
+    expect(onValueChange).toHaveBeenCalledOnce();
+    expect(onValueChange).toHaveBeenCalledWith(
+      "abc",
+      expect.objectContaining({ target: expect.any(HTMLInputElement) }),
+    );
+  });
+
+  it("respects the disabled prop", () => {
+    render(<Input disabled placeholder="Disabled" />);
+
+    expect(screen.getByPlaceholderText("Disabled")).toBeDisabled();
+  });
+
+  it("merges a custom className with the base classes", () => {
+    render(<Input className="custom-class" placeholder="Estilado" />);
+
+    const input = screen.getByPlaceholderText("Estilado");
+    expect(input).toHaveClass("custom-class");
+    expect(input).toHaveClass("rounded-md");
+  });
+
+  it("sets autoComplete to off by default", () => {
+    render(<Input placeholder="Off" />);
+
+    expect(screen.getByPlaceholderText("Off")).toHaveAttribute(
+      "autocomplete",
+      "off",
+    );
+  });
+
+  it("applies number-input specific classes when type is number", () => {
+    render(<Input type="number" placeholder="Número" />);
+
+    expect(screen.getByPlaceholderText("Número")).toHaveClass(
+      "[&::-webkit-inner-spin-button]:appearance-none",
+    );
+  });
+
+  it("applies search-input specific classes when type is search", () => {
+    render(<Input type="search" placeholder="Buscar" />);
+
+    expect(screen.getByPlaceholderText("Buscar")).toHaveClass(
+      "[&::-webkit-search-cancel-button]:appearance-none",
+    );
+  });
+
+  it("applies file-input specific classes when type is file", () => {
+    render(<Input type="file" data-testid="file-input" />);
+
+    expect(screen.getByTestId("file-input")).toHaveClass(
+      "text-muted-foreground",
+    );
+  });
+
+  it("renders a plain input when nativeInput is true", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Input nativeInput placeholder="Native" onValueChange={onValueChange} />,
+    );
+
+    const input = screen.getByPlaceholderText("Native");
+    expect(input).toHaveAttribute("data-slot", "input");
+
+    type(input, "x");
+    expect(onValueChange).toHaveBeenCalledWith(
+      "x",
+      expect.objectContaining({ target: expect.any(HTMLInputElement) }),
+    );
+  });
+});
+
+describe("Input primitive", () => {
+  it("exposes the Base UI Input via InputPrimitive", () => {
+    expect(InputPrimitive).toBeDefined();
+  });
+
+  it("can be rendered directly", () => {
+    render(<InputPrimitive placeholder="Primitive" />);
+
+    expect(screen.getByPlaceholderText("Primitive")).toBeInTheDocument();
+  });
+});

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";
@@ -40,7 +42,7 @@ export function Label({
           <Tooltip content={tooltip}>
             <button
               type="button"
-              aria-label="More information"
+              aria-label="Más información"
               className={cn(
                 "inline-flex cursor-default items-center text-muted-foreground hover:text-foreground transition-all ml-1",
                 classNames?.tooltip,