@aweebit/react-essentials 0.10.4 → 0.10.6

package/README.md

@@ -20,7 +20,7 @@
 const useEventListener: UseEventListener;
 ```
 
-Defined in: [hooks/useEventListener.ts:135](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L135)
+Defined in: [hooks/useEventListener.ts:135](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L135)
 
 Adds `handler` as a listener for the event `eventName` of `target` with the
 provided `options` applied
@@ -71,7 +71,7 @@ function useReducerWithDeps<S, A>(
 ): [S, ActionDispatch<A>];
 ```
 
-Defined in: [hooks/useReducerWithDeps.ts:59](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useReducerWithDeps.ts#L59)
+Defined in: [hooks/useReducerWithDeps.ts:59](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useReducerWithDeps.ts#L59)
 
 `useReducer` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
@@ -214,7 +214,7 @@ function useStateWithDeps<S>(
 ): [S, Dispatch<SetStateAction<S>>];
 ```
 
-Defined in: [hooks/useStateWithDeps.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useStateWithDeps.ts#L62)
+Defined in: [hooks/useStateWithDeps.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useStateWithDeps.ts#L62)
 
 `useState` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
@@ -341,10 +341,10 @@ Dependencies that reset the state to `initialState`
 ## contextualize()
 
 ```ts
-function contextualize(children): ContextualizePipe;
+function contextualize<Children>(children): ContextualizePipe<Children>;
 ```
 
-Defined in: [misc/contextualize.tsx:79](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/contextualize.tsx#L79)
+Defined in: [misc/contextualize.tsx:79](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/contextualize.tsx#L79)
 
 An alternative way to provide context values to component trees that avoids
 ever-increasing indentation
@@ -386,6 +386,25 @@ return contextualize(jsx)
   .end();
 ```
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Parameters
 
 <table>
@@ -405,7 +424,7 @@ return contextualize(jsx)
 </td>
 <td>
 
-`ReactNode`
+`Children`
 
 </td>
 <td>
@@ -419,7 +438,7 @@ The children to contextualize
 
 ### Returns
 
-[`ContextualizePipe`](#contextualizepipe)
+[`ContextualizePipe`](#contextualizepipe)\<`Children`\>
 
 An object with the following properties:
 
@@ -444,7 +463,7 @@ function createSafeContext<T>(): <DisplayName>(displayName) => {
 };
 ```
 
-Defined in: [misc/createSafeContext.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/createSafeContext.ts#L62)
+Defined in: [misc/createSafeContext.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/createSafeContext.ts#L62)
 
 For a given type `T`, returns a function that produces both a context of that
 type and a hook that returns the current context value if one was provided,
@@ -586,10 +605,10 @@ A function that accepts a single string argument `displayName` (e.g.
 ## wrapJSX()
 
 ```ts
-function wrapJSX(children): JSXWrapPipe;
+function wrapJSX<Children>(children): JSXWrapPipe<Children>;
 ```
 
-Defined in: [misc/wrapJSX.tsx:94](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/wrapJSX.tsx#L94)
+Defined in: [misc/wrapJSX.tsx:99](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/wrapJSX.tsx#L99)
 
 An alternative way to compose JSX that avoids ever-increasing indentation
 
@@ -629,6 +648,25 @@ createRoot(document.getElementById('root')!).render(
 );
 ```
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Parameters
 
 <table>
@@ -648,7 +686,7 @@ createRoot(document.getElementById('root')!).render(
 </td>
 <td>
 
-`ReactNode`
+`Children`
 
 </td>
 <td>
@@ -662,7 +700,7 @@ The children to wrap
 
 ### Returns
 
-[`JSXWrapPipe`](#jsxwrappipe)
+[`JSXWrapPipe`](#jsxwrappipe)\<`Children`\>
 
 An object with the following properties:
 
@@ -685,7 +723,7 @@ type UseEventListener = UseEventListenerWithImplicitWindowTarget &
   UseEventListenerWithAnyExplicitTarget;
 ```
 
-Defined in: [hooks/useEventListener.ts:12](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L12)
+Defined in: [hooks/useEventListener.ts:12](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L12)
 
 The type of [`useEventListener`](#useeventlistener)
 
@@ -704,7 +742,7 @@ The type of [`useEventListener`](#useeventlistener)
 type UseEventListenerWithImplicitWindowTarget = <K>(...args) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:21](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L21)
+Defined in: [hooks/useEventListener.ts:21](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L21)
 
 ### Type Parameters
 
@@ -772,7 +810,7 @@ type UseEventListenerWithExplicitGlobalTarget =
     UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap>;
 ```
 
-Defined in: [hooks/useEventListener.ts:32](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L32)
+Defined in: [hooks/useEventListener.ts:32](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L32)
 
 ### See
 
@@ -789,7 +827,7 @@ type UseEventListenerWithExplicitTarget<Target, EventMap> = <T, K>(
 ) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:44](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L44)
+Defined in: [hooks/useEventListener.ts:44](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L44)
 
 ### Type Parameters
 
@@ -888,7 +926,7 @@ type UseEventListenerWithAnyExplicitTarget = UseEventListenerWithExplicitTarget<
 >;
 ```
 
-Defined in: [hooks/useEventListener.ts:56](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L56)
+Defined in: [hooks/useEventListener.ts:56](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L56)
 
 ### See
 
@@ -909,7 +947,7 @@ type UseEventListenerWithImplicitWindowTargetArgs<K> =
     : never;
 ```
 
-Defined in: [hooks/useEventListener.ts:64](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L64)
+Defined in: [hooks/useEventListener.ts:64](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L64)
 
 ### Type Parameters
 
@@ -954,7 +992,7 @@ type UseEventListenerWithExplicitTargetArgs<EventMap, T, K> = [
 ];
 ```
 
-Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/hooks/useEventListener.ts#L78)
+Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/hooks/useEventListener.ts#L78)
 
 ### Type Parameters
 
@@ -998,13 +1036,13 @@ Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-esse
 ## ContextualizePipe
 
 ```ts
-type ContextualizePipe = {
+type ContextualizePipe<Children> = {
   with: ContextualizeWith;
-  end: () => ReactNode;
+  end: () => Children;
 };
 ```
 
-Defined in: [misc/contextualize.tsx:13](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/contextualize.tsx#L13)
+Defined in: [misc/contextualize.tsx:13](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/contextualize.tsx#L13)
 
 The return type of [`contextualize`](#contextualize)
 
@@ -1013,6 +1051,25 @@ The return type of [`contextualize`](#contextualize)
 [`contextualize`](#contextualize),
 [`ContextualizeWith`](#contextualizewith)
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Properties
 
 <table>
@@ -1043,7 +1100,7 @@ The return type of [`contextualize`](#contextualize)
 </td>
 <td>
 
-() => `ReactNode`
+() => `Children`
 
 </td>
 </tr>
@@ -1055,10 +1112,10 @@ The return type of [`contextualize`](#contextualize)
 ## ContextualizeWith()
 
 ```ts
-type ContextualizeWith = <T>(Context, value) => ContextualizePipe;
+type ContextualizeWith = <T>(Context, value) => ContextualizePipe<ReactElement>;
 ```
 
-Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/contextualize.tsx#L23)
+Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/contextualize.tsx#L23)
 
 ### Type Parameters
 
@@ -1118,7 +1175,7 @@ Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essenti
 
 ### Returns
 
-[`ContextualizePipe`](#contextualizepipe)
+[`ContextualizePipe`](#contextualizepipe)\<`ReactElement`\>
 
 ### See
 
@@ -1130,13 +1187,13 @@ Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essenti
 ## JSXWrapPipe
 
 ```ts
-type JSXWrapPipe = {
-  with: WrapJSXWith;
-  end: () => ReactNode;
+type JSXWrapPipe<Children> = {
+  with: WrapJSXWith<Children>;
+  end: () => Children;
 };
 ```
 
-Defined in: [misc/wrapJSX.tsx:18](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/wrapJSX.tsx#L18)
+Defined in: [misc/wrapJSX.tsx:19](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/wrapJSX.tsx#L19)
 
 The return type of [`wrapJSX`](#wrapjsx)
 
@@ -1145,6 +1202,25 @@ The return type of [`wrapJSX`](#wrapjsx)
 [`wrapJSX`](#wrapjsx),
 [`WrapJSXWith`](#wrapjsxwith)
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Properties
 
 <table>
@@ -1163,7 +1239,7 @@ The return type of [`wrapJSX`](#wrapjsx)
 </td>
 <td>
 
-[`WrapJSXWith`](#wrapjsxwith)
+[`WrapJSXWith`](#wrapjsxwith)\<`Children`\>
 
 </td>
 </tr>
@@ -1175,7 +1251,7 @@ The return type of [`wrapJSX`](#wrapjsx)
 </td>
 <td>
 
-() => `ReactNode`
+() => `Children`
 
 </td>
 </tr>
@@ -1187,10 +1263,29 @@ The return type of [`wrapJSX`](#wrapjsx)
 ## WrapJSXWith()
 
 ```ts
-type WrapJSXWith = <C>(...args) => JSXWrapPipe;
+type WrapJSXWith<Children> = <C>(...args) => JSXWrapPipe<ReactElement>;
 ```
 
-Defined in: [misc/wrapJSX.tsx:28](https://github.com/aweebit/react-essentials/blob/v0.10.4/src/misc/wrapJSX.tsx#L28)
+Defined in: [misc/wrapJSX.tsx:29](https://github.com/aweebit/react-essentials/blob/v0.10.6/src/misc/wrapJSX.tsx#L29)
+
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
 
 ### Type Parameters
 
@@ -1229,7 +1324,7 @@ Defined in: [misc/wrapJSX.tsx:28](https://github.com/aweebit/react-essentials/bl
 </td>
 <td>
 
-\[`C`, `...(Record<never, unknown> extends Omit<ComponentProps<C>, "children"> ? [props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">] : [props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">])`\]
+\[`"children"` _extends_ keyof `ComponentProps`\<`C`\> ? \[`Children`\] _extends_ \[`ComponentProps`\<`C`\>\[`"children"`\]\] ? `C` : `never` : `never`, `...(Record<never, unknown> extends Omit<ComponentProps<C>, "children"> ? [props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">] : [props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">])`\]
 
 </td>
 </tr>
@@ -1238,7 +1333,7 @@ Defined in: [misc/wrapJSX.tsx:28](https://github.com/aweebit/react-essentials/bl
 
 ### Returns
 
-[`JSXWrapPipe`](#jsxwrappipe)
+[`JSXWrapPipe`](#jsxwrappipe)\<`ReactElement`\>
 
 ### See
 

package/dist/misc/contextualize.d.ts

@@ -1,4 +1,4 @@
-import type { Context, ReactNode } from 'react';
+import type { Context, ReactElement, ReactNode } from 'react';
 /**
  * The return type of {@linkcode contextualize}
  *
@@ -6,16 +6,16 @@ import type { Context, ReactNode } from 'react';
  * {@linkcode contextualize},
  * {@linkcode ContextualizeWith}
  */
-export type ContextualizePipe = {
+export type ContextualizePipe<Children extends ReactNode> = {
     with: ContextualizeWith;
-    end: () => ReactNode;
+    end: () => Children;
 };
 /**
  * @see
  * {@linkcode contextualize},
  * {@linkcode ContextualizePipe}
  */
-export type ContextualizeWith = <T>(Context: Context<T>, value: NoInfer<T>) => ContextualizePipe;
+export type ContextualizeWith = <T>(Context: Context<T>, value: NoInfer<T>) => ContextualizePipe<ReactElement>;
 /**
  * An alternative way to provide context values to component trees that avoids
  * ever-increasing indentation
@@ -67,5 +67,5 @@ export type ContextualizeWith = <T>(Context: Context<T>, value: NoInfer<T>) => C
  * @see
  * {@linkcode ContextualizePipe}
  */
-export declare function contextualize(children: ReactNode): ContextualizePipe;
+export declare function contextualize<Children extends ReactNode>(children: Children): ContextualizePipe<Children>;
 //# sourceMappingURL=contextualize.d.ts.map

package/dist/misc/contextualize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contextualize.d.ts","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKhD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,MAAM,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KACd,iBAAiB,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,SAAS,GAAG,iBAAiB,CAWpE"}
+{"version":3,"file":"contextualize.d.ts","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,SAAS,IAAI;IAC1D,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,MAAM,QAAQ,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KACd,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,SAAS,EACtD,QAAQ,EAAE,QAAQ,GACjB,iBAAiB,CAAC,QAAQ,CAAC,CAW7B"}

package/dist/misc/contextualize.js.map

@@ -1 +1 @@
-{"version":3,"file":"contextualize.js","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":";AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,UAAU,aAAa,CAAC,QAAmB;IAC/C,OAAO;QACL,IAAI,CAAI,OAAmB,EAAE,KAAQ;YACnC,OAAO,aAAa,CAClB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAoB,CAC9D,CAAC;QACJ,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"contextualize.js","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":";AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAkB;IAElB,OAAO;QACL,IAAI,CAAI,OAAmB,EAAE,KAAQ;YACnC,OAAO,aAAa,CAClB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAoB,CAC9D,CAAC;QACJ,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/misc/wrapJSX.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, JSXElementConstructor, default as React, ReactNode } from 'react';
+import type { ComponentProps, JSXElementConstructor, default as React, ReactElement, ReactNode } from 'react';
 /**
  * The return type of {@linkcode wrapJSX}
  *
@@ -6,23 +6,23 @@ import type { ComponentProps, JSXElementConstructor, default as React, ReactNode
  * {@linkcode wrapJSX},
  * {@linkcode WrapJSXWith}
  */
-export type JSXWrapPipe = {
-    with: WrapJSXWith;
-    end: () => ReactNode;
+export type JSXWrapPipe<Children extends ReactNode> = {
+    with: WrapJSXWith<Children>;
+    end: () => Children;
 };
 /**
  * @see
  * {@linkcode wrapJSX},
  * {@linkcode JSXWrapPipe}
  */
-export type WrapJSXWith = <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(...args: [
-    Component: C,
+export type WrapJSXWith<Children extends ReactNode> = <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(...args: [
+    Component: 'children' extends keyof ComponentProps<C> ? [Children] extends [ComponentProps<C>['children']] ? C : never : never,
     ...(Record<never, unknown> extends Omit<ComponentProps<C>, 'children'> ? [
         props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, 'children'>
     ] : [
         props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, 'children'>
     ])
-]) => JSXWrapPipe;
+]) => JSXWrapPipe<ReactElement>;
 /**
  * An alternative way to compose JSX that avoids ever-increasing indentation
  *
@@ -72,5 +72,5 @@ export type WrapJSXWith = <C extends keyof JSX.IntrinsicElements | JSXElementCon
  * @see
  * {@linkcode JSXWrapPipe}
  */
-export declare function wrapJSX(children: ReactNode): JSXWrapPipe;
+export declare function wrapJSX<Children extends ReactNode>(children: Children): JSXWrapPipe<Children>;
 //# sourceMappingURL=wrapJSX.d.ts.map

package/dist/misc/wrapJSX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapJSX.d.ts","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,OAAO,IAAI,KAAK,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,MAAM,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAErB,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,GAAG,CAAC,EACjE,GAAG,IAAI,EAAE;IACP,SAAS,EAAE,CAAC;IACZ,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAClE;QACE,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GACnC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,GACD;QACE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,CAAC;CACP,KACE,WAAW,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,SAAS,GAAG,WAAW,CAcxD"}
+{"version":3,"file":"wrapJSX.d.ts","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,OAAO,IAAI,KAAK,EAChB,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,SAAS,IAAI;IACpD,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,QAAQ,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,SAAS,IAEhD,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,GAAG,CAAC,EACjE,GAAG,IAAI,EAAE;IACP,SAAS,EAAE,UAAU,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GACjD,CAAC,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,GAChD,CAAC,GACD,KAAK,GACP,KAAK;IACT,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAClE;QACE,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GACnC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,GACD;QACE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,CAAC;CACP,KACE,WAAW,CAAC,YAAY,CAAC,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,OAAO,CAAC,QAAQ,SAAS,SAAS,EAChD,QAAQ,EAAE,QAAQ,GACjB,WAAW,CAAC,QAAQ,CAAC,CAcvB"}

package/dist/misc/wrapJSX.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapJSX.js","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":";AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,UAAU,OAAO,CAAC,QAAmB;IACzC,OAAO;QACL,IAAI,CACF,SAEiC,EACjC,QAAgB,EAAE;YAElB,OAAO,OAAO,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa,CAAC,CAAC;QAC/D,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"wrapJSX.js","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":";AAiDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,UAAU,OAAO,CACrB,QAAkB;IAElB,OAAO;QACL,IAAI,CACF,SAEiC,EACjC,QAAgB,EAAE;YAElB,OAAO,OAAO,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa,CAAC,CAAC;QAC/D,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aweebit/react-essentials",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "type": "module",
   "repository": "github:aweebit/react-essentials",
   "main": "dist/index.js",

package/src/misc/contextualize.tsx

@@ -1,4 +1,4 @@
-import type { Context, ReactNode } from 'react';
+import type { Context, ReactElement, ReactNode } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { wrapJSX } from './wrapJSX.js';
@@ -10,9 +10,9 @@ import type { wrapJSX } from './wrapJSX.js';
  * {@linkcode contextualize},
  * {@linkcode ContextualizeWith}
  */
-export type ContextualizePipe = {
+export type ContextualizePipe<Children extends ReactNode> = {
   with: ContextualizeWith;
-  end: () => ReactNode;
+  end: () => Children;
 };
 
 /**
@@ -23,7 +23,7 @@ export type ContextualizePipe = {
 export type ContextualizeWith = <T>(
   Context: Context<T>,
   value: NoInfer<T>,
-) => ContextualizePipe;
+) => ContextualizePipe<ReactElement>;
 
 /**
  * An alternative way to provide context values to component trees that avoids
@@ -76,7 +76,9 @@ export type ContextualizeWith = <T>(
  * @see
  * {@linkcode ContextualizePipe}
  */
-export function contextualize(children: ReactNode): ContextualizePipe {
+export function contextualize<Children extends ReactNode>(
+  children: Children,
+): ContextualizePipe<Children> {
   return {
     with<T>(Context: Context<T>, value: T) {
       return contextualize(

package/src/misc/wrapJSX.tsx

@@ -2,6 +2,7 @@ import type {
   ComponentProps,
   JSXElementConstructor,
   default as React,
+  ReactElement,
   ReactNode,
 } from 'react';
 
@@ -15,9 +16,9 @@ import type { contextualize } from './contextualize.js';
  * {@linkcode wrapJSX},
  * {@linkcode WrapJSXWith}
  */
-export type JSXWrapPipe = {
-  with: WrapJSXWith;
-  end: () => ReactNode;
+export type JSXWrapPipe<Children extends ReactNode> = {
+  with: WrapJSXWith<Children>;
+  end: () => Children;
 };
 
 /**
@@ -25,11 +26,15 @@ export type JSXWrapPipe = {
  * {@linkcode wrapJSX},
  * {@linkcode JSXWrapPipe}
  */
-export type WrapJSXWith =
+export type WrapJSXWith<Children extends ReactNode> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(
     ...args: [
-      Component: C,
+      Component: 'children' extends keyof ComponentProps<C>
+        ? [Children] extends [ComponentProps<C>['children']]
+          ? C
+          : never
+        : never,
       ...(Record<never, unknown> extends Omit<ComponentProps<C>, 'children'>
         ? [
             props?: React.JSX.IntrinsicAttributes &
@@ -40,7 +45,7 @@ export type WrapJSXWith =
               Omit<ComponentProps<C>, 'children'>,
           ]),
     ]
-  ) => JSXWrapPipe;
+  ) => JSXWrapPipe<ReactElement>;
 
 /**
  * An alternative way to compose JSX that avoids ever-increasing indentation
@@ -91,7 +96,9 @@ export type WrapJSXWith =
  * @see
  * {@linkcode JSXWrapPipe}
  */
-export function wrapJSX(children: ReactNode): JSXWrapPipe {
+export function wrapJSX<Children extends ReactNode>(
+  children: Children,
+): JSXWrapPipe<Children> {
   return {
     with(
       Component: