react-simplikit 0.0.4 → 0.0.5

package/dist/components/ImpressionArea/index.d.ts

@@ -14,16 +14,15 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
  * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
  * hook to track the element's visibility.
  *
- * @param {Object} props - The props for the component.
- * @param {ElementType} [props.as='div'] - The HTML tag to render. Defaults to `div`.
- * @param {string} [props.rootMargin] - Margin to adjust the detection area.
- * @param {number} [props.areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
- * @param {number} [props.timeThreshold] - Minimum time the element must be visible (in milliseconds).
- * @param {() => void} [props.onImpressionStart] - Callback function executed when the element enters the view.
- * @param {() => void} [props.onImpressionEnd] - Callback function executed when the element exits the view.
- * @param {Ref<HTMLElement>} [props.ref] - Reference to the element.
- * @param {React.ReactNode} [props.children] - Child elements to be rendered inside the component.
- * @param {string} [props.className] - Additional class names for styling.
+ * @param {ElementType} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @param {string} [rootMargin] - Margin to adjust the detection area.
+ * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+ * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+ * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+ * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+ * @param {Ref<HTMLElement>} [ref] - Reference to the element.
+ * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+ * @param {string} [className] - Additional class names for styling.
  *
  * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
  *

package/dist/components/Separated/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
 type Props = {
-    with: ReactNode;
+    by: ReactNode;
     children: ReactNode;
 };
 /**
@@ -12,14 +12,14 @@ type Props = {
  *
  * @param {React.ReactNode} children - The child elements to render.
  *   Only valid React elements (`React.isValidElement`) will be rendered.
- * @param {React.ReactNode} with - The component to insert between child elements.
+ * @param {React.ReactNode} by - The component to insert between child elements.
  *
  * @returns {JSX.Element} A React component that separates children with a specified separator.
  *
  * @example
  * function App() {
  *   return (
- *     <Separated with={<Border type="padding24" />}>
+ *     <Separated by={<Border type="padding24" />}>
  *       {['hello', 'react', 'world'].map(item => (
  *         <div key={item}>{item}</div>
  *       ))}
@@ -33,6 +33,6 @@ type Props = {
  *   // <div>world</div>
  * }
  */
-declare function Separated({ children, with: separator }: Props): react_jsx_runtime.JSX.Element;
+declare function Separated({ children, by: separator }: Props): react_jsx_runtime.JSX.Element;
 
 export { Separated };

package/dist/components/Separated/index.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(Separated_exports);
 // src/components/Separated/Separated.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function Separated({ children, with: separator }) {
+function Separated({ children, by: separator }) {
   const childrenArray = import_react.Children.toArray(children).filter(import_react.isValidElement);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
     child,

package/dist/hooks/useBooleanState/index.d.ts

@@ -6,10 +6,10 @@
  * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
  *
  * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
- * - state `boolean` - The current state value.
- * - setTrue `() => void` - A function to set the state to `true`.
- * - setFalse `() => void` - A function to set the state to `false`.
- * - toggle `() => void` - A function to toggle the state.
+ * - state `boolean` - The current state value;
+ * - setTrue `() => void` - A function to set the state to `true`;
+ * - setFalse `() => void` - A function to set the state to `false`;
+ * - toggle `() => void` - A function to toggle the state;
  *
  * @example
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);

package/dist/hooks/useImpressionRef/index.d.ts

@@ -10,14 +10,14 @@ type UseImpressionRefOptions = Partial<{
  * `useImpressionRef` is a custom hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
  * This hook uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
  *
- * @param options - An options object for tracking the element's visibility.
- *                  - `onImpressionStart`: Callback function executed when the element enters the view
- *                  - `onImpressionEnd`: Callback function executed when the element exits the view
- *                  - `timeThreshold`: Minimum time the element must be visible (in milliseconds)
- *                  - `areaThreshold`: Minimum ratio of the element that must be visible (0 to 1)
- *                  - `rootMargin`: Margin to adjust the detection area
+ * @param {UseImpressionRefOptions} options - Options for tracking the element's visibility.
+ * @param {() => void} options.onImpressionStart - Callback function executed when the element enters the view
+ * @param {() => void} options.onImpressionEnd - Callback function executed when the element exits the view
+ * @param {number} options.timeThreshold - Minimum time the element must be visible (in milliseconds)
+ * @param {number} options.areaThreshold - Minimum ratio of the element that must be visible (0 to 1)
+ * @param {string} options.rootMargin - Margin to adjust the detection area
  *
- * @returns A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.
+ * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.
  *
  * @example
  * import { useImpressionRef } from 'react-simplikit';

package/dist/hooks/useInputState/index.d.ts

@@ -9,8 +9,8 @@ import { ChangeEventHandler } from 'react';
  *   Defaults to an identity function that returns the input unchanged.
  *
  * @returns {readonly [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.
+ * - value `string` - The current state value;
+ * - onChange `(value: string) => void` - A function to update the state;
  *
  * @example
  * import { useInputState } from 'react-simplikit';

package/dist/hooks/useIntersectionObserver/index.d.ts

@@ -3,12 +3,12 @@
  * `useIntersectionObserver` is a custom hook that detects whether a specific DOM element is visible on the screen.
  * This hook uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
  *
- * @param callback - A callback function that is executed when the visibility of the element changes.
- *                   You can check `entry.isIntersecting` to determine if the element is in view.
- * @param options - Options for the `IntersectionObserver`.
- *                  You can specify values such as `root`, `rootMargin`, and `threshold`.
+ * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
+ *   You can check `entry.isIntersecting` to determine if the element is in view.
+ * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
+ *   You can specify values such as `root`, `rootMargin`, and `threshold`.
  *
- * @returns A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
+ * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
  *
  * @example
  * import { useIntersectionObserver } from 'react-simplikit';

package/dist/hooks/useLoading/index.d.ts

@@ -3,14 +3,13 @@
  * `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
  * It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.
  *
- * @returns A tuple `[boolean, <T>(promise: Promise<T>) => Promise<T>]`:
+ * @returns {[loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>]} A tuple containing:
+ * - loading `boolean` - Represents the current loading state.
+ *    : The initial value is `false`.
+ *    : It is set to `true` when an asynchronous task is in progress;
  *
- * - `boolean`: Represents the current loading state.
- *    - The initial value is `false`.
- *    - It is set to `true` when an asynchronous task is in progress.
- *
- * - `<T>(promise: Promise<T>) => Promise<T>`: A function that executes asynchronous tasks while managing the loading state.
- *    - This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes.
+ * - startLoading `<T>(promise: Promise<T>) => Promise<T>` - A function that executes asynchronous tasks while managing the loading state.
+ *    : This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes;
  *
  * @example
  * function ConfirmButton() {

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

@@ -6,10 +6,10 @@ type CleanupCallback = () => void;
  * `useRefEffect` is a custom 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 callback - A callback function that is executed when the element is set. This function can return a cleanup function.
- * @param deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+ * @param {(element: Element) => 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 A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ * @returns {(element: Element | 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';

package/dist/hooks/useStorageState/index.d.ts

@@ -27,9 +27,9 @@ type StorageStateOptionsWithDefaultValue<T> = StorageStateOptions<T> & {
  * @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.
  *
- * @returns {[Serializable<T> | undefined, (value: SetStateAction<Serializable<T> | undefined>) => void]} A tuple:
- * - `state`: The current state value retrieved from storage.
- * - `setState`: A function to update and persist the state.
+ * @returns {[state: Serializable<T> | undefined, setState: (value: SetStateAction<Serializable<T> | undefined>) => void]} A tuple:
+ * - state `Serializable<T> | undefined` - The current state value retrieved from storage;
+ * - setState `(value: SetStateAction<Serializable<T> | undefined>) => void` - A function to update and persist the state;
  *
  * @example
  * // Counter with persistent state

package/dist/hooks/useToggle/index.d.ts

@@ -7,9 +7,9 @@ import * as React from 'react';
  *
  * @param {boolean} [initialValue=false] - The initial state value. Defaults to `false`.
  *
- * @returns {[boolean, () => void]} A tuple:
- * - `state`: The current state value.
- * - `toggle`: A function to toggle the state.
+ * @returns {[state: boolean, toggle: () => void]} A tuple:
+ * - state `boolean` - The current state value;
+ * - toggle `() => void` - A function to toggle the state;
  *
  * @example
  * import { useToggle } from 'react-simplikit';

package/dist/index.js

@@ -297,7 +297,7 @@ function ImpressionArea({
 // src/components/Separated/Separated.tsx
 var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Separated({ children, with: separator }) {
+function Separated({ children, by: separator }) {
   const childrenArray = import_react7.Children.toArray(children).filter(import_react7.isValidElement);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react7.Fragment, { children: [
     child,

package/dist/utils/buildContext/index.d.ts

@@ -10,12 +10,12 @@ type ProviderProps<ContextValuesType> = (ContextValuesType & {
  * @description
  * `buildContext` is a helper function that reduces repetitive code when defining React Context.
  *
- * @param contextName - The name of the context.
- * @param defaultContextValues - The default values to be passed to the context.
+ * @param {string} contextName - The name of the context.
+ * @param {ContextValuesType} [defaultContextValues] - The default values to be passed to the context.
  *
- * @returns A tuple of the form [Provider, useContext]:
- * - `Provider`: The component that provides the context.
- * - `useContext`: The hook that uses the context.
+ * @returns {[Provider: (props: ProviderProps<ContextValuesType>) => JSX.Element, useContext: () => ContextValuesType]} A tuple of the form :
+ * - Provider `(props: ProviderProps<ContextValuesType>) => JSX.Element` - The component that provides the context;
+ * - useContext `() => ContextValuesType` - The hook that uses the context;
  *
  * @example
  * const [Provider, useContext] = buildContext<{ title: string }>('TestContext', null);

package/dist/utils/mergeRefs/index.d.ts

@@ -5,9 +5,9 @@ import { RefObject, RefCallback } from 'react';
  * This function takes multiple refs (RefObject or RefCallback) and returns a single ref that updates all provided refs.
  * It's useful when you need to pass multiple refs to a single element.
  *
- * @param 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 A single ref callback that updates all provided refs.
+ * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
  *
  * @example
  * forwardRef(function Component(props, parentRef) {

package/esm/components/ImpressionArea/index.d.mts

@@ -14,16 +14,15 @@ type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Ta
  * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
  * hook to track the element's visibility.
  *
- * @param {Object} props - The props for the component.
- * @param {ElementType} [props.as='div'] - The HTML tag to render. Defaults to `div`.
- * @param {string} [props.rootMargin] - Margin to adjust the detection area.
- * @param {number} [props.areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
- * @param {number} [props.timeThreshold] - Minimum time the element must be visible (in milliseconds).
- * @param {() => void} [props.onImpressionStart] - Callback function executed when the element enters the view.
- * @param {() => void} [props.onImpressionEnd] - Callback function executed when the element exits the view.
- * @param {Ref<HTMLElement>} [props.ref] - Reference to the element.
- * @param {React.ReactNode} [props.children] - Child elements to be rendered inside the component.
- * @param {string} [props.className] - Additional class names for styling.
+ * @param {ElementType} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @param {string} [rootMargin] - Margin to adjust the detection area.
+ * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+ * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+ * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+ * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+ * @param {Ref<HTMLElement>} [ref] - Reference to the element.
+ * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+ * @param {string} [className] - Additional class names for styling.
  *
  * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
  *

package/esm/components/Separated/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
 type Props = {
-    with: ReactNode;
+    by: ReactNode;
     children: ReactNode;
 };
 /**
@@ -12,14 +12,14 @@ type Props = {
  *
  * @param {React.ReactNode} children - The child elements to render.
  *   Only valid React elements (`React.isValidElement`) will be rendered.
- * @param {React.ReactNode} with - The component to insert between child elements.
+ * @param {React.ReactNode} by - The component to insert between child elements.
  *
  * @returns {JSX.Element} A React component that separates children with a specified separator.
  *
  * @example
  * function App() {
  *   return (
- *     <Separated with={<Border type="padding24" />}>
+ *     <Separated by={<Border type="padding24" />}>
  *       {['hello', 'react', 'world'].map(item => (
  *         <div key={item}>{item}</div>
  *       ))}
@@ -33,6 +33,6 @@ type Props = {
  *   // <div>world</div>
  * }
  */
-declare function Separated({ children, with: separator }: Props): react_jsx_runtime.JSX.Element;
+declare function Separated({ children, by: separator }: Props): react_jsx_runtime.JSX.Element;
 
 export { Separated };

package/esm/components/Separated/index.mjs

@@ -1,7 +1,7 @@
 // src/components/Separated/Separated.tsx
 import { Children, Fragment, isValidElement } from "react";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
-function Separated({ children, with: separator }) {
+function Separated({ children, by: separator }) {
   const childrenArray = Children.toArray(children).filter(isValidElement);
   return /* @__PURE__ */ jsx(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     child,

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

@@ -6,10 +6,10 @@
  * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
  *
  * @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
- * - state `boolean` - The current state value.
- * - setTrue `() => void` - A function to set the state to `true`.
- * - setFalse `() => void` - A function to set the state to `false`.
- * - toggle `() => void` - A function to toggle the state.
+ * - state `boolean` - The current state value;
+ * - setTrue `() => void` - A function to set the state to `true`;
+ * - setFalse `() => void` - A function to set the state to `false`;
+ * - toggle `() => void` - A function to toggle the state;
  *
  * @example
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);

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

@@ -10,14 +10,14 @@ type UseImpressionRefOptions = Partial<{
  * `useImpressionRef` is a custom hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
  * This hook uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
  *
- * @param options - An options object for tracking the element's visibility.
- *                  - `onImpressionStart`: Callback function executed when the element enters the view
- *                  - `onImpressionEnd`: Callback function executed when the element exits the view
- *                  - `timeThreshold`: Minimum time the element must be visible (in milliseconds)
- *                  - `areaThreshold`: Minimum ratio of the element that must be visible (0 to 1)
- *                  - `rootMargin`: Margin to adjust the detection area
+ * @param {UseImpressionRefOptions} options - Options for tracking the element's visibility.
+ * @param {() => void} options.onImpressionStart - Callback function executed when the element enters the view
+ * @param {() => void} options.onImpressionEnd - Callback function executed when the element exits the view
+ * @param {number} options.timeThreshold - Minimum time the element must be visible (in milliseconds)
+ * @param {number} options.areaThreshold - Minimum ratio of the element that must be visible (0 to 1)
+ * @param {string} options.rootMargin - Margin to adjust the detection area
  *
- * @returns A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.
+ * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.
  *
  * @example
  * import { useImpressionRef } from 'react-simplikit';

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

@@ -9,8 +9,8 @@ import { ChangeEventHandler } from 'react';
  *   Defaults to an identity function that returns the input unchanged.
  *
  * @returns {readonly [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.
+ * - value `string` - The current state value;
+ * - onChange `(value: string) => void` - A function to update the state;
  *
  * @example
  * import { useInputState } from 'react-simplikit';

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

@@ -3,12 +3,12 @@
  * `useIntersectionObserver` is a custom hook that detects whether a specific DOM element is visible on the screen.
  * This hook uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
  *
- * @param callback - A callback function that is executed when the visibility of the element changes.
- *                   You can check `entry.isIntersecting` to determine if the element is in view.
- * @param options - Options for the `IntersectionObserver`.
- *                  You can specify values such as `root`, `rootMargin`, and `threshold`.
+ * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
+ *   You can check `entry.isIntersecting` to determine if the element is in view.
+ * @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
+ *   You can specify values such as `root`, `rootMargin`, and `threshold`.
  *
- * @returns A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
+ * @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
  *
  * @example
  * import { useIntersectionObserver } from 'react-simplikit';

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

@@ -3,14 +3,13 @@
  * `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
  * It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.
  *
- * @returns A tuple `[boolean, <T>(promise: Promise<T>) => Promise<T>]`:
+ * @returns {[loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>]} A tuple containing:
+ * - loading `boolean` - Represents the current loading state.
+ *    : The initial value is `false`.
+ *    : It is set to `true` when an asynchronous task is in progress;
  *
- * - `boolean`: Represents the current loading state.
- *    - The initial value is `false`.
- *    - It is set to `true` when an asynchronous task is in progress.
- *
- * - `<T>(promise: Promise<T>) => Promise<T>`: A function that executes asynchronous tasks while managing the loading state.
- *    - This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes.
+ * - startLoading `<T>(promise: Promise<T>) => Promise<T>` - A function that executes asynchronous tasks while managing the loading state.
+ *    : This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes;
  *
  * @example
  * function ConfirmButton() {

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

@@ -6,10 +6,10 @@ type CleanupCallback = () => void;
  * `useRefEffect` is a custom 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 callback - A callback function that is executed when the element is set. This function can return a cleanup function.
- * @param deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+ * @param {(element: Element) => 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 A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ * @returns {(element: Element | 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';

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

@@ -27,9 +27,9 @@ type StorageStateOptionsWithDefaultValue<T> = StorageStateOptions<T> & {
  * @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.
  *
- * @returns {[Serializable<T> | undefined, (value: SetStateAction<Serializable<T> | undefined>) => void]} A tuple:
- * - `state`: The current state value retrieved from storage.
- * - `setState`: A function to update and persist the state.
+ * @returns {[state: Serializable<T> | undefined, setState: (value: SetStateAction<Serializable<T> | undefined>) => void]} A tuple:
+ * - state `Serializable<T> | undefined` - The current state value retrieved from storage;
+ * - setState `(value: SetStateAction<Serializable<T> | undefined>) => void` - A function to update and persist the state;
  *
  * @example
  * // Counter with persistent state

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

@@ -7,9 +7,9 @@ import * as React from 'react';
  *
  * @param {boolean} [initialValue=false] - The initial state value. Defaults to `false`.
  *
- * @returns {[boolean, () => void]} A tuple:
- * - `state`: The current state value.
- * - `toggle`: A function to toggle the state.
+ * @returns {[state: boolean, toggle: () => void]} A tuple:
+ * - state `boolean` - The current state value;
+ * - toggle `() => void` - A function to toggle the state;
  *
  * @example
  * import { useToggle } from 'react-simplikit';

package/esm/index.mjs

@@ -248,7 +248,7 @@ function ImpressionArea({
 // src/components/Separated/Separated.tsx
 import { Children, Fragment, isValidElement } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Separated({ children, with: separator }) {
+function Separated({ children, by: separator }) {
   const childrenArray = Children.toArray(children).filter(isValidElement);
   return /* @__PURE__ */ jsx2(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     child,

package/esm/utils/buildContext/index.d.mts

@@ -10,12 +10,12 @@ type ProviderProps<ContextValuesType> = (ContextValuesType & {
  * @description
  * `buildContext` is a helper function that reduces repetitive code when defining React Context.
  *
- * @param contextName - The name of the context.
- * @param defaultContextValues - The default values to be passed to the context.
+ * @param {string} contextName - The name of the context.
+ * @param {ContextValuesType} [defaultContextValues] - The default values to be passed to the context.
  *
- * @returns A tuple of the form [Provider, useContext]:
- * - `Provider`: The component that provides the context.
- * - `useContext`: The hook that uses the context.
+ * @returns {[Provider: (props: ProviderProps<ContextValuesType>) => JSX.Element, useContext: () => ContextValuesType]} A tuple of the form :
+ * - Provider `(props: ProviderProps<ContextValuesType>) => JSX.Element` - The component that provides the context;
+ * - useContext `() => ContextValuesType` - The hook that uses the context;
  *
  * @example
  * const [Provider, useContext] = buildContext<{ title: string }>('TestContext', null);

package/esm/utils/mergeRefs/index.d.mts

@@ -5,9 +5,9 @@ import { RefObject, RefCallback } from 'react';
  * This function takes multiple refs (RefObject or RefCallback) and returns a single ref that updates all provided refs.
  * It's useful when you need to pass multiple refs to a single element.
  *
- * @param 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 A single ref callback that updates all provided refs.
+ * @returns {RefCallback<T>} A single ref callback that updates all provided refs.
  *
  * @example
  * forwardRef(function Component(props, parentRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [