react-simplikit 0.0.53 → 0.2.0

package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.mts

@@ -0,0 +1,64 @@
+
+//#region src/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.d.ts
+type SubscribeKeyboardHeightOptions = {
+  /**
+   * A function that will be called with the updated keyboard height in pixels.
+   */
+  callback: (height: number) => void;
+  /**
+   * If true, the callback will be invoked immediately with the current keyboard height.
+   * @default false
+   */
+  immediate?: boolean;
+  /**
+   * Throttle interval in milliseconds.
+   * Events within this interval will be ignored to improve performance.
+   * @default 16 (~60fps)
+   */
+  throttleMs?: number;
+};
+type SubscribeKeyboardHeightResult = {
+  /**
+   * Unsubscribes all listeners and stops receiving keyboard height updates.
+   */
+  unsubscribe: () => void;
+};
+/**
+ * @description
+ * `subscribeKeyboardHeight` is a utility function that subscribes to changes in the on-screen keyboard height.
+ *
+ * The provided callback is invoked whenever the keyboard height may change,
+ * including when the keyboard appears, disappears, or changes size.
+ *
+ * Internally, this function listens to both `resize` and `scroll` events
+ * on the Visual Viewport:
+ * - `resize`: triggered when the visual viewport height changes
+ * - `scroll`: triggered when the visual viewport offset changes
+ *   (important for iOS where the viewport can shift without resizing)
+ *
+ * Performance optimizations:
+ * - Throttled by default (16ms, ~60fps) to prevent excessive callback invocations
+ * - Skips callback when height hasn't changed (deduplication)
+ *
+ * @param {SubscribeKeyboardHeightOptions} options - Configuration options
+ * @param {(height: number) => void} options.callback - A function that will be called with the updated keyboard height in pixels.
+ * @param {boolean} [options.immediate=false] - If true, the callback will be invoked immediately with the current keyboard height.
+ * @param {number} [options.throttleMs=16] - Throttle interval in milliseconds.
+ *
+ * @returns {SubscribeKeyboardHeightResult} An object containing the unsubscribe function.
+ * - unsubscribe `() => void` - Unsubscribes all listeners and stops receiving keyboard height updates.
+ *
+ * @example
+ * const { unsubscribe } = subscribeKeyboardHeight({
+ *   callback: (height) => {
+ *     footer.style.paddingBottom = `${height}px`;
+ *   },
+ *   immediate: true,
+ * });
+ *
+ * // Later, when cleanup is needed
+ * unsubscribe();
+ */
+declare function subscribeKeyboardHeight({ callback, immediate, throttleMs }: SubscribeKeyboardHeightOptions): SubscribeKeyboardHeightResult;
+//#endregion
+export { subscribeKeyboardHeight };

package/dist/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { isServer } from "../isServer/isServer.mjs";
+import { getKeyboardHeight } from "../getKeyboardHeight/getKeyboardHeight.mjs";
+//#region src/mobile/utils/subscribeKeyboardHeight/subscribeKeyboardHeight.ts
+/**
+* @description
+* `subscribeKeyboardHeight` is a utility function that subscribes to changes in the on-screen keyboard height.
+*
+* The provided callback is invoked whenever the keyboard height may change,
+* including when the keyboard appears, disappears, or changes size.
+*
+* Internally, this function listens to both `resize` and `scroll` events
+* on the Visual Viewport:
+* - `resize`: triggered when the visual viewport height changes
+* - `scroll`: triggered when the visual viewport offset changes
+*   (important for iOS where the viewport can shift without resizing)
+*
+* Performance optimizations:
+* - Throttled by default (16ms, ~60fps) to prevent excessive callback invocations
+* - Skips callback when height hasn't changed (deduplication)
+*
+* @param {SubscribeKeyboardHeightOptions} options - Configuration options
+* @param {(height: number) => void} options.callback - A function that will be called with the updated keyboard height in pixels.
+* @param {boolean} [options.immediate=false] - If true, the callback will be invoked immediately with the current keyboard height.
+* @param {number} [options.throttleMs=16] - Throttle interval in milliseconds.
+*
+* @returns {SubscribeKeyboardHeightResult} An object containing the unsubscribe function.
+* - unsubscribe `() => void` - Unsubscribes all listeners and stops receiving keyboard height updates.
+*
+* @example
+* const { unsubscribe } = subscribeKeyboardHeight({
+*   callback: (height) => {
+*     footer.style.paddingBottom = `${height}px`;
+*   },
+*   immediate: true,
+* });
+*
+* // Later, when cleanup is needed
+* unsubscribe();
+*/
+function subscribeKeyboardHeight({ callback, immediate = false, throttleMs = 16 }) {
+	if (isServer()) return { unsubscribe: () => {} };
+	const visualViewport = window.visualViewport;
+	if (!visualViewport) return { unsubscribe: () => {} };
+	let lastHeight = null;
+	let throttleTimer = null;
+	const handler = () => {
+		if (throttleTimer != null) return;
+		const currentHeight = getKeyboardHeight();
+		if (lastHeight === currentHeight) return;
+		lastHeight = currentHeight;
+		callback(currentHeight);
+		throttleTimer = setTimeout(() => {
+			throttleTimer = null;
+		}, throttleMs);
+	};
+	if (immediate) {
+		const currentHeight = getKeyboardHeight();
+		lastHeight = currentHeight;
+		callback(currentHeight);
+	}
+	visualViewport.addEventListener("resize", handler);
+	visualViewport.addEventListener("scroll", handler);
+	return { unsubscribe: () => {
+		visualViewport.removeEventListener("resize", handler);
+		visualViewport.removeEventListener("scroll", handler);
+		if (throttleTimer != null) clearTimeout(throttleTimer);
+	} };
+}
+//#endregion
+export { subscribeKeyboardHeight };

package/dist/utils/buildContext/buildContext.cjs

@@ -32,6 +32,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function buildContext(contextName, defaultContextValues) {
 	const Context = (0, react.createContext)(defaultContextValues ?? void 0);
 	function Provider({ children, ...contextValues }) {
+		"use no memo";
 		const value = (0, react.useMemo)(() => Object.keys(contextValues).length > 0 ? contextValues : null, [...Object.values(contextValues)]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Context.Provider, {
 			value,

package/dist/utils/buildContext/buildContext.mjs

@@ -32,6 +32,7 @@ import { jsx } from "react/jsx-runtime";
 function buildContext(contextName, defaultContextValues) {
 	const Context = createContext(defaultContextValues ?? void 0);
 	function Provider({ children, ...contextValues }) {
+		"use no memo";
 		const value = useMemo(() => Object.keys(contextValues).length > 0 ? contextValues : null, [...Object.values(contextValues)]);
 		return /* @__PURE__ */ jsx(Context.Provider, {
 			value,

package/dist/utils/mergeProps/mergeProps.cjs

@@ -7,7 +7,7 @@
 *
 * @template PropsList - The type of the props objects to merge.
 *
-* @param {PropsList} props - The props objects to merge.
+* @param {...PropsList} props - The props objects to merge.
 * @returns {TupleToIntersection<PropsList>} The merged props object.
 *
 * @example

package/dist/utils/mergeProps/mergeProps.d.cts

@@ -13,7 +13,7 @@ type TupleToIntersection<T extends Record<string, unknown>[]> = { [I in keyof T]
  *
  * @template PropsList - The type of the props objects to merge.
  *
- * @param {PropsList} props - The props objects to merge.
+ * @param {...PropsList} props - The props objects to merge.
  * @returns {TupleToIntersection<PropsList>} The merged props object.
  *
  * @example

package/dist/utils/mergeProps/mergeProps.d.mts

@@ -13,7 +13,7 @@ type TupleToIntersection<T extends Record<string, unknown>[]> = { [I in keyof T]
  *
  * @template PropsList - The type of the props objects to merge.
  *
- * @param {PropsList} props - The props objects to merge.
+ * @param {...PropsList} props - The props objects to merge.
  * @returns {TupleToIntersection<PropsList>} The merged props object.
  *
  * @example

package/dist/utils/mergeProps/mergeProps.mjs

@@ -7,7 +7,7 @@
 *
 * @template PropsList - The type of the props objects to merge.
 *
-* @param {PropsList} props - The props objects to merge.
+* @param {...PropsList} props - The props objects to merge.
 * @returns {TupleToIntersection<PropsList>} The merged props object.
 *
 * @example

package/dist/utils/mergeRefs/mergeRefs.cjs

@@ -7,7 +7,7 @@
 *
 * @template T - The type of target to be referenced.
 *
-* @param {Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
+* @param {...Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
 *
 * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
 *

package/dist/utils/mergeRefs/mergeRefs.d.cts

@@ -8,7 +8,7 @@ import { RefCallback, RefObject } from "react";
  *
  * @template T - The type of target to be referenced.
  *
- * @param {Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
+ * @param {...Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
  *
  * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
  *

package/dist/utils/mergeRefs/mergeRefs.d.mts

@@ -8,7 +8,7 @@ import { RefCallback, RefObject } from "react";
  *
  * @template T - The type of target to be referenced.
  *
- * @param {Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
+ * @param {...Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
  *
  * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
  *

package/dist/utils/mergeRefs/mergeRefs.mjs

@@ -7,7 +7,7 @@
 *
 * @template T - The type of target to be referenced.
 *
-* @param {Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
+* @param {...Array<RefObject<T> | RefCallback<T> | null | undefined>} refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
 *
 * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
 *

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.53",
+  "version": "0.2.0",
+  "description": "React hooks, components and utilities — SSR-safe, zero dependencies, mobile web included",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
@@ -20,14 +21,22 @@
   "type": "module",
   "sideEffects": false,
   "keywords": [
-    "react"
+    "react",
+    "react-hooks",
+    "hooks",
+    "components",
+    "utils",
+    "typescript",
+    "ssr",
+    "zero-dependency",
+    "mobile-web"
   ],
   "homepage": "https://react-simplikit.slash.page",
   "bugs": "https://github.com/toss/react-simplikit/issues",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/toss/react-simplikit.git",
-    "directory": "packages/core"
+    "directory": "packages/react-simplikit"
   },
   "license": "MIT",
   "files": [
@@ -40,14 +49,18 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "test:compiled": "vitest run -c vitest.compiled.config.ts"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-react": "^7.27.0",
+    "@babel/preset-typescript": "^7.28.0",
+    "@changesets/changelog-github": "^1.0.0",
+    "@changesets/cli": "^3.0.1",
     "@eslint/js": "^9.16.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -57,16 +70,16 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitest/coverage-v8": "^2.1.8",
+    "babel-plugin-react-compiler": "1.0.0",
     "commander": "^13.1.0",
     "comment-parser": "^1.4.1",
     "corepack": "^0.30.0",
-    "dotenv": "^16.4.7",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
     "fast-glob": "^3.3.3",
@@ -74,7 +87,6 @@
     "jsdom": "^25.0.1",
     "listr2": "^8.2.5",
     "nanoid": "^5.1.5",
-    "openai": "^4.93.0",
     "ora": "^8.2.0",
     "prettier": "^3.4.2",
     "prettier-plugin-sort-re-exports": "^0.1.0",
@@ -92,4 +104,4 @@
   "peerDependencies": {
     "react": "*"
   }
-}
+}