react-simplikit 0.0.2 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Viva Republica, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+![react-simplikit](./src/public/images/og.png)
+
+# react-simplikit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/slash/blob/main/LICENSE)
+
+English | [Korean](./README-ko_kr.md)
+
+`react-simplikit` is a lightweight yet powerful library that provides various utilities for use in React environments.
+
+- `react-simplikit` is dependency-free, making it extremely lightweight.
+- `react-simplikit` guarantees reliability with 100% test coverage.
+- `react-simplikit` offers JSDoc comments, detailed documentation, and examples to ensure any developer can easily use it.
+
+## Example
+
+```tsx
+import { useBooleanState } from 'react-simplikit';
+
+function Component() {
+  const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
+
+  return (
+    <div>
+      <p>Bottom Sheet State: {open ? 'Open' : 'Closed'}</p>
+      <button onClick={openBottomSheet}>Open</button>
+      <button onClick={closeBottomSheet}>Close</button>
+      <button onClick={toggleBottomSheet}>Toggle</button>
+    </div>
+  );
+}
+```
+
+## Contributing
+
+Contributions are welcome from everyone in the community. Please check the contribution guide linked below.
+
+[CONTRIBUTING](./src/docs/en/contributing.md)
+
+## License
+
+MIT © Viva Republica, Inc. For more details, see [LICENSE](./LICENSE)

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

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ElementType, Ref } from 'react';
+import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.js';
+
+type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
+    as?: Tag;
+    ref?: Ref<HTMLElement>;
+    children?: React__default.ReactNode;
+    className?: string;
+};
+/**
+ * @description
+ * `ImpressionArea` is a component 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 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.
+ *
+ * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+ *
+ * @example
+ * import { ImpressionArea } from 'react-simplikit';
+ *
+ * function App() {
+ *   return (
+ *     <ImpressionArea
+ *       onImpressionStart={() => console.log('Element entered view')}
+ *       onImpressionEnd={() => console.log('Element exited view')}
+ *       timeThreshold={1000}
+ *       areaThreshold={0.5}
+ *     >
+ *       <div>Track my visibility!</div>
+ *     </ImpressionArea>
+ *   );
+ * }
+ */
+declare function ImpressionArea<T extends ElementType = 'div'>({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ref, ...props }: Props<T>): react_jsx_runtime.JSX.Element;
+
+export { ImpressionArea };

package/dist/components/ImpressionArea/index.js

@@ -0,0 +1,276 @@
+"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/components/ImpressionArea/index.ts
+var ImpressionArea_exports = {};
+__export(ImpressionArea_exports, {
+  ImpressionArea: () => ImpressionArea
+});
+module.exports = __toCommonJS(ImpressionArea_exports);
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+var import_react6 = require("react");
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react3 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react2 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react2.useRef)(() => {
+  });
+  const effect = (0, import_react2.useCallback)(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = (0, import_react3.useMemo)(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+var import_react4 = require("react");
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = (0, import_react4.useCallback)(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  (0, import_react4.useEffect)(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+var import_react5 = require("react");
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = (0, import_react5.useRef)({ value: false, clearPreviousDebounce: () => {
+  } });
+  (0, import_react5.useEffect)(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  return (0, import_react5.useCallback)(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(() => {
+        handleChange(nextValue);
+        ref.current.value = nextValue;
+      }, timeThreshold);
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold]
+  );
+}
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+function useImpressionRef({
+  onImpressionStart = () => {
+  },
+  onImpressionEnd = () => {
+  },
+  rootMargin,
+  areaThreshold = 0,
+  timeThreshold = 0
+}) {
+  const impressionStartHandler = usePreservedCallback(onImpressionStart);
+  const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+  const isIntersectingRef = (0, import_react6.useRef)(false);
+  const impressionEventHandler = useDebouncedCallback({
+    timeThreshold,
+    onChange: (impressed) => {
+      (impressed ? impressionStartHandler : impressionEndHandler)();
+    }
+  });
+  useVisibilityEvent((documentVisible) => {
+    if (!isIntersectingRef.current) {
+      return;
+    }
+    impressionEventHandler(documentVisible === "visible");
+  });
+  return useIntersectionObserver(
+    (entry) => {
+      if (document.visibilityState === "hidden") {
+        return;
+      }
+      const currentRatio = entry.intersectionRatio;
+      const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
+      isIntersectingRef.current = isIntersecting;
+      impressionEventHandler(isIntersecting);
+    },
+    { rootMargin, threshold: areaThreshold }
+  );
+}
+
+// src/utils/mergeRefs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+
+// src/components/ImpressionArea/ImpressionArea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImpressionArea({
+  as,
+  rootMargin,
+  areaThreshold,
+  timeThreshold,
+  onImpressionStart,
+  onImpressionEnd,
+  ref,
+  ...props
+}) {
+  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 });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImpressionArea
+});

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

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Props = {
+    with: ReactNode;
+    children: ReactNode;
+};
+/**
+ * @description
+ * `Separated` is a component that inserts a specified component between each child element.
+ * It is useful for adding separators, spacing, or other repeating elements in lists.
+ *
+ * @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.
+ *
+ * @returns {JSX.Element} A React component that separates children with a specified separator.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <Separated with={<Border type="padding24" />}>
+ *       {['hello', 'react', 'world'].map(item => (
+ *         <div key={item}>{item}</div>
+ *       ))}
+ *     </Separated>
+ *   );
+ *   // Expected output:
+ *   // <div>hello</div>
+ *   // <Border type="padding24" />
+ *   // <div>react</div>
+ *   // <Border type="padding24" />
+ *   // <div>world</div>
+ * }
+ */
+declare function Separated({ children, with: separator }: Props): react_jsx_runtime.JSX.Element;
+
+export { Separated };

package/dist/components/Separated/index.js

@@ -0,0 +1,40 @@
+"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/components/Separated/index.ts
+var Separated_exports = {};
+__export(Separated_exports, {
+  Separated: () => Separated
+});
+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 }) {
+  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,
+    i + 1 !== length ? separator : null
+  ] }, i)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separated
+});

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

@@ -0,0 +1,46 @@
+import { ReactElement } from 'react';
+
+type StringifiedValue<T> = T extends boolean ? 'true' | 'false' : T extends number ? `${T}` : T extends string ? T : never;
+type Props<Case> = {
+    value: Case;
+    caseBy: Partial<{
+        [P in StringifiedValue<Case>]: () => ReactElement | null;
+    }>;
+    defaultComponent?: () => ReactElement | null;
+};
+/**
+ * @description
+ * `SwitchCase` is a component that allows you to declaratively render components based on a given value,
+ * similar to a `switch-case` statement. It is useful when you need to conditionally render different
+ * components depending on a specific state.
+ *
+ * @param {string | number} value - The value to compare against.
+ *   The component associated with the matching key in `caseBy` will be rendered.
+ * @param {Record<string | number, () => JSX.Element>} caseBy - An object that maps values to
+ *   components to render. The keys represent possible values, and the values are functions returning
+ *   the corresponding components.
+ * @param {() => JSX.Element} defaultComponent - The component to render if `value` does not match
+ *   any key in `caseBy`.
+ *
+ * @returns {JSX.Element} A React component that conditionally renders based on cases.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <SwitchCase
+ *       value={status}
+ *       // Renders TypeA, TypeB, or TypeC based on the status value.
+ *       caseBy={{
+ *         a: () => <TypeA />,
+ *         b: () => <TypeB />,
+ *         c: () => <TypeC />,
+ *       }}
+ *       // Renders Default when the status value does not match any case.
+ *       defaultComponent={() => <Default />}
+ *     />
+ *   );
+ * }
+ */
+declare function SwitchCase<Case>({ value, caseBy, defaultComponent }: Props<Case>): ReactElement | null;
+
+export { SwitchCase };

package/dist/components/SwitchCase/index.js

@@ -0,0 +1,35 @@
+"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/components/SwitchCase/index.ts
+var SwitchCase_exports = {};
+__export(SwitchCase_exports, {
+  SwitchCase: () => SwitchCase
+});
+module.exports = __toCommonJS(SwitchCase_exports);
+
+// src/components/SwitchCase/SwitchCase.tsx
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+  const stringifiedValue = String(value);
+  return (caseBy[stringifiedValue] ?? defaultComponent)();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwitchCase
+});

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

@@ -0,0 +1,25 @@
+import { DependencyList } from 'react';
+
+/**
+ * @description
+ * `useAsyncEffect` is a custom hook for handling asynchronous side effects in React components.
+ * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
+ *
+ * @param {() => Promise<void | (() => void)>} effect - An asynchronous function executed in the `useEffect` pattern.
+ *   This function can optionally return a cleanup function.
+ * @param {DependencyList} [deps] - A dependency array.
+ *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+ *
+ * @example
+ * useAsyncEffect(async () => {
+ *   const data = await fetchData();
+ *   setData(data);
+ *
+ *   return () => {
+ *     console.log('Cleanup on unmount or dependency change');
+ *   };
+ * }, [dependency]);
+ */
+declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
+
+export { useAsyncEffect };

package/dist/hooks/useAsyncEffect/index.js

@@ -0,0 +1,43 @@
+"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/useAsyncEffect/index.ts
+var useAsyncEffect_exports = {};
+__export(useAsyncEffect_exports, {
+  useAsyncEffect: () => useAsyncEffect
+});
+module.exports = __toCommonJS(useAsyncEffect_exports);
+
+// src/hooks/useAsyncEffect/useAsyncEffect.ts
+var import_react = require("react");
+function useAsyncEffect(effect, deps) {
+  (0, import_react.useEffect)(() => {
+    let cleanup;
+    effect().then((result) => {
+      cleanup = result;
+    });
+    return () => {
+      cleanup?.();
+    };
+  }, deps);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAsyncEffect
+});

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

@@ -0,0 +1,19 @@
+/**
+ * @description
+ * `useBooleanState` is a React hook that simplifies managing a boolean state.
+ * It provides functions to set the state to `true`, set it to `false`, and toggle its value.
+ *
+ * @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+ *
+ * @returns {readonly [boolean, () => void, () => void, () => void]} A tuple containing:
+ * - `boolean` - The current state value.
+ * - `() => void` - A function to set the state to `true`.
+ * - `() => void` - A function to set the state to `false`.
+ * - `() => void` - A function to toggle the state.
+ *
+ * @example
+ * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
+ */
+declare const useBooleanState: (defaultValue?: boolean) => readonly [boolean, () => void, () => void, () => void];
+
+export { useBooleanState };

package/dist/hooks/useBooleanState/index.js

@@ -0,0 +1,45 @@
+"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/useBooleanState/index.ts
+var useBooleanState_exports = {};
+__export(useBooleanState_exports, {
+  useBooleanState: () => useBooleanState
+});
+module.exports = __toCommonJS(useBooleanState_exports);
+
+// src/hooks/useBooleanState/useBooleanState.ts
+var import_react = require("react");
+var useBooleanState = (defaultValue = false) => {
+  const [bool, setBool] = (0, import_react.useState)(defaultValue);
+  const setTrue = (0, import_react.useCallback)(() => {
+    setBool(true);
+  }, []);
+  const setFalse = (0, import_react.useCallback)(() => {
+    setBool(false);
+  }, []);
+  const toggle = (0, import_react.useCallback)(() => {
+    setBool((b) => !b);
+  }, []);
+  return [bool, setTrue, setFalse, toggle];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBooleanState
+});