minimal-shared 0.0.2

package/README.md

@@ -0,0 +1,3 @@
+# @minimals shared
+
+Shared hooks and utils used by Mnimal UI and Zone UI.

package/dist/hooks/index.d.ts

@@ -0,0 +1,20 @@
+export { UseTabsReturn, useTabs } from './use-tabs/use-tabs.js';
+export { UseBooleanReturn, useBoolean } from './use-boolean/use-boolean.js';
+export { UsePopoverReturn, usePopover } from './use-popover/use-popover.js';
+export { UseCookiesReturn, useCookies } from './use-cookies/use-cookies.js';
+export { UseDebounceReturn, useDebounce } from './use-debounce/use-debounce.js';
+export { UseSetStateReturn, useSetState } from './use-set-state/use-set-state.js';
+export { UseIsClientReturn, useIsClient } from './use-is-client/use-is-client.js';
+export { UseTextInputReturn, useTextInput } from './use-text-input/use-text-input.js';
+export { UseBackToTopReturn, useBackToTop } from './use-back-to-top/use-back-to-top.js';
+export { UseClientRectReturn, useClientRect } from './use-client-rect/use-client-rect.js';
+export { UseMultiSelectReturn, updateSelectedItems, useMultiSelect } from './use-multi-select/use-multi-select.js';
+export { UseDoubleClickReturn, useDoubleClick } from './use-double-click/use-double-click.js';
+export { UseLocalStorageReturn, useLocalStorage } from './use-local-storage/use-local-storage.js';
+export { usePopoverHover } from './use-popover-hover/use-popover-hover.js';
+export { UseCountdownDateReturn, useCountdownDate } from './use-countdown-date/use-countdown-date.js';
+export { useEventListener } from './use-event-listener/use-event-listener.js';
+export { UseScrollOffsetTopReturn, useScrollOffsetTop } from './use-scroll-offset-top/use-scroll-offset-top.js';
+export { UseCountdownSecondsReturn, useCountdownSeconds } from './use-countdown-seconds/use-countdown-seconds.js';
+export { CopiedValue, CopyFn, UseCopyToClipboardReturn, useCopyToClipboard } from './use-copy-to-clipboard/use-copy-to-clipboard.js';
+import 'react';

package/dist/hooks/index.js

@@ -0,0 +1,19 @@
+export * from './use-tabs';
+export * from './use-boolean';
+export * from './use-popover';
+export * from './use-cookies';
+export * from './use-debounce';
+export * from './use-set-state';
+export * from './use-is-client';
+export * from './use-text-input';
+export * from './use-back-to-top';
+export * from './use-client-rect';
+export * from './use-multi-select';
+export * from './use-double-click';
+export * from './use-local-storage';
+export * from './use-popover-hover';
+export * from './use-countdown-date';
+export * from './use-event-listener';
+export * from './use-scroll-offset-top';
+export * from './use-countdown-seconds';
+export * from './use-copy-to-clipboard';

package/dist/hooks/use-back-to-top/index.d.ts

@@ -0,0 +1,2 @@
+export { UseBackToTopReturn, useBackToTop } from './use-back-to-top.js';
+import 'react';

package/dist/hooks/use-back-to-top/index.js

@@ -0,0 +1 @@
+export * from './use-back-to-top';

package/dist/hooks/use-back-to-top/use-back-to-top.d.ts

@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to manage the visibility of a "Back to Top" button based on scroll position.
+ *
+ * @param {string | number} defaultValue - The scroll progress percentage (e.g., '90%') or distance in pixels (e.g., 80) at which the button becomes visible.
+ * - If `defaultValue` is a percentage string (e.g., '90%'), the button becomes visible when the scroll distance is that percentage from the top.
+ * - If `defaultValue` is a number (e.g., 80), the button becomes visible when the scroll distance is that many pixels from the bottom.
+ * @param {boolean} [isDebounce=false] - Whether to debounce the scroll handler to improve performance.
+ *
+ * @returns {UseBackToTopReturn} - An object containing:
+ * - `isVisible`: A boolean indicating whether the "Back to Top" button should be visible.
+ * - `onBackToTop`: A function to scroll the window back to the top smoothly.
+ * - `setIsVisible`: A function to manually set the visibility of the "Back to Top" button.
+ *
+ * @example
+ * const { isVisible, onBackToTop } = useBackToTop('90%');
+ * const { isVisible, onBackToTop } = useBackToTop(80);
+ *
+ * return (
+ *   <button onClick={onBackToTop} style={{ display: isVisible ? 'block' : 'none' }}>
+ *     Back to Top
+ *   </button>
+ * );
+ */
+type UseBackToTopReturn = {
+    isVisible: boolean;
+    onBackToTop: () => void;
+    setIsVisible: Dispatch<SetStateAction<boolean>>;
+};
+declare function useBackToTop(defaultValue: string | number, isDebounce?: boolean): UseBackToTopReturn;
+
+export { type UseBackToTopReturn, useBackToTop };

package/dist/hooks/use-back-to-top/use-back-to-top.js

@@ -0,0 +1,64 @@
+// src/hooks/use-back-to-top/use-back-to-top.ts
+import { useMemo, useState, useEffect, useCallback } from "react";
+function useBackToTop(defaultValue, isDebounce) {
+  const [isVisible, setIsVisible] = useState(false);
+  const parseValue = parseValueInput(defaultValue);
+  const handleScroll = useCallback(() => {
+    const windowInnerHeight = window.innerHeight;
+    const windowScrollY = Math.round(window.scrollY);
+    const documentOffsetHeight = document.body.offsetHeight;
+    const scrollProgress = Math.round(
+      windowScrollY / (documentOffsetHeight - windowInnerHeight) * 100
+    );
+    if (parseValue.type === "percentage") {
+      setIsVisible(scrollProgress >= parseValue.value);
+    } else {
+      const distanceValue = documentOffsetHeight - windowInnerHeight - windowScrollY;
+      setIsVisible(parseValue.value >= distanceValue);
+    }
+  }, [parseValue.type, parseValue.value]);
+  const debouncedHandleScroll = useMemo(() => {
+    let timeoutId;
+    return () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleScroll, 100);
+    };
+  }, [handleScroll]);
+  useEffect(() => {
+    const scrollHandler = isDebounce ? debouncedHandleScroll : handleScroll;
+    window.addEventListener("scroll", scrollHandler);
+    return () => {
+      window.removeEventListener("scroll", scrollHandler);
+    };
+  }, [debouncedHandleScroll, handleScroll, isDebounce]);
+  const onBackToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  return {
+    isVisible,
+    onBackToTop,
+    setIsVisible
+  };
+}
+function parseValueInput(inputValue) {
+  let value;
+  let type;
+  if (typeof inputValue === "string") {
+    if (inputValue.endsWith("%")) {
+      value = Number(inputValue.slice(0, -1));
+      if (isNaN(value)) {
+        throw new Error("Invalid percentage value");
+      }
+      type = "percentage";
+    } else {
+      throw new Error("String input must end with %");
+    }
+  } else {
+    value = inputValue;
+    type = "number";
+  }
+  return { value, type };
+}
+export {
+  useBackToTop
+};

package/dist/hooks/use-boolean/index.d.ts

@@ -0,0 +1,2 @@
+export { UseBooleanReturn, useBoolean } from './use-boolean.js';
+import 'react';

package/dist/hooks/use-boolean/index.js

@@ -0,0 +1 @@
+export * from './use-boolean';

package/dist/hooks/use-boolean/use-boolean.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to manage a boolean state with utility functions to set it to true, false, or toggle its value.
+ *
+ * @param {boolean} [defaultValue=false] - The initial value of the boolean state.
+ *
+ * @example
+ * const { value, onTrue, onFalse, onToggle } = useBoolean(false);
+ *
+ * return (
+ *   <div>
+ *     <p>Value: {value.toString()}</p>
+ *     <button onClick={onTrue}>Set True</button>
+ *     <button onClick={onFalse}>Set False</button>
+ *     <button onClick={onToggle}>Toggle</button>
+ *   </div>
+ * );
+ */
+type UseBooleanReturn = {
+    value: boolean;
+    onTrue: () => void;
+    onFalse: () => void;
+    onToggle: () => void;
+    setValue: Dispatch<SetStateAction<boolean>>;
+};
+declare function useBoolean(defaultValue?: boolean): UseBooleanReturn;
+
+export { type UseBooleanReturn, useBoolean };

package/dist/hooks/use-boolean/use-boolean.js

@@ -0,0 +1,24 @@
+// src/hooks/use-boolean/use-boolean.ts
+import { useState, useCallback } from "react";
+function useBoolean(defaultValue = false) {
+  const [value, setValue] = useState(defaultValue);
+  const onTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+  const onFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+  const onToggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+  return {
+    value,
+    onTrue,
+    onFalse,
+    onToggle,
+    setValue
+  };
+}
+export {
+  useBoolean
+};

package/dist/hooks/use-client-rect/index.d.ts

@@ -0,0 +1,2 @@
+export { UseClientRectReturn, useClientRect } from './use-client-rect.js';
+import 'react';

package/dist/hooks/use-client-rect/index.js

@@ -0,0 +1 @@
+export * from './use-client-rect';

package/dist/hooks/use-client-rect/use-client-rect.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+
+/**
+ * Custom hook to get the bounding client rect and scroll dimensions of a DOM element.
+ *
+ * @param {RefObject<HTMLDivElement>} [inputRef] - Optional ref object to the target element.
+ * @param {string} [eventType] - Optional event type to trigger updates (e.g., 'scroll', 'resize').
+ * @returns {UseClientRectReturn} - Object containing the bounding rect, scroll dimensions, and ref to the element.
+ */
+type ScrollElValue = {
+    scrollWidth: number;
+    scrollHeight: number;
+};
+type DOMRectValue = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type UseClientRectReturn = DOMRectValue & ScrollElValue & {
+    elementRef: RefObject<HTMLDivElement>;
+};
+declare function useClientRect(inputRef?: RefObject<HTMLDivElement>, eventType?: string): UseClientRectReturn;
+
+export { type UseClientRectReturn, useClientRect };

package/dist/hooks/use-client-rect/use-client-rect.js

@@ -0,0 +1,47 @@
+// src/hooks/use-client-rect/use-client-rect.ts
+import { useRef, useMemo, useState, useEffect, useCallback, useLayoutEffect } from "react";
+function useClientRect(inputRef, eventType) {
+  const initialRef = useRef(null);
+  const elementRef = inputRef || initialRef;
+  const [rect, setRect] = useState(void 0);
+  const [scroll, setScroll] = useState(void 0);
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+  const handleBoundingClientRect = useCallback(() => {
+    if (elementRef.current) {
+      const clientRect = elementRef.current.getBoundingClientRect();
+      setRect(clientRect);
+      setScroll({
+        scrollWidth: elementRef.current.scrollWidth,
+        scrollHeight: elementRef.current.scrollHeight
+      });
+    }
+  }, [elementRef]);
+  useIsomorphicLayoutEffect(() => {
+    handleBoundingClientRect();
+  }, [handleBoundingClientRect]);
+  useEffect(() => {
+    const event = eventType || "resize";
+    window.addEventListener(event, handleBoundingClientRect);
+    return () => {
+      window.removeEventListener(event, handleBoundingClientRect);
+    };
+  }, [eventType, handleBoundingClientRect]);
+  const memoizedRectValue = useMemo(() => rect, [rect]);
+  const memoizedScrollValue = useMemo(() => scroll, [scroll]);
+  return {
+    elementRef,
+    top: memoizedRectValue?.top ?? 0,
+    right: memoizedRectValue?.right ?? 0,
+    bottom: memoizedRectValue?.bottom ?? 0,
+    left: memoizedRectValue?.left ?? 0,
+    x: memoizedRectValue?.x ?? 0,
+    y: memoizedRectValue?.y ?? 0,
+    width: memoizedRectValue?.width ?? 0,
+    height: memoizedRectValue?.height ?? 0,
+    scrollWidth: memoizedScrollValue?.scrollWidth ?? 0,
+    scrollHeight: memoizedScrollValue?.scrollHeight ?? 0
+  };
+}
+export {
+  useClientRect
+};

package/dist/hooks/use-cookies/index.d.ts

@@ -0,0 +1 @@
+export { UseCookiesReturn, useCookies } from './use-cookies.js';

package/dist/hooks/use-cookies/index.js

@@ -0,0 +1 @@
+export * from './use-cookies';

package/dist/hooks/use-cookies/use-cookies.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Custom hook to manage state with cookies.
+ *
+ * @param {string} key - The key for the cookie.
+ * @param {T} initialState - The initial state value.
+ * @param {T} defaultValues - The default values to reset to.
+ * @param {Object} [options] - Optional settings.
+ * @param {number} [options.daysUntilExpiration] - Number of days until the cookie expires.
+ *
+ * @returns {UseCookiesReturn<T>} - An object containing:
+ * - `state`: The current state.
+ * - `resetState`: A function to reset the state to default values.
+ * - `setState`: A function to update the state.
+ * - `setField`: A function to update a specific field in the state.
+ *
+ * @example
+ * const { state, setState, setField, resetState } = useCookies('user', { name: '', age: 0 }, { name: '', age: 0 });
+ *
+ * return (
+ *   <div>
+ *     <p>Name: {state.name}</p>
+ *     <p>Age: {state.age}</p>
+ *     <button onClick={() => setField('name', 'John')}>Set Name</button>
+ *     <button onClick={resetState}>Reset</button>
+ *   </div>
+ * );
+ */
+type UseCookiesReturn<T> = {
+    state: T;
+    resetState: (defaultState?: T) => void;
+    setState: (updateState: T | Partial<T>) => void;
+    setField: (name: keyof T, updateValue: T[keyof T]) => void;
+};
+declare function useCookies<T>(key: string, initialState?: T, options?: {
+    initOnLoad?: boolean;
+    daysUntilExpiration?: number;
+}): UseCookiesReturn<T>;
+
+export { type UseCookiesReturn, useCookies };

package/dist/hooks/use-cookies/use-cookies.js

@@ -0,0 +1,110 @@
+// src/hooks/use-cookies/use-cookies.ts
+import { useMemo, useState, useEffect, useCallback } from "react";
+
+// src/utils/cookies/cookies.ts
+function getCookie(key) {
+  try {
+    const keyName = `${key}=`;
+    const cDecoded = decodeURIComponent(document.cookie);
+    const cArr = cDecoded.split("; ");
+    for (const val of cArr) {
+      if (val.startsWith(keyName)) {
+        const cookieValue = val.substring(keyName.length);
+        try {
+          return JSON.parse(cookieValue);
+        } catch {
+          return cookieValue;
+        }
+      }
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function setCookie(key, value, daysUntilExpiration = 0) {
+  try {
+    const serializedValue = encodeURIComponent(JSON.stringify(value));
+    let cookieOptions = `${key}=${serializedValue}; path=/`;
+    if (daysUntilExpiration > 0) {
+      const expirationDate = new Date(Date.now() + daysUntilExpiration * 24 * 60 * 60 * 1e3);
+      cookieOptions += `; expires=${expirationDate.toUTCString()}`;
+    }
+    document.cookie = cookieOptions;
+  } catch (error) {
+    console.error("Error while setting cookie:", error);
+  }
+}
+function removeCookie(key) {
+  try {
+    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+  } catch (error) {
+    console.error("Error while removing cookie:", error);
+  }
+}
+
+// src/hooks/use-cookies/use-cookies.ts
+function useCookies(key, initialState, options) {
+  const isValuePresent = !!getCookie(key);
+  const storedValue = getCookie(key) ?? initialState;
+  const [state, set] = useState(storedValue);
+  const { initOnLoad = true, daysUntilExpiration } = options ?? {};
+  const hasMultipleValues = state && typeof state === "object";
+  useEffect(() => {
+    if (storedValue) {
+      if (hasMultipleValues) {
+        set((prevValue) => ({ ...prevValue, ...storedValue }));
+      } else {
+        set(storedValue);
+      }
+      if (!isValuePresent && initOnLoad) {
+        setCookie(key, storedValue, daysUntilExpiration);
+      }
+    }
+  }, []);
+  const setState = useCallback(
+    (updateState) => {
+      if (hasMultipleValues) {
+        set((prevValue) => {
+          const updatedState = { ...prevValue, ...updateState };
+          setCookie(key, updatedState, daysUntilExpiration);
+          return updatedState;
+        });
+      } else {
+        setCookie(key, updateState, daysUntilExpiration);
+        set(updateState);
+      }
+    },
+    [hasMultipleValues, key, daysUntilExpiration]
+  );
+  const setField = useCallback(
+    (name, updateValue) => {
+      if (hasMultipleValues) {
+        setState({ [name]: updateValue });
+      }
+    },
+    [hasMultipleValues, setState]
+  );
+  const resetState = useCallback(
+    (defaultState) => {
+      if (defaultState) {
+        set(defaultState);
+      }
+      removeCookie(key);
+    },
+    [key]
+  );
+  const memoizedValue = useMemo(
+    () => ({
+      state,
+      setState,
+      setField,
+      resetState
+    }),
+    [resetState, setField, setState, state]
+  );
+  return memoizedValue;
+}
+export {
+  useCookies
+};

package/dist/hooks/use-copy-to-clipboard/index.d.ts

@@ -0,0 +1 @@
+export { CopiedValue, CopyFn, UseCopyToClipboardReturn, useCopyToClipboard } from './use-copy-to-clipboard.js';

package/dist/hooks/use-copy-to-clipboard/index.js

@@ -0,0 +1 @@
+export * from './use-copy-to-clipboard';

package/dist/hooks/use-copy-to-clipboard/use-copy-to-clipboard.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Custom hook to copy text to the clipboard.
+ *
+ * @returns {UseCopyToClipboardReturn} - An object containing:
+ * - `copy`: A function to copy text to the clipboard.
+ * - `copiedText`: The last copied text or null if nothing has been copied.
+ *
+ * @example
+ * const { copy, copiedText } = useCopyToClipboard();
+ *
+ * return (
+ *   <div>
+ *     <button onClick={() => copy('Hello, World!')}>Copy Text</button>
+ *     {copiedText && <p>Copied: {copiedText}</p>}
+ *   </div>
+ * );
+ */
+type UseCopyToClipboardReturn = {
+    copy: CopyFn;
+    copiedText: CopiedValue;
+};
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>;
+declare function useCopyToClipboard(): UseCopyToClipboardReturn;
+
+export { type CopiedValue, type CopyFn, type UseCopyToClipboardReturn, useCopyToClipboard };

package/dist/hooks/use-copy-to-clipboard/use-copy-to-clipboard.js

@@ -0,0 +1,27 @@
+// src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts
+import { useState, useCallback } from "react";
+function useCopyToClipboard() {
+  const [copiedText, setCopiedText] = useState(null);
+  const copy = useCallback(
+    async (text) => {
+      if (!navigator?.clipboard) {
+        console.warn("Clipboard not supported");
+        return false;
+      }
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopiedText(text);
+        return true;
+      } catch (error) {
+        console.warn("Copy failed", error);
+        setCopiedText(null);
+        return false;
+      }
+    },
+    [setCopiedText]
+  );
+  return { copy, copiedText };
+}
+export {
+  useCopyToClipboard
+};

package/dist/hooks/use-countdown-date/index.d.ts

@@ -0,0 +1 @@
+export { UseCountdownDateReturn, useCountdownDate } from './use-countdown-date.js';

package/dist/hooks/use-countdown-date/index.js

@@ -0,0 +1 @@
+export * from './use-countdown-date';

package/dist/hooks/use-countdown-date/use-countdown-date.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Custom hook to create a countdown timer to a target date.
+ *
+ * @param {Date} targetDate - The target date to count down to.
+ * @param {string} [placeholder='- -'] - The placeholder value to display before the countdown starts.
+ *
+ * @returns {UseCountdownDateReturn} - An object containing the current countdown values in days, hours, minutes, and seconds.
+ *
+ * @example
+ * const { days, hours, minutes, seconds } = useCountdownDate(new Date('2023-12-31T23:59:59'));
+ *
+ * return (
+ *   <div>
+ *     <p>Days: {days}</p>
+ *     <p>Hours: {hours}</p>
+ *     <p>Minutes: {minutes}</p>
+ *     <p>Seconds: {seconds}</p>
+ *   </div>
+ * );
+ */
+type UseCountdownDateReturn = {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+};
+declare function useCountdownDate(targetDate: Date, placeholder?: string): UseCountdownDateReturn;
+
+export { type UseCountdownDateReturn, useCountdownDate };

package/dist/hooks/use-countdown-date/use-countdown-date.js

@@ -0,0 +1,41 @@
+// src/hooks/use-countdown-date/use-countdown-date.ts
+import { useState, useEffect, useCallback } from "react";
+function useCountdownDate(targetDate, placeholder = "- -") {
+  const [value, setValue] = useState({
+    days: placeholder,
+    hours: placeholder,
+    minutes: placeholder,
+    seconds: placeholder
+  });
+  const handleUpdate = useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    const { days, hours, minutes, seconds } = calculateTimeDifference(targetDate, now);
+    setValue({
+      days: formatTime(days),
+      hours: formatTime(hours),
+      minutes: formatTime(minutes),
+      seconds: formatTime(seconds)
+    });
+  }, [targetDate]);
+  useEffect(() => {
+    handleUpdate();
+    const interval = setInterval(handleUpdate, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  return value;
+}
+function formatTime(value) {
+  return String(value).length === 1 ? `0${value}` : `${value}`;
+}
+function calculateTimeDifference(futureDate, currentDate) {
+  const distance = futureDate.getTime() - currentDate.getTime();
+  return {
+    days: Math.floor(distance / (1e3 * 60 * 60 * 24)),
+    hours: Math.floor(distance % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+    minutes: Math.floor(distance % (1e3 * 60 * 60) / (1e3 * 60)),
+    seconds: Math.floor(distance % (1e3 * 60) / 1e3)
+  };
+}
+export {
+  useCountdownDate
+};

package/dist/hooks/use-countdown-seconds/index.d.ts

@@ -0,0 +1,2 @@
+export { UseCountdownSecondsReturn, useCountdownSeconds } from './use-countdown-seconds.js';
+import 'react';

package/dist/hooks/use-countdown-seconds/index.js

@@ -0,0 +1 @@
+export * from './use-countdown-seconds';

package/dist/hooks/use-countdown-seconds/use-countdown-seconds.d.ts

@@ -0,0 +1,35 @@
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to create a countdown timer in seconds.
+ *
+ * @param {number} defaultValue - The initial countdown value in seconds.
+ *
+ * @returns {UseCountdownSecondsReturn} - An object containing:
+ * - `value`: The current countdown value in seconds.
+ * - `start`: A function to start the countdown.
+ * - `reset`: A function to reset the countdown to the initial value.
+ * - `isCounting`: A boolean indicating whether the countdown is currently active.
+ * - `setValue`: A function to manually set the countdown value.
+ *
+ * @example
+ * const { value, start, reset, isCounting } = useCountdownSeconds(30);
+ *
+ * return (
+ *   <div>
+ *     <p>Countdown: {value} seconds</p>
+ *     <button onClick={start} disabled={isCounting}>Start</button>
+ *     <button onClick={reset}>Reset</button>
+ *   </div>
+ * );
+ */
+type UseCountdownSecondsReturn = {
+    value: number;
+    start: () => void;
+    reset: () => void;
+    isCounting: boolean;
+    setValue: Dispatch<SetStateAction<number>>;
+};
+declare function useCountdownSeconds(defaultValue: number): UseCountdownSecondsReturn;
+
+export { type UseCountdownSecondsReturn, useCountdownSeconds };