react-simplikit 0.0.50 → 0.0.52

package/dist/hooks/useConditionalEffect/useConditionalEffect.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/useConditionalEffect/useConditionalEffect.ts
+/**
+* @description
+* `useConditionalEffect` is a React hook that conditionally executes effects based on a predicate function.
+* This provides more control over when effects run beyond just dependency changes.
+*
+* @param {EffectCallback} effect - The effect callback to run.
+* @param {DependencyList} deps - Dependencies array, similar to useEffect.
+* @param {(prevDeps: T | undefined, currentDeps: T) => boolean} condition - Function that determines if the effect should run based on previous and current deps.
+* - On the initial render, `prevDeps` will be `undefined`. Your `condition` function should handle this case.
+* - If you want your effect to run on the initial render, return `true` when `prevDeps` is `undefined`.
+* - If you don't want your effect to run on the initial render, return `false` when `prevDeps` is `undefined`.
+*
+* @example
+* import { useConditionalEffect } from 'react-simplikit';
+*
+* function Component() {
+*   const [count, setCount] = useState(0);
+*
+*   // Only run effect when count increases
+*   useConditionalEffect(
+*     () => {
+*       console.log(`Count increased to ${count}`);
+*     },
+*     [count],
+*     (prevDeps, currentDeps) => {
+*       // Only run when count is defined and has increased
+*       return prevDeps && currentDeps[0] > prevDeps[0];
+*     }
+*   );
+*
+*   return (
+*     <button onClick={() => setCount(prev => prev + 1)}>
+*       Increment: {count}
+*     </button>
+*   );
+* }
+*
+*/
+function useConditionalEffect(effect, deps, condition) {
+	const prevDepsRef = useRef(void 0);
+	const memoizedCondition = useCallback(condition, deps);
+	if (deps.length === 0) console.warn("useConditionalEffect received an empty dependency array. This may indicate missing dependencies and could lead to unexpected behavior.");
+	const shouldRun = memoizedCondition(prevDepsRef.current, deps);
+	useEffect(() => {
+		if (shouldRun) {
+			const cleanup = effect();
+			prevDepsRef.current = deps;
+			return cleanup;
+		}
+		prevDepsRef.current = deps;
+	}, deps);
+}
+//#endregion
+export { useConditionalEffect };

package/dist/hooks/useControlledState/index.d.cts

@@ -1,51 +1,3 @@
-import { Dispatch, SetStateAction } from 'react';
 
-type ControlledState<T> = {
-    value: T;
-    defaultValue?: never;
-} | {
-    defaultValue: T;
-    value?: T;
-};
-type UseControlledStateProps<T> = ControlledState<T> & {
-    onChange?: (value: T) => void;
-    equalityFn?: (prev: T, next: T) => boolean;
-};
-/**
- * @description
- * `useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
- * If you pass the state to `value`, it will be a controlled state, and if you pass the state to `defaultValue`, it will be an uncontrolled state.
- * If both `value` and `defaultValue` are passed, `value` will take precedence.
- *
- * @param {Object} props
- * @param {T} [props.value] - The value of the state.
- * @param {T} [props.defaultValue] - The default value of the state.
- * @param {(value: T) => void} [props.onChange] - The callback function that is called when the state changes.
- * @param {(prev: T, next: T) => boolean} [props.equalityFn] - The function that is used to compare the previous and next values.
- *
- * @returns {[T, Dispatch<SetStateAction<T>>]} - The state and the setter function.
- *
- * @example
- * type ToggleProps = {
- *   value?: boolean;
- *   defaultValue?: boolean;
- *   onChange?: (value: boolean) => void;
- * }
- *
- * function Toggle({ value, defaultValue, onChange }: ToggleProps) {
- *  const [on, setOn] = useControlledState({
- *    value,
- *    defaultValue: defaultValue ?? false,
- *    onChange,
- *  });
- *
- *  return (
- *    <button onClick={() => setOn((prev) => !prev)}>
- *      {on ? 'ON' : 'OFF'}
- *    </button>
- *  )
- * }
- */
-declare function useControlledState<T>({ value: valueProp, defaultValue, onChange, equalityFn, }: UseControlledStateProps<T>): [T, Dispatch<SetStateAction<T>>];
-
-export { useControlledState };
+import { useControlledState } from "./useControlledState.cjs";
+export { useControlledState };

package/dist/hooks/useControlledState/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useControlledState } from "./useControlledState.mjs";
+export { useControlledState };

package/dist/hooks/useControlledState/useControlledState.cjs

@@ -0,0 +1,60 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useControlledState/useControlledState.ts
+/**
+* @description
+* `useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
+* If you pass the state to `value`, it will be a controlled state, and if you pass the state to `defaultValue`, it will be an uncontrolled state.
+* If both `value` and `defaultValue` are passed, `value` will take precedence.
+*
+* @param {Object} props
+* @param {T} [props.value] - The value of the state.
+* @param {T} [props.defaultValue] - The default value of the state.
+* @param {(value: T) => void} [props.onChange] - The callback function that is called when the state changes.
+* @param {(prev: T, next: T) => boolean} [props.equalityFn] - The function that is used to compare the previous and next values.
+*
+* @returns {[T, Dispatch<SetStateAction<T>>]} - The state and the setter function.
+*
+* @example
+* type ToggleProps = {
+*   value?: boolean;
+*   defaultValue?: boolean;
+*   onChange?: (value: boolean) => void;
+* }
+*
+* function Toggle({ value, defaultValue, onChange }: ToggleProps) {
+*  const [on, setOn] = useControlledState({
+*    value,
+*    defaultValue: defaultValue ?? false,
+*    onChange,
+*  });
+*
+*  return (
+*    <button onClick={() => setOn((prev) => !prev)}>
+*      {on ? 'ON' : 'OFF'}
+*    </button>
+*  )
+* }
+*/
+function useControlledState({ value: valueProp, defaultValue, onChange, equalityFn = Object.is }) {
+	const [uncontrolledState, setUncontrolledState] = (0, react.useState)(defaultValue);
+	const controlled = valueProp !== void 0;
+	const value = controlled ? valueProp : uncontrolledState;
+	return [value, (0, react.useCallback)((next) => {
+		const nextValue = isSetStateAction(next) ? next(value) : next;
+		if (equalityFn(value, nextValue) === true) return;
+		if (controlled === false) setUncontrolledState(nextValue);
+		if (controlled === true && nextValue === void 0) setUncontrolledState(nextValue);
+		onChange?.(nextValue);
+	}, [
+		controlled,
+		onChange,
+		equalityFn,
+		value
+	])];
+}
+function isSetStateAction(next) {
+	return typeof next === "function";
+}
+//#endregion
+exports.useControlledState = useControlledState;

package/{esm/hooks/useControlledState/index.d.ts → dist/hooks/useControlledState/useControlledState.d.cts}

@@ -1,15 +1,16 @@
-import { Dispatch, SetStateAction } from 'react';
 
+import { Dispatch, SetStateAction } from "react";
+//#region src/hooks/useControlledState/useControlledState.d.ts
 type ControlledState<T> = {
-    value: T;
-    defaultValue?: never;
+  value: T;
+  defaultValue?: never;
 } | {
-    defaultValue: T;
-    value?: T;
+  defaultValue: T;
+  value?: T;
 };
 type UseControlledStateProps<T> = ControlledState<T> & {
-    onChange?: (value: T) => void;
-    equalityFn?: (prev: T, next: T) => boolean;
+  onChange?: (value: T) => void;
+  equalityFn?: (prev: T, next: T) => boolean;
 };
 /**
  * @description
@@ -46,6 +47,6 @@ type UseControlledStateProps<T> = ControlledState<T> & {
  *  )
  * }
  */
-declare function useControlledState<T>({ value: valueProp, defaultValue, onChange, equalityFn, }: UseControlledStateProps<T>): [T, Dispatch<SetStateAction<T>>];
-
-export { useControlledState };
+declare function useControlledState<T>({ value: valueProp, defaultValue, onChange, equalityFn }: UseControlledStateProps<T>): [T, Dispatch<SetStateAction<T>>];
+//#endregion
+export { UseControlledStateProps, useControlledState };

package/dist/hooks/useControlledState/useControlledState.d.mts

@@ -0,0 +1,52 @@
+
+import { Dispatch, SetStateAction } from "react";
+//#region src/hooks/useControlledState/useControlledState.d.ts
+type ControlledState<T> = {
+  value: T;
+  defaultValue?: never;
+} | {
+  defaultValue: T;
+  value?: T;
+};
+type UseControlledStateProps<T> = ControlledState<T> & {
+  onChange?: (value: T) => void;
+  equalityFn?: (prev: T, next: T) => boolean;
+};
+/**
+ * @description
+ * `useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
+ * If you pass the state to `value`, it will be a controlled state, and if you pass the state to `defaultValue`, it will be an uncontrolled state.
+ * If both `value` and `defaultValue` are passed, `value` will take precedence.
+ *
+ * @param {Object} props
+ * @param {T} [props.value] - The value of the state.
+ * @param {T} [props.defaultValue] - The default value of the state.
+ * @param {(value: T) => void} [props.onChange] - The callback function that is called when the state changes.
+ * @param {(prev: T, next: T) => boolean} [props.equalityFn] - The function that is used to compare the previous and next values.
+ *
+ * @returns {[T, Dispatch<SetStateAction<T>>]} - The state and the setter function.
+ *
+ * @example
+ * type ToggleProps = {
+ *   value?: boolean;
+ *   defaultValue?: boolean;
+ *   onChange?: (value: boolean) => void;
+ * }
+ *
+ * function Toggle({ value, defaultValue, onChange }: ToggleProps) {
+ *  const [on, setOn] = useControlledState({
+ *    value,
+ *    defaultValue: defaultValue ?? false,
+ *    onChange,
+ *  });
+ *
+ *  return (
+ *    <button onClick={() => setOn((prev) => !prev)}>
+ *      {on ? 'ON' : 'OFF'}
+ *    </button>
+ *  )
+ * }
+ */
+declare function useControlledState<T>({ value: valueProp, defaultValue, onChange, equalityFn }: UseControlledStateProps<T>): [T, Dispatch<SetStateAction<T>>];
+//#endregion
+export { UseControlledStateProps, useControlledState };

package/dist/hooks/useControlledState/useControlledState.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/useControlledState/useControlledState.ts
+/**
+* @description
+* `useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
+* If you pass the state to `value`, it will be a controlled state, and if you pass the state to `defaultValue`, it will be an uncontrolled state.
+* If both `value` and `defaultValue` are passed, `value` will take precedence.
+*
+* @param {Object} props
+* @param {T} [props.value] - The value of the state.
+* @param {T} [props.defaultValue] - The default value of the state.
+* @param {(value: T) => void} [props.onChange] - The callback function that is called when the state changes.
+* @param {(prev: T, next: T) => boolean} [props.equalityFn] - The function that is used to compare the previous and next values.
+*
+* @returns {[T, Dispatch<SetStateAction<T>>]} - The state and the setter function.
+*
+* @example
+* type ToggleProps = {
+*   value?: boolean;
+*   defaultValue?: boolean;
+*   onChange?: (value: boolean) => void;
+* }
+*
+* function Toggle({ value, defaultValue, onChange }: ToggleProps) {
+*  const [on, setOn] = useControlledState({
+*    value,
+*    defaultValue: defaultValue ?? false,
+*    onChange,
+*  });
+*
+*  return (
+*    <button onClick={() => setOn((prev) => !prev)}>
+*      {on ? 'ON' : 'OFF'}
+*    </button>
+*  )
+* }
+*/
+function useControlledState({ value: valueProp, defaultValue, onChange, equalityFn = Object.is }) {
+	const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+	const controlled = valueProp !== void 0;
+	const value = controlled ? valueProp : uncontrolledState;
+	return [value, useCallback((next) => {
+		const nextValue = isSetStateAction(next) ? next(value) : next;
+		if (equalityFn(value, nextValue) === true) return;
+		if (controlled === false) setUncontrolledState(nextValue);
+		if (controlled === true && nextValue === void 0) setUncontrolledState(nextValue);
+		onChange?.(nextValue);
+	}, [
+		controlled,
+		onChange,
+		equalityFn,
+		value
+	])];
+}
+function isSetStateAction(next) {
+	return typeof next === "function";
+}
+//#endregion
+export { useControlledState };

package/dist/hooks/useCounter/useCounter.cjs

@@ -0,0 +1,75 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useCounter/useCounter.ts
+const validateValue = (value, { min, max }) => {
+	if (min !== void 0 && value < min) return min;
+	if (max !== void 0 && value > max) return max;
+	return value;
+};
+/**
+* @description
+* `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
+* Optionally, you can provide minimum and maximum values to constrain the counter's range.
+*
+* @param {number} [initialValue=0] - Initial value for the counter. Defaults to 0.
+* @param {UseCounterOptions} options - The options for the counter.
+* @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
+* @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
+* @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
+*
+* @returns {UseCounterReturn} An object with count value and control functions.
+* - count `number` - The current count value;
+* - increment `() => void` - A function to increment the count;
+* - decrement `() => void` - A function to decrement the count;
+* - reset `() => void` - A function to reset the count to the initial value;
+* - setCount `(value: number | ((prev: number) => number)) => void` - A function to set the count to a specific value or a function that returns a new value;
+*
+* @example
+* import { useCounter } from 'react-simplikit';
+*
+* function ShoppingCart() {
+*   const { count, increment, decrement, reset } = useCounter(1, {
+*     min: 1,
+*     max: 10,
+*   });
+*
+*   return (
+*     <div>
+*       <span>Quantity: {count}</span>
+*       <button type="button" onClick={decrement}>-</button>
+*       <button type="button" onClick={increment}>+</button>
+*       <button type="button" onClick={reset}>Reset</button>
+*     </div>
+*   );
+* }
+*/
+function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
+	const [count, setCountState] = (0, react.useState)(() => validateValue(initialValue, {
+		min,
+		max
+	}));
+	const setCount = (0, react.useCallback)((value) => {
+		setCountState((prev) => {
+			const nextValue = typeof value === "function" ? value(prev) : value;
+			return validateValue(nextValue, {
+				min,
+				max
+			});
+		});
+	}, [min, max]);
+	return {
+		count,
+		increment: (0, react.useCallback)(() => {
+			setCount((prev) => prev + step);
+		}, [setCount, step]),
+		decrement: (0, react.useCallback)(() => {
+			setCount((prev) => prev - step);
+		}, [setCount, step]),
+		reset: (0, react.useCallback)(() => {
+			setCount(initialValue);
+		}, [setCount, initialValue]),
+		setCount
+	};
+}
+//#endregion
+exports.useCounter = useCounter;

package/{esm/hooks/useCounter/index.d.ts → dist/hooks/useCounter/useCounter.d.cts}

@@ -1,14 +1,16 @@
+
+//#region src/hooks/useCounter/useCounter.d.ts
 type UseCounterOptions = {
-    min?: number;
-    max?: number;
-    step?: number;
+  min?: number;
+  max?: number;
+  step?: number;
 };
 type UseCounterReturn = {
-    count: number;
-    increment: () => void;
-    decrement: () => void;
-    reset: () => void;
-    setCount: (value: number | ((prev: number) => number)) => void;
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+  setCount: (value: number | ((prev: number) => number)) => void;
 };
 /**
  * @description
@@ -48,5 +50,5 @@ type UseCounterReturn = {
  * }
  */
 declare function useCounter(initialValue?: number, { min, max, step }?: UseCounterOptions): UseCounterReturn;
-
-export { useCounter };
+//#endregion
+export { useCounter };

package/dist/hooks/useCounter/{index.d.cts → useCounter.d.mts}

@@ -1,14 +1,16 @@
+
+//#region src/hooks/useCounter/useCounter.d.ts
 type UseCounterOptions = {
-    min?: number;
-    max?: number;
-    step?: number;
+  min?: number;
+  max?: number;
+  step?: number;
 };
 type UseCounterReturn = {
-    count: number;
-    increment: () => void;
-    decrement: () => void;
-    reset: () => void;
-    setCount: (value: number | ((prev: number) => number)) => void;
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+  setCount: (value: number | ((prev: number) => number)) => void;
 };
 /**
  * @description
@@ -48,5 +50,5 @@ type UseCounterReturn = {
  * }
  */
 declare function useCounter(initialValue?: number, { min, max, step }?: UseCounterOptions): UseCounterReturn;
-
-export { useCounter };
+//#endregion
+export { useCounter };

package/dist/hooks/useCounter/useCounter.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/useCounter/useCounter.ts
+const validateValue = (value, { min, max }) => {
+	if (min !== void 0 && value < min) return min;
+	if (max !== void 0 && value > max) return max;
+	return value;
+};
+/**
+* @description
+* `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
+* Optionally, you can provide minimum and maximum values to constrain the counter's range.
+*
+* @param {number} [initialValue=0] - Initial value for the counter. Defaults to 0.
+* @param {UseCounterOptions} options - The options for the counter.
+* @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
+* @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
+* @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
+*
+* @returns {UseCounterReturn} An object with count value and control functions.
+* - count `number` - The current count value;
+* - increment `() => void` - A function to increment the count;
+* - decrement `() => void` - A function to decrement the count;
+* - reset `() => void` - A function to reset the count to the initial value;
+* - setCount `(value: number | ((prev: number) => number)) => void` - A function to set the count to a specific value or a function that returns a new value;
+*
+* @example
+* import { useCounter } from 'react-simplikit';
+*
+* function ShoppingCart() {
+*   const { count, increment, decrement, reset } = useCounter(1, {
+*     min: 1,
+*     max: 10,
+*   });
+*
+*   return (
+*     <div>
+*       <span>Quantity: {count}</span>
+*       <button type="button" onClick={decrement}>-</button>
+*       <button type="button" onClick={increment}>+</button>
+*       <button type="button" onClick={reset}>Reset</button>
+*     </div>
+*   );
+* }
+*/
+function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
+	const [count, setCountState] = useState(() => validateValue(initialValue, {
+		min,
+		max
+	}));
+	const setCount = useCallback((value) => {
+		setCountState((prev) => {
+			const nextValue = typeof value === "function" ? value(prev) : value;
+			return validateValue(nextValue, {
+				min,
+				max
+			});
+		});
+	}, [min, max]);
+	return {
+		count,
+		increment: useCallback(() => {
+			setCount((prev) => prev + step);
+		}, [setCount, step]),
+		decrement: useCallback(() => {
+			setCount((prev) => prev - step);
+		}, [setCount, step]),
+		reset: useCallback(() => {
+			setCount(initialValue);
+		}, [setCount, initialValue]),
+		setCount
+	};
+}
+//#endregion
+export { useCounter };

package/dist/hooks/useDebounce/debounce.cjs

@@ -0,0 +1,49 @@
+"use client";
+//#region src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+	let pendingThis = void 0;
+	let pendingArgs = null;
+	const leading = edges != null && edges.includes("leading");
+	const trailing = edges == null || edges.includes("trailing");
+	const invoke = () => {
+		if (pendingArgs !== null) {
+			func.apply(pendingThis, pendingArgs);
+			pendingThis = void 0;
+			pendingArgs = null;
+		}
+	};
+	const onTimerEnd = () => {
+		if (trailing) invoke();
+		cancel();
+	};
+	let timeoutId = null;
+	const schedule = () => {
+		if (timeoutId != null) clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => {
+			timeoutId = null;
+			onTimerEnd();
+		}, debounceMs);
+	};
+	const cancelTimer = () => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	};
+	const cancel = () => {
+		cancelTimer();
+		pendingThis = void 0;
+		pendingArgs = null;
+	};
+	const debounced = function(...args) {
+		pendingThis = this;
+		pendingArgs = args;
+		const isFirstCall = timeoutId == null;
+		schedule();
+		if (leading && isFirstCall) invoke();
+	};
+	debounced.cancel = cancel;
+	return debounced;
+}
+//#endregion
+exports.debounce = debounce;

package/dist/hooks/useDebounce/debounce.d.cts

@@ -0,0 +1,8 @@
+
+//#region src/hooks/useDebounce/debounce.d.ts
+type DebouncedFunction<F extends (...args: any[]) => void> = {
+  (...args: Parameters<F>): void;
+  cancel: () => void;
+};
+//#endregion
+export { DebouncedFunction };

package/dist/hooks/useDebounce/debounce.d.mts

@@ -0,0 +1,8 @@
+
+//#region src/hooks/useDebounce/debounce.d.ts
+type DebouncedFunction<F extends (...args: any[]) => void> = {
+  (...args: Parameters<F>): void;
+  cancel: () => void;
+};
+//#endregion
+export { DebouncedFunction };

package/dist/hooks/useDebounce/debounce.mjs

@@ -0,0 +1,49 @@
+"use client";
+//#region src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+	let pendingThis = void 0;
+	let pendingArgs = null;
+	const leading = edges != null && edges.includes("leading");
+	const trailing = edges == null || edges.includes("trailing");
+	const invoke = () => {
+		if (pendingArgs !== null) {
+			func.apply(pendingThis, pendingArgs);
+			pendingThis = void 0;
+			pendingArgs = null;
+		}
+	};
+	const onTimerEnd = () => {
+		if (trailing) invoke();
+		cancel();
+	};
+	let timeoutId = null;
+	const schedule = () => {
+		if (timeoutId != null) clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => {
+			timeoutId = null;
+			onTimerEnd();
+		}, debounceMs);
+	};
+	const cancelTimer = () => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	};
+	const cancel = () => {
+		cancelTimer();
+		pendingThis = void 0;
+		pendingArgs = null;
+	};
+	const debounced = function(...args) {
+		pendingThis = this;
+		pendingArgs = args;
+		const isFirstCall = timeoutId == null;
+		schedule();
+		if (leading && isFirstCall) invoke();
+	};
+	debounced.cancel = cancel;
+	return debounced;
+}
+//#endregion
+export { debounce };