react-simplikit 0.0.51 → 0.0.53

package/dist/hooks/useOutsideClickEffect/useOutsideClickEffect.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useEffect, useRef } from "react";
+//#region src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
+* It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
+*
+* @param {HTMLElement | HTMLElement[] | null} container - A single HTML element, an array of HTML elements, or `null`.
+*   If `null`, no event listener is attached.
+* @param {() => void} callback - A function that is executed when clicking outside the specified container(s).
+*
+* @example
+* import { useOutsideClickEffect } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Example() {
+*   const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);
+*
+*   useOutsideClickEffect(wrapperEl, () => {
+*     console.log('Outside clicked!');
+*   });
+*
+*   return <div ref={setWrapperEl}>Content</div>;
+* }
+*/
+function useOutsideClickEffect(container, callback) {
+	const containers = useRef([]);
+	const handleDocumentClick = usePreservedCallback(({ target }) => {
+		if (target === null) return;
+		if (containers.current.length === 0) return;
+		if (containers.current.some((x) => x.contains(target))) return;
+		callback();
+	});
+	useEffect(() => {
+		containers.current = [container].flat(1).filter((item) => item != null);
+	}, [container]);
+	useEffect(() => {
+		document.addEventListener("click", handleDocumentClick);
+		return () => {
+			document.removeEventListener("click", handleDocumentClick);
+		};
+	}, [handleDocumentClick]);
+}
+//#endregion
+export { useOutsideClickEffect };

package/dist/hooks/usePreservedCallback/usePreservedCallback.cjs

@@ -0,0 +1,41 @@
+"use client";
+let react = require("react");
+//#region src/hooks/usePreservedCallback/usePreservedCallback.ts
+/**
+* @description
+* `usePreservedCallback` is a React hook that maintains a stable reference to a callback function
+* while ensuring it always has access to the latest state or props. This prevents unnecessary re-renders
+* and simplifies dependency management when passing callbacks to child components or handling event listeners.
+*
+* @param {(...args: any[]) => any} callback - The function to preserve.
+*   It always references the latest state or props, even when the component re-renders.
+*
+* @returns {(...args: any[]) => any} A function with the same signature as the input callback.
+*   The returned function maintains a stable reference while accessing the latest state or props.
+*
+* @example
+* import { usePreservedCallback } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Counter() {
+*   const [count, setCount] = useState(0);
+*
+*   const handleClick = usePreservedCallback(() => {
+*     console.log(`Current count: ${count}`);
+*     setCount(prev => prev + 1);
+*   });
+*
+*   return <button onClick={handleClick}>Click me</button>;
+* }
+*/
+function usePreservedCallback(callback) {
+	const callbackRef = (0, react.useRef)(callback);
+	(0, react.useEffect)(function syncCallbackRef() {
+		callbackRef.current = callback;
+	}, [callback]);
+	return (0, react.useCallback)((...args) => {
+		return callbackRef.current(...args);
+	}, []);
+}
+//#endregion
+exports.usePreservedCallback = usePreservedCallback;

