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

package/src/components/stack/stack.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ComponentProps, CSSProperties, ElementType } from "react";
 import { cn } from "../../lib";
 

package/src/components/stepper/stepper.test.tsx

@@ -1,11 +1,20 @@
 import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import {
   Stepper,
   StepperContent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
   StepperNav,
+  StepperPanel,
   StepperRoot,
+  StepperSeparator,
+  StepperTitle,
   StepperTrigger,
+  useStepItem,
+  useStepper,
 } from "../../components";
 import { click } from "../../utils/tests";
 
@@ -20,8 +29,16 @@ describe("Stepper component", () => {
     render(
       <StepperRoot>
         <StepperNav>
-          <StepperTrigger value={0} title="trigger"></StepperTrigger>
-          <StepperTrigger value={1} title="step"></StepperTrigger>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperTitle>trigger</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
+          <StepperItem step={2}>
+            <StepperTrigger>
+              <StepperTitle>step</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
         </StepperNav>
       </StepperRoot>,
     );
@@ -32,44 +49,57 @@ describe("Stepper component", () => {
 
   it("should show step content", () => {
     render(
-      <StepperRoot value={0}>
+      <StepperRoot value={1}>
         <StepperNav>
-          <StepperTrigger value={0} title="trigger"></StepperTrigger>
-          <StepperTrigger value={1} title="test"></StepperTrigger>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperTitle>trigger</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
+          <StepperItem step={2}>
+            <StepperTrigger>
+              <StepperTitle>test</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
         </StepperNav>
-        <StepperContent value={0}>Contenido de trigger</StepperContent>
+        <StepperContent value={1}>Contenido de trigger</StepperContent>
       </StepperRoot>,
     );
 
     expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
   });
 
-  it("should be controlled", () => {
+  it("should be controlled", async () => {
     const mock = vi.fn();
     render(
-      <StepperRoot value={0} onValueChange={mock}>
+      <StepperRoot value={1} onValueChange={mock}>
         <StepperNav>
-          <StepperTrigger value={0} title="trigger"></StepperTrigger>
-          <StepperTrigger value={1} title="test"></StepperTrigger>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperTitle>trigger</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
+          <StepperItem step={2}>
+            <StepperTrigger>
+              <StepperTitle>test</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
         </StepperNav>
-        <StepperContent value={0}>Contenido de trigger</StepperContent>
-        <StepperContent value={1}>Contenido de test</StepperContent>
       </StepperRoot>,
     );
 
-    const testTrigger = screen.getByText("test");
-    click(testTrigger);
+    click(screen.getByText("test"));
 
-    waitFor(() => {
-      expect(mock).toHaveBeenCalledWith(1);
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledWith(2);
     });
   });
 
-  it("should show step content", () => {
+  it("should show composite step content", async () => {
     const mock = vi.fn();
     render(
       <Stepper
-        value={0}
+        value={1}
         onValueChange={mock}
         items={[
           { title: "trigger", content: "Contenido de trigger" },
@@ -80,12 +110,337 @@ describe("Stepper component", () => {
 
     expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
 
-    const testTrigger = screen.getByText("step1");
-    click(testTrigger);
+    click(screen.getByText("step1"));
 
-    waitFor(() => {
-      expect(mock).toHaveBeenCalledWith(1);
-      expect(screen.getByText("Contenido de step1")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(mock).toHaveBeenCalledWith(2);
     });
   });
 });
+
+// ── Helper: minimal two-step nav ─────────────────────────────────────────────
+
+function TwoStepStepper({
+  defaultValue = 1,
+  ...props
+}: Partial<React.ComponentProps<typeof StepperRoot>>) {
+  return (
+    <StepperRoot defaultValue={defaultValue} {...props}>
+      <StepperNav>
+        <StepperItem step={1}>
+          <StepperTrigger>Step 1</StepperTrigger>
+          <StepperSeparator />
+        </StepperItem>
+        <StepperItem step={2}>
+          <StepperTrigger>Step 2</StepperTrigger>
+        </StepperItem>
+      </StepperNav>
+    </StepperRoot>
+  );
+}
+
+describe("Stepper data-slots", () => {
+  it("StepperRoot renders with data-slot='stepper'", () => {
+    render(<StepperRoot />);
+    expect(document.querySelector('[data-slot="stepper"]')).toBeTruthy();
+  });
+
+  it("StepperNav renders with data-slot='stepper-nav'", () => {
+    render(
+      <StepperRoot>
+        <StepperNav />
+      </StepperRoot>,
+    );
+    expect(document.querySelector('[data-slot="stepper-nav"]')).toBeTruthy();
+  });
+
+  it("StepperItem renders with data-slot='stepper-item'", () => {
+    render(
+      <StepperRoot>
+        <StepperNav>
+          <StepperItem step={1} />
+        </StepperNav>
+      </StepperRoot>,
+    );
+    expect(document.querySelector('[data-slot="stepper-item"]')).toBeTruthy();
+  });
+
+  it("StepperTrigger renders with data-slot='stepper-trigger'", () => {
+    render(<TwoStepStepper />);
+    expect(document.querySelector('[data-slot="stepper-trigger"]')).toBeTruthy();
+  });
+
+  it("StepperIndicator renders with data-slot='stepper-indicator'", () => {
+    render(
+      <StepperRoot>
+        <StepperNav>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperIndicator>1</StepperIndicator>
+            </StepperTrigger>
+          </StepperItem>
+        </StepperNav>
+      </StepperRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="stepper-indicator"]'),
+    ).toBeTruthy();
+  });
+
+  it("StepperSeparator renders with data-slot='stepper-separator'", () => {
+    render(<TwoStepStepper />);
+    expect(
+      document.querySelector('[data-slot="stepper-separator"]'),
+    ).toBeTruthy();
+  });
+
+  it("StepperTitle renders with data-slot='stepper-title'", () => {
+    render(
+      <StepperRoot>
+        <StepperNav>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperTitle>Title</StepperTitle>
+            </StepperTrigger>
+          </StepperItem>
+        </StepperNav>
+      </StepperRoot>,
+    );
+    expect(document.querySelector('[data-slot="stepper-title"]')).toBeTruthy();
+  });
+
+  it("StepperDescription renders with data-slot='stepper-description'", () => {
+    render(
+      <StepperRoot>
+        <StepperNav>
+          <StepperItem step={1}>
+            <StepperTrigger>
+              <StepperDescription>Desc</StepperDescription>
+            </StepperTrigger>
+          </StepperItem>
+        </StepperNav>
+      </StepperRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="stepper-description"]'),
+    ).toBeTruthy();
+  });
+
+  it("StepperPanel renders with data-slot='stepper-panel'", () => {
+    render(
+      <StepperRoot>
+        <StepperPanel />
+      </StepperRoot>,
+    );
+    expect(document.querySelector('[data-slot="stepper-panel"]')).toBeTruthy();
+  });
+
+  it("StepperContent renders with data-slot='stepper-content'", () => {
+    render(
+      <StepperRoot defaultValue={1}>
+        <StepperContent value={1}>Content</StepperContent>
+      </StepperRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="stepper-content"]'),
+    ).toBeTruthy();
+  });
+});
+
+describe("Stepper orientation", () => {
+  it("sets data-orientation='horizontal' by default", () => {
+    render(<StepperRoot />);
+    expect(document.querySelector('[data-slot="stepper"]')).toHaveAttribute(
+      "data-orientation",
+      "horizontal",
+    );
+  });
+
+  it("sets data-orientation='vertical' when vertical", () => {
+    render(<StepperRoot orientation="vertical" />);
+    expect(document.querySelector('[data-slot="stepper"]')).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+  });
+});
+
+describe("Stepper step states", () => {
+  it("active step has data-state='active'", () => {
+    render(<TwoStepStepper defaultValue={1} />);
+    const items = document.querySelectorAll('[data-slot="stepper-item"]');
+    expect(items[0]).toHaveAttribute("data-state", "active");
+  });
+
+  it("completed step has data-state='completed'", () => {
+    render(<TwoStepStepper defaultValue={2} />);
+    const items = document.querySelectorAll('[data-slot="stepper-item"]');
+    expect(items[0]).toHaveAttribute("data-state", "completed");
+  });
+
+  it("inactive step has data-state='inactive'", () => {
+    render(<TwoStepStepper defaultValue={1} />);
+    const items = document.querySelectorAll('[data-slot="stepper-item"]');
+    expect(items[1]).toHaveAttribute("data-state", "inactive");
+  });
+});
+
+describe("Stepper trigger ARIA", () => {
+  it("active trigger has aria-selected='true'", () => {
+    render(<TwoStepStepper defaultValue={1} />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("triggers have aria-controls pointing to panels", () => {
+    render(<TwoStepStepper />);
+    expect(screen.getAllByRole("tab")[0]).toHaveAttribute(
+      "aria-controls",
+      "stepper-panel-1",
+    );
+  });
+});
+
+describe("Stepper triggerMode", () => {
+  it("triggerMode='none' marks all triggers as aria-disabled", () => {
+    render(<TwoStepStepper triggerMode="none" />);
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("triggerMode='forward-only' disables backward steps", () => {
+    render(<TwoStepStepper defaultValue={2} triggerMode="forward-only" />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-disabled", "true");
+    expect(tabs[1]).not.toHaveAttribute("aria-disabled");
+  });
+});
+
+describe("Stepper loading state", () => {
+  it("active loading step has data-loading on item", () => {
+    render(
+      <StepperRoot defaultValue={1}>
+        <StepperNav>
+          <StepperItem step={1} loading>
+            <StepperTrigger>Step 1</StepperTrigger>
+          </StepperItem>
+        </StepperNav>
+      </StepperRoot>,
+    );
+    expect(document.querySelector('[data-slot="stepper-item"]')).toHaveAttribute(
+      "data-loading",
+    );
+  });
+});
+
+describe("Stepper defaultValue", () => {
+  it("starts at specified defaultValue", () => {
+    render(<TwoStepStepper defaultValue={2} />);
+    const items = document.querySelectorAll('[data-slot="stepper-item"]');
+    expect(items[1]).toHaveAttribute("data-state", "active");
+  });
+});
+
+describe("StepperContent forceMount", () => {
+  it("does not render inactive content without forceMount", () => {
+    render(
+      <StepperRoot defaultValue={1}>
+        <StepperContent value={2}>Inactive</StepperContent>
+      </StepperRoot>,
+    );
+    expect(screen.queryByText("Inactive")).toBeNull();
+  });
+
+  it("renders inactive content when forceMount=true", () => {
+    render(
+      <StepperRoot defaultValue={1}>
+        <StepperContent value={2} forceMount>
+          Inactive
+        </StepperContent>
+      </StepperRoot>,
+    );
+    expect(screen.getByText("Inactive")).toBeTruthy();
+  });
+});
+
+describe("Stepper keyboard navigation", () => {
+  it("ArrowRight moves focus to next trigger", async () => {
+    render(<TwoStepStepper />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[0].focus();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(tabs[1]).toHaveFocus();
+  });
+
+  it("ArrowLeft moves focus to previous trigger", async () => {
+    render(<TwoStepStepper defaultValue={2} />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[1].focus();
+    await userEvent.keyboard("{ArrowLeft}");
+    expect(tabs[0]).toHaveFocus();
+  });
+
+  it("Home focuses first trigger", async () => {
+    render(<TwoStepStepper defaultValue={2} />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[1].focus();
+    await userEvent.keyboard("{Home}");
+    expect(tabs[0]).toHaveFocus();
+  });
+
+  it("End focuses last trigger", async () => {
+    render(<TwoStepStepper />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[0].focus();
+    await userEvent.keyboard("{End}");
+    expect(tabs[1]).toHaveFocus();
+  });
+});
+
+describe("Stepper composite classNames", () => {
+  it("applies classNames to nav, item, trigger, indicator, separator slots", () => {
+    render(
+      <Stepper
+        items={[{ title: "Step 1" }, { title: "Step 2" }]}
+        classNames={{
+          nav: "cls-nav",
+          item: "cls-item",
+          trigger: "cls-trigger",
+          indicator: "cls-indicator",
+          separator: "cls-sep",
+          title: "cls-title",
+        }}
+      />,
+    );
+    expect(document.querySelector('[data-slot="stepper-nav"]')).toHaveClass(
+      "cls-nav",
+    );
+    expect(document.querySelector('[data-slot="stepper-item"]')).toHaveClass(
+      "cls-item",
+    );
+    expect(document.querySelector('[data-slot="stepper-trigger"]')).toHaveClass(
+      "cls-trigger",
+    );
+    expect(
+      document.querySelector('[data-slot="stepper-indicator"]'),
+    ).toHaveClass("cls-indicator");
+    expect(
+      document.querySelector('[data-slot="stepper-separator"]'),
+    ).toHaveClass("cls-sep");
+    expect(document.querySelector('[data-slot="stepper-title"]')).toHaveClass(
+      "cls-title",
+    );
+  });
+});
+
+describe("Stepper hook exports", () => {
+  it("exports useStepper hook", () => {
+    expect(typeof useStepper).toBe("function");
+  });
+
+  it("exports useStepItem hook", () => {
+    expect(typeof useStepItem).toBe("function");
+  });
+});

package/src/components/switch/switch.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { act } from "react";
 import { describe, expect, it } from "vitest";
-import { Switch } from "../../components";
+import { Switch, SwitchRoot, SwitchThumb } from "../../components";
 
 describe("Switch component", () => {
   it("should be checked", () => {
@@ -25,6 +25,72 @@ describe("Switch component", () => {
   it("should be disabled", () => {
     render(<Switch name="Switch" data-testid="Switch" disabled />);
     const checkbox = screen.getByTestId("Switch");
-    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute("aria-disabled", "true");
+  });
+});
+
+describe("Switch primitives", () => {
+  it("SwitchRoot renders with data-slot='switch'", () => {
+    render(<SwitchRoot />);
+    expect(document.querySelector('[data-slot="switch"]')).toBeTruthy();
+  });
+
+  it("SwitchThumb renders with data-slot='switch-thumb'", () => {
+    render(
+      <SwitchRoot>
+        <SwitchThumb />
+      </SwitchRoot>,
+    );
+    expect(document.querySelector('[data-slot="switch-thumb"]')).toBeTruthy();
+  });
+});
+
+describe("Switch composite", () => {
+  it("renders label from label prop", () => {
+    render(<Switch label="Dark mode" />);
+    expect(screen.getByText("Dark mode")).toBeTruthy();
+  });
+
+  it("renders label from children", () => {
+    render(<Switch>Notifications</Switch>);
+    expect(screen.getByText("Notifications")).toBeTruthy();
+  });
+
+  it("associates switch with label via htmlFor", () => {
+    render(<Switch label="Enable" />);
+    expect(screen.getByRole("switch", { name: "Enable" })).toBeTruthy();
+  });
+
+  it("applies className to switch root", () => {
+    render(<Switch className="custom-switch" />);
+    expect(document.querySelector('[data-slot="switch"]')).toHaveClass(
+      "custom-switch",
+    );
+  });
+
+  it("applies classNames.wrapper to wrapper div", () => {
+    render(<Switch classNames={{ wrapper: "cls-wrap" }} />);
+    expect(document.querySelector('[data-slot="switch"]')?.parentElement).toHaveClass(
+      "cls-wrap",
+    );
+  });
+
+  it("applies classNames.thumb to thumb", () => {
+    render(<Switch classNames={{ thumb: "cls-thumb" }} />);
+    expect(document.querySelector('[data-slot="switch-thumb"]')).toHaveClass(
+      "cls-thumb",
+    );
+  });
+
+  it("applies classNames.label to label", () => {
+    render(<Switch label="Test" classNames={{ label: "cls-label" }} />);
+    expect(screen.getByText("Test")).toHaveClass("cls-label");
+  });
+
+  it("applies flex-row-reverse when controlFirst=false", () => {
+    render(<Switch label="Test" controlFirst={false} />);
+    expect(
+      document.querySelector('[data-slot="switch"]')?.parentElement,
+    ).toHaveClass("flex-row-reverse");
   });
 });

package/src/components/switch/switch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import type * as React from "react";
 import { useId } from "react";