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

package/src/components/dialog/dialog.tsx

@@ -107,7 +107,7 @@ export function DialogPopup({
           {children}
           {!hideClose && (
             <DialogBase.Close
-              aria-label="Close"
+              aria-label="Cerrar"
               className={cn("absolute right-2 top-2", classNames?.closeButton)}
               render={<Button size="icon" variant="ghost" />}
             >

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/label/label.tsx

@@ -40,7 +40,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,

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

@@ -1,87 +1,194 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { NumberInput } from "../../components";
-
-describe("NumberInput component", () => {
-  it("se renderiza correctamente", () => {
-    render(<NumberInput name="cantidad" />);
+import {
+  NumberInput,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputInput,
+  NumberInputPrimitive,
+  NumberInputRoot,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+describe("NumberInput composite", () => {
+  it("renders an input with the group role", () => {
+    render(<NumberInput name="amount" />);
+
+    expect(screen.getByRole("group")).toBeInTheDocument();
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
 
-  it("acepta y muestra el valor inicial correctamente", () => {
-    render(<NumberInput name="cantidad" value={10} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    expect(input.value).toBe("10");
+  it("displays the controlled value", () => {
+    render(<NumberInput name="amount" value={10} />);
+
+    expect(screen.getByRole("textbox")).toHaveValue("10");
   });
 
-  it("deshabilita el input cuando la prop disabled es true", () => {
-    render(<NumberInput name="cantidad" disabled />);
+  it("respects the disabled prop", () => {
+    render(<NumberInput name="amount" disabled />);
+
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
 
-  it("acepta la prop className en el contenedor visual", () => {
-    const TEST_CLASS = "mi-clase-personalizada";
-    render(<NumberInput name="cantidad" className={TEST_CLASS} />);
-    expect(screen.getByRole("group")).toHaveClass(TEST_CLASS);
+  it("forwards placeholder to the underlying input", () => {
+    render(<NumberInput name="amount" placeholder="Cantidad" />);
+
+    expect(screen.getByPlaceholderText("Cantidad")).toBeInTheDocument();
   });
 
-  it("acepta la prop ref al input visible via inputProps", () => {
-    const ref = createRef<HTMLInputElement>();
-    render(<NumberInput name="cantidad" inputProps={{ ref }} />);
-    expect(ref.current).not.toBeNull();
-    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  it("marks the input as invalid when invalid is true", () => {
+    render(<NumberInput name="amount" invalid />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+    expect(screen.getByRole("group")).toHaveAttribute("aria-invalid", "true");
   });
 
-  it("llama a onValueChange cuando el valor cambia", () => {
-    const handleChange = vi.fn();
-    render(<NumberInput name="cantidad" onValueChange={handleChange} />);
-    const input = screen.getByRole("textbox");
+  it("calls onValueChange when the value changes", () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput name="amount" onValueChange={onValueChange} />);
 
-    fireEvent.input(input, { target: { value: "5" } });
-    expect(handleChange).toHaveBeenCalledTimes(1);
+    fireEvent.input(screen.getByRole("textbox"), { target: { value: "5" } });
+
+    expect(onValueChange).toHaveBeenCalled();
   });
 
-  it("respeta el valor mínimo", () => {
-    render(<NumberInput name="cantidad" min={0} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
+  it("clamps to the min value on blur", () => {
+    render(<NumberInput name="amount" min={0} />);
 
+    const input = screen.getByRole("textbox");
     fireEvent.input(input, { target: { value: "-5" } });
     fireEvent.blur(input);
-    expect(input.value).toBe("0");
+
+    expect(input).toHaveValue("0");
   });
 
-  it("respeta el valor máximo", () => {
-    render(<NumberInput name="cantidad" max={100} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
+  it("clamps to the max value on blur", () => {
+    render(<NumberInput name="amount" max={100} />);
 
+    const input = screen.getByRole("textbox");
     fireEvent.input(input, { target: { value: "150" } });
     fireEvent.blur(input);
-    expect(input.value).toBe("100");
+
+    expect(input).toHaveValue("100");
   });
 
-  it("incrementa el valor correctamente con los botones", () => {
-    render(<NumberInput name="cantidad" defaultValue={5} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    const incrementButton = screen.getByTestId("increment-trigger");
+  it("increments the value via the increment button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("increment-trigger"));
 
-    fireEvent.click(incrementButton);
-    expect(input.value).toBe("6");
+    expect(screen.getByRole("textbox")).toHaveValue("6");
   });
 
-  it("decrementa el valor correctamente con los botones", () => {
-    render(<NumberInput name="cantidad" defaultValue={5} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    const decrementButton = screen.getByTestId("decrement-trigger");
+  it("decrements the value via the decrement button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("decrement-trigger"));
 
-    fireEvent.click(decrementButton);
-    expect(input.value).toBe("4");
+    expect(screen.getByRole("textbox")).toHaveValue("4");
   });
 
-  it("oculta los botones cuando hideControls es true", () => {
-    render(<NumberInput name="cantidad" hideControls />);
+  it("hides the increment and decrement controls when hideControls is true", () => {
+    render(<NumberInput name="amount" hideControls />);
+
     expect(screen.queryByTestId("increment-trigger")).not.toBeInTheDocument();
     expect(screen.queryByTestId("decrement-trigger")).not.toBeInTheDocument();
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
+
+  it("applies className to the group and classNames to each slot", () => {
+    render(
+      <NumberInput
+        name="amount"
+        className="group-class"
+        classNames={{
+          input: "input-class",
+          controls: "controls-class",
+          increment: "increment-class",
+          decrement: "decrement-class",
+        }}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="number-input-group"]'),
+    ).toHaveClass("group-class");
+    expect(
+      document.querySelector('[data-slot="number-input-input"]'),
+    ).toHaveClass("input-class");
+    expect(screen.getByTestId("increment-trigger")).toHaveClass(
+      "increment-class",
+    );
+    expect(screen.getByTestId("decrement-trigger")).toHaveClass(
+      "decrement-class",
+    );
+    expect(screen.getByTestId("increment-trigger").parentElement).toHaveClass(
+      "controls-class",
+    );
+  });
+});
+
+describe("NumberInput primitives", () => {
+  const setup = (
+    children?: React.ReactNode,
+    rootProps?: React.ComponentProps<typeof NumberInputRoot>,
+  ) =>
+    render(
+      <NumberInputRoot name="amount" {...rootProps}>
+        <NumberInputGroup>
+          <NumberInputDecrement data-testid="decrement">-</NumberInputDecrement>
+          <NumberInputInput data-testid="input" />
+          <NumberInputIncrement data-testid="increment">+</NumberInputIncrement>
+          {children}
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+  it("composes Root, Group, Input, Increment, and Decrement directly", () => {
+    setup(undefined, { defaultValue: 2 });
+
+    expect(screen.getByTestId("input")).toHaveValue("2");
+
+    click(screen.getByTestId("increment"));
+    expect(screen.getByTestId("input")).toHaveValue("3");
+
+    click(screen.getByTestId("decrement"));
+    expect(screen.getByTestId("input")).toHaveValue("2");
+  });
+
+  it("forwards a ref to the underlying input via NumberInputInput", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputInput ref={ref} />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it("is controlled by the value prop on the Root", () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInputRoot name="amount" value={7} onValueChange={onValueChange}>
+        <NumberInputGroup>
+          <NumberInputInput data-testid="input" />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(screen.getByTestId("input")).toHaveValue("7");
+  });
+
+  it("exposes the Base UI namespace via NumberInputPrimitive", () => {
+    expect(NumberInputPrimitive).toBeDefined();
+    expect(NumberInputPrimitive.Root).toBeDefined();
+    expect(NumberInputPrimitive.Input).toBeDefined();
+    expect(NumberInputPrimitive.Increment).toBeDefined();
+    expect(NumberInputPrimitive.Decrement).toBeDefined();
+  });
 });

package/src/components/toast/toast.tsx

@@ -373,7 +373,7 @@ function ToastList() {
         )}
         <Toast.Close
           className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-foreground/10 hover:text-current"
-          aria-label="Close"
+          aria-label="Cerrar"
         >
           <X className="h-3 w-3" />
         </Toast.Close>

package/src/hooks/index.ts

@@ -2,21 +2,22 @@ export { useControllableState } from "@radix-ui/react-use-controllable-state";
 export * from "./useArray";
 export * from "./useAsync";
 export * from "./useClickOutside";
-export * from "./useClipboard";
+export * from "./use-clipboard";
 export * from "./useDebounceCallback";
 export * from "./useDebounceValue";
 export * from "./useDisclosure";
-export * from "./useDocumentTitle";
+export * from "./use-document-title";
 export * from "./useEventListener";
 export * from "./useFocusTrap";
 export * from "./useHotkey";
-export * from "./useHover";
+export * from "./use-hover";
 export * from "./useIsVisible";
 export * from "./useLocalStorage";
 export * from "./useMediaQuery";
 export * from "./useMemoizedFn";
 export * from "./useMutation";
 export * from "./useObject";
+export * from "./use-on-mount";
 export * from "./usePagination";
 export * from "./usePortal";
 export * from "./usePreventCloseWindow";

package/src/hooks/use-clipboard/index.ts

@@ -0,0 +1 @@
+export * from "./use-clipboard";

package/src/hooks/use-clipboard/use-clipboard.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Button } from "../../components/button";
+import { Input } from "../../components/input";
+import { Stack } from "../../components/stack";
+import { useClipboard } from "./use-clipboard";
+
+/**
+ * Copy text to the clipboard without writing the same boilerplate every time.
+ *
+ * The hook gives you a `copied` flag that flips to `true` for a moment after a
+ * successful copy and then flips back on its own — perfect for the classic
+ * "Copy → Copied!" button. It also surfaces `error` so you can react when the
+ * browser blocks the operation.
+ *
+ * ```tsx
+ * const { copy, copied } = useClipboard();
+ *
+ * <Button onClick={() => copy("hello")}>
+ *   {copied ? "Copied!" : "Copy"}
+ * </Button>
+ * ```
+ *
+ * Good to know:
+ * - `copy(value)` is fire-and-forget. It will never throw — check `error` if
+ *   you need to handle failures (denied permissions, insecure context, etc.).
+ * - `copied` flips back to `false` automatically after `timeout` ms (default
+ *   `2000`). Pass `useClipboard({ timeout })` to change the duration.
+ * - Need to reset early? `reset()` clears both `copied` and `error` right away.
+ * - Unmount-safe: the internal timeout is cleared on cleanup, so you can use
+ *   it inside dialogs or conditionally rendered components without worrying.
+ */
+const meta: Meta<typeof useClipboard> = {
+  title: "hooks/useClipboard",
+  parameters: { layout: "centered" },
+  tags: ["beta"],
+};
+
+export default meta;
+type Story = StoryObj<typeof useClipboard>;
+
+/**
+ * The happy path: click the button and the label flips for two seconds before
+ * going back. That's the whole point of the hook in one story.
+ */
+export const Default: Story = {
+  render: () => {
+    const { copy, copied } = useClipboard();
+
+    return (
+      <Button onClick={() => copy("Hello from useClipboard")}>
+        {copied ? "Copied!" : "Copy greeting"}
+      </Button>
+    );
+  },
+};
+
+/**
+ * Real-world usage: copying whatever the user typed in. The button label
+ * reflects the latest copy — every click re-arms the timeout, so the "copied"
+ * feedback always lines up with the most recent action.
+ */
+export const CopyFromInput: Story = {
+  render: () => {
+    const [value, setValue] = useState("npm i @boxcustodia/library@next");
+    const { copy, copied } = useClipboard();
+
+    return (
+      <Stack direction="vertical" gap={12} style={{ minWidth: 320 }}>
+        <Input
+          value={value}
+          onValueChange={(next) => setValue(next)}
+          placeholder="Type something to copy"
+        />
+        <Button onClick={() => copy(value)} disabled={!value}>
+          {copied ? "Copied to clipboard" : "Copy value"}
+        </Button>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Two seconds is great for short labels, but for long snippets you may want
+ * the confirmation to stick around. Pass `timeout` in milliseconds to extend
+ * (or shorten) the window.
+ */
+export const CustomTimeout: Story = {
+  render: () => {
+    const { copy, copied } = useClipboard({ timeout: 5000 });
+
+    return (
+      <Stack direction="vertical" gap={8} align="center">
+        <Button onClick={() => copy("Stays copied for 5 seconds")}>
+          {copied ? "Copied (5s)" : "Copy with 5s timeout"}
+        </Button>
+        <span className="text-xs text-muted-foreground">
+          The label sticks for 5000 ms instead of the default 2000 ms.
+        </span>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Sometimes you don't want to wait for the timeout — for example, when the
+ * user takes a follow-up action. Call `reset()` and the state goes back to
+ * idle right away.
+ */
+export const ManualReset: Story = {
+  render: () => {
+    const { copy, copied, reset } = useClipboard({ timeout: 60_000 });
+
+    return (
+      <Stack gap={8}>
+        <Button onClick={() => copy("Persistent until reset")}>
+          {copied ? "Copied" : "Copy"}
+        </Button>
+        <Button variant="outline" onClick={reset} disabled={!copied}>
+          Reset
+        </Button>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Browsers can refuse to copy — denied permissions, an insecure origin, an
+ * older browser without the Clipboard API. When that happens `error` carries
+ * the reason and `copied` stays `false`, so you can branch your UI safely.
+ *
+ * ```tsx
+ * const { copy, copied, error } = useClipboard();
+ *
+ * <Button onClick={() => copy(value)}>Copy</Button>
+ * {error && <span className="text-error">{error.message}</span>}
+ * {copied && <span className="text-success">Copied!</span>}
+ * ```
+ */
+export const ErrorHandling: Story = {
+  render: () => {
+    const { copy, copied, error, reset } = useClipboard();
+
+    return (
+      <Stack direction="vertical" gap={8} style={{ minWidth: 320 }}>
+        <Stack gap={8}>
+          <Button onClick={() => copy("Try copying me")}>Copy</Button>
+          <Button
+            variant="outline"
+            onClick={reset}
+            disabled={!copied && !error}
+          >
+            Reset
+          </Button>
+        </Stack>
+        {copied && (
+          <span className="text-xs text-success">Copied to clipboard.</span>
+        )}
+        {error && <span className="text-xs text-error">{error.message}</span>}
+        {!copied && !error && (
+          <span className="text-xs text-muted-foreground">
+            Click Copy. If the browser blocks it, you'll see the error here.
+          </span>
+        )}
+      </Stack>
+    );
+  },
+};