package/dist/hooks/usePreservedCallback/{index.d.cts → usePreservedCallback.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePreservedCallback/usePreservedCallback.d.ts
 /**
  * @description
  * `usePreservedCallback` is a React hook that maintains a stable reference to a callback function
@@ -26,5 +28,5 @@
  * }
  */
 declare function usePreservedCallback<Arguments extends any[] = any[], ReturnValue = unknown>(callback: (...args: Arguments) => ReturnValue): (...args: Arguments) => ReturnValue;
-
-export { usePreservedCallback };
+//#endregion
+export { usePreservedCallback };

package/{esm/hooks/usePreservedCallback/index.d.ts → dist/hooks/usePreservedCallback/usePreservedCallback.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePreservedCallback/usePreservedCallback.d.ts
 /**
  * @description
  * `usePreservedCallback` is a React hook that maintains a stable reference to a callback function
@@ -26,5 +28,5 @@
  * }
  */
 declare function usePreservedCallback<Arguments extends any[] = any[], ReturnValue = unknown>(callback: (...args: Arguments) => ReturnValue): (...args: Arguments) => ReturnValue;
-
-export { usePreservedCallback };
+//#endregion
+export { usePreservedCallback };

package/dist/hooks/usePreservedCallback/usePreservedCallback.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/usePreservedCallback/usePreservedCallback.ts
+/**
+* @description
+* `usePreservedCallback` is a React hook that maintains a stable reference to a callback function
+* while ensuring it always has access to the latest state or props. This prevents unnecessary re-renders
+* and simplifies dependency management when passing callbacks to child components or handling event listeners.
+*
+* @param {(...args: any[]) => any} callback - The function to preserve.
+*   It always references the latest state or props, even when the component re-renders.
+*
+* @returns {(...args: any[]) => any} A function with the same signature as the input callback.
+*   The returned function maintains a stable reference while accessing the latest state or props.
+*
+* @example
+* import { usePreservedCallback } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Counter() {
+*   const [count, setCount] = useState(0);
+*
+*   const handleClick = usePreservedCallback(() => {
+*     console.log(`Current count: ${count}`);
+*     setCount(prev => prev + 1);
+*   });
+*
+*   return <button onClick={handleClick}>Click me</button>;
+* }
+*/
+function usePreservedCallback(callback) {
+	const callbackRef = useRef(callback);
+	useEffect(function syncCallbackRef() {
+		callbackRef.current = callback;
+	}, [callback]);
+	return useCallback((...args) => {
+		return callbackRef.current(...args);
+	}, []);
+}
+//#endregion
+export { usePreservedCallback };

package/dist/hooks/usePreservedReference/usePreservedReference.cjs

@@ -0,0 +1,55 @@
+"use client";
+let react = require("react");
+//#region src/hooks/usePreservedReference/usePreservedReference.ts
+/**
+* @description
+* `usePreservedReference` is a React hook that helps maintain the reference of a value
+* when it hasn't changed, while ensuring you can safely use the latest state.
+* It prevents unnecessary re-renders while always allowing access to the latest data.
+*
+* @template {NotNullishValue} T - The type of target to be referenced.
+*
+* @param {T} value - The value to maintain the reference for. It returns a new reference
+*   if the state value changes after comparison.
+* @param {(a: T, b: T) => boolean} [areValuesEqual] - An optional function to determine
+*   if two values are equal. By default, it uses `JSON.stringify` for comparison.
+*
+* @returns {T} Returns the same reference if the value is considered equal to the previous one,
+*   otherwise returns a new reference.
+*
+* @example
+* import { usePreservedReference } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function ExampleComponent() {
+*   const [state, setState] = useState({ key: 'value' });
+*
+*   const preservedState = usePreservedReference(state);
+*
+*   return <div>{preservedState.key}</div>;
+* }
+*
+* @example
+* import { usePreservedReference } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function ExampleComponent() {
+*   const [state, setState] = useState({ key: 'value' });
+*
+*   const preservedState = usePreservedReference(state, (a, b) => a.key === b.key);
+*
+*   return <div>{preservedState.key}</div>;
+* }
+*/
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+	const ref = (0, react.useRef)(value);
+	return (0, react.useMemo)(() => {
+		if (!areValuesEqual(ref.current, value)) ref.current = value;
+		return ref.current;
+	}, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+	return JSON.stringify(x) === JSON.stringify(y);
+}
+//#endregion
+exports.usePreservedReference = usePreservedReference;

package/dist/hooks/usePreservedReference/{index.d.cts → usePreservedReference.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePreservedReference/usePreservedReference.d.ts
 type NotNullishValue = {};
 /**
  * @description
@@ -40,5 +42,5 @@ type NotNullishValue = {};
  * }
  */
 declare function usePreservedReference<T extends NotNullishValue>(value: T, areValuesEqual?: (a: T, b: T) => boolean): T;
-
-export { usePreservedReference };
+//#endregion
+export { usePreservedReference };

package/{esm/hooks/usePreservedReference/index.d.ts → dist/hooks/usePreservedReference/usePreservedReference.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePreservedReference/usePreservedReference.d.ts
 type NotNullishValue = {};
 /**
  * @description
@@ -40,5 +42,5 @@ type NotNullishValue = {};
  * }
  */
 declare function usePreservedReference<T extends NotNullishValue>(value: T, areValuesEqual?: (a: T, b: T) => boolean): T;
-
-export { usePreservedReference };
+//#endregion
+export { usePreservedReference };

package/dist/hooks/usePreservedReference/usePreservedReference.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { useMemo, useRef } from "react";
+//#region src/hooks/usePreservedReference/usePreservedReference.ts
+/**
+* @description
+* `usePreservedReference` is a React hook that helps maintain the reference of a value
+* when it hasn't changed, while ensuring you can safely use the latest state.
+* It prevents unnecessary re-renders while always allowing access to the latest data.
+*
+* @template {NotNullishValue} T - The type of target to be referenced.
+*
+* @param {T} value - The value to maintain the reference for. It returns a new reference
+*   if the state value changes after comparison.
+* @param {(a: T, b: T) => boolean} [areValuesEqual] - An optional function to determine
+*   if two values are equal. By default, it uses `JSON.stringify` for comparison.
+*
+* @returns {T} Returns the same reference if the value is considered equal to the previous one,
+*   otherwise returns a new reference.
+*
+* @example
+* import { usePreservedReference } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function ExampleComponent() {
+*   const [state, setState] = useState({ key: 'value' });
+*
+*   const preservedState = usePreservedReference(state);
+*
+*   return <div>{preservedState.key}</div>;
+* }
+*
+* @example
+* import { usePreservedReference } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function ExampleComponent() {
+*   const [state, setState] = useState({ key: 'value' });
+*
+*   const preservedState = usePreservedReference(state, (a, b) => a.key === b.key);
+*
+*   return <div>{preservedState.key}</div>;
+* }
+*/
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+	const ref = useRef(value);
+	return useMemo(() => {
+		if (!areValuesEqual(ref.current, value)) ref.current = value;
+		return ref.current;
+	}, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+	return JSON.stringify(x) === JSON.stringify(y);
+}
+//#endregion
+export { usePreservedReference };

package/dist/hooks/usePrevious/usePrevious.cjs

@@ -0,0 +1,39 @@
+"use client";
+let react = require("react");
+//#region src/hooks/usePrevious/usePrevious.ts
+const strictEquals = (prev, next) => prev === next;
+/**
+* @description
+* `usePrevious` is a React hook that returns the previous value of the input state.
+* It preserves the previous value unchanged when re-renders occur without state changes.
+* If the state is an object or requires custom change detection, a `compare` function can be provided.
+* By default, state changes are detected using `prev === next`.
+*
+* @template T - The type of the state.
+* @param {T} state - The state whose previous value is to be tracked.
+* @param {(prev: T, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
+*
+* @returns {T} The previous value of the state.
+*
+* @example
+* const [count, setCount] = useState(0);
+* // initial value of previousCount is `0`
+* const previousCount = usePrevious(count);
+*/
+function usePrevious(state, compare = strictEquals) {
+	"use no memo";
+	const prevRef = (0, react.useRef)(state);
+	const currentRef = (0, react.useRef)(state);
+	const isFirstRender = (0, react.useRef)(true);
+	if (isFirstRender.current) {
+		isFirstRender.current = false;
+		return prevRef.current;
+	}
+	if (!compare(currentRef.current, state)) {
+		prevRef.current = currentRef.current;
+		currentRef.current = state;
+	}
+	return prevRef.current;
+}
+//#endregion
+exports.usePrevious = usePrevious;

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePrevious/usePrevious.d.ts
 /**
  * @description
  * `usePrevious` is a React hook that returns the previous value of the input state.
@@ -17,5 +19,5 @@
  * const previousCount = usePrevious(count);
  */
 declare function usePrevious<T>(state: T, compare?: (prev: T, next: T) => boolean): T;
-
-export { usePrevious };
+//#endregion
+export { usePrevious };

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

@@ -1,3 +1,5 @@
+
+//#region src/hooks/usePrevious/usePrevious.d.ts
 /**
  * @description
  * `usePrevious` is a React hook that returns the previous value of the input state.
@@ -17,5 +19,5 @@
  * const previousCount = usePrevious(count);
  */
 declare function usePrevious<T>(state: T, compare?: (prev: T, next: T) => boolean): T;
-
-export { usePrevious };
+//#endregion
+export { usePrevious };

package/dist/hooks/usePrevious/usePrevious.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useRef } from "react";
+//#region src/hooks/usePrevious/usePrevious.ts
+const strictEquals = (prev, next) => prev === next;
+/**
+* @description
+* `usePrevious` is a React hook that returns the previous value of the input state.
+* It preserves the previous value unchanged when re-renders occur without state changes.
+* If the state is an object or requires custom change detection, a `compare` function can be provided.
+* By default, state changes are detected using `prev === next`.
+*
+* @template T - The type of the state.
+* @param {T} state - The state whose previous value is to be tracked.
+* @param {(prev: T, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
+*
+* @returns {T} The previous value of the state.
+*
+* @example
+* const [count, setCount] = useState(0);
+* // initial value of previousCount is `0`
+* const previousCount = usePrevious(count);
+*/
+function usePrevious(state, compare = strictEquals) {
+	"use no memo";
+	const prevRef = useRef(state);
+	const currentRef = useRef(state);
+	const isFirstRender = useRef(true);
+	if (isFirstRender.current) {
+		isFirstRender.current = false;
+		return prevRef.current;
+	}
+	if (!compare(currentRef.current, state)) {
+		prevRef.current = currentRef.current;
+		currentRef.current = state;
+	}
+	return prevRef.current;
+}
+//#endregion
+export { usePrevious };

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

@@ -1,31 +1,3 @@
-import { DependencyList } from 'react';
 
-type CleanupCallback = () => void;
-/**
- * @description
- * `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
- * This hook calls a cleanup function whenever the element changes to prevent memory leaks.
- *
- * @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
- * @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
- *
- * @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
- *
- * @example
- * import { useRefEffect } from 'react-simplikit';
- *
- * function Component() {
- *   const ref = useRefEffect<HTMLDivElement>(element => {
- *     console.log('Element mounted:', element);
- *
- *     return () => {
- *       console.log('Element unmounted:', element);
- *     };
- *   }, []);
- *
- *   return <div ref={ref}>Basic Example</div>;
- * }
- */
-declare function useRefEffect<RefElement extends HTMLElement = HTMLElement>(callback: (element: RefElement) => CleanupCallback | void, deps: DependencyList): (element: RefElement | null) => void;
-
-export { useRefEffect };
+import { useRefEffect } from "./useRefEffect.cjs";
+export { useRefEffect };

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

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

package/dist/hooks/useRefEffect/useRefEffect.cjs

@@ -0,0 +1,42 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useRefEffect/useRefEffect.ts
+/**
+* @description
+* `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
+* This hook calls a cleanup function whenever the element changes to prevent memory leaks.
+*
+* @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+* @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+*
+* @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+*
+* @example
+* import { useRefEffect } from 'react-simplikit';
+*
+* function Component() {
+*   const ref = useRefEffect<HTMLDivElement>(element => {
+*     console.log('Element mounted:', element);
+*
+*     return () => {
+*       console.log('Element unmounted:', element);
+*     };
+*   }, []);
+*
+*   return <div ref={ref}>Basic Example</div>;
+* }
+*/
+function useRefEffect(callback, deps) {
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const cleanupCallbackRef = (0, react.useRef)(() => {});
+	return (0, react.useCallback)((element) => {
+		cleanupCallbackRef.current();
+		cleanupCallbackRef.current = () => {};
+		if (element == null) return;
+		const cleanup = preservedCallback(element);
+		if (typeof cleanup === "function") cleanupCallbackRef.current = cleanup;
+	}, [preservedCallback, ...deps]);
+}
+//#endregion
+exports.useRefEffect = useRefEffect;

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

@@ -1,5 +1,6 @@
-import { DependencyList } from 'react';
 
+import { DependencyList } from "react";
+//#region src/hooks/useRefEffect/useRefEffect.d.ts
 type CleanupCallback = () => void;
 /**
  * @description
@@ -27,5 +28,5 @@ type CleanupCallback = () => void;
  * }
  */
 declare function useRefEffect<RefElement extends HTMLElement = HTMLElement>(callback: (element: RefElement) => CleanupCallback | void, deps: DependencyList): (element: RefElement | null) => void;
-
-export { useRefEffect };
+//#endregion
+export { CleanupCallback, useRefEffect };

package/dist/hooks/useRefEffect/useRefEffect.d.mts

@@ -0,0 +1,32 @@
+
+import { DependencyList } from "react";
+//#region src/hooks/useRefEffect/useRefEffect.d.ts
+type CleanupCallback = () => void;
+/**
+ * @description
+ * `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
+ * This hook calls a cleanup function whenever the element changes to prevent memory leaks.
+ *
+ * @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+ * @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+ *
+ * @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ *
+ * @example
+ * import { useRefEffect } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const ref = useRefEffect<HTMLDivElement>(element => {
+ *     console.log('Element mounted:', element);
+ *
+ *     return () => {
+ *       console.log('Element unmounted:', element);
+ *     };
+ *   }, []);
+ *
+ *   return <div ref={ref}>Basic Example</div>;
+ * }
+ */
+declare function useRefEffect<RefElement extends HTMLElement = HTMLElement>(callback: (element: RefElement) => CleanupCallback | void, deps: DependencyList): (element: RefElement | null) => void;
+//#endregion
+export { CleanupCallback, useRefEffect };

package/dist/hooks/useRefEffect/useRefEffect.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useCallback, useRef } from "react";
+//#region src/hooks/useRefEffect/useRefEffect.ts
+/**
+* @description
+* `useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
+* This hook calls a cleanup function whenever the element changes to prevent memory leaks.
+*
+* @param {(element: RefElement) => CleanupCallback | void} callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+* @param {DependencyList} deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+*
+* @returns {(element: RefElement | null) => void} A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+*
+* @example
+* import { useRefEffect } from 'react-simplikit';
+*
+* function Component() {
+*   const ref = useRefEffect<HTMLDivElement>(element => {
+*     console.log('Element mounted:', element);
+*
+*     return () => {
+*       console.log('Element unmounted:', element);
+*     };
+*   }, []);
+*
+*   return <div ref={ref}>Basic Example</div>;
+* }
+*/
+function useRefEffect(callback, deps) {
+	const preservedCallback = usePreservedCallback(callback);
+	const cleanupCallbackRef = useRef(() => {});
+	return useCallback((element) => {
+		cleanupCallbackRef.current();
+		cleanupCallbackRef.current = () => {};
+		if (element == null) return;
+		const cleanup = preservedCallback(element);
+		if (typeof cleanup === "function") cleanupCallbackRef.current = cleanup;
+	}, [preservedCallback, ...deps]);
+}
+//#endregion
+export { useRefEffect };

package/dist/hooks/useSet/useSet.cjs

@@ -0,0 +1,79 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_usePreservedReference = require("../usePreservedReference/usePreservedReference.cjs");
+let react = require("react");
+//#region src/hooks/useSet/useSet.ts
+/**
+* @description
+* A React hook that manages a Set as state.
+* Provides efficient state management and stable action functions.
+*
+* @param {SetOrValues<T>} initialState - Initial Set state (Set object or array of values)
+* @returns {UseSetReturn<T>} A tuple containing the Set state and actions to manipulate it
+*
+* @example
+* ```tsx
+* import { useSet } from 'react-simplikit';
+*
+* function TagSelector() {
+*   const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);
+*
+*   return (
+*     <div>
+*       {['react', 'vue', 'svelte'].map(tag => (
+*         <button key={tag} onClick={() => toggle(tag)}>
+*           {selectedTags.has(tag) ? '✓' : ''} {tag}
+*         </button>
+*       ))}
+*     </div>
+*   );
+* }
+* ```
+*/
+function useSet(initialState = /* @__PURE__ */ new Set()) {
+	const [set, setSet] = (0, react.useState)(() => new Set(initialState));
+	const preservedInitialState = require_usePreservedReference.usePreservedReference(initialState);
+	const add = require_usePreservedCallback.usePreservedCallback((value) => {
+		setSet((prev) => {
+			const nextSet = new Set(prev);
+			nextSet.add(value);
+			return nextSet;
+		});
+	});
+	const remove = require_usePreservedCallback.usePreservedCallback((value) => {
+		setSet((prev) => {
+			const nextSet = new Set(prev);
+			nextSet.delete(value);
+			return nextSet;
+		});
+	});
+	const toggle = require_usePreservedCallback.usePreservedCallback((value) => {
+		setSet((prev) => {
+			const nextSet = new Set(prev);
+			if (nextSet.has(value)) nextSet.delete(value);
+			else nextSet.add(value);
+			return nextSet;
+		});
+	});
+	const setAll = require_usePreservedCallback.usePreservedCallback((values) => {
+		setSet(() => new Set(values));
+	});
+	const reset = require_usePreservedCallback.usePreservedCallback(() => {
+		setSet(() => new Set(preservedInitialState));
+	});
+	return [set, (0, react.useMemo)(() => ({
+		add,
+		remove,
+		toggle,
+		setAll,
+		reset
+	}), [
+		add,
+		remove,
+		toggle,
+		setAll,
+		reset
+	])];
+}
+//#endregion
+exports.useSet = useSet;