react-simplikit 0.0.5 → 0.0.7

package/esm/hooks/useImpressionRef/index.mjs

@@ -1,87 +1,8 @@
 // src/hooks/useImpressionRef/useImpressionRef.ts
 import { useRef as useRef4 } from "react";
 
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-import { useMemo } from "react";
-
-// src/hooks/usePreservedCallback/usePreservedCallback.ts
-import { useCallback, useEffect, useRef } from "react";
-function usePreservedCallback(callback) {
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-// src/hooks/useRefEffect/useRefEffect.ts
-import { useCallback as useCallback2, useRef as useRef2 } from "react";
-function useRefEffect(callback, deps) {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = useRef2(() => {
-  });
-  const effect = useCallback2(
-    (element) => {
-      cleanupCallbackRef.current();
-      cleanupCallbackRef.current = () => {
-      };
-      if (element == null) {
-        return;
-      }
-      const cleanup = preservedCallback(element);
-      if (typeof cleanup === "function") {
-        cleanupCallbackRef.current = cleanup;
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [preservedCallback, ...deps]
-  );
-  return effect;
-}
-
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-function useIntersectionObserver(callback, options) {
-  const preservedCallback = usePreservedCallback(callback);
-  const observer = useMemo(() => {
-    if (typeof IntersectionObserver === "undefined") {
-      return;
-    }
-    return new IntersectionObserver(([entry]) => {
-      preservedCallback(entry);
-    }, options);
-  }, [preservedCallback, options]);
-  return useRefEffect(
-    (element) => {
-      observer?.observe(element);
-      return () => {
-        observer?.unobserve(element);
-      };
-    },
-    [preservedCallback, options]
-  );
-}
-
-// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
-import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
-function useVisibilityEvent(callback, options = {}) {
-  const handleVisibilityChange = useCallback3(() => {
-    callback(document.visibilityState);
-  }, [callback]);
-  useEffect2(() => {
-    if (options?.immediate ?? false) {
-      handleVisibilityChange();
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [handleVisibilityChange, options?.immediate]);
-}
-
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 
 // src/hooks/useDebounce/debounce.ts
 function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
@@ -136,35 +57,130 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
   return debounced;
 }
 
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 function useDebouncedCallback({
   onChange,
-  timeThreshold
+  timeThreshold,
+  leading = false,
+  trailing = true
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = useRef3({ value: false, clearPreviousDebounce: () => {
+  const ref = useRef2({ value: false, clearPreviousDebounce: () => {
   } });
-  useEffect3(() => {
+  useEffect2(() => {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
     };
   }, []);
-  return useCallback4(
+  const edges = useMemo(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return useCallback2(
     (nextValue) => {
       if (nextValue === ref.current.value) {
         return;
       }
-      const debounced = debounce(() => {
-        handleChange(nextValue);
-        ref.current.value = nextValue;
-      }, timeThreshold);
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
       ref.current.clearPreviousDebounce();
       debounced();
       ref.current.clearPreviousDebounce = debounced.cancel;
     },
-    [handleChange, timeThreshold]
+    [handleChange, timeThreshold, edges]
+  );
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useRefEffect/useRefEffect.ts
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = useRef3(() => {
+  });
+  const effect = useCallback3(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
   );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = useMemo2(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+import { useCallback as useCallback4, useEffect as useEffect3 } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback4(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect3(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
 }
 
 // src/hooks/useImpressionRef/useImpressionRef.ts
@@ -184,7 +200,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {

package/esm/hooks/useInputState/index.d.mts

@@ -8,13 +8,11 @@ import { ChangeEventHandler } from 'react';
  * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
  *   Defaults to an identity function that returns the input unchanged.
  *
- * @returns {readonly [value: string, onChange: (value: string) => void]} A tuple containing:
+ * @returns {[value: string, onChange: (value: string) => void]} A tuple containing:
  * - value `string` - The current state value;
  * - onChange `(value: string) => void` - A function to update the state;
  *
  * @example
- * import { useInputState } from 'react-simplikit';
- *
  * function Example() {
  *   const [value, setValue] = useInputState('');
  *   return <input type="text" value={value} onChange={setValue} />;

package/esm/hooks/useStorageState/index.d.mts

@@ -23,7 +23,7 @@ type StorageStateOptionsWithDefaultValue<T> = StorageStateOptions<T> & {
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
  *
  * @param {string} key - The key used to store the value in storage.
- * @param {object} [options] - Configuration options for storage behavior.
+ * @param {Object} [options] - Configuration options for storage behavior.
  * @param {Storage} [options.storage=localStorage] - The storage type (`localStorage` or `sessionStorage`). Defaults to `localStorage`.
  * @param {T} [options.defaultValue] - The initial value if no existing value is found.
  *

package/esm/index.mjs

@@ -1,87 +1,8 @@
 // src/hooks/useImpressionRef/useImpressionRef.ts
 import { useRef as useRef4 } from "react";
 
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-import { useMemo } from "react";
-
-// src/hooks/usePreservedCallback/usePreservedCallback.ts
-import { useCallback, useEffect, useRef } from "react";
-function usePreservedCallback(callback) {
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-// src/hooks/useRefEffect/useRefEffect.ts
-import { useCallback as useCallback2, useRef as useRef2 } from "react";
-function useRefEffect(callback, deps) {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = useRef2(() => {
-  });
-  const effect = useCallback2(
-    (element) => {
-      cleanupCallbackRef.current();
-      cleanupCallbackRef.current = () => {
-      };
-      if (element == null) {
-        return;
-      }
-      const cleanup = preservedCallback(element);
-      if (typeof cleanup === "function") {
-        cleanupCallbackRef.current = cleanup;
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [preservedCallback, ...deps]
-  );
-  return effect;
-}
-
-// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
-function useIntersectionObserver(callback, options) {
-  const preservedCallback = usePreservedCallback(callback);
-  const observer = useMemo(() => {
-    if (typeof IntersectionObserver === "undefined") {
-      return;
-    }
-    return new IntersectionObserver(([entry]) => {
-      preservedCallback(entry);
-    }, options);
-  }, [preservedCallback, options]);
-  return useRefEffect(
-    (element) => {
-      observer?.observe(element);
-      return () => {
-        observer?.unobserve(element);
-      };
-    },
-    [preservedCallback, options]
-  );
-}
-
-// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
-import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
-function useVisibilityEvent(callback, options = {}) {
-  const handleVisibilityChange = useCallback3(() => {
-    callback(document.visibilityState);
-  }, [callback]);
-  useEffect2(() => {
-    if (options?.immediate ?? false) {
-      handleVisibilityChange();
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [handleVisibilityChange, options?.immediate]);
-}
-
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 
 // src/hooks/useDebounce/debounce.ts
 function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
@@ -136,37 +57,132 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
   return debounced;
 }
 
-// src/hooks/useImpressionRef/useDebouncedCallback.ts
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
 function useDebouncedCallback({
   onChange,
-  timeThreshold
+  timeThreshold,
+  leading = false,
+  trailing = true
 }) {
   const handleChange = usePreservedCallback(onChange);
-  const ref = useRef3({ value: false, clearPreviousDebounce: () => {
+  const ref = useRef2({ value: false, clearPreviousDebounce: () => {
   } });
-  useEffect3(() => {
+  useEffect2(() => {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
     };
   }, []);
-  return useCallback4(
+  const edges = useMemo(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return useCallback2(
     (nextValue) => {
       if (nextValue === ref.current.value) {
         return;
       }
-      const debounced = debounce(() => {
-        handleChange(nextValue);
-        ref.current.value = nextValue;
-      }, timeThreshold);
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
       ref.current.clearPreviousDebounce();
       debounced();
       ref.current.clearPreviousDebounce = debounced.cancel;
     },
-    [handleChange, timeThreshold]
+    [handleChange, timeThreshold, edges]
+  );
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/hooks/useRefEffect/useRefEffect.ts
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = useRef3(() => {
+  });
+  const effect = useCallback3(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = useMemo2(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
   );
 }
 
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+import { useCallback as useCallback4, useEffect as useEffect3 } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback4(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect3(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
 // src/hooks/useImpressionRef/useImpressionRef.ts
 function useImpressionRef({
   onImpressionStart = () => {
@@ -184,7 +200,8 @@ function useImpressionRef({
     timeThreshold,
     onChange: (impressed) => {
       (impressed ? impressionStartHandler : impressionEndHandler)();
-    }
+    },
+    leading: true
   });
   useVisibilityEvent((documentVisible) => {
     if (!isIntersectingRef.current) {
@@ -310,11 +327,11 @@ function useCallbackOncePerRender(callback, deps) {
 
 // src/hooks/useDebounce/useDebounce.ts
 import { useEffect as useEffect6 } from "react";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 function useDebounce(callback, wait, options = {}) {
   const preservedCallback = usePreservedCallback(callback);
   const { leading = false, trailing = true } = options;
-  const edges = useMemo2(() => {
+  const edges = useMemo3(() => {
     const _edges = [];
     if (leading) {
       _edges.push("leading");
@@ -324,7 +341,7 @@ function useDebounce(callback, wait, options = {}) {
     }
     return _edges;
   }, [leading, trailing]);
-  const debounced = useMemo2(() => {
+  const debounced = useMemo3(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
   useEffect6(() => {
@@ -373,7 +390,7 @@ function useInterval(callback, options) {
 }
 
 // src/hooks/useLoading/useLoading.ts
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState3 } from "react";
 function useLoading() {
   const [loading, setLoading] = useState3(false);
   const ref = useIsMountedRef();
@@ -391,7 +408,7 @@ function useLoading() {
     },
     [ref.isMounted]
   );
-  return useMemo3(() => [loading, startTransition], [loading, startTransition]);
+  return useMemo4(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
   const ref = useRef6({ isMounted: true }).current;
@@ -432,10 +449,10 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePreservedReference/usePreservedReference.ts
-import { useMemo as useMemo4, useRef as useRef8 } from "react";
+import { useMemo as useMemo5, useRef as useRef8 } from "react";
 function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
   const ref = useRef8(value);
-  return useMemo4(() => {
+  return useMemo5(() => {
     if (!areValuesEqual(ref.current, value)) {
       ref.current = value;
     }
@@ -604,7 +621,7 @@ function useStorageState(key, { storage = safeLocalStorage, defaultValue } = {})
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-import { useEffect as useEffect11, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo6 } from "react";
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -630,7 +647,7 @@ function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
 function useThrottle(callback, wait, options) {
   const preservedCallback = usePreservedCallback(callback);
   const preservedOptions = usePreservedReference(options ?? {});
-  const throttledCallback = useMemo5(() => {
+  const throttledCallback = useMemo6(() => {
     return throttle(preservedCallback, wait, preservedOptions);
   }, [preservedOptions, preservedCallback, wait]);
   useEffect11(() => {
@@ -659,12 +676,12 @@ function useToggle(initialValue = false) {
 var toggle = (state) => !state;
 
 // src/utils/buildContext/buildContext.tsx
-import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { createContext, useContext, useMemo as useMemo7 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function buildContext(contextName, defaultContextValues) {
   const Context = createContext(defaultContextValues ?? void 0);
   function Provider({ children, ...contextValues }) {
-    const value = useMemo6(
+    const value = useMemo7(
       () => Object.keys(contextValues).length > 0 ? contextValues : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [...Object.values(contextValues)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -8,6 +8,7 @@
     "esm/**/*"
   ],
   "scripts": {
+    "scaffold": "tsx .scripts/index.ts scaffold",
     "docs:gen": "tsx .scripts/index.ts generate-docs",
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
@@ -35,13 +36,13 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
-    "@openai/openai": "npm:@jsr/openai__openai@^4.93.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/node": "^22.10.2",
-    "@types/react": "^19.0.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitest/coverage-v8": "^2.1.8",
     "commander": "^13.1.0",
     "comment-parser": "^1.4.1",
@@ -60,6 +61,7 @@
     "globals": "^15.13.0",
     "jsdom": "^25.0.1",
     "listr2": "^8.2.5",
+    "nanoid": "^5.1.5",
     "ora": "^8.2.0",
     "prettier": "^3.4.2",
     "prettier-plugin-sort-re-exports": "^0.1.0",
@@ -78,6 +80,9 @@
     "react-dom": "*"
   },
   "packageManager": "yarn@4.5.3",
+  "dependencies": {
+    "openai": "^4.93.0"
+  },
   "module": "./esm/index.mjs",
   "exports": {
     ".": {