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

package/dist/src/hooks/use-mutation/use-mutation.d.ts

@@ -1,15 +1,22 @@
-type Mutation<TArgs extends any[], TReturn> = (...args: TArgs) => Promise<TReturn>;
-interface UseMutationOptions<TArgs extends any[], TReturn> {
-    fn: Mutation<TArgs, TReturn>;
-    onError?: (error: Error) => void;
-    onSuccess?: (data: TReturn) => void;
-    onFinish?: () => void;
+type MutationStatus = "idle" | "pending" | "success" | "error";
+export interface UseMutationOptions<TVariables = void, TData = unknown> {
+    fn: (variables: TVariables) => Promise<TData>;
+    onMutate?: (variables: TVariables) => void;
+    onSuccess?: (data: TData, variables: TVariables) => void;
+    onError?: (error: Error, variables: TVariables) => void;
+    onSettled?: (data: TData | null, error: Error | null, variables: TVariables) => void;
 }
-interface UseMutationReturn<TArgs extends any[], TReturn> {
-    mutate: Mutation<TArgs, TReturn>;
-    loading: boolean;
+export interface UseMutationReturn<TVariables = void, TData = unknown> {
+    mutate: (variables: TVariables) => void;
+    mutateAsync: (variables: TVariables) => Promise<TData>;
+    reset: () => void;
+    data: TData | null;
     error: Error | null;
-    data: TReturn | null;
+    status: MutationStatus;
+    isIdle: boolean;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
 }
-export declare const useMutation: <TArgs extends any[], TReturn>(opts: UseMutationOptions<TArgs, TReturn>) => UseMutationReturn<TArgs, TReturn>;
+export declare const useMutation: <TVariables = void, TData = unknown>(options: UseMutationOptions<TVariables, TData>) => UseMutationReturn<TVariables, TData>;
 export {};

package/dist/src/hooks/use-object/use-object.d.ts

@@ -1,6 +1,15 @@
-type GenericObject = Record<string, any>;
-type Return<TState, TArgs = ((state: TState) => Partial<TState>) | Partial<TState>> = [TState, (arg: TArgs) => void, () => void];
-type MaybeReturn<TState> = Return<TState | undefined, ((state: TState | undefined) => Partial<TState>) | Partial<TState>>;
-export declare function useObject<T extends GenericObject>(): MaybeReturn<T>;
-export declare function useObject<T extends GenericObject>(initialValue: T): Return<T>;
-export {};
+export interface UseObjectOptions<T> {
+    /** Called after every state change. NOT called on initial mount. */
+    onChange?: (state: T) => void;
+}
+export interface UseObjectActions<T> {
+    /** Shallow-merge a partial (or functional updater returning a partial). */
+    set(partial: Partial<T> | ((state: T) => Partial<T>)): void;
+    /** Replace the entire object (no merge). Functional variant receives prev. */
+    replace(value: T | ((state: T) => T)): void;
+    /** Restore the mount-time value (frozen ref). */
+    reset(): void;
+    /** Update a single typed key. */
+    setKey<K extends keyof T>(key: K, value: T[K]): void;
+}
+export declare function useObject<T extends object>(initialValue: T, options?: UseObjectOptions<T>): readonly [T, UseObjectActions<T>];

package/dist/src/hooks/use-prevent-page-close/index.d.ts

@@ -0,0 +1 @@
+export * from './use-prevent-page-close';

package/dist/src/hooks/use-prevent-page-close/use-prevent-page-close.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shows the browser's native "Leave site?" confirmation when the user
+ * tries to close the tab or reload the page while `enabled` is `true`.
+ *
+ * Note: this only covers full-page unload (tab close / reload). It does
+ * NOT intercept SPA route changes — for that, combine with your router's
+ * navigation guard. The dialog text is controlled by the browser and
+ * cannot be customized.
+ */
+export declare function usePreventPageClose(enabled: boolean): void;

package/dist/src/hooks/use-prevent-page-close/use-prevent-page-close.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/use-step/use-step.d.ts

@@ -1,14 +1,21 @@
-import { ReactNode } from 'react';
-interface Return<T = ReactNode> {
-    currentStepIndex: number;
-    step: T;
-    steps: T[];
-    isFirstStep: boolean;
-    isLastStep: boolean;
-    goTo: (i: number) => void;
+export interface UseStepActions {
+    /** Advance one step. No-op at the last step. Stable reference. */
     next: () => void;
+    /** Go back one step. No-op at the first step. Stable reference. */
     back: () => void;
-    findAndGo: (predicate: (item: T) => boolean) => void;
+    /** Jump to an index, clamped to [0, count - 1]. Stable reference. */
+    goTo: (index: number) => void;
+    /** Return to index 0. Stable reference. */
+    reset: () => void;
+    /** True when there is a next step to advance to. */
+    canGoNext: boolean;
+    /** True when there is a previous step to go back to. */
+    canGoBack: boolean;
+    /** True when the current index is the first step. */
+    isFirstStep: boolean;
+    /** True when the current index is the last step. */
+    isLastStep: boolean;
+    /** Ratio of progress in [0, 1]. 0 when count <= 1. */
+    progress: number;
 }
-export declare function useStep<T = ReactNode>(steps: T[], amountSteps?: number): Return<T>;
-export {};
+export declare function useStep(count: number): [number, UseStepActions];

package/dist/src/utils/form.d.ts

@@ -8,6 +8,16 @@ import { FieldProps, Form as LibraryForm } from '../components';
  *
  * - `data` is the typed, parsed value, or `null` when validation fails.
  * - `errors` is the flattened `fieldErrors` object (empty on success).
+ *
+ * Value conventions worth knowing when writing the schema (these hold whether
+ * or not you use Zod):
+ * - `DateInput` and `DatePicker` submit an **ISO date string** (`yyyy-MM-dd`),
+ *   or `""` when empty. The format is locale-agnostic, sortable, and parseable
+ *   by `new Date()` or any backend without a custom parser. The displayed text
+ *   stays `dd/MM/yyyy` — display and value are different layers. To reformat,
+ *   it is a plain split: `iso.split("-").reverse().join("-")` → `dd-MM-yyyy`.
+ *   Avoid round-tripping through `new Date(iso)` + local getters (timezone
+ *   shift); split the string or use `parseISO`.
  */
 export declare function parseFormValues<T extends z.ZodType>(schema: T, values: Record<string, unknown>): {
     data: z.infer<T> | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.19",
+  "version": "2.0.0-alpha.20",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/alert-dialog/alert-dialog.test.tsx

@@ -18,7 +18,11 @@ import { click } from "../../utils/tests";
 describe("AlertDialog composite", () => {
   it("renders title and description when open", () => {
     render(
-      <AlertDialog open title="Custom title" description="Custom description" />,
+      <AlertDialog
+        open
+        title="Custom title"
+        description="Custom description"
+      />,
     );
 
     expect(screen.getByText("Custom title")).toBeInTheDocument();
@@ -46,8 +50,12 @@ describe("AlertDialog composite", () => {
       />,
     );
 
-    expect(screen.getByRole("button", { name: "Mantener" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Eliminar" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Mantener" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Eliminar" }),
+    ).toBeInTheDocument();
   });
 
   it("calls onClose when cancel button is clicked", () => {
@@ -97,9 +105,7 @@ describe("AlertDialog composite", () => {
     );
 
     click(screen.getByRole("button", { name: "Abrir" }));
-    await waitFor(() =>
-      expect(screen.getByText("Title")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByText("Title")).toBeInTheDocument());
 
     click(screen.getByRole("button", { name: "Confirmar" }));
 
@@ -204,9 +210,7 @@ describe("AlertDialog primitives", () => {
     setup();
 
     click(screen.getByRole("button", { name: "Abrir" }));
-    await waitFor(() =>
-      expect(screen.getByText("Title")).toBeInTheDocument(),
-    );
+    await waitFor(() => expect(screen.getByText("Title")).toBeInTheDocument());
 
     click(screen.getByRole("button", { name: "Cancelar" }));
 

package/src/components/auto-complete/auto-complete.test.tsx

@@ -58,9 +58,7 @@ describe("Autocomplete composite", () => {
   it("renders readOnly when readOnly prop is set", () => {
     render(<Autocomplete items={items} readOnly placeholder="ReadOnly" />);
 
-    expect(screen.getByPlaceholderText("ReadOnly")).toHaveAttribute(
-      "readonly",
-    );
+    expect(screen.getByPlaceholderText("ReadOnly")).toHaveAttribute("readonly");
   });
 
   it("renders the start addon when provided", () => {
@@ -115,11 +113,7 @@ describe("Autocomplete composite", () => {
 
   it("forwards controlled value.label to the input", () => {
     render(
-      <Autocomplete
-        items={items}
-        value={items[2]}
-        onValueChange={() => {}}
-      />,
+      <Autocomplete items={items} value={items[2]} onValueChange={() => {}} />,
     );
 
     expect(screen.getByRole("combobox")).toHaveValue("Cherry");
@@ -174,9 +168,7 @@ describe("Autocomplete composite", () => {
     );
 
     await user.click(
-      document.querySelector(
-        '[data-slot="autocomplete-clear"]',
-      ) as HTMLElement,
+      document.querySelector('[data-slot="autocomplete-clear"]') as HTMLElement,
     );
 
     // Clear emits "" (empty string), not null — the composite's `?? null` only
@@ -305,9 +297,7 @@ describe("Autocomplete composite", () => {
   it("forwards a custom filter function", async () => {
     const user = userEvent.setup();
     const filter = vi.fn(() => true);
-    render(
-      <Autocomplete items={items} filter={filter} placeholder="Filter" />,
-    );
+    render(<Autocomplete items={items} filter={filter} placeholder="Filter" />);
 
     await user.click(screen.getByRole("combobox"));
     await user.type(screen.getByRole("combobox"), "a");

package/src/components/avatar/avatar.test.tsx

@@ -94,16 +94,13 @@ describe("Avatar composite", () => {
     ["md", "size-10", "text-sm"],
     ["lg", "size-14", "text-base"],
     ["xl", "size-20", "text-xl"],
-  ] as const)(
-    "applies size '%s' classes and data-size attribute",
-    (size, sizeClass, textClass) => {
-      render(<Avatar alt={personName} src={imageSrc} size={size} />);
+  ] as const)("applies size '%s' classes and data-size attribute", (size, sizeClass, textClass) => {
+    render(<Avatar alt={personName} src={imageSrc} size={size} />);
 
-      const root = document.querySelector('[data-slot="avatar"]');
-      expect(root).toHaveAttribute("data-size", size);
-      expect(root).toHaveClass(sizeClass, textClass);
-    },
-  );
+    const root = document.querySelector('[data-slot="avatar"]');
+    expect(root).toHaveAttribute("data-size", size);
+    expect(root).toHaveClass(sizeClass, textClass);
+  });
 
   it("defaults size to md when omitted", () => {
     render(<Avatar alt={personName} src={imageSrc} />);
@@ -158,9 +155,7 @@ describe("Avatar composite", () => {
     // fallback is absent right after mount proves the prop is being honored.
     render(<Avatar alt={personName} src="" delay={500} />);
 
-    expect(
-      document.querySelector('[data-slot="avatar-fallback"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="avatar-fallback"]')).toBeNull();
   });
 
   it("spreads extra props onto the AvatarRoot element", () => {

package/src/components/button/button.test.tsx

@@ -67,16 +67,13 @@ describe("Button component", () => {
     ["success", "bg-success"],
     ["warning", "bg-warning"],
     ["link", "text-primary"],
-  ] as const)(
-    "applies variant '%s' classes and data-variant attribute",
-    (variant, expectedClass) => {
-      render(<Button variant={variant} />);
-      const button = screen.getByRole("button");
+  ] as const)("applies variant '%s' classes and data-variant attribute", (variant, expectedClass) => {
+    render(<Button variant={variant} />);
+    const button = screen.getByRole("button");
 
-      expect(button).toHaveAttribute("data-variant", variant);
-      expect(button).toHaveClass(expectedClass);
-    },
-  );
+    expect(button).toHaveAttribute("data-variant", variant);
+    expect(button).toHaveClass(expectedClass);
+  });
 
   it.each([
     ["default", "h-8"],
@@ -224,14 +221,12 @@ describe("BaseButton loading behavior", () => {
     expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
   });
 
-  it("hides the content wrapper while loading via CSS hook", () => {
+  it("renders children alongside the loader while loading", () => {
     render(<BaseButton loading>Visible label</BaseButton>);
 
-    const content = screen
-      .getByRole("button")
-      .querySelector("[data-content]");
-    expect(content).not.toBeNull();
-    expect(content).toHaveTextContent("Visible label");
+    const button = screen.getByRole("button");
+    expect(button).toHaveTextContent("Visible label");
+    expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
   });
 
   it("forwards style and arbitrary props to the underlying button", () => {

package/src/components/button/button.tsx

@@ -14,23 +14,28 @@ const buttonVariants = cva(
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    "[&[data-loading]>[data-content]]:invisible",
+    "[&[data-loading]]:text-transparent",
+    "[&[data-loading]>*:not([data-loader])]:invisible",
     "[&[data-loading]]:pointer-events-none",
   ],
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 [--btn-loader-color:var(--color-primary-foreground)]",
         outline:
-          "border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:hover:bg-input/50",
+          "border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:hover:bg-input/50 [--btn-loader-color:var(--color-foreground)]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground [--btn-loader-color:var(--color-secondary-foreground)]",
         ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        error: "bg-error text-error-foreground hover:bg-error/90",
-        success: "bg-success text-success-foreground hover:bg-success/90",
-        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
-        link: "text-primary underline-offset-4 hover:underline",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 [--btn-loader-color:var(--color-foreground)]",
+        error:
+          "bg-error text-error-foreground hover:bg-error/90 [--btn-loader-color:var(--color-error-foreground)]",
+        success:
+          "bg-success text-success-foreground hover:bg-success/90 [--btn-loader-color:var(--color-success-foreground)]",
+        warning:
+          "bg-warning text-warning-foreground hover:bg-warning/90 [--btn-loader-color:var(--color-warning-foreground)]",
+        link: "text-primary underline-offset-4 hover:underline [--btn-loader-color:var(--color-primary)]",
       },
       size: {
         default: "h-8 px-2.5",

package/src/components/button/components/base-button.tsx

@@ -45,14 +45,12 @@ export const BaseButton = ({
       onClick={handleClick}
       style={style}
     >
-      <span data-content className="contents">
-        {children}
-      </span>
+      {children}
       {loading && (
         <LoaderCircle
           data-loader
           data-testid="btn-loader"
-          className="absolute inset-0 m-auto size-4 animate-spin"
+          className="absolute inset-0 m-auto size-4 animate-spin text-[var(--btn-loader-color,currentColor)]"
         />
       )}
     </ButtonPrimitive>

package/src/components/calendar/calendar.test.tsx

@@ -7,7 +7,9 @@ describe("Calendar component", () => {
   it("renders the day-picker root with the calendar slot", () => {
     render(<Calendar mode="single" />);
 
-    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
   });
 
   it("applies the cell-size variables and merges a custom className on root", () => {
@@ -29,10 +31,10 @@ describe("Calendar component", () => {
   it("renders a label caption (no dropdowns) with captionLayout='label'", () => {
     render(<Calendar mode="single" captionLayout="label" />);
 
+    expect(document.querySelector('[data-slot="select-trigger"]')).toBeNull();
     expect(
-      document.querySelector('[data-slot="select-trigger"]'),
-    ).toBeNull();
-    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
   });
 
   it("renders previous and next navigation buttons (Chevron left/right)", () => {
@@ -48,10 +50,7 @@ describe("Calendar component", () => {
 
   it("merges a custom classNames entry onto the matching slot", () => {
     render(
-      <Calendar
-        mode="single"
-        classNames={{ month: "custom-month-class" }}
-      />,
+      <Calendar mode="single" classNames={{ month: "custom-month-class" }} />,
     );
 
     const month = document.querySelector(".custom-month-class");
@@ -117,22 +116,18 @@ describe("Calendar component", () => {
       />,
     );
 
-    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="calendar"]'),
+    ).toBeInTheDocument();
   });
 
   it("merges user-provided components over the defaults", () => {
     const CustomChevron = () => <span data-testid="custom-chevron" />;
-    render(
-      <Calendar
-        mode="single"
-        components={{ Chevron: CustomChevron }}
-      />,
-    );
+    render(<Calendar mode="single" components={{ Chevron: CustomChevron }} />);
 
     expect(screen.getAllByTestId("custom-chevron").length).toBeGreaterThan(0);
   });
 
-
   it("formats the month dropdown labels in Spanish (short form)", () => {
     render(
       <Calendar
@@ -143,9 +138,7 @@ describe("Calendar component", () => {
     );
 
     // January in es short form is "ene".
-    const monthTrigger = document.querySelector(
-      '[data-slot="select-trigger"]',
-    );
+    const monthTrigger = document.querySelector('[data-slot="select-trigger"]');
     expect(monthTrigger).not.toBeNull();
     expect(monthTrigger?.textContent?.toLowerCase()).toContain("ene");
   });

package/src/components/calendar/calendar.tsx

@@ -33,6 +33,10 @@ function CalendarDropdown({
     <Select
       items={items}
       value={selected}
+      // Month/year dropdowns are calendar navigation, not form fields. Force
+      // off the invalid state so a surrounding invalid Field never paints them
+      // with the error border.
+      aria-invalid={false}
       className="py-1 h-7"
       getLabel={(o) => o.label}
       getId={(o) => String(o.value)}

package/src/components/card/card.test.tsx

@@ -67,9 +67,7 @@ describe("Card composite", () => {
 
     expect(document.querySelector('[data-slot="card-header"]')).not.toBeNull();
     expect(document.querySelector('[data-slot="card-title"]')).toBeNull();
-    expect(
-      document.querySelector('[data-slot="card-description"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="card-description"]')).toBeNull();
     const action = document.querySelector('[data-slot="card-action"]');
     expect(action).toHaveTextContent("Go");
   });
@@ -101,9 +99,9 @@ describe("Card composite", () => {
       </Card>,
     );
 
-    expect(document.querySelector('[data-slot="card-title"]')).toHaveTextContent(
-      "Title",
-    );
+    expect(
+      document.querySelector('[data-slot="card-title"]'),
+    ).toHaveTextContent("Title");
     expect(
       document.querySelector('[data-slot="card-description"]'),
     ).toHaveTextContent("Description");

package/src/components/checkbox/checkbox.test.tsx

@@ -110,16 +110,18 @@ describe("Checkbox (single composite)", () => {
   it("reverses the layout when controlFirst is false", () => {
     render(<Checkbox label="Reversed" controlFirst={false} />);
 
-    const wrapper = document.querySelector('[data-slot="checkbox"]')
-      ?.parentElement;
+    const wrapper = document.querySelector(
+      '[data-slot="checkbox"]',
+    )?.parentElement;
     expect(wrapper).toHaveClass("flex-row-reverse");
   });
 
   it("does not reverse the layout by default", () => {
     render(<Checkbox label="Default order" />);
 
-    const wrapper = document.querySelector('[data-slot="checkbox"]')
-      ?.parentElement;
+    const wrapper = document.querySelector(
+      '[data-slot="checkbox"]',
+    )?.parentElement;
     expect(wrapper).not.toHaveClass("flex-row-reverse");
   });
 
@@ -212,8 +214,9 @@ describe("Checkbox.Item", () => {
       </CheckboxGroupContext.Provider>,
     );
 
-    const wrapper = document.querySelector('[data-slot="checkbox"]')
-      ?.parentElement;
+    const wrapper = document.querySelector(
+      '[data-slot="checkbox"]',
+    )?.parentElement;
     expect(wrapper).toHaveClass("flex-row-reverse");
   });
 
@@ -348,8 +351,9 @@ describe("Checkbox.Group", () => {
       </Checkbox.Group>,
     );
 
-    const wrapper = document.querySelector('[data-slot="checkbox"]')
-      ?.parentElement;
+    const wrapper = document.querySelector(
+      '[data-slot="checkbox"]',
+    )?.parentElement;
     expect(wrapper).toHaveClass("flex-row-reverse");
   });
 

package/src/components/checkbox-group/checkbox-group.test.tsx

@@ -60,9 +60,7 @@ describe("CheckboxGroup composite", () => {
   it("does not render a legend when omitted", () => {
     render(<CheckboxGroup items={options} />);
 
-    expect(
-      document.querySelector('[data-slot="fieldset-legend"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="fieldset-legend"]')).toBeNull();
   });
 
   it("fires onValueChange when an item is toggled", async () => {
@@ -109,8 +107,9 @@ describe("CheckboxGroup composite", () => {
       </CheckboxGroup>,
     );
 
-    const wrapper = document.querySelector('[data-slot="checkbox"]')
-      ?.parentElement;
+    const wrapper = document.querySelector(
+      '[data-slot="checkbox"]',
+    )?.parentElement;
     expect(wrapper).toHaveClass("flex-row-reverse");
   });
 
@@ -149,8 +148,8 @@ describe("CheckboxGroup composite", () => {
     );
 
     // The invalid field state flows into the items as data-invalid.
-    expect(
-      screen.getByRole("checkbox", { name: "Option A" }),
-    ).toHaveAttribute("data-invalid");
+    expect(screen.getByRole("checkbox", { name: "Option A" })).toHaveAttribute(
+      "data-invalid",
+    );
   });
 });

package/src/components/combobox/combobox.test.tsx

@@ -54,7 +54,11 @@ describe("Combobox (single mode)", () => {
   it("fires onValueChange with the selected item object", async () => {
     const onValueChange = vi.fn();
     render(
-      <Combobox items={items} placeholder="Pick" onValueChange={onValueChange} />,
+      <Combobox
+        items={items}
+        placeholder="Pick"
+        onValueChange={onValueChange}
+      />,
     );
 
     const input = getInput();
@@ -223,14 +227,20 @@ describe("Combobox (multiple mode)", () => {
     );
 
     const chips = document.querySelectorAll('[data-slot="combobox-chip"]');
-    expect(
-      [...chips].map((c) => c.getAttribute("aria-label")),
-    ).toEqual(["Apple", "Banana"]);
+    expect([...chips].map((c) => c.getAttribute("aria-label"))).toEqual([
+      "Apple",
+      "Banana",
+    ]);
   });
 
   it("renders the chips container and a chips search input", () => {
     render(
-      <Combobox multiple items={items} placeholder="Search" defaultValue={[]} />,
+      <Combobox
+        multiple
+        items={items}
+        placeholder="Search"
+        defaultValue={[]}
+      />,
     );
 
     expect(
@@ -248,9 +258,7 @@ describe("Combobox (multiple mode)", () => {
       />,
     );
 
-    expect(
-      screen.getByRole("button", { name: "Quitar" }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Quitar" })).toBeInTheDocument();
   });
 
   it("fires onValueChange when selecting an option", async () => {
@@ -304,10 +312,9 @@ describe("Combobox Field integration", () => {
       </Field>,
     );
 
-    expect(document.querySelector('[data-slot="combobox-chips"]')).toHaveAttribute(
-      "aria-invalid",
-      "true",
-    );
+    expect(
+      document.querySelector('[data-slot="combobox-chips"]'),
+    ).toHaveAttribute("aria-invalid", "true");
   });
 
   it("does not set aria-invalid when standalone", () => {
@@ -384,12 +391,8 @@ describe("Combobox escape-hatch primitives", () => {
     expect(
       document.querySelector('[data-slot="combobox-input"]'),
     ).toBeInTheDocument();
-    expect(
-      document.querySelector('[data-slot="combobox-trigger"]'),
-    ).toBeNull();
-    expect(
-      document.querySelector('[data-slot="combobox-clear"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="combobox-trigger"]')).toBeNull();
+    expect(document.querySelector('[data-slot="combobox-clear"]')).toBeNull();
   });
 
   it("renders a select trigger with a clear control when showClear", () => {
@@ -448,9 +451,9 @@ describe("Combobox escape-hatch primitives", () => {
       </ComboboxRoot>,
     );
 
-    expect(
-      document.querySelector('[data-slot="combobox-group"]'),
-    ).toHaveClass("grp-cls");
+    expect(document.querySelector('[data-slot="combobox-group"]')).toHaveClass(
+      "grp-cls",
+    );
     expect(
       document.querySelector('[data-slot="combobox-group-label"]'),
     ).toHaveTextContent("Fruits");