react-resource-ui 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.cjs

@@ -0,0 +1,236 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DataTable: () => DataTable,
+  useResource: () => useResource
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/hooks/useResource.ts
+var import_react = require("react");
+
+// src/engine/source.ts
+function normalizeSource(source) {
+  return async function getData(params) {
+    const { page = 1, pageSize = 10 } = params;
+    if (Array.isArray(source)) {
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+      return source.slice(start, end);
+    }
+    if (typeof source === "string") {
+      try {
+        const url = new URL(source);
+        url.searchParams.set("page", String(page));
+        url.searchParams.set("pageSize", String(pageSize));
+        const call = await fetch(url.toString());
+        if (!call.ok) {
+          throw new Error(`Request Failed: ${call.status}`);
+        }
+        const jsonData = await call.json();
+        return jsonData;
+      } catch (err) {
+        if (err instanceof Error) throw err;
+        throw new Error("Unknown error");
+      }
+    }
+    return source(params);
+  };
+}
+
+// src/hooks/useResource.ts
+function useResource(config) {
+  const pagination = config.pagination;
+  const [data, setData] = (0, import_react.useState)([]);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [page, setPage] = (0, import_react.useState)(1);
+  const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
+  const pageSize = pagination?.pageSize ? pagination?.pageSize : 10;
+  const source = config.source;
+  const requestTracker = (0, import_react.useRef)(0);
+  const cache = (0, import_react.useRef)({});
+  const virtualization = config.virtualization?.enabled;
+  const getData = (0, import_react.useMemo)(() => normalizeSource(source), [source]);
+  const prevScrollTop = (0, import_react.useRef)(0);
+  const scrollRef = (0, import_react.useRef)(null);
+  const hasMore = (0, import_react.useRef)(true);
+  async function asyncNormalize() {
+    const params = {
+      page,
+      pageSize
+    };
+    setLoading(true);
+    requestTracker.current += 1;
+    const currentRequestId = requestTracker.current;
+    setError(null);
+    try {
+      const rawData = await getData(params);
+      if (currentRequestId !== requestTracker.current) {
+        setLoading(false);
+        return;
+      }
+      ;
+      setLoading(false);
+      return rawData;
+    } catch (err) {
+      if (currentRequestId === requestTracker.current) {
+        if (err instanceof Error) {
+          setError(err);
+        } else {
+          setError(new Error("unknown error"));
+        }
+        setLoading(false);
+      }
+    }
+  }
+  async function orchestrator() {
+    const isPageMode = pagination?.type === "page";
+    prevScrollTop.current = scrollTop;
+    const cached = cache.current[page];
+    if (isPageMode) {
+      if (cached) {
+        setData(cached);
+        return;
+      }
+    }
+    const rawData = await asyncNormalize();
+    if (!rawData) return;
+    if (rawData.length < pageSize) hasMore.current = false;
+    setData((prev) => {
+      if (isPageMode) return rawData;
+      return page === 1 ? rawData : [...prev, ...rawData];
+    });
+    if (isPageMode) {
+      cache.current[page] = rawData;
+      Object.keys(cache.current).forEach((val) => {
+        if (Math.abs(page - +val) > 1) {
+          delete cache.current[+val];
+        }
+      });
+    }
+  }
+  (0, import_react.useEffect)(() => {
+    if (!hasMore.current) return;
+    if (pagination?.type !== "infinite") return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const remaining = el.scrollHeight - scrollTop - el.clientHeight;
+    if (remaining < 50 && !loading) {
+      (() => {
+        setPage((prev) => prev + 1);
+      })();
+    }
+  }, [scrollTop, pagination?.type, loading]);
+  (0, import_react.useEffect)(() => {
+    orchestrator();
+  }, [page, pageSize, source, pagination?.type]);
+  (0, import_react.useEffect)(() => {
+    if (pagination?.type === "page") {
+      (() => setScrollTop(0))();
+    }
+  }, [page, pagination?.type]);
+  (0, import_react.useEffect)(() => {
+    if (pagination?.type !== "page") {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTop = prevScrollTop.current;
+      }
+    }
+  }, [data]);
+  let finalData = data;
+  const itemHeight = config.virtualization?.itemHeight ?? 40;
+  const containerHeight = config.virtualization?.containerHeight ?? 400;
+  const shouldVirtualize = virtualization && data.length * itemHeight > containerHeight;
+  let offsetY = 0;
+  let totalHeight = 0;
+  if (shouldVirtualize) {
+    const total = data.length;
+    const rawStart = Math.floor(scrollTop / itemHeight);
+    const startIndex = Math.max(0, rawStart - 2);
+    const visibleCount = Math.ceil(containerHeight / itemHeight);
+    const endIndex = Math.min(startIndex + visibleCount + 4, total);
+    finalData = data.slice(startIndex, endIndex);
+    offsetY = itemHeight * startIndex;
+    totalHeight = total * itemHeight;
+  }
+  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef };
+}
+
+// src/components/DataTable.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTable(props) {
+  const { data, loading, error, page, setPage, setScrollTop, type, virtualization } = props;
+  const isFetchingRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    isFetchingRef.current = false;
+  }, [data]);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Loading..." });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: error.message });
+  if ((props.totalItems ?? data.length) === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "No Data to create Table" });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Object.keys(data[0]).map((val) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: val }, val)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.map((val, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: Object.keys(val).map((key) => {
+      const value = val[key];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: value != null ? value.toString() : "-" }, key);
+    }) }, index)) })
+  ] });
+  const offsetY = props.offsetY ?? 0;
+  const totalHeight = props.totalHeight ?? 0;
+  const finalTable = virtualization ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: props.scrollRef ?? null,
+      style: { height: 400, overflowY: "auto" },
+      onScroll: (e) => {
+        setScrollTop(e.currentTarget.scrollTop);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            transform: `translateY(${offsetY}px)`,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0
+          },
+          children: content
+        }
+      ) })
+    }
+  ) : content;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    type === "page" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => Math.max(prev - 1, 1)), children: "prev" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: page }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => prev + 1), children: "next" })
+    ] }),
+    finalTable,
+    type === "loadmore" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setPage((prev) => prev + 1), children: "load more" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTable,
+  useResource
+});

package/dist/index.css

@@ -0,0 +1,13 @@
+/* src/components/DataTable.css */
+td,
+th {
+  border: 1px solid white;
+  padding: 10px;
+}
+th {
+  text-transform: capitalize;
+}
+table {
+  margin-top: 16px;
+  margin-left: 16px;
+}

package/dist/index.d.cts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ResourceParams = {
+    page?: number;
+    pageSize?: number;
+};
+type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[]>);
+
+type PaginationConfig = {
+    type: "page" | "loadmore" | "infinite";
+    pageSize?: number;
+};
+type virtualizationConfig = {
+    enabled: boolean;
+    itemHeight: number;
+    containerHeight: number;
+};
+type Config<T> = {
+    source: Source<T>;
+    pagination?: PaginationConfig;
+    virtualization?: virtualizationConfig;
+};
+declare function useResource<T>(config: Config<T>): {
+    data: T[];
+    loading: boolean;
+    error: Error | null;
+    page: number;
+    setPage: react.Dispatch<react.SetStateAction<number>>;
+    setScrollTop: react.Dispatch<react.SetStateAction<number>>;
+    offsetY: number;
+    totalHeight: number;
+    totalItems: number;
+    scrollRef: react.RefObject<HTMLDivElement | null>;
+};
+
+type DataTableProps<T extends Record<string, unknown>> = {
+    data: T[];
+    loading?: boolean;
+    error?: Error | null;
+    page?: number;
+    setPage: React.Dispatch<React.SetStateAction<number>>;
+    setScrollTop: React.Dispatch<React.SetStateAction<number>>;
+    type: "page" | "loadmore" | "infinite";
+    virtualization?: boolean;
+    offsetY?: number;
+    totalHeight?: number;
+    totalItems?: number;
+    scrollRef?: React.RefObject<HTMLDivElement> | null;
+};
+declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { DataTable, useResource };

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ResourceParams = {
+    page?: number;
+    pageSize?: number;
+};
+type Source<T> = T[] | string | ((params: ResourceParams) => Promise<T[]>);
+
+type PaginationConfig = {
+    type: "page" | "loadmore" | "infinite";
+    pageSize?: number;
+};
+type virtualizationConfig = {
+    enabled: boolean;
+    itemHeight: number;
+    containerHeight: number;
+};
+type Config<T> = {
+    source: Source<T>;
+    pagination?: PaginationConfig;
+    virtualization?: virtualizationConfig;
+};
+declare function useResource<T>(config: Config<T>): {
+    data: T[];
+    loading: boolean;
+    error: Error | null;
+    page: number;
+    setPage: react.Dispatch<react.SetStateAction<number>>;
+    setScrollTop: react.Dispatch<react.SetStateAction<number>>;
+    offsetY: number;
+    totalHeight: number;
+    totalItems: number;
+    scrollRef: react.RefObject<HTMLDivElement | null>;
+};
+
+type DataTableProps<T extends Record<string, unknown>> = {
+    data: T[];
+    loading?: boolean;
+    error?: Error | null;
+    page?: number;
+    setPage: React.Dispatch<React.SetStateAction<number>>;
+    setScrollTop: React.Dispatch<React.SetStateAction<number>>;
+    type: "page" | "loadmore" | "infinite";
+    virtualization?: boolean;
+    offsetY?: number;
+    totalHeight?: number;
+    totalItems?: number;
+    scrollRef?: React.RefObject<HTMLDivElement> | null;
+};
+declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { DataTable, useResource };

package/dist/index.js

@@ -0,0 +1,208 @@
+// src/hooks/useResource.ts
+import { useEffect, useState, useRef, useMemo } from "react";
+
+// src/engine/source.ts
+function normalizeSource(source) {
+  return async function getData(params) {
+    const { page = 1, pageSize = 10 } = params;
+    if (Array.isArray(source)) {
+      const start = (page - 1) * pageSize;
+      const end = start + pageSize;
+      return source.slice(start, end);
+    }
+    if (typeof source === "string") {
+      try {
+        const url = new URL(source);
+        url.searchParams.set("page", String(page));
+        url.searchParams.set("pageSize", String(pageSize));
+        const call = await fetch(url.toString());
+        if (!call.ok) {
+          throw new Error(`Request Failed: ${call.status}`);
+        }
+        const jsonData = await call.json();
+        return jsonData;
+      } catch (err) {
+        if (err instanceof Error) throw err;
+        throw new Error("Unknown error");
+      }
+    }
+    return source(params);
+  };
+}
+
+// src/hooks/useResource.ts
+function useResource(config) {
+  const pagination = config.pagination;
+  const [data, setData] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [scrollTop, setScrollTop] = useState(0);
+  const pageSize = pagination?.pageSize ? pagination?.pageSize : 10;
+  const source = config.source;
+  const requestTracker = useRef(0);
+  const cache = useRef({});
+  const virtualization = config.virtualization?.enabled;
+  const getData = useMemo(() => normalizeSource(source), [source]);
+  const prevScrollTop = useRef(0);
+  const scrollRef = useRef(null);
+  const hasMore = useRef(true);
+  async function asyncNormalize() {
+    const params = {
+      page,
+      pageSize
+    };
+    setLoading(true);
+    requestTracker.current += 1;
+    const currentRequestId = requestTracker.current;
+    setError(null);
+    try {
+      const rawData = await getData(params);
+      if (currentRequestId !== requestTracker.current) {
+        setLoading(false);
+        return;
+      }
+      ;
+      setLoading(false);
+      return rawData;
+    } catch (err) {
+      if (currentRequestId === requestTracker.current) {
+        if (err instanceof Error) {
+          setError(err);
+        } else {
+          setError(new Error("unknown error"));
+        }
+        setLoading(false);
+      }
+    }
+  }
+  async function orchestrator() {
+    const isPageMode = pagination?.type === "page";
+    prevScrollTop.current = scrollTop;
+    const cached = cache.current[page];
+    if (isPageMode) {
+      if (cached) {
+        setData(cached);
+        return;
+      }
+    }
+    const rawData = await asyncNormalize();
+    if (!rawData) return;
+    if (rawData.length < pageSize) hasMore.current = false;
+    setData((prev) => {
+      if (isPageMode) return rawData;
+      return page === 1 ? rawData : [...prev, ...rawData];
+    });
+    if (isPageMode) {
+      cache.current[page] = rawData;
+      Object.keys(cache.current).forEach((val) => {
+        if (Math.abs(page - +val) > 1) {
+          delete cache.current[+val];
+        }
+      });
+    }
+  }
+  useEffect(() => {
+    if (!hasMore.current) return;
+    if (pagination?.type !== "infinite") return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const remaining = el.scrollHeight - scrollTop - el.clientHeight;
+    if (remaining < 50 && !loading) {
+      (() => {
+        setPage((prev) => prev + 1);
+      })();
+    }
+  }, [scrollTop, pagination?.type, loading]);
+  useEffect(() => {
+    orchestrator();
+  }, [page, pageSize, source, pagination?.type]);
+  useEffect(() => {
+    if (pagination?.type === "page") {
+      (() => setScrollTop(0))();
+    }
+  }, [page, pagination?.type]);
+  useEffect(() => {
+    if (pagination?.type !== "page") {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTop = prevScrollTop.current;
+      }
+    }
+  }, [data]);
+  let finalData = data;
+  const itemHeight = config.virtualization?.itemHeight ?? 40;
+  const containerHeight = config.virtualization?.containerHeight ?? 400;
+  const shouldVirtualize = virtualization && data.length * itemHeight > containerHeight;
+  let offsetY = 0;
+  let totalHeight = 0;
+  if (shouldVirtualize) {
+    const total = data.length;
+    const rawStart = Math.floor(scrollTop / itemHeight);
+    const startIndex = Math.max(0, rawStart - 2);
+    const visibleCount = Math.ceil(containerHeight / itemHeight);
+    const endIndex = Math.min(startIndex + visibleCount + 4, total);
+    finalData = data.slice(startIndex, endIndex);
+    offsetY = itemHeight * startIndex;
+    totalHeight = total * itemHeight;
+  }
+  return { data: finalData, loading, error, page, setPage, setScrollTop, offsetY, totalHeight, totalItems: data.length, scrollRef };
+}
+
+// src/components/DataTable.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTable(props) {
+  const { data, loading, error, page, setPage, setScrollTop, type, virtualization } = props;
+  const isFetchingRef = useRef2(false);
+  useEffect2(() => {
+    isFetchingRef.current = false;
+  }, [data]);
+  if (loading) return /* @__PURE__ */ jsx("div", { children: "Loading..." });
+  if (error) return /* @__PURE__ */ jsx("div", { children: error.message });
+  if ((props.totalItems ?? data.length) === 0) return /* @__PURE__ */ jsx("p", { children: "No Data to create Table" });
+  const content = /* @__PURE__ */ jsxs("table", { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: Object.keys(data[0]).map((val) => /* @__PURE__ */ jsx("th", { children: val }, val)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((val, index) => /* @__PURE__ */ jsx("tr", { children: Object.keys(val).map((key) => {
+      const value = val[key];
+      return /* @__PURE__ */ jsx("td", { children: value != null ? value.toString() : "-" }, key);
+    }) }, index)) })
+  ] });
+  const offsetY = props.offsetY ?? 0;
+  const totalHeight = props.totalHeight ?? 0;
+  const finalTable = virtualization ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: props.scrollRef ?? null,
+      style: { height: 400, overflowY: "auto" },
+      onScroll: (e) => {
+        setScrollTop(e.currentTarget.scrollTop);
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            transform: `translateY(${offsetY}px)`,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0
+          },
+          children: content
+        }
+      ) })
+    }
+  ) : content;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    type === "page" && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => Math.max(prev - 1, 1)), children: "prev" }),
+      /* @__PURE__ */ jsx("span", { children: page }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => prev + 1), children: "next" })
+    ] }),
+    finalTable,
+    type === "loadmore" && /* @__PURE__ */ jsx("button", { onClick: () => setPage((prev) => prev + 1), children: "load more" })
+  ] });
+}
+export {
+  DataTable,
+  useResource
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-resource-ui",
+  "version": "0.1.0",
+  "description": "A high-level data orchestration hook for React with pagination, caching, and virtualization",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "license": "MIT",
+
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts"
+  },
+
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  }
+}