@primitiv-ui/react 0.1.37 → 0.1.39

package/dist/usePagination/usePagination.d.ts

@@ -0,0 +1,163 @@
+/** One entry in a rendered page range: either a page, or a collapsed run. */
+export type PaginationRangeItem = {
+    type: "page";
+    page: number;
+} | {
+    type: "gap";
+    pages: number[];
+};
+/**
+ * How the visible page window behaves as the current page moves.
+ *
+ * - **paged** — the window holds a fixed block of pages and only advances when
+ *   the current page steps outside it. Within a block nothing re-labels; only
+ *   which cell is active changes. Stepping past the block's last page loads the
+ *   next block in one deliberate jump.
+ * - **sliding** — the window follows the current page continuously, keeping
+ *   `siblingCount` pages either side of it. The conventional behaviour, but the
+ *   numbers under the reader's cursor re-label on EVERY step, which reads as a
+ *   flash.
+ */
+export type PaginationWindow = "paged" | "sliding";
+/** Shape of the range — see {@link paginationRange}. */
+export type PaginationRangeOptions = {
+    /**
+     * Which windowing strategy to use.
+     * @default "paged"
+     */
+    window?: PaginationWindow;
+    /**
+     * `paged` only — how many pages a block holds.
+     * @default 5
+     */
+    blockSize?: number;
+    /**
+     * `sliding` only — pages shown either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages pinned at each end of the range, in both strategies.
+     * @default 1
+     */
+    boundaryCount?: number;
+};
+/**
+ * Work out which pages to show, and which to collapse behind an overflow menu.
+ *
+ * Pins `boundaryCount` pages at each end, adds the window around the current
+ * page (see {@link PaginationWindow}), then walks the sorted result and
+ * collapses each remaining run into a `gap` carrying the pages it hides, so a
+ * menu can offer them.
+ *
+ * A run of exactly ONE page is returned as that page instead: hiding a single
+ * number behind a menu costs the reader a click and saves no width, since the
+ * ellipsis cell is the same square as the number it would replace. Same
+ * reasoning as `breadcrumb-overflow`, which only truncates once there is more
+ * than one crumb to hide.
+ *
+ * Pure — exported separately from the hook so a consumer holding its own page
+ * state can still reuse the arithmetic.
+ *
+ * @example
+ * ```ts
+ * paginationRange(7, 20);
+ * // 1 [2,3,4,5] 6 7 8 9 10 [11...19] 20   — the 6-10 block, steady while you
+ * //                                       move within it
+ * ```
+ */
+export declare function paginationRange(page: number, pageCount: number, options?: PaginationRangeOptions): PaginationRangeItem[];
+export type UsePaginationOptions = {
+    /**
+     * How many pages there are. Supply this directly when the page count comes
+     * from elsewhere (a server response, say); otherwise give `totalItems` and
+     * `pageSize` and let the hook derive it.
+     */
+    pageCount?: number;
+    /** Total number of items across every page. Pairs with `pageSize`. */
+    totalItems?: number;
+    /** How many items each page holds. Pairs with `totalItems`. */
+    pageSize?: number;
+    /**
+     * The current page, 1-based — supply this to drive the hook yourself
+     * (controlled). Leave it out to let the hook hold its own state.
+     */
+    page?: number;
+    /**
+     * Starting page when uncontrolled. Read once on mount.
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Notified whenever the page changes, with the **clamped** page — never a
+     * raw out-of-range request. Not called when the page hasn't actually moved.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * How the visible window behaves as the page moves. See
+     * {@link PaginationWindow} — `paged` holds a block steady, `sliding` follows
+     * the current page.
+     * @default "paged"
+     */
+    window?: PaginationWindow;
+    /**
+     * `paged` only — how many pages a block holds.
+     * @default 5
+     */
+    blockSize?: number;
+    /**
+     * `sliding` only — pages shown either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages `items` pins at each end of the range.
+     * @default 1
+     */
+    boundaryCount?: number;
+};
+/**
+ * What {@link usePagination} hands back.
+ */
+export type UsePaginationResult = {
+    /** The current page, 1-based. Always within `1...pageCount`. */
+    page: number;
+    /** How many pages there are. Never less than 1. */
+    pageCount: number;
+    /** Go to a page. Out-of-range requests are clamped, not rejected. */
+    setPage: (page: number) => void;
+    /** Step forward one page. A no-op on the last page. */
+    next: () => void;
+    /** Step back one page. A no-op on the first page. */
+    previous: () => void;
+    /** Jump to page 1. */
+    first: () => void;
+    /** Jump to the last page. */
+    last: () => void;
+    /** Whether there is a page before this one — wire to a prev control's `disabled`. */
+    canPrevious: boolean;
+    /** Whether there is a page after this one — wire to a next control's `disabled`. */
+    canNext: boolean;
+    /**
+     * Zero-based index of this page's first item. Together with `endIndex` this
+     * is a **half-open** range, so it drops straight into `Array.slice(start,
+     * end)` or a LIMIT/OFFSET query with no off-by-one at the call site.
+     *
+     * Both are `0` when the hook has no `pageSize` to reason from.
+     */
+    startIndex: number;
+    /** Zero-based index one past this page's last item. Never exceeds `totalItems`. */
+    endIndex: number;
+    /**
+     * The range to render: each entry is either a page or a collapsed `gap`
+     * carrying the pages it hides. See {@link paginationRange}.
+     */
+    items: PaginationRangeItem[];
+};
+/**
+ * Headless pagination state: the page arithmetic every paged surface needs,
+ * with no opinion about where the data comes from or how the row is rendered.
+ *
+ * @see https://primitiv-ui.dev/docs/hooks/use-pagination
+ */
+export declare function usePagination(options: UsePaginationOptions): UsePaginationResult;

package/dist/usePagination/usePagination.js

@@ -0,0 +1,130 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { useControllableState } from "../hooks/useControllableState.js";
+/**
+ * Work out which pages to show, and which to collapse behind an overflow menu.
+ *
+ * Pins `boundaryCount` pages at each end, adds the window around the current
+ * page (see {@link PaginationWindow}), then walks the sorted result and
+ * collapses each remaining run into a `gap` carrying the pages it hides, so a
+ * menu can offer them.
+ *
+ * A run of exactly ONE page is returned as that page instead: hiding a single
+ * number behind a menu costs the reader a click and saves no width, since the
+ * ellipsis cell is the same square as the number it would replace. Same
+ * reasoning as `breadcrumb-overflow`, which only truncates once there is more
+ * than one crumb to hide.
+ *
+ * Pure — exported separately from the hook so a consumer holding its own page
+ * state can still reuse the arithmetic.
+ *
+ * @example
+ * ```ts
+ * paginationRange(7, 20);
+ * // 1 [2,3,4,5] 6 7 8 9 10 [11...19] 20   — the 6-10 block, steady while you
+ * //                                       move within it
+ * ```
+ */
+export function paginationRange(page, pageCount, options = {}) {
+    const { window = "paged", blockSize = 5, siblingCount = 1, boundaryCount = 1 } = options;
+    const visible = new Set();
+    for (let i = 1; i <= Math.min(boundaryCount, pageCount); i++)
+        visible.add(i);
+    for (let i = Math.max(1, pageCount - boundaryCount + 1); i <= pageCount; i++)
+        visible.add(i);
+    if (window === "paged") {
+        // Which block the current page falls in. Because this is derived from the
+        // page rather than centred on it, every page in the block yields the same
+        // window — that is what stops the cells re-labelling as you step.
+        const blockStart = Math.floor((page - 1) / blockSize) * blockSize + 1;
+        const blockEnd = Math.min(blockStart + blockSize - 1, pageCount);
+        for (let i = blockStart; i <= blockEnd; i++)
+            visible.add(i);
+    }
+    else {
+        for (let i = Math.max(1, page - siblingCount); i <= Math.min(pageCount, page + siblingCount); i++) {
+            visible.add(i);
+        }
+    }
+    const sorted = [...visible].sort((a, b) => a - b);
+    const items = [];
+    sorted.forEach((current, i) => {
+        if (i > 0) {
+            const missing = [];
+            for (let p = sorted[i - 1] + 1; p < current; p++)
+                missing.push(p);
+            if (missing.length === 1)
+                items.push({ type: "page", page: missing[0] });
+            else if (missing.length > 1)
+                items.push({ type: "gap", pages: missing });
+        }
+        items.push({ type: "page", page: current });
+    });
+    return items;
+}
+function clamp(page, pageCount) {
+    return Math.min(Math.max(page, 1), pageCount);
+}
+/**
+ * Headless pagination state: the page arithmetic every paged surface needs,
+ * with no opinion about where the data comes from or how the row is rendered.
+ *
+ * @see https://primitiv-ui.dev/docs/hooks/use-pagination
+ */
+export function usePagination(options) {
+    const { pageCount: explicitPageCount, totalItems, pageSize, page: controlledPage, defaultPage = 1, onPageChange, window = "paged", blockSize = 5, siblingCount = 1, boundaryCount = 1, } = options;
+    const derived = explicitPageCount !== undefined
+        ? explicitPageCount
+        : totalItems !== undefined && pageSize !== undefined
+            ? Math.ceil(totalItems / pageSize)
+            : 1;
+    // A range needs somewhere to stand: with 0 pages, a 1-based `page` would be
+    // out of range the moment it is read.
+    const pageCount = Math.max(derived, 1);
+    const [rawPage, setRawPage] = useControllableState(controlledPage, defaultPage, onPageChange);
+    // Clamped on the way OUT as well as on the way in: `defaultPage` is read once
+    // on mount, and a controlled `page` comes straight from the consumer, so
+    // neither has passed through `setPage`. Both can outlive the data they
+    // pointed at (a page index restored from a URL, a list that shrank).
+    const page = clamp(rawPage, pageCount);
+    const setPage = useCallback((next) => {
+        const target = clamp(next, pageCount);
+        // useControllableState deliberately does not dedupe, so the guard lives
+        // here — a consumer re-selecting the page they are already on should not
+        // see a change notification.
+        if (target === page)
+            return;
+        setRawPage(target);
+    }, [page, pageCount, setRawPage]);
+    // Every mover goes through setPage, so clamping and the change guard are
+    // stated once — stepping past either end is a no-op rather than an error.
+    const next = useCallback(() => setPage(page + 1), [page, setPage]);
+    const previous = useCallback(() => setPage(page - 1), [page, setPage]);
+    const first = useCallback(() => setPage(1), [setPage]);
+    const last = useCallback(() => setPage(pageCount), [pageCount, setPage]);
+    // Only meaningful when the hook knows a page size. Given `pageCount` alone it
+    // cannot invent slice bounds, so it reports an empty range rather than a
+    // plausible-looking guess a consumer might slice with.
+    const canSlice = pageSize !== undefined;
+    const startIndex = canSlice ? (page - 1) * pageSize : 0;
+    const endIndex = canSlice
+        ? // Clamped to the real item count so the final, partial page's range stops
+            // at the data instead of a page-size multiple past it.
+            Math.min(startIndex + pageSize, totalItems ?? startIndex + pageSize)
+        : 0;
+    const items = useMemo(() => paginationRange(page, pageCount, { window, blockSize, siblingCount, boundaryCount }), [page, pageCount, window, blockSize, siblingCount, boundaryCount]);
+    return {
+        page,
+        pageCount,
+        setPage,
+        items,
+        startIndex,
+        endIndex,
+        next,
+        previous,
+        first,
+        last,
+        canPrevious: page > 1,
+        canNext: page < pageCount,
+    };
+}

package/dist/utils/createStrictContext.d.ts

@@ -0,0 +1,33 @@
+import { type Context } from "react";
+/**
+ * Creates a React context paired with a strict consumer hook that throws
+ * a clear error if a sub-component is rendered outside the matching
+ * Provider. Centralises the boilerplate every compound component in this
+ * library would otherwise duplicate.
+ *
+ * @param errorMessage - Error thrown by the hook when no Provider is
+ *   above it in the tree. Make this consumer-actionable, e.g.
+ *   `"Tabs.Trigger must be rendered as a child of Tabs.Root"`.
+ * @param displayName - Optional. Sets `Context.displayName` for nicer
+ *   React DevTools output.
+ *
+ * @returns A tuple `[Context, useStrictContext]`. `Context` is the
+ *   regular React context (use `Context.Provider` to provide a value).
+ *   `useStrictContext` returns the value, narrowed to non-null.
+ *
+ * @example
+ * ```ts
+ * type FooContextValue = { count: number };
+ *
+ * // JSR rejects array-destructured exports as a "slow type", so bind the
+ * // pair locally and re-export each half with an explicit type:
+ * const fooContext = createStrictContext<FooContextValue>(
+ *   "Foo sub-components must be rendered inside <Foo.Root>.",
+ *   "FooContext",
+ * );
+ *
+ * export const FooContext: Context<FooContextValue | null> = fooContext[0];
+ * export const useFooContext: () => FooContextValue = fooContext[1];
+ * ```
+ */
+export declare function createStrictContext<T>(errorMessage: string, displayName?: string): readonly [Context<T | null>, () => T];

package/dist/utils/createStrictContext.js

@@ -0,0 +1,47 @@
+"use client";
+import { createContext, useContext } from "react";
+/**
+ * Creates a React context paired with a strict consumer hook that throws
+ * a clear error if a sub-component is rendered outside the matching
+ * Provider. Centralises the boilerplate every compound component in this
+ * library would otherwise duplicate.
+ *
+ * @param errorMessage - Error thrown by the hook when no Provider is
+ *   above it in the tree. Make this consumer-actionable, e.g.
+ *   `"Tabs.Trigger must be rendered as a child of Tabs.Root"`.
+ * @param displayName - Optional. Sets `Context.displayName` for nicer
+ *   React DevTools output.
+ *
+ * @returns A tuple `[Context, useStrictContext]`. `Context` is the
+ *   regular React context (use `Context.Provider` to provide a value).
+ *   `useStrictContext` returns the value, narrowed to non-null.
+ *
+ * @example
+ * ```ts
+ * type FooContextValue = { count: number };
+ *
+ * // JSR rejects array-destructured exports as a "slow type", so bind the
+ * // pair locally and re-export each half with an explicit type:
+ * const fooContext = createStrictContext<FooContextValue>(
+ *   "Foo sub-components must be rendered inside <Foo.Root>.",
+ *   "FooContext",
+ * );
+ *
+ * export const FooContext: Context<FooContextValue | null> = fooContext[0];
+ * export const useFooContext: () => FooContextValue = fooContext[1];
+ * ```
+ */
+export function createStrictContext(errorMessage, displayName) {
+    const Ctx = createContext(null);
+    if (displayName !== undefined) {
+        Ctx.displayName = displayName;
+    }
+    function useStrictContext() {
+        const value = useContext(Ctx);
+        if (value === null) {
+            throw new Error(errorMessage);
+        }
+        return value;
+    }
+    return [Ctx, useStrictContext];
+}

package/dist/utils/deriveId.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Builds a deterministic sub-id from a stable root id (typically the
+ * value returned by React's `useId()`), a fixed role suffix, and a
+ * per-item value. Used to wire `aria-controls`, `aria-labelledby`, and
+ * matching DOM `id` attributes between paired sub-components such as
+ * Tabs.Trigger ↔ Tabs.Content and Accordion.Trigger ↔ Accordion.Content
+ * without each compound component re-deriving the same template literal.
+ *
+ * @example Inside a Tabs.Trigger
+ * ```ts
+ * const triggerId = deriveId(tabsId, "trigger", value);
+ * const panelId = deriveId(tabsId, "panel", value);
+ * ```
+ *
+ * @param rootId - The shared id for the compound component, normally
+ *   from `useId()`. Any string is accepted, including React 18's
+ *   colon-bracketed ids (`":r1:"`).
+ * @param suffix - The role of the derived id within the compound,
+ *   e.g. `"trigger"`, `"panel"`, `"heading"`.
+ * @param value - The per-item discriminator (the value prop on the
+ *   trigger / panel pair).
+ *
+ * @returns The concatenation `${rootId}-${suffix}-${value}`.
+ */
+export declare function deriveId(rootId: string, suffix: string, value: string): string;

package/dist/utils/deriveId.js

@@ -0,0 +1,28 @@
+"use client";
+/**
+ * Builds a deterministic sub-id from a stable root id (typically the
+ * value returned by React's `useId()`), a fixed role suffix, and a
+ * per-item value. Used to wire `aria-controls`, `aria-labelledby`, and
+ * matching DOM `id` attributes between paired sub-components such as
+ * Tabs.Trigger ↔ Tabs.Content and Accordion.Trigger ↔ Accordion.Content
+ * without each compound component re-deriving the same template literal.
+ *
+ * @example Inside a Tabs.Trigger
+ * ```ts
+ * const triggerId = deriveId(tabsId, "trigger", value);
+ * const panelId = deriveId(tabsId, "panel", value);
+ * ```
+ *
+ * @param rootId - The shared id for the compound component, normally
+ *   from `useId()`. Any string is accepted, including React 18's
+ *   colon-bracketed ids (`":r1:"`).
+ * @param suffix - The role of the derived id within the compound,
+ *   e.g. `"trigger"`, `"panel"`, `"heading"`.
+ * @param value - The per-item discriminator (the value prop on the
+ *   trigger / panel pair).
+ *
+ * @returns The concatenation `${rootId}-${suffix}-${value}`.
+ */
+export function deriveId(rootId, suffix, value) {
+    return `${rootId}-${suffix}-${value}`;
+}

package/dist/utils/focusable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Elements that can receive keyboard focus and take part in the natural tab
+ * order. Two consumers rely on it: moving initial focus into a surface when it
+ * opens (e.g. `Popover`), and locating the boundary elements of a focus trap
+ * (e.g. `Modal`). `[tabindex="-1"]` is excluded because such elements are only
+ * programmatically focusable, not tabbable.
+ */
+export declare const FOCUSABLE_SELECTOR: string;

package/dist/utils/focusable.js

@@ -0,0 +1,16 @@
+"use client";
+/**
+ * Elements that can receive keyboard focus and take part in the natural tab
+ * order. Two consumers rely on it: moving initial focus into a surface when it
+ * opens (e.g. `Popover`), and locating the boundary elements of a focus trap
+ * (e.g. `Modal`). `[tabindex="-1"]` is excluded because such elements are only
+ * programmatically focusable, not tabbable.
+ */
+export const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");

package/dist/utils/getKeyToActionMap.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The abstract roving-tabindex action that a keyboard event maps to.
+ *
+ * Consumers translate the action into whatever "go to" semantics suit
+ * their pattern (focus only, focus + activate, focus + select, etc.).
+ */
+export type RovingKeyAction = "next" | "prev" | "first" | "last" | "activate";
+type GetKeyToActionMapOptions = {
+    /**
+     * Which arrow-key axis is active. `"horizontal"` enables Arrow Left/Right,
+     * `"vertical"` enables Arrow Up/Down, `"both"` enables all four. RTL
+     * inversion (see {@link GetKeyToActionMapOptions.dir | `dir`}) swaps the
+     * horizontal pair for both `"horizontal"` and `"both"`; the vertical pair
+     * is never swapped, since vertical reading order does not depend on
+     * direction.
+     */
+    orientation: "horizontal" | "vertical" | "both";
+    /**
+     * Reading direction. When `"rtl"`, swaps the meaning of Arrow Left and
+     * Arrow Right — applied for both `"horizontal"` and `"both"` orientation
+     * (never the vertical pair). Defaults to `"ltr"`.
+     */
+    dir?: "ltr" | "rtl";
+    /**
+     * When `true`, Home maps to `"first"` and End to `"last"`. Use for
+     * patterns where Home/End jumping is part of the keyboard contract
+     * (Tabs, Accordion). Defaults to `false`.
+     */
+    homeEnd?: boolean;
+    /**
+     * When `true`, Enter and Space map to `"activate"`. Use for patterns
+     * where the focused item can be confirmed via the keyboard (Tabs in
+     * `"manual"` activation mode). Defaults to `false`.
+     */
+    activate?: boolean;
+};
+/**
+ * Builds the keyboard-key → roving-tabindex-action map for a single
+ * focusable item in a compound widget. Each consumer shares the same
+ * RTL / orientation / Home-End / Enter-Space conventions and just needs
+ * to translate the abstract action ("next", "prev", "first", "last",
+ * "activate") into its own movement / activation logic.
+ *
+ * Returns a plain `Record<string, RovingKeyAction>` so call sites can do
+ * `const action = map[event.key]; if (action === "next") ...`.
+ *
+ * @example Tabs trigger (horizontal, RTL, all features)
+ * ```ts
+ * const map = getKeyToActionMap({
+ *   orientation: "horizontal",
+ *   dir,
+ *   homeEnd: true,
+ *   activate: true,
+ * });
+ * const action = map[event.key];
+ * ```
+ *
+ * @example Accordion trigger (vertical, no Enter/Space — handled separately)
+ * ```ts
+ * const map = getKeyToActionMap({ orientation: "vertical", homeEnd: true });
+ * ```
+ */
+export declare function getKeyToActionMap({ orientation, dir, homeEnd, activate, }: GetKeyToActionMapOptions): Record<string, RovingKeyAction>;
+export {};

package/dist/utils/getKeyToActionMap.js

@@ -0,0 +1,49 @@
+"use client";
+/**
+ * Builds the keyboard-key → roving-tabindex-action map for a single
+ * focusable item in a compound widget. Each consumer shares the same
+ * RTL / orientation / Home-End / Enter-Space conventions and just needs
+ * to translate the abstract action ("next", "prev", "first", "last",
+ * "activate") into its own movement / activation logic.
+ *
+ * Returns a plain `Record<string, RovingKeyAction>` so call sites can do
+ * `const action = map[event.key]; if (action === "next") ...`.
+ *
+ * @example Tabs trigger (horizontal, RTL, all features)
+ * ```ts
+ * const map = getKeyToActionMap({
+ *   orientation: "horizontal",
+ *   dir,
+ *   homeEnd: true,
+ *   activate: true,
+ * });
+ * const action = map[event.key];
+ * ```
+ *
+ * @example Accordion trigger (vertical, no Enter/Space — handled separately)
+ * ```ts
+ * const map = getKeyToActionMap({ orientation: "vertical", homeEnd: true });
+ * ```
+ */
+export function getKeyToActionMap({ orientation, dir = "ltr", homeEnd = false, activate = false, }) {
+    const map = {};
+    if (orientation === "horizontal" || orientation === "both") {
+        const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+        const backward = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+        map[forward] = "next";
+        map[backward] = "prev";
+    }
+    if (orientation === "vertical" || orientation === "both") {
+        map.ArrowDown = "next";
+        map.ArrowUp = "prev";
+    }
+    if (homeEnd) {
+        map.Home = "first";
+        map.End = "last";
+    }
+    if (activate) {
+        map.Enter = "activate";
+        map[" "] = "activate";
+    }
+    return map;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { createStrictContext } from "./createStrictContext.js";
+export { deriveId } from "./deriveId.js";
+export { FOCUSABLE_SELECTOR } from "./focusable.js";
+export { getKeyToActionMap, type RovingKeyAction } from "./getKeyToActionMap.js";

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export { createStrictContext } from "./createStrictContext.js";
+export { deriveId } from "./deriveId.js";
+export { FOCUSABLE_SELECTOR } from "./focusable.js";
+export { getKeyToActionMap } from "./getKeyToActionMap.js";

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "files": [
-    "src"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -56,6 +56,7 @@
     "access": "public"
   },
   "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/finalize-dist.mjs dist --client",
     "qa": "pnpm qa:units",
     "qa:units": "vitest run --coverage",
     "qa:units:watch": "vitest --coverage",