react-simplikit 0.0.36 → 0.0.38

package/dist/components/ImpressionArea/index.cjs

@@ -270,20 +270,21 @@ function mergeRefs(...refs) {
 
 // src/components/ImpressionArea/ImpressionArea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ImpressionArea = (0, import_react7.forwardRef)(
-  ({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) => {
-    const Component = as ?? "div";
-    const impressionRef = useImpressionRef({
-      onImpressionStart,
-      onImpressionEnd,
-      areaThreshold,
-      timeThreshold,
-      rootMargin
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
-  }
-);
-ImpressionArea.displayName = "ImpressionArea";
+var ImpressionArea = (0, import_react7.forwardRef)(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+Object.assign(ImpressionArea, {
+  displayName: "ImpressionArea"
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ImpressionArea

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

@@ -1,10 +1,9 @@
-import * as react from 'react';
-import { ElementType, Ref, ReactNode } from 'react';
+import { ElementType, ReactNode, Ref } from 'react';
 import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.cjs';
 
+type Element<T extends ElementType, InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
     as?: Tag;
-    ref?: Ref<HTMLElement>;
     children?: ReactNode;
     className?: string;
 };
@@ -14,13 +13,14 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
  * hook to track the element's visibility.
  *
- * @param {ElementType} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+ * @param {T} [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 {Ref<Element<T>>} [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.
  *
@@ -40,6 +40,8 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  *   );
  * }
  */
-declare const ImpressionArea: react.ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & react.RefAttributes<Element>>;
+declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
+    ref?: Ref<Element<T>>;
+}) => React.ReactNode;
 
 export { ImpressionArea };

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

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

package/dist/index.cjs

@@ -302,20 +302,21 @@ function mergeRefs(...refs) {
 
 // src/components/ImpressionArea/ImpressionArea.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ImpressionArea = (0, import_react7.forwardRef)(
-  ({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) => {
-    const Component = as ?? "div";
-    const impressionRef = useImpressionRef({
-      onImpressionStart,
-      onImpressionEnd,
-      areaThreshold,
-      timeThreshold,
-      rootMargin
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
-  }
-);
-ImpressionArea.displayName = "ImpressionArea";
+var ImpressionArea = (0, import_react7.forwardRef)(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+Object.assign(ImpressionArea, {
+  displayName: "ImpressionArea"
+});
 
 // src/components/Separated/Separated.tsx
 var import_react8 = require("react");

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

@@ -1,10 +1,9 @@
-import * as react from 'react';
-import { ElementType, Ref, ReactNode } from 'react';
+import { ElementType, ReactNode, Ref } from 'react';
 import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.js';
 
+type Element<T extends ElementType, InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
 type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
     as?: Tag;
-    ref?: Ref<HTMLElement>;
     children?: ReactNode;
     className?: string;
 };
@@ -14,13 +13,14 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
  * hook to track the element's visibility.
  *
- * @param {ElementType} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+ * @param {T} [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 {Ref<Element<T>>} [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.
  *
@@ -40,6 +40,8 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  *   );
  * }
  */
-declare const ImpressionArea: react.ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & react.RefAttributes<Element>>;
+declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
+    ref?: Ref<Element<T>>;
+}) => React.ReactNode;
 
 export { ImpressionArea };

package/esm/components/ImpressionArea/index.js

@@ -244,20 +244,21 @@ function mergeRefs(...refs) {
 
 // src/components/ImpressionArea/ImpressionArea.tsx
 import { jsx } from "react/jsx-runtime";
-var ImpressionArea = forwardRef(
-  ({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) => {
-    const Component = as ?? "div";
-    const impressionRef = useImpressionRef({
-      onImpressionStart,
-      onImpressionEnd,
-      areaThreshold,
-      timeThreshold,
-      rootMargin
-    });
-    return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
-  }
-);
-ImpressionArea.displayName = "ImpressionArea";
+var ImpressionArea = forwardRef(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+Object.assign(ImpressionArea, {
+  displayName: "ImpressionArea"
+});
 export {
   ImpressionArea
 };

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

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

package/esm/index.js

@@ -244,20 +244,21 @@ function mergeRefs(...refs) {
 
 // src/components/ImpressionArea/ImpressionArea.tsx
 import { jsx } from "react/jsx-runtime";
-var ImpressionArea = forwardRef(
-  ({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) => {
-    const Component = as ?? "div";
-    const impressionRef = useImpressionRef({
-      onImpressionStart,
-      onImpressionEnd,
-      areaThreshold,
-      timeThreshold,
-      rootMargin
-    });
-    return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
-  }
-);
-ImpressionArea.displayName = "ImpressionArea";
+var ImpressionArea = forwardRef(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+Object.assign(ImpressionArea, {
+  displayName: "ImpressionArea"
+});
 
 // src/components/Separated/Separated.tsx
 import { Children, Fragment, isValidElement } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "main": "./dist/index.cjs",
   "type": "module",
   "sideEffects": false,