@studiocubics/hooks 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @studiocubics/hooks
+
+## 0.0.1
+
+### Patch Changes
+
+- First publish inshallah!
+- Updated dependencies
+  - @studiocubics/types@0.0.1

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 [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+
+## 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/eslint.config.js

@@ -0,0 +1,21 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@studiocubics/hooks",
+  "description": "Package containing important hooks by Studio Cubics",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "version": "0.0.1",
+  "keywords": [
+    "@studiocubics",
+    "cubics",
+    "studio",
+    "react",
+    "hooks"
+  ],
+  "author": {
+    "name": "Studio Cubics",
+    "email": "studiocubics7@gmail.com",
+    "url": "https://studio-cubics.vercel.app"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles.css": "./dist/index.css"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@studiocubics/types": "^0.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-modules": "^6.0.1",
+    "rollup": "^4.53.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "clean:build": "rimraf dist node_modules && rollup -c",
+    "lint": "eslint .",
+    "clean": "rimraf dist node_modules"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "rollup";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import terser from "@rollup/plugin-terser";
+import preserveDirectives from "rollup-preserve-directives";
+
+export default defineConfig({
+  input: "src/index.ts",
+  output: {
+    preserveModules: true,
+    preserveModulesRoot: "src",
+    dir: "dist",
+    format: "esm",
+    sourcemap: true,
+  },
+  plugins: [
+    preserveDirectives(),
+    postcss({
+      include: "**/*.module.css",
+      modules: true,
+      extract: true,
+      minimize: true,
+    }),
+    typescript({ tsconfig: "./tsconfig.json" }),
+    terser({ compress: { directives: false } }),
+  ],
+  external: ["react/jsx-runtime", "react", "react-dom"],
+});

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./useAnchorElement/useAnchorElement";
+export * from "./useDelayedAction/useDelayedAction";
+export * from "./useDisclosure/useDisclosure";
+export * from "./useEventCallback/useEventCallback";
+export * from "./useEventListener/useEventListener";
+export * from "./useFormHelpers/useFormHelpers";
+export * from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect";
+export * from "./useLocalStorage/useLocalStorage";
+export * from "./useMounted/useMounted";
+export * from "./useMousePosition/useMousePosition";
+export * from "./useScreenSize/useScreenSize";

package/src/useAnchorElement/useAnchorElement.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { type MouseEvent, useMemo, useState } from "react";
+
+export function useAnchorElement<T extends HTMLElement>() {
+  const [anchorEl, setAnchorEl] = useState<T | null>(null);
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+  const handleClick = (event: MouseEvent<T>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return { open, anchorEl, handleClick, handleClose, setAnchorEl };
+}

package/src/useDelayedAction/useDelayedAction.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { useCallback } from "react";
+
+export function useDelayedAction() {
+  const delayedExecute = useCallback(async (fn: Function, ms: number) => {
+    await new Promise((resolve) => setTimeout(resolve, ms));
+    fn();
+  }, []);
+
+  return delayedExecute;
+}

package/src/useDisclosure/useDisclosure.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+
+export function useDisclosure(initialState: boolean = false) {
+  const [open, setOpen] = useState(initialState);
+
+  function handleOpen() {
+    setOpen(true);
+  }
+  function handleClose() {
+    setOpen(false);
+  }
+
+  /**
+   * Hijacking the handleClose function to prevent the dialog from closing when the user clicks outside the dialog or presses the escape key.
+   * @param _ event not going to be used.
+   * @param reason The reason the dialog was closed.
+   */
+  function handleStrictClose(_: {}, reason: "backdropClick" | "escapeKeyDown") {
+    if (reason === "backdropClick" || reason === "escapeKeyDown") return;
+    handleClose();
+  }
+
+  function handleToggle() {
+    setOpen((prev) => !prev);
+  }
+
+  return {
+    open,
+    handleClose,
+    handleStrictClose,
+    handleOpen,
+    handleToggle,
+  };
+}

package/src/useEventCallback/useEventCallback.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect";
+
+export function useEventCallback<Args extends unknown[], R>(
+  fn: (...args: Args) => R
+): (...args: Args) => R;
+export function useEventCallback<Args extends unknown[], R>(
+  fn: ((...args: Args) => R) | undefined
+): ((...args: Args) => R) | undefined;
+export function useEventCallback<Args extends unknown[], R>(
+  fn: ((...args: Args) => R) | undefined
+): ((...args: Args) => R) | undefined {
+  const ref = useRef<typeof fn>(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+
+  return useCallback((...args: Args) => ref.current?.(...args), [ref]) as (
+    ...args: Args
+  ) => R;
+}

package/src/useEventListener/useEventListener.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import type { RefObject } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect";
+
+// MediaQueryList Event based useEventListener interface
+function useEventListener<K extends keyof MediaQueryListEventMap>(
+  eventName: K,
+  handler: (event: MediaQueryListEventMap[K]) => void,
+  element: RefObject<MediaQueryList>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Window Event based useEventListener interface
+function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: undefined,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Element Event based useEventListener interface
+function useEventListener<
+  K extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  T extends Element = K extends keyof HTMLElementEventMap
+    ? HTMLDivElement
+    : SVGElement,
+>(
+  eventName: K,
+  handler:
+    | ((event: HTMLElementEventMap[K]) => void)
+    | ((event: SVGElementEventMap[K]) => void),
+  element: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+// Document Event based useEventListener interface
+function useEventListener<K extends keyof DocumentEventMap>(
+  eventName: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  element: RefObject<Document>,
+  options?: boolean | AddEventListenerOptions,
+): void;
+
+function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,
+  KM extends keyof MediaQueryListEventMap,
+  T extends HTMLElement | SVGAElement | MediaQueryList = HTMLElement,
+>(
+  eventName: KW | KH | KM,
+  handler: (
+    event:
+      | WindowEventMap[KW]
+      | HTMLElementEventMap[KH]
+      | SVGElementEventMap[KH]
+      | MediaQueryListEventMap[KM]
+      | Event,
+  ) => void,
+  element?: RefObject<T>,
+  options?: boolean | AddEventListenerOptions,
+) {
+  // Create a ref that stores handler
+  const savedHandler = useRef(handler);
+
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current ?? window;
+
+    if (!(targetElement && targetElement.addEventListener)) return;
+
+    // Create event listener that calls handler function stored in ref
+    const listener: typeof handler = (event) => {
+      savedHandler.current(event);
+    };
+
+    targetElement.addEventListener(eventName, listener, options);
+
+    // Remove event listener on cleanup
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+export { useEventListener };

package/src/useFormHelpers/useFormHelpers.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+export type FormHelpersProps = {
+  initialLoading?: boolean;
+  initialError?: string | unknown;
+};
+
+export function useFormHelpers(props: FormHelpersProps) {
+  const [loading, setLoading] = useState(props?.initialLoading ?? false);
+  const [error, setError] = useState(props?.initialError ?? "");
+
+  function handleLoading(l: boolean) {
+    setLoading(l);
+  }
+  function handleError(e: string | unknown) {
+    if (typeof e === "string") setError(e);
+    if (e instanceof Error) setError(e.message);
+    console.error(e);
+  }
+
+  return {
+    loading,
+    error,
+    handleLoading,
+    handleError,
+  };
+}

package/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/useLocalStorage/useLocalStorage.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEventCallback } from "../useEventCallback/useEventCallback";
+import { useEventListener } from "../useEventListener/useEventListener";
+
+declare global {
+  interface WindowEventMap {
+    "local-storage": CustomEvent;
+  }
+}
+
+type UseLocalStorageOptions<T> = {
+  serializer?: (value: T) => string;
+  deserializer?: (value: string) => T;
+  initializeWithValue?: boolean;
+};
+
+const IS_SERVER = typeof window === "undefined";
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T | (() => T),
+  options: UseLocalStorageOptions<T> = {},
+): [T, Dispatch<SetStateAction<T>>, () => void] {
+  const { initializeWithValue = true } = options;
+
+  const serializer = useCallback<(value: T) => string>(
+    (value) => {
+      if (options.serializer) {
+        return options.serializer(value);
+      }
+
+      return JSON.stringify(value);
+    },
+    [options],
+  );
+
+  const deserializer = useCallback<(value: string) => T>(
+    (value) => {
+      if (options.deserializer) {
+        return options.deserializer(value);
+      }
+      // Support 'undefined' as a value
+      if (value === "undefined") {
+        return undefined as unknown as T;
+      }
+
+      const defaultValue =
+        initialValue instanceof Function ? initialValue() : initialValue;
+
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(value);
+      } catch (error) {
+        console.error("Error parsing JSON:", error);
+        return defaultValue; // Return initialValue if parsing fails
+      }
+
+      return parsed as T;
+    },
+    [options, initialValue],
+  );
+
+  // Get from local storage then
+  // parse stored json or return initialValue
+  const readValue = useCallback((): T => {
+    const initialValueToUse =
+      initialValue instanceof Function ? initialValue() : initialValue;
+
+    // Prevent build error "window is undefined" but keep working
+    if (IS_SERVER) {
+      return initialValueToUse;
+    }
+
+    try {
+      const raw = window.localStorage.getItem(key);
+      return raw ? deserializer(raw) : initialValueToUse;
+    } catch (error) {
+      console.warn(`Error reading localStorage key “${key}”:`, error);
+      return initialValueToUse;
+    }
+  }, [initialValue, key, deserializer]);
+
+  const [storedValue, setStoredValue] = useState(() => {
+    if (initializeWithValue) {
+      return readValue();
+    }
+
+    return initialValue instanceof Function ? initialValue() : initialValue;
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue: Dispatch<SetStateAction<T>> = useEventCallback((value) => {
+    // Prevent build error "window is undefined" but keeps working
+    if (IS_SERVER) {
+      console.warn(
+        `Tried setting localStorage key “${key}” even though environment is not a client`,
+      );
+    }
+
+    try {
+      // Allow value to be a function so we have the same API as useState
+      const newValue = value instanceof Function ? value(readValue()) : value;
+
+      // Save to local storage
+      window.localStorage.setItem(key, serializer(newValue));
+
+      // Save state
+      setStoredValue(newValue);
+
+      // We dispatch a custom event so every similar useLocalStorage hook is notified
+      window.dispatchEvent(new StorageEvent("local-storage", { key }));
+    } catch (error) {
+      console.warn(`Error setting localStorage key “${key}”:`, error);
+    }
+  });
+
+  const removeValue = useEventCallback(() => {
+    // Prevent build error "window is undefined" but keeps working
+    if (IS_SERVER) {
+      console.warn(
+        `Tried removing localStorage key “${key}” even though environment is not a client`,
+      );
+    }
+
+    const defaultValue =
+      initialValue instanceof Function ? initialValue() : initialValue;
+
+    // Remove the key from local storage
+    window.localStorage.removeItem(key);
+
+    // Save state with default value
+    setStoredValue(defaultValue);
+
+    // We dispatch a custom event so every similar useLocalStorage hook is notified
+    window.dispatchEvent(new StorageEvent("local-storage", { key }));
+  });
+
+  useEffect(() => {
+    setStoredValue(readValue());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const handleStorageChange = useCallback(
+    (event: StorageEvent | CustomEvent) => {
+      if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {
+        return;
+      }
+      setStoredValue(readValue());
+    },
+    [key, readValue],
+  );
+
+  // this only works for other documents, not the current one
+  useEventListener("storage", handleStorageChange);
+
+  // this is a custom event, triggered in writeValueToLocalStorage
+  // See: useLocalStorage()
+  useEventListener("local-storage", handleStorageChange);
+
+  return [storedValue, setValue, removeValue];
+}

package/src/useMounted/useMounted.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return { mounted };
+}

package/src/useMousePosition/useMousePosition.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect, useState } from "react";
+
+interface PositionMatrix {
+  x: number | undefined;
+  y: number | undefined;
+}
+
+type Event = MouseEvent | undefined;
+
+export function useMousePosition({ includeTouch }: { includeTouch: Boolean }) {
+  const [mousePosition, setMousePosition] = useState<PositionMatrix>({
+    x: undefined,
+    y: undefined,
+  });
+  const [touchPosition, setTouchPosition] = useState<PositionMatrix>({
+    x: undefined,
+    y: undefined,
+  });
+  const [mouseSpeed, setMouseSpeed] = useState(0);
+  const [prevEvent, setPrevEvent] = useState<Event>(undefined);
+  useEffect(() => {
+    const updateMousePosition = (currentEvent: MouseEvent) => {
+      let x, y;
+      [x, y] = [currentEvent.clientX, currentEvent.clientY];
+      var movementX = Math.abs(
+        currentEvent.clientX - (prevEvent?.clientX ? prevEvent?.clientX : 0)
+      );
+      var movementY = Math.abs(
+        currentEvent.clientY - (prevEvent?.clientY ? prevEvent?.clientY : 0)
+      );
+      var movement = Math.sqrt(movementX * movementX + movementY * movementY);
+      var speed = Math.round(10 * movement);
+      setMouseSpeed(speed);
+      setMousePosition({ x, y });
+      setPrevEvent(currentEvent);
+      // console.log("prevEvent", prevEvent?.screenX);
+    };
+    window.addEventListener("mousemove", updateMousePosition);
+    return () => {
+      window.removeEventListener("mousemove", updateMousePosition);
+    };
+  }, [prevEvent]);
+  useEffect(() => {
+    const updateTouchPosition = (currentEvent: TouchEvent) => {
+      let x, y;
+      if (currentEvent.touches) {
+        const touch = currentEvent.touches[0];
+        [x, y] = [touch.clientX, touch.clientY];
+      }
+      setTouchPosition({ x, y });
+    };
+    return () => {
+      if (includeTouch) {
+        window.removeEventListener("touchmove", updateTouchPosition);
+      }
+    };
+  }, [includeTouch]);
+  return { mousePosition, touchPosition, mouseSpeed };
+}

package/src/useScreenSize/useScreenSize.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useLocalStorage } from "../useLocalStorage/useLocalStorage";
+
+type ScreenSize = {
+  width: number;
+  height: number;
+  isSmall: boolean;
+  isMedium: boolean;
+  isLarge: boolean;
+  isXLarge: boolean;
+  ltSmall: boolean;
+  ltMedium: boolean;
+  ltLarge: boolean;
+  ltXLarge: boolean;
+  gtSmall: boolean;
+  gtMedium: boolean;
+  gtLarge: boolean;
+} | null;
+
+// Move breakpoints OUTSIDE. Prevents Rollup/minifiers from collapsing them.
+const BREAKPOINTS = Object.freeze({
+  sm: 600,
+  md: 900,
+  lg: 1281,
+  xl: 1536,
+});
+
+export function useScreenSize(): Partial<ScreenSize> {
+  const [screenSize, setScreenSize] = useLocalStorage("screen", {
+    width: 0,
+    height: 0,
+  });
+  const [size, setSize] = useState<Partial<ScreenSize>>({ ...screenSize });
+
+  useEffect(() => {
+    const width = screenSize.width;
+    const height = screenSize.height;
+    setSize({
+      width,
+      height,
+      isSmall: width < BREAKPOINTS.sm,
+      isMedium: width >= BREAKPOINTS.sm && width < BREAKPOINTS.md,
+      isLarge: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,
+      isXLarge: width >= BREAKPOINTS.lg,
+
+      ltSmall: width < BREAKPOINTS.sm,
+      ltMedium: width < BREAKPOINTS.md,
+      ltLarge: width < BREAKPOINTS.lg,
+      ltXLarge: width < BREAKPOINTS.xl,
+
+      gtSmall: width >= BREAKPOINTS.sm,
+      gtMedium: width >= BREAKPOINTS.md,
+      gtLarge: width >= BREAKPOINTS.lg,
+    });
+  }, [screenSize]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const compute = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setScreenSize({ width, height });
+    };
+
+    compute();
+    window.addEventListener("resize", compute);
+    return () => window.removeEventListener("resize", compute);
+  }, []);
+
+  return size;
+}

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    // Output
+    "declaration": true,
+    "outDir": "./dist",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}