react-simplikit 0.0.23 → 0.0.25

package/dist/hooks/useControlledState/index.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useControlledState/index.ts
+var useControlledState_exports = {};
+__export(useControlledState_exports, {
+  useControlledState: () => useControlledState
+});
+module.exports = __toCommonJS(useControlledState_exports);
+
+// src/hooks/useControlledState/useControlledState.ts
+var import_react = require("react");
+function useControlledState({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  equalityFn = Object.is
+}) {
+  const [uncontrolledState, setUncontrolledState] = (0, import_react.useState)(defaultValue);
+  const controlled = valueProp !== void 0;
+  const value = controlled ? valueProp : uncontrolledState;
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      const nextValue = isSetStateAction(next) ? next(value) : next;
+      if (equalityFn(value, nextValue) === true) return;
+      if (controlled === false) setUncontrolledState(nextValue);
+      if (controlled === true && nextValue === void 0) setUncontrolledState(nextValue);
+      onChange?.(nextValue);
+    },
+    [controlled, onChange, equalityFn, value]
+  );
+  return [value, setValue];
+}
+function isSetStateAction(next) {
+  return typeof next === "function";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useControlledState
+});

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

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

package/dist/hooks/useIsomorphicLayoutEffect/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useIsomorphicLayoutEffect/index.ts
+var useIsomorphicLayoutEffect_exports = {};
+__export(useIsomorphicLayoutEffect_exports, {
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
+});
+module.exports = __toCommonJS(useIsomorphicLayoutEffect_exports);
+
+// src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+var import_react = require("react");
+var isServer = typeof window === "undefined";
+var useIsomorphicLayoutEffect = isServer ? import_react.useEffect : import_react.useLayoutEffect;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIsomorphicLayoutEffect
+});

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+/**
+ * @description
+ * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using useLayoutEffect.
+ *
+ * This hook provides the behavior of useLayoutEffect in the browser without triggering SSR warnings.
+ *
+ * It runs synchronously after DOM updates but before paint, making it ideal for:
+ * - Measuring DOM elements after render
+ * - Applying DOM changes before paint
+ * - Preventing UI flashes or layout shifts
+ * - Supporting both client and server environments safely
+ *
+ * @param {React.EffectCallback} effect - The effect function.
+ * @param {React.DependencyList} [deps] - An optional array of dependencies.
+ *
+ * @example
+ * useIsomorphicLayoutEffect(() => {
+ *   // Code to be executed during the layout phase on the client side
+ * }, [dep1, dep2, ...]);
+ */
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+
+export { useIsomorphicLayoutEffect };

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

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

package/esm/hooks/useControlledState/index.js

@@ -0,0 +1,29 @@
+// src/hooks/useControlledState/useControlledState.ts
+import { useCallback, useState } from "react";
+function useControlledState({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  equalityFn = Object.is
+}) {
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+  const controlled = valueProp !== void 0;
+  const value = controlled ? valueProp : uncontrolledState;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = isSetStateAction(next) ? next(value) : next;
+      if (equalityFn(value, nextValue) === true) return;
+      if (controlled === false) setUncontrolledState(nextValue);
+      if (controlled === true && nextValue === void 0) setUncontrolledState(nextValue);
+      onChange?.(nextValue);
+    },
+    [controlled, onChange, equalityFn, value]
+  );
+  return [value, setValue];
+}
+function isSetStateAction(next) {
+  return typeof next === "function";
+}
+export {
+  useControlledState
+};

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+/**
+ * @description
+ * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using useLayoutEffect.
+ *
+ * This hook provides the behavior of useLayoutEffect in the browser without triggering SSR warnings.
+ *
+ * It runs synchronously after DOM updates but before paint, making it ideal for:
+ * - Measuring DOM elements after render
+ * - Applying DOM changes before paint
+ * - Preventing UI flashes or layout shifts
+ * - Supporting both client and server environments safely
+ *
+ * @param {React.EffectCallback} effect - The effect function.
+ * @param {React.DependencyList} [deps] - An optional array of dependencies.
+ *
+ * @example
+ * useIsomorphicLayoutEffect(() => {
+ *   // Code to be executed during the layout phase on the client side
+ * }, [dep1, dep2, ...]);
+ */
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+
+export { useIsomorphicLayoutEffect };

package/esm/hooks/useIsomorphicLayoutEffect/index.js

@@ -0,0 +1,7 @@
+// src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+import { useEffect, useLayoutEffect } from "react";
+var isServer = typeof window === "undefined";
+var useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/package.json

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