@primitiv-ui/react 0.1.28 → 0.1.30

package/src/Tree/utils.ts

@@ -3,14 +3,56 @@ import type { ReactElement, ReactNode } from "react";
 
 import { TreeBranchControl, TreeBranchContent } from "./Tree";
 
-/** Whether `node` is a `Tree.BranchControl` element. */
+/**
+ * The property a component sets on itself to declare which `Tree` part it
+ * stands in for.
+ *
+ * `Tree.Branch` finds its control and content by inspecting its children before
+ * rendering them, so it sees the component the consumer wrote — not what that
+ * component renders. A styled layer wraps every part in its own component to
+ * attach classes (that is exactly what `primitiv add tree` copies), and without
+ * a marker those wrappers are unrecognisable, making `Tree` the one primitive
+ * in the library that cannot be wrapped at all.
+ *
+ * Set it on the wrapper and it partitions like the part it renders:
+ *
+ * ```tsx
+ * function StyledBranchControl(props: TreeBranchControlProps) {
+ *   return <Tree.BranchControl {...props} className="row" />;
+ * }
+ * StyledBranchControl[TREE_PART] = "branch-control";
+ * ```
+ */
+export const TREE_PART: "__primitivTreePart" = "__primitivTreePart";
+
+/** The part names {@link TREE_PART} accepts. */
+export type TreePartName = "branch-control" | "branch-content";
+
+/** Read a component's {@link TREE_PART} marker, if it declares one. */
+function treePartOf(type: unknown): TreePartName | undefined {
+  return (type as Record<string, TreePartName | undefined> | null)?.[TREE_PART];
+}
+
+/**
+ * Whether `node` is a `Tree.BranchControl` element — either the part itself, or
+ * a component that marks itself as standing in for it (see {@link TREE_PART}).
+ */
 export function isBranchControlElement(node: ReactNode): node is ReactElement {
-  return isValidElement(node) && node.type === TreeBranchControl;
+  return (
+    isValidElement(node) &&
+    (node.type === TreeBranchControl || treePartOf(node.type) === "branch-control")
+  );
 }
 
-/** Whether `node` is a `Tree.BranchContent` element. */
+/**
+ * Whether `node` is a `Tree.BranchContent` element — either the part itself, or
+ * a component that marks itself as standing in for it (see {@link TREE_PART}).
+ */
 export function isBranchContentElement(node: ReactNode): node is ReactElement {
-  return isValidElement(node) && node.type === TreeBranchContent;
+  return (
+    isValidElement(node) &&
+    (node.type === TreeBranchContent || treePartOf(node.type) === "branch-content")
+  );
 }
 
 /**

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -19,18 +19,35 @@ const visuallyHiddenStyle: CSSProperties = {
 /**
  * Visually hides its children while keeping them in the accessibility tree.
  *
- * Renders a `<span>` carrying the canonical screen-reader-only clip styles:
- * the content is removed from the visual layout but still announced by
- * assistive technology. Use it for text that gives a control or region an
- * accessible name without showing on screen.
+ * Renders a `<span>` carrying the canonical screen-reader-only clip styles
+ * (WCAG 2.1 Technique C7): the content is removed from the visual layout but
+ * still announced by assistive technology. Use it for text that gives a control
+ * or region an accessible name without showing on screen.
  *
  * **Functional styles.** Unlike other `@primitiv-ui/react` components, the
- * clip styles are applied inline because they *are* the component's
- * behaviour, not decoration. A consumer `style` is merged on top, so any
- * individual property can still be overridden.
+ * clip styles are applied inline because they *are* the component's behaviour,
+ * not decoration:
+ *
+ * ```css
+ * position: absolute;
+ * width: 1px; height: 1px;
+ * padding: 0; margin: -1px;
+ * overflow: hidden;
+ * clip: rect(0 0 0 0);
+ * clip-path: inset(50%);
+ * white-space: nowrap;
+ * border-width: 0;
+ * ```
+ *
+ * A consumer `style` prop is merged on top, so any individual property can
+ * still be overridden.
  *
  * **`asChild` composition.** Renders the consumer's element instead of a
- * `<span>`, merging the clip styles in via the {@link Slot} utility.
+ * `<span>`, merging the clip styles onto the child via the {@link Slot}
+ * utility. Useful when the hidden content needs specific semantics (e.g. a
+ * heading or landmark). The child must be a single React element.
+ *
+ * @extends HTMLSpanElement
  *
  * @example Accessible name for an icon-only button
  * ```tsx
@@ -40,6 +57,14 @@ const visuallyHiddenStyle: CSSProperties = {
  * </button>
  * ```
  *
+ * @example Region label hidden from sighted users
+ * ```tsx
+ * <nav aria-labelledby="nav-label">
+ *   <VisuallyHidden id="nav-label">Primary navigation</VisuallyHidden>
+ *   ...
+ * </nav>
+ * ```
+ *
  * @example asChild — keep semantic markup hidden
  * ```tsx
  * <VisuallyHidden asChild>

package/src/VisuallyHidden/__tests__/VisuallyHidden.test.tsx

@@ -15,15 +15,24 @@ describe("VisuallyHidden component", () => {
     // Arrange
     render(<VisuallyHidden>Loading complete</VisuallyHidden>);
 
-    // Assert
+    // Assert — the full WCAG C7 clip set; every property matters, so each is
+    // asserted (a missing one lets a mutant blank that value undetected).
     const hidden = screen.getByText("Loading complete");
     expect(hidden).toHaveStyle({
       position: "absolute",
       width: "1px",
       height: "1px",
+      padding: "0px",
+      margin: "-1px",
       overflow: "hidden",
       whiteSpace: "nowrap",
+      borderWidth: "0px",
     });
+    // jsdom's computed style doesn't surface clip/clip-path, so assert them on
+    // the inline style directly.
+    // jsdom normalises `rect(0 0 0 0)` to `rect(0px)`.
+    expect(hidden.style.clip).toBe("rect(0px)");
+    expect(hidden.style.clipPath).toBe("inset(50%)");
   });
 
   it("should merge a consumer style over the clip styles", () => {
@@ -56,4 +65,9 @@ describe("VisuallyHidden component", () => {
     expect(hidden.tagName).toBe("LABEL");
     expect(hidden).toHaveStyle({ position: "absolute", overflow: "hidden" });
   });
+
+  it('sets displayName to "VisuallyHidden" for React DevTools and stack traces', () => {
+    // Assert — an empty displayName would render it as an anonymous component.
+    expect(VisuallyHidden.displayName).toBe("VisuallyHidden");
+  });
 });

package/src/VisuallyHidden/types.ts

@@ -1,9 +1,19 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 
 /**
  * Props for {@link VisuallyHidden} — all native `<span>` attributes plus
  * the `asChild` escape hatch.
  */
 export type VisuallyHiddenProps = ComponentProps<"span"> & {
+  /**
+   * Renders the child element instead of a native `<span>`, merging the
+   * clip styles onto it via {@link Slot}. Useful when the hidden content
+   * needs specific semantics (e.g. a heading or landmark element). The
+   * child must be a single React element. See the `asChild` example on
+   * {@link VisuallyHidden}.
+   * @default false
+   */
   asChild?: boolean;
+  /** Content to visually hide. Under `asChild`, becomes the single child element whose clip styles are merged. */
+  children?: ReactNode;
 };

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useControllableState } from "./useControllableState";
 export { useCollection } from "./useCollection";
 export { useRovingTabindex } from "./useRovingTabindex";
+export { useTypeahead } from "./useTypeahead";

package/src/hooks/useTypeahead.ts

@@ -0,0 +1,95 @@
+import { useCallback, useRef, type KeyboardEvent } from "react";
+
+type UseTypeaheadArgs = {
+  /** Reads the navigable (enabled) option values in current DOM order. Called
+   * per keystroke so an in-place reorder is picked up. */
+  getNavigable: () => string[];
+  /** Reads an option's visible label, used for prefix matching. */
+  getLabel: (optionValue: string) => string;
+  /** The option the cursor is on, or `undefined` before it is seeded. */
+  currentKey: string | undefined;
+  /** Moves the cursor to the matched option. */
+  onMatch: (optionValue: string) => void;
+  /** Milliseconds of inactivity after which the accumulated query resets. */
+  resetMs: number;
+};
+
+/**
+ * Printable-character typeahead for a list cursor, per APG's
+ * recommendation for lists longer than about seven options. Shared by
+ * `Listbox` and `MillerColumns` (which scopes it to the focused column).
+ *
+ * Keystrokes accumulate into a query that resets after `resetMs` of
+ * inactivity. A query of all-identical
+ * characters is treated as a repeat of that single character, which cycles
+ * through the options starting with it rather than searching for a literal
+ * run — so pressing "a" three times walks the "a" options instead of looking
+ * for "aaa". Matching is a case-insensitive prefix test against the option's
+ * text, and the search wraps.
+ */
+export function useTypeahead({
+  getNavigable,
+  getLabel,
+  currentKey,
+  onMatch,
+  resetMs,
+}: UseTypeaheadArgs): {
+  handleTypeahead: (event: KeyboardEvent<HTMLElement>) => void;
+} {
+  const stateRef = useRef<{ query: string; timer: number | null }>({
+    query: "",
+    timer: null,
+  });
+
+  const handleTypeahead = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (event.key.length !== 1) return;
+
+      const navigable = getNavigable();
+      // Stryker disable next-line ConditionalExpression: equivalent — the match loop is bounded by navigable.length, so an empty list exits immediately anyway.
+      if (navigable.length === 0) return;
+
+      const state = stateRef.current;
+      // Stryker disable next-line ConditionalExpression,EqualityOperator: equivalent — keystroke handling is synchronous, so clearing (or not clearing) the pending reset cannot change this search's outcome.
+      if (state.timer !== null) window.clearTimeout(state.timer);
+      state.query = (state.query + event.key).toLowerCase();
+      state.timer = window.setTimeout(() => {
+        state.query = "";
+        state.timer = null;
+      }, resetMs);
+
+      const isRepeat =
+        // Stryker disable next-line ConditionalExpression,EqualityOperator: equivalent — for a single character `every()` is trivially true, so both forms yield the same isRepeat.
+        state.query.length > 1 &&
+        state.query.split("").every((char) => char === state.query[0]);
+      const searchQuery = isRepeat ? state.query[0] : state.query;
+
+      // A single character (or a repeat of one) advances past the current
+      // option so pressing the same letter walks the matches; a genuine
+      // multi-character query narrows in place instead. With no cursor at all
+      // there is nothing to advance past, so the search starts at the top.
+      const currentIndex =
+        // Stryker disable next-line ConditionalExpression: equivalent — indexOf(undefined) is itself -1.
+        currentKey === undefined ? -1 : navigable.indexOf(currentKey);
+      // Stryker disable next-line ConditionalExpression,EqualityOperator: equivalent — with no cursor the two spellings produce the same scan: startIndex -1 with offset 1 and startIndex 0 with offset 0 both begin at index 0 and step identically.
+      const hasCursor = currentIndex >= 0;
+      const startIndex = hasCursor ? currentIndex : 0;
+      const offset =
+        hasCursor && (searchQuery.length === 1 || isRepeat) ? 1 : 0;
+
+      // Stryker disable next-line EqualityOperator: equivalent — the index wraps modulo navigable.length, so an extra iteration only re-checks an already-visited option.
+      for (let i = 0; i < navigable.length; i++) {
+        const index = (startIndex + offset + i) % navigable.length;
+        const label = getLabel(navigable[index]).trim().toLowerCase();
+        if (label.startsWith(searchQuery)) {
+          event.preventDefault();
+          onMatch(navigable[index]);
+          return;
+        }
+      }
+    },
+    [getNavigable, getLabel, currentKey, onMatch, resetMs],
+  );
+
+  return { handleTypeahead };
+}

package/src/index.ts

@@ -8,27 +8,34 @@ export * from "./Carousel/index.ts";
 export * from "./Checkbox/index.ts";
 export * from "./CheckboxCard/index.ts";
 export * from "./Collapsible/index.ts";
+export * from "./Combobox/index.ts";
 export * from "./ContextMenu/index.ts";
 export * from "./DirectionProvider/index.ts";
 export * from "./Divider/index.ts";
+export * from "./Drawer/index.ts";
 export * from "./Dropdown/index.ts";
 export * from "./EmptyState/index.ts";
 export * from "./Field/index.ts";
 export * from "./Fieldset/index.ts";
 export * from "./Input/index.ts";
 export * from "./InputGroup/index.ts";
+export * from "./Listbox/index.ts";
 export * from "./MillerColumns/index.ts";
 export * from "./Modal/index.ts";
+export * from "./NavigationMenu/index.ts";
+export * from "./Popover/index.ts";
 export * from "./Portal/index.ts";
 export * from "./Progress/index.ts";
 export * from "./Radio/index.ts";
 export * from "./RadioCard/index.ts";
 export * from "./RadioGroup/index.ts";
+export * from "./SegmentedControl/index.ts";
 export * from "./Select/index.ts";
 export * from "./SkipNav/index.ts";
 export * from "./Slider/index.ts";
 export { Slot } from "./Slot/index.ts";
 export type { SlotProps } from "./Slot/index.ts";
+export * from "./SplitButton/index.ts";
 export * from "./Status/index.ts";
 export * from "./Switch/index.ts";
 export * from "./Table/index.ts";
@@ -38,5 +45,8 @@ export * from "./Toggle/index.ts";
 export * from "./ToggleGroup/index.ts";
 export * from "./Tooltip/index.ts";
 export * from "./Tree/index.ts";
+export * from "./useLocalStorage/index.ts";
+export * from "./useMediaQuery/index.ts";
+export * from "./usePagination/index.ts";
 export * from "./VisuallyHidden/index.ts";
 export type { HeadingLevel } from "./types.ts";

package/src/test/intersectionObserverPolyfill.ts

@@ -41,6 +41,13 @@ export class MockIntersectionObserver {
   }
 
   observe(target: Element) {
+    // Mirror the browser: `observe` throws a TypeError when handed anything
+    // that is not an Element (e.g. `undefined` from a stale slide lookup).
+    if (!(target instanceof Element)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.",
+      );
+    }
     this.observed.add(target);
   }
   unobserve(target: Element) {

package/src/test/resizeObserverPolyfill.ts

@@ -0,0 +1,80 @@
+/**
+ * Minimal jsdom polyfill for ResizeObserver.
+ *
+ * jsdom does not implement ResizeObserver. The component relies on it
+ * to keep a multi-slide page's `scroll-margin` extension (the
+ * center/end alignment fix for slidesPerPage > 1) correct across
+ * viewport resizes, since equal-share slide widths derive from the
+ * viewport's own size. Tests can grab the most-recently-constructed
+ * instance via `MockResizeObserver.latest` and call `.fire()` to
+ * simulate a resize on observed elements. When a component attaches
+ * more than one observer to the same element (e.g. the scroll-margin
+ * fix and the scroll-progress signal both observe the Viewport),
+ * `.latest` only reaches whichever was constructed last — use
+ * `MockResizeObserver.fireAll()` instead to simulate "a resize
+ * happened" without depending on construction order.
+ */
+
+export class MockResizeObserver {
+  static instances: MockResizeObserver[] = [];
+  static get latest(): MockResizeObserver | undefined {
+    return MockResizeObserver.instances[MockResizeObserver.instances.length - 1];
+  }
+  static reset() {
+    MockResizeObserver.instances = [];
+  }
+  /** Test-only: fire every constructed observer, regardless of which
+   * element(s) it's watching or when it was created. */
+  static fireAll() {
+    MockResizeObserver.instances.forEach((observer) => observer.fire());
+  }
+
+  callback: ResizeObserverCallback;
+  observed = new Set<Element>();
+
+  constructor(cb: ResizeObserverCallback) {
+    this.callback = cb;
+    MockResizeObserver.instances.push(this);
+  }
+
+  observe(target: Element) {
+    // Mirror the browser: `observe` throws a TypeError when handed anything
+    // that is not an Element.
+    if (!(target instanceof Element)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.",
+      );
+    }
+    this.observed.add(target);
+  }
+  unobserve(target: Element) {
+    this.observed.delete(target);
+  }
+  disconnect() {
+    this.observed.clear();
+  }
+
+  /** Test-only: invoke the callback for every currently-observed target. */
+  fire() {
+    const entries = [...this.observed].map(
+      (target) =>
+        ({
+          target,
+          contentRect: target.getBoundingClientRect(),
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: [],
+        }) as ResizeObserverEntry,
+    );
+    if (entries.length > 0) {
+      this.callback(entries, this as unknown as ResizeObserver);
+    }
+  }
+}
+
+export function installResizeObserverPolyfill() {
+  if (typeof window === "undefined") return;
+  (
+    window as unknown as { ResizeObserver: typeof MockResizeObserver }
+  ).ResizeObserver = MockResizeObserver;
+}

package/src/useLocalStorage/__tests__/useLocalStorage.reading.test.tsx

@@ -0,0 +1,31 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { useLocalStorage } from "../useLocalStorage.ts";
+
+const KEY = "primitiv-test-key";
+
+function Probe({ fallback }: { fallback: string }) {
+  const [value] = useLocalStorage(KEY, fallback);
+  return <span data-testid="value">{value}</span>;
+}
+
+describe("useLocalStorage reading", () => {
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("should return the fallback when nothing is stored under the key", () => {
+    render(<Probe fallback="light" />);
+
+    expect(screen.getByTestId("value")).toHaveTextContent("light");
+  });
+
+  it("should return the stored value when one is present", () => {
+    window.localStorage.setItem(KEY, JSON.stringify("dark"));
+
+    render(<Probe fallback="light" />);
+
+    expect(screen.getByTestId("value")).toHaveTextContent("dark");
+  });
+});

package/src/useLocalStorage/__tests__/useLocalStorage.resilience.test.tsx

@@ -0,0 +1,97 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useLocalStorage } from "../useLocalStorage.ts";
+
+const KEY = "primitiv-test-key";
+
+function Probe() {
+  const [value, setValue] = useLocalStorage(KEY, "light");
+  return (
+    <>
+      <span data-testid="value">{value}</span>
+      <button type="button" onClick={() => setValue("dark")}>
+        set
+      </button>
+    </>
+  );
+}
+
+/*
+ * Storage methods are stubbed on `Storage.prototype`, NOT on
+ * `window.localStorage`. jsdom's localStorage is a Proxy, so an instance spy
+ * silently never intercepts — `vi.spyOn(window.localStorage, "setItem")`
+ * records zero calls and the real write goes through. That is exactly the shape
+ * of bug that makes a test pass for the wrong reason, so each test below stores
+ * a real value first, ensuring the fallback can ONLY come from the throw path.
+ */
+describe("useLocalStorage resilience", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    window.localStorage.clear();
+  });
+
+  it("should fall back when the stored value is not valid JSON", () => {
+    // Storage is shared, long-lived and hand-editable, so a bad value has to
+    // degrade rather than throw.
+    window.localStorage.setItem(KEY, "{not json");
+
+    render(<Probe />);
+
+    expect(screen.getByTestId("value")).toHaveTextContent("light");
+  });
+
+  it("should fall back when reading storage throws", () => {
+    // A readable "dark" is present, so "light" can only mean the read threw.
+    window.localStorage.setItem(KEY, JSON.stringify("dark"));
+    vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+      throw new Error("SecurityError");
+    });
+
+    render(<Probe />);
+
+    expect(screen.getByTestId("value")).toHaveTextContent("light");
+  });
+
+  it("should leave the value untouched when writing to storage throws", async () => {
+    const user = userEvent.setup();
+    render(<Probe />);
+    vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("QuotaExceededError");
+    });
+
+    await user.click(screen.getByRole("button", { name: "set" }));
+
+    // The write failed, so storage still holds nothing and the re-read returns
+    // the fallback — the hook does not optimistically keep an unsaved value.
+    expect(screen.getByTestId("value")).toHaveTextContent("light");
+  });
+
+  it("should pick up a change made in another tab", () => {
+    render(<Probe />);
+
+    // What the browser dispatches when a different document writes the key.
+    act(() => {
+      window.localStorage.setItem(KEY, JSON.stringify("dark"));
+      window.dispatchEvent(new StorageEvent("storage", { key: KEY }));
+    });
+
+    expect(screen.getByTestId("value")).toHaveTextContent("dark");
+  });
+
+  it("should stop listening once the last consumer unmounts", () => {
+    const add = vi.spyOn(window, "addEventListener");
+    const remove = vi.spyOn(window, "removeEventListener");
+
+    const { unmount } = render(<Probe />);
+    unmount();
+
+    const added = add.mock.calls.filter(([type]) => type === "storage").length;
+    const removed = remove.mock.calls.filter(
+      ([type]) => type === "storage",
+    ).length;
+    expect(added).toBeGreaterThan(0);
+    expect(removed).toBe(added);
+  });
+});

package/src/useLocalStorage/__tests__/useLocalStorage.ssr.test.tsx

@@ -0,0 +1,20 @@
+// @vitest-environment node
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { useLocalStorage } from "../useLocalStorage.ts";
+
+function Probe() {
+  const [value] = useLocalStorage("primitiv-theme", "light");
+  return <>{value}</>;
+}
+
+describe("useLocalStorage SSR", () => {
+  it("should render the fallback when there is no window to read storage from", () => {
+    expect(typeof window).toBe("undefined");
+
+    const markup = renderToStaticMarkup(<Probe />);
+
+    expect(markup).toBe("light");
+  });
+});

package/src/useLocalStorage/__tests__/useLocalStorage.writing.test.tsx

@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useLocalStorage } from "../useLocalStorage.ts";
+
+const KEY = "primitiv-test-key";
+
+function Probe({ next }: { next: string }) {
+  const [value, setValue] = useLocalStorage(KEY, "light");
+  return (
+    <>
+      <span data-testid="value">{value}</span>
+      <button type="button" onClick={() => setValue(next)}>
+        set
+      </button>
+    </>
+  );
+}
+
+/** Two independent consumers of the SAME key, to prove they stay in step. */
+function TwoProbes() {
+  return (
+    <>
+      <Probe next="dark" />
+      <SecondReader />
+    </>
+  );
+}
+
+function SecondReader() {
+  const [value] = useLocalStorage(KEY, "light");
+  return <span data-testid="second">{value}</span>;
+}
+
+describe("useLocalStorage writing", () => {
+  afterEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("should update the returned value when the setter is called", async () => {
+    const user = userEvent.setup();
+    render(<Probe next="dark" />);
+
+    await user.click(screen.getByRole("button", { name: "set" }));
+
+    expect(screen.getByTestId("value")).toHaveTextContent("dark");
+  });
+
+  it("should persist the new value to localStorage as JSON", async () => {
+    const user = userEvent.setup();
+    render(<Probe next="dark" />);
+
+    await user.click(screen.getByRole("button", { name: "set" }));
+
+    expect(window.localStorage.getItem(KEY)).toBe(JSON.stringify("dark"));
+  });
+
+  /*
+   * The `storage` event does NOT fire in the document that performed the write,
+   * so without an in-document notification a second consumer of the same key
+   * would keep rendering the stale value until something else re-rendered it.
+   */
+  it("should update every consumer of the same key in the same document", async () => {
+    const user = userEvent.setup();
+    render(<TwoProbes />);
+
+    await user.click(screen.getByRole("button", { name: "set" }));
+
+    expect(screen.getByTestId("second")).toHaveTextContent("dark");
+  });
+});

package/src/useLocalStorage/index.ts

@@ -0,0 +1 @@
+export { useLocalStorage } from "./useLocalStorage.ts";