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

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

@@ -0,0 +1,209 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Field } from "../field";
+import { Label } from "../label";
+import {
+  NumberInput,
+  NumberInputCursorIcon,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputInput,
+  NumberInputRoot,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+} from "./number-input";
+
+// TODO: Mostrar borde rojo si es invalid
+/**
+ * Input numérico construido sobre Base UI NumberField.
+ * Soporta incremento/decremento por botones, teclado y scrub (drag horizontal).
+ * Usá `hideControls` para renderizar sólo el input sin botones.
+ * Para composición avanzada, usá los primitivos `NumberInputRoot`, `NumberInputGroup`, etc.
+ */
+const meta: Meta<typeof NumberInput> = {
+  title: "Components/NumberInput",
+  component: NumberInput,
+  parameters: { layout: "centered" },
+  args: {
+    name: "quantity",
+    defaultValue: 0,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberInput>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: 42,
+  },
+};
+
+/**
+ * `hideControls` oculta los botones +/- y renderiza sólo el input.
+ * Útil cuando el espacio es limitado o los controles resultan innecesarios.
+ */
+export const HideControls: Story = {
+  args: {
+    hideControls: true,
+  },
+};
+
+/**
+ * El `ScrubArea` permite cambiar el valor arrastrando horizontalmente sobre la etiqueta.
+ * Requiere composición manual con los primitivos exportados.
+ */
+export const Scrub: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <NumberInputRoot
+        value={value}
+        onValueChange={(v) => v !== null && setValue(v)}
+        name="opacity"
+        allowWheelScrub
+      >
+        <div className="flex flex-col gap-2">
+          <NumberInputScrubArea>
+            <Label className="cursor-ew-resize" htmlFor="scrub-input">
+              Opacity
+            </Label>
+            <NumberInputScrubAreaCursor>
+              <NumberInputCursorIcon />
+            </NumberInputScrubAreaCursor>
+          </NumberInputScrubArea>
+          <NumberInputGroup>
+            <NumberInputDecrement />
+            <NumberInputInput id="scrub-input" />
+            <NumberInputIncrement />
+          </NumberInputGroup>
+        </div>
+      </NumberInputRoot>
+    );
+  },
+};
+
+/**
+ * Usá `value` + `onChange` para controlar el valor externamente.
+ * `onChange` recibe `number | null` — `null` cuando el campo está vacío o contiene un valor inválido.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(0);
+    return (
+      <div className="flex w-48 flex-col gap-2">
+        <NumberInput name="quantity" value={value} onChange={setValue} />
+        <p className="text-muted-foreground text-xs">
+          Valor: {value ?? "vacío"}
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Usá `min` y `max` para restringir el rango de valores.
+ * Los botones se deshabilitan automáticamente al alcanzar los límites.
+ */
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <div className="flex w-64 flex-col gap-2">
+        <NumberInput
+          name="progress"
+          value={value}
+          onChange={(v) => v !== null && setValue(v)}
+          min={0}
+          max={100}
+          step={10}
+        />
+        <p className="text-muted-foreground text-xs">
+          Valor: {value} (0 – 100, paso 10)
+        </p>
+      </div>
+    );
+  },
+};
+
+/**
+ * Pasá un objeto `format` compatible con `Intl.NumberFormat` para formatear el valor mostrado.
+ * El formato se aplica al mostrar y no interfiere con la edición ni con el valor interno.
+ *
+ * Para `style: "percent"`, el valor interno es decimal (0–1) y se muestra multiplicado por 100.
+ * Al tipear manualmente, incluí el símbolo "%" (ej: "80%") para que el parser lo interprete correctamente.
+ *
+ * Para campos tipo DNI, omitir `min`/`max` evita que el campo auto-corrija valores parciales mientras
+ * se escribe. La validación del rango se realiza en submit vía `Field` con el prop `error`.
+ *
+ * ```tsx
+ * <NumberInput
+ *   name="dni"
+ *   placeholder="Ej: 33.456.789"
+ *   format={{ useGrouping: true, maximumFractionDigits: 0 }}
+ *   hideControls
+ * />
+ * ```
+ */
+export const FormattedValue: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-4">
+      <NumberInput
+        name="price"
+        defaultValue={1299}
+        locale="es-AR"
+        format={{ style: "currency", currency: "ARS" }}
+      />
+      <NumberInput
+        name="ratio"
+        defaultValue={0.75}
+        step={0.05}
+        min={0}
+        max={1}
+        format={{ style: "percent" }}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Controlá la precisión y el incremento mínimo con `step`.
+ * `largeStep` (Page Up / Page Down) multiplica el paso por defecto.
+ */
+export const Step: Story = {
+  args: {
+    name: "rating",
+    step: 0.5,
+    largeStep: 2,
+    min: 0,
+    max: 10,
+    defaultValue: 2.5,
+    format: { minimumFractionDigits: 1, maximumFractionDigits: 1 },
+  },
+};
+
+/**
+ * Integrá el `NumberInput` con el componente `Field` para obtener label, descripción y errores.
+ * Cuando `Field` tiene un `error`, el borde rojo se aplica automáticamente vía el contexto de Base UI.
+ * Para usarlo sin `Field`, pasá `invalid` directamente al componente.
+ */
+export const FormIntegration: Story = {
+  render: () => {
+    return (
+      <div className="w-64">
+        <Field
+          label="Edad"
+          description="Ingresá tu edad en años."
+          error="El valor debe estar entre 18 y 99."
+        >
+          <NumberInput name="age" />
+        </Field>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,87 @@
+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" />);
+    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("deshabilita el input cuando la prop disabled es true", () => {
+    render(<NumberInput name="cantidad" 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("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("llama a onChange cuando el valor cambia", () => {
+    const handleChange = vi.fn();
+    render(<NumberInput name="cantidad" onChange={handleChange} />);
+    const input = screen.getByRole("textbox");
+
+    fireEvent.input(input, { target: { value: "5" } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("respeta el valor mínimo", () => {
+    render(<NumberInput name="cantidad" min={0} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.input(input, { target: { value: "-5" } });
+    fireEvent.blur(input);
+    expect(input.value).toBe("0");
+  });
+
+  it("respeta el valor máximo", () => {
+    render(<NumberInput name="cantidad" max={100} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.input(input, { target: { value: "150" } });
+    fireEvent.blur(input);
+    expect(input.value).toBe("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");
+
+    fireEvent.click(incrementButton);
+    expect(input.value).toBe("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");
+
+    fireEvent.click(decrementButton);
+    expect(input.value).toBe("4");
+  });
+
+  it("oculta los botones cuando hideControls es true", () => {
+    render(<NumberInput name="cantidad" hideControls />);
+    expect(screen.queryByTestId("increment-trigger")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("decrement-trigger")).not.toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,232 @@
+"use client";
+
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MinusIcon,
+  PlusIcon,
+} from "lucide-react";
+import { type ComponentProps } from "react";
+import { cn } from "../../lib";
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+export function NumberInputRoot({
+  className,
+  ...props
+}: NumberFieldPrimitive.Root.Props) {
+  return (
+    <NumberFieldPrimitive.Root
+      className={cn("w-full", className)}
+      data-slot="number-input"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(
+        "flex h-10 w-full items-center overflow-hidden rounded-md bg-background text-sm transition-shadow",
+        "outline outline-1 outline-input [outline-offset:-1px]",
+        "focus-within:outline-ring",
+        "aria-invalid:outline-error focus-within:aria-invalid:ring-error/20",
+        "has-aria-invalid:outline-error focus-within:has-aria-invalid:ring-error/20",
+        "data-[invalid]:outline-error focus-within:data-[invalid]:ring-error/20",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:pointer-events-none",
+        "[&_svg]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="number-input-group"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(
+        "min-w-0 flex-1 bg-transparent px-3 py-2 text-left tabular-nums outline-none",
+        "placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="number-input-input"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputDecrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cn(
+        "flex shrink-0 cursor-pointer items-center justify-center border-r border-input px-2 py-2 text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      data-slot="number-input-decrement"
+      {...props}
+    >
+      {children ?? <MinusIcon />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
+
+export function NumberInputIncrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cn(
+        "flex shrink-0 cursor-pointer items-center justify-center border-l border-input px-2 py-2 text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      data-slot="number-input-increment"
+      {...props}
+    >
+      {children ?? <PlusIcon />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
+
+export function NumberInputScrubArea({
+  className,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props) {
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn("inline-flex cursor-ew-resize items-center", className)}
+      data-slot="number-input-scrub-area"
+      {...props}
+    />
+  );
+}
+
+export function NumberInputScrubAreaCursor({
+  className,
+  ...props
+}: NumberFieldPrimitive.ScrubAreaCursor.Props) {
+  return (
+    <NumberFieldPrimitive.ScrubAreaCursor
+      className={cn("drop-shadow-[0_1px_1px_#0008] filter", className)}
+      {...props}
+    />
+  );
+}
+
+export function NumberInputCursorIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="black"
+      height="14"
+      stroke="white"
+      viewBox="0 0 24 14"
+      width="26"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export interface NumberInputProps extends NumberFieldPrimitive.Root.Props {
+  /** Hides the increment/decrement buttons. */
+  hideControls?: boolean;
+  /** Shorthand for `onValueChange` — receives only the value, without event details. */
+  onChange?: (value: number | null) => void;
+  /** Marks the field as invalid, adding the error border to the group. */
+  invalid?: boolean;
+  /** Forwarded to the underlying input element. */
+  placeholder?: string;
+  groupProps?: NumberFieldPrimitive.Group.Props;
+  inputProps?: NumberFieldPrimitive.Input.Props;
+  decrementProps?: NumberFieldPrimitive.Decrement.Props;
+  incrementProps?: NumberFieldPrimitive.Increment.Props;
+}
+
+export function NumberInput({
+  className,
+  hideControls = false,
+  onChange,
+  onValueChange,
+  invalid,
+  placeholder,
+  groupProps,
+  inputProps,
+  decrementProps,
+  incrementProps,
+  ...props
+}: NumberInputProps) {
+  return (
+    <NumberInputRoot
+      onValueChange={(v, d) => {
+        onChange?.(v);
+        onValueChange?.(v, d);
+      }}
+      {...props}
+    >
+      <NumberInputGroup
+        aria-invalid={invalid || undefined}
+        {...groupProps}
+        className={cn(className, groupProps?.className)}
+      >
+        <NumberInputInput
+          {...(invalid ? { "aria-invalid": true } : {})}
+          placeholder={placeholder}
+          {...inputProps}
+          className={cn("self-stretch", inputProps?.className)}
+        />
+        {!hideControls && (
+          <div className="flex flex-col self-stretch divide-y divide-input border-l border-input">
+            <NumberInputIncrement
+              data-testid="increment-trigger"
+              {...incrementProps}
+              className={cn(
+                "flex-1 border-l-0 py-0 [&_svg]:size-3",
+                incrementProps?.className,
+              )}
+            >
+              {incrementProps?.children ?? <ChevronUpIcon />}
+            </NumberInputIncrement>
+            <NumberInputDecrement
+              data-testid="decrement-trigger"
+              {...decrementProps}
+              className={cn(
+                "flex-1 border-r-0 py-0 [&_svg]:size-3",
+                decrementProps?.className,
+              )}
+            >
+              {decrementProps?.children ?? <ChevronDownIcon />}
+            </NumberInputDecrement>
+          </div>
+        )}
+      </NumberInputGroup>
+    </NumberInputRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { NumberFieldPrimitive as NumberInputPrimitive };

package/src/components/pagination/components/pagination-option.tsx

@@ -0,0 +1,27 @@
+import { ButtonHTMLAttributes } from "react";
+import { DOTS } from "../../../hooks";
+import { cn } from "../../../lib";
+
+interface PaginationOptionProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  isActive?: boolean;
+}
+
+const PaginationOption = ({
+  isActive = false,
+  ...props
+}: PaginationOptionProps) => (
+  <button
+    {...props}
+    data-slot="pagination-option"
+    data-active={isActive}
+    data-dots={props.children === DOTS}
+    className={cn(
+      "transition-colors border py-2 px-4 w-[50px] h-full data-[active=false]:hover:bg-accent",
+      "data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:border-transparent data-[active=true]:hover:bg-primary/90",
+      props.className,
+    )}
+  />
+);
+
+export { PaginationOption, type PaginationOptionProps };

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.stories.tsx

@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps } from "react";
+import { action } from "storybook/actions";
+import { Pagination } from "../../components";
+import { cn } from "../../lib";
+
+const meta: Meta<typeof Pagination> = {
+  title: "Data display/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  args: {
+    siblingCount: 1,
+    totalItems: 100,
+    pageSize: 10,
+    initialCurrentPage: 1,
+    onChange: action("onChange"),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const DotsVariants: Story = {
+  argTypes: {
+    totalItems: { control: false },
+    pageSize: { control: false },
+    initialCurrentPage: { control: false },
+  },
+  render: (args) => {
+    return (
+      <div className="space-y-2">
+        <h2>No hay suficientes elementos para mostrar puntos</h2>
+        <Pagination
+          {...(args as ComponentProps<typeof Pagination>)}
+          pageSize={20}
+        />
+        <h2>Puntos a la derecha</h2>
+        <Pagination
+          {...(args as ComponentProps<typeof Pagination>)}
+          initialCurrentPage={1}
+        />
+        <h2>Puntos de ambos lados</h2>
+        <Pagination
+          {...(args as ComponentProps<typeof Pagination>)}
+          initialCurrentPage={5}
+        />
+        <h2>Puntos a la izquierda</h2>
+        <Pagination
+          {...(args as ComponentProps<typeof Pagination>)}
+          initialCurrentPage={10}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Se exponen los siguientes atributos:
+ *
+ * | Atributo | Descripción |
+ * | --- | --- |
+ * | `data-active` | si el elemento es el activo |
+ * | `data-dots` | si el elemento son puntos|
+ **/
+export const Custom: Story = {
+  args: {
+    className: "gap-x-4",
+    optionProps: {
+      className: cn(
+        "p-0 w-9 h-9 rounded-full flex justify-center items-center",
+        "data-[active=true]:bg-error data-[active=true]:text-error-foreground data-[active=true]:hover:bg-error/90",
+        "data-[dots=true]:border-none data-[dots=true]:bg-transparent",
+        "[&:nth-child(-n+2)]:border-none [&:nth-child(-n+2)]:bg-background",
+        "[&:nth-last-child(-n+2)]:border-none [&:nth-last-child(-n+2)]:bg-background",
+      ),
+    },
+  },
+};