@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -0,0 +1,12 @@
+"use client";
+
+import { Form as FormPrimitive } from "@base-ui/react/form";
+import type React from "react";
+
+export type FormProps = FormPrimitive.Props;
+
+export function Form(props: FormProps): React.ReactElement {
+  return <FormPrimitive data-slot="form" {...props} />;
+}
+
+export { FormPrimitive };

package/src/components/form/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,44 @@
+export * from "./accordion";
+export * from "./alert";
+export * from "./alert-dialog";
+export * from "./auto-complete";
+export * from "./avatar";
+export * from "./button";
+export * from "./calendar";
+export * from "./card";
+export * from "./center";
+export * from "./checkbox";
+export * from "./checkbox-group";
+export * from "./combobox";
+export * from "./date-picker";
+export * from "./dialog";
+export * from "./divider";
+export * from "./dropzone";
+export * from "./empty";
+export * from "./field";
+export * from "./form";
+export * from "./input";
+export * from "./kbd";
+export * from "./label";
+export * from "./loader";
+export * from "./menu";
+export * from "./number-input";
+export * from "./otp";
+export * from "./pagination";
+export * from "./password";
+export * from "./popover";
+export * from "./progress";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./skeleton";
+export * from "./stack";
+export * from "./stepper";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tag";
+export * from "./textarea";
+export * from "./timeline";
+export * from "./toast";
+export * from "./tooltip";
+export * from "./tree";

package/src/components/input/index.ts

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

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { action } from "storybook/actions";
+import { Input, InputPrimitive } from "./input";
+
+/**
+ * Single-line text input built on Base UI. Styles applied directly to the
+ * `<input>` element — no wrapper. `aria-invalid` drives error styling;
+ * `nativeInput` swaps Base UI for a plain `<input>`.
+ */
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  parameters: { layout: "centered" },
+  args: {
+    placeholder: "Placeholder...",
+    onValueChange: action("onValueChange"),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+/**
+ * `aria-invalid="true"` applies error border and ring — no Field wrapper needed.
+ */
+export const Invalid: Story = {
+  args: { "aria-invalid": "true" },
+};
+
+/**
+ * Hides browser spinner arrows via webkit pseudo-elements and `-moz-appearance`.
+ */
+export const NumberType: Story = {
+  args: { type: "number", placeholder: "0" },
+};
+
+/**
+ * Hides webkit search decoration buttons injected by the browser.
+ */
+export const SearchType: Story = {
+  args: { type: "search", placeholder: "Search..." },
+};
+
+/**
+ * Applies `file:` variant styles — font, spacing, and transparent background
+ * on the browser's file-picker button.
+ */
+export const FileType: Story = {
+  args: { type: "file" },
+};
+
+/**
+ * `onValueChange` fires with `(value: string, event)` — the string value is the
+ * first argument, so no `event.target.value` needed.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="flex flex-col gap-2">
+        <Input
+          value={value}
+          onValueChange={setValue}
+          placeholder="Type something..."
+          aria-label="Controlled input"
+        />
+        <span className="text-sm text-muted-foreground">Value: "{value}"</span>
+      </div>
+    );
+  },
+};
+
+/**
+ * `nativeInput` swaps Base UI for a plain `<input>`. Identical appearance —
+ * use when you need native input APIs without Base UI overhead.
+ */
+export const NativeInput: Story = {
+  args: { nativeInput: true },
+};
+
+/**
+ * Raw Base UI Input with no styles applied. Use when you need Base UI's field
+ * context wiring with full style control.
+ *
+ * ```tsx
+ * <InputPrimitive className="..." />
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <InputPrimitive
+      className="w-full rounded-md border border-input px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      placeholder="Raw Input"
+    />
+  ),
+};

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { Input as BaseInput } from "@base-ui/react/input";
+import { type ChangeEvent, type ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib";
+
+export const inputBaseClasses =
+  "h-8 w-full px-3 rounded-md border border-input bg-background text-sm outline-none transition-shadow placeholder:text-muted-foreground";
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type InputProps = Omit<BaseInput.Props, "size" | "onChange"> & {
+  onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+  nativeInput?: boolean;
+};
+
+export function Input({
+  className,
+  nativeInput = false,
+  onValueChange,
+  ...props
+}: InputProps) {
+  const classes = cn(
+    inputBaseClasses,
+    "focus-visible:border-ring",
+    "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+    "has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    props.type === "number" && [
+      "[&::-webkit-outer-spin-button]:appearance-none",
+      "[&::-webkit-inner-spin-button]:appearance-none",
+      "[-moz-appearance:textfield]",
+    ],
+    props.type === "search" && [
+      "[&::-webkit-search-cancel-button]:appearance-none",
+      "[&::-webkit-search-decoration]:appearance-none",
+      "[&::-webkit-search-results-button]:appearance-none",
+      "[&::-webkit-search-results-decoration]:appearance-none",
+    ],
+    props.type === "file" && [
+      "text-muted-foreground",
+      "file:me-3 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm",
+    ],
+    className,
+  );
+
+  const handleChange = onValueChange
+    ? (event: ChangeEvent<HTMLInputElement>) =>
+        onValueChange(event.target.value, event)
+    : undefined;
+
+  if (nativeInput) {
+    return (
+      <input
+        autoComplete="off"
+        className={classes}
+        data-slot="input"
+        onChange={handleChange}
+        {...(props as ComponentPropsWithoutRef<"input">)}
+      />
+    );
+  }
+
+  return (
+    <BaseInput
+      autoComplete="off"
+      className={classes}
+      data-slot="input"
+      onChange={handleChange}
+      {...props}
+    />
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { BaseInput as InputPrimitive };

package/src/components/kbd/index.ts

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

package/src/components/kbd/kbd.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Kbd, KbdGroup } from "../../components";
+
+/**
+ * Keyboard key representation. Use `KbdGroup` to compose multiple `Kbd` keys
+ * into a combination — no separator needed between them.
+ */
+const meta: Meta<typeof Kbd> = {
+  title: "Components/Kbd",
+  component: Kbd,
+  args: {
+    children: "K",
+  },
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Kbd>;
+
+export const Default: Story = {};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>Shift</Kbd>
+        <Kbd>P</Kbd>
+      </KbdGroup>
+      <KbdGroup>
+        <Kbd>Ctrl</Kbd>
+        <Kbd>Alt</Kbd>
+        <Kbd>Delete</Kbd>
+      </KbdGroup>
+    </div>
+  ),
+};

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

@@ -0,0 +1,33 @@
+"use client";
+
+import type * as React from "react";
+import { cn } from "../../lib";
+
+export function Kbd({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn(
+        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  );
+}
+
+export function KbdGroup({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn("inline-flex items-center gap-1", className)}
+      data-slot="kbd-group"
+      {...props}
+    />
+  );
+}

package/src/components/label/index.ts

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

package/src/components/label/label.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input, Label } from "../../components";
+
+/**
+ * Semantic `<label>` element for form fields.
+ * Supports the `render` prop for polymorphic rendering.
+ * Pass `tooltip` to render an inline info icon that reveals a tooltip on hover.
+ */
+const meta: Meta<typeof Label> = {
+  title: "Components/Label",
+  component: Label,
+  args: {
+    children: "First name",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {};
+
+/**
+ * Primary use case: associate a label with a form control via `htmlFor`.
+ * Clicking the label moves focus to the linked input.
+ */
+export const WithInput: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-2">
+      <Label {...args} htmlFor="name" />
+      <Input id="name" placeholder="Enter your name" />
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+/**
+ * Pass any `ReactNode` as `tooltip` to render an info icon next to the label text.
+ * Hovering the icon shows the tooltip content.
+ */
+export const WithTooltip: Story = {
+  args: {
+    tooltip: "This field is required for billing purposes.",
+  },
+};
+
+/**
+ * `className` estila el root `<label>`. `classNames` expone los slots
+ * `asterisk` (el `*` que aparece con `required`) y `tooltip` (el botón con
+ * el ícono de info que aparece con `tooltip`).
+ */
+export const WithClassNames: Story = {
+  args: {
+    required: true,
+    tooltip: "Used for billing.",
+    classNames: {
+      asterisk: "text-primary font-bold",
+      tooltip: "text-primary hover:text-primary/80",
+    },
+  },
+};
+
+/**
+ * The `render` prop replaces the root element while preserving all
+ * merged props and children. Useful for custom wrappers or non-label contexts.
+ */
+export const Render: Story = {
+  render: (args) => (
+    <Label {...args} render={({ children }) => <span>{children}</span>} />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Label render={({ children }) => <span>{children}</span>}>
+  First name
+</Label>`,
+      },
+    },
+  },
+};