@undefine-ui/design-system 2.11.0 → 2.12.0

package/dist/index.d.cts

@@ -234,6 +234,115 @@ type UseSetStateReturnType<T> = {
  */
 declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
 
+interface CountdownState {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+/**
+ * A custom hook for creating a countdown timer to a specific date/time.
+ *
+ * Calculates and returns the time remaining until a target date, automatically
+ * updating every second. Returns zero values when the target time is reached.
+ *
+ * @param date - The target date/time as a Date object, ISO string, or Unix timestamp
+ *
+ * @returns An object containing:
+ * - `days` (string): Days remaining, zero-padded (e.g., "00", "05", "12")
+ * - `hours` (string): Hours remaining, zero-padded (e.g., "00", "23")
+ * - `minutes` (string): Minutes remaining, zero-padded (e.g., "00", "59")
+ * - `seconds` (string): Seconds remaining, zero-padded (e.g., "00", "59")
+ *
+ * @example
+ * ```tsx
+ * function EventCountdown() {
+ *   const countdown = useCountdownDate(new Date('2025-12-31T23:59:59'));
+ *
+ *   return (
+ *     <div>
+ *       <h2>Time Until New Year:</h2>
+ *       <p>
+ *         {countdown.days} days, {countdown.hours} hours,
+ *         {countdown.minutes} minutes, {countdown.seconds} seconds
+ *       </p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using Unix timestamp
+ * const countdown = useCountdownDate(1735689599000);
+ *
+ * // Using ISO string
+ * const countdown = useCountdownDate('2025-12-31T23:59:59Z');
+ * ```
+ */
+declare const useCountdownDate: (date: Date | string | number) => CountdownState;
+interface UseCountdownSecondsReturn {
+    counting: boolean;
+    countdown: number;
+    startCountdown: () => void;
+    setCountdown: React.Dispatch<React.SetStateAction<number>>;
+}
+/**
+ * A custom hook for creating a countdown timer that counts down from a specified number of seconds.
+ *
+ * Provides manual control to start the countdown and tracks whether counting is in progress.
+ * Automatically cleans up intervals on unmount.
+ *
+ * @param initCountdown - Initial number of seconds for the countdown
+ *
+ * @returns An object containing:
+ * - `counting` (boolean): Whether countdown is actively running (between 0 and initCountdown)
+ * - `countdown` (number): Current countdown value in seconds
+ * - `startCountdown` (function): Function to start or restart the countdown
+ * - `setCountdown` (function): Direct setter for the countdown value
+ *
+ * @example
+ * ```tsx
+ * function OTPTimer() {
+ *   const { countdown, counting, startCountdown } = useCountdownSeconds(60);
+ *
+ *   return (
+ *     <div>
+ *       <p>Resend code in: {countdown}s</p>
+ *       <button onClick={startCountdown} disabled={counting}>
+ *         {counting ? 'Waiting...' : 'Resend Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function SessionTimer() {
+ *   const { countdown, counting, startCountdown, setCountdown } = useCountdownSeconds(300);
+ *
+ *   useEffect(() => {
+ *     // Start countdown when component mounts
+ *     startCountdown();
+ *   }, [startCountdown]);
+ *
+ *   const extendSession = () => {
+ *     // Add 60 more seconds
+ *     setCountdown((prev) => prev + 60);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Session expires in: {Math.floor(countdown / 60)}:{countdown % 60}</p>
+ *       <button onClick={extendSession}>Extend Session</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useCountdownSeconds: (initCountdown: number) => UseCountdownSecondsReturn;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
@@ -1817,4 +1926,4 @@ interface LoadingScreenProps extends BoxProps {
 declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.d.ts

@@ -234,6 +234,115 @@ type UseSetStateReturnType<T> = {
  */
 declare const useSetState: <T extends Record<string, any>>(initialState: T) => UseSetStateReturnType<T>;
 
+interface CountdownState {
+    days: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+}
+/**
+ * A custom hook for creating a countdown timer to a specific date/time.
+ *
+ * Calculates and returns the time remaining until a target date, automatically
+ * updating every second. Returns zero values when the target time is reached.
+ *
+ * @param date - The target date/time as a Date object, ISO string, or Unix timestamp
+ *
+ * @returns An object containing:
+ * - `days` (string): Days remaining, zero-padded (e.g., "00", "05", "12")
+ * - `hours` (string): Hours remaining, zero-padded (e.g., "00", "23")
+ * - `minutes` (string): Minutes remaining, zero-padded (e.g., "00", "59")
+ * - `seconds` (string): Seconds remaining, zero-padded (e.g., "00", "59")
+ *
+ * @example
+ * ```tsx
+ * function EventCountdown() {
+ *   const countdown = useCountdownDate(new Date('2025-12-31T23:59:59'));
+ *
+ *   return (
+ *     <div>
+ *       <h2>Time Until New Year:</h2>
+ *       <p>
+ *         {countdown.days} days, {countdown.hours} hours,
+ *         {countdown.minutes} minutes, {countdown.seconds} seconds
+ *       </p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using Unix timestamp
+ * const countdown = useCountdownDate(1735689599000);
+ *
+ * // Using ISO string
+ * const countdown = useCountdownDate('2025-12-31T23:59:59Z');
+ * ```
+ */
+declare const useCountdownDate: (date: Date | string | number) => CountdownState;
+interface UseCountdownSecondsReturn {
+    counting: boolean;
+    countdown: number;
+    startCountdown: () => void;
+    setCountdown: React.Dispatch<React.SetStateAction<number>>;
+}
+/**
+ * A custom hook for creating a countdown timer that counts down from a specified number of seconds.
+ *
+ * Provides manual control to start the countdown and tracks whether counting is in progress.
+ * Automatically cleans up intervals on unmount.
+ *
+ * @param initCountdown - Initial number of seconds for the countdown
+ *
+ * @returns An object containing:
+ * - `counting` (boolean): Whether countdown is actively running (between 0 and initCountdown)
+ * - `countdown` (number): Current countdown value in seconds
+ * - `startCountdown` (function): Function to start or restart the countdown
+ * - `setCountdown` (function): Direct setter for the countdown value
+ *
+ * @example
+ * ```tsx
+ * function OTPTimer() {
+ *   const { countdown, counting, startCountdown } = useCountdownSeconds(60);
+ *
+ *   return (
+ *     <div>
+ *       <p>Resend code in: {countdown}s</p>
+ *       <button onClick={startCountdown} disabled={counting}>
+ *         {counting ? 'Waiting...' : 'Resend Code'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function SessionTimer() {
+ *   const { countdown, counting, startCountdown, setCountdown } = useCountdownSeconds(300);
+ *
+ *   useEffect(() => {
+ *     // Start countdown when component mounts
+ *     startCountdown();
+ *   }, [startCountdown]);
+ *
+ *   const extendSession = () => {
+ *     // Add 60 more seconds
+ *     setCountdown((prev) => prev + 60);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <p>Session expires in: {Math.floor(countdown / 60)}:{countdown % 60}</p>
+ *       <button onClick={extendSession}>Extend Session</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useCountdownSeconds: (initCountdown: number) => UseCountdownSecondsReturn;
+
 type ReturnType = boolean;
 type Query = 'up' | 'down' | 'between' | 'only';
 type Value = Breakpoint | number;
@@ -1817,4 +1926,4 @@ interface LoadingScreenProps extends BoxProps {
 declare const LoadingScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 declare const SplashScreen: ({ portal, sx, ...rest }: LoadingScreenProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };
+export { AnimatedLogo, BellNotification, CheckboxDefault, CheckboxIndeterminate, CheckboxSelect, ClipboardCheck, CloudUpload, type ColorSchema, Copy, CopyButton, type CustomShadowOptions, type CustomSpacingOptions, Eye, EyeClosed, Field, Form, Icon, type IconProps, type IconType, InfoCircleFill, InfoCircleOutline, KeyCommand, Loader, LoadingScreen, LocalStorageAvailable, LocalStorageGetItem, Logo, LongArrowUpLeftSolid, NavArrowDown, NavArrowLeft, NavArrowRight, OTPInput, type OTPInputProps, RHFAutocomplete, type RHFAutocompleteProps, RHFCheckbox, type RHFCheckboxProps, RHFMultiCheckbox, type RHFMultiCheckboxOption, type RHFMultiCheckboxProps, RHFMultiSwitch, RHFOTPInput, type RHFOTPInputProps, RHFRadioGroup, type RHFRadioGroupProps, RHFSwitch, RHFTextField, RHFUpload, type RHFUploadProps, RadioDefault, RadioSelect, type RadiusOptions, STORAGE_KEY, Search, Settings, SettingsConsumer, SettingsContext, type SettingsContextProps, SettingsProvider, type SettingsValueProps, SplashScreen, Table, type TableNoRowsProps, TablePagination, ThemeProvider, Trash, Upload, type UploadProps, type UseBooleanReturnType, type UseSetStateReturnType, UserFill, UserOutline, XMark, XMarkSolid, action, background, baseAction, basePalette, bgBlur, bgGradient, border, borderGradient, breakpoints, colorSchemes, common, components, createPaletteChannel, createShadowColor, createTheme, customShadows, customSpacing, darkPalette, defaultSettings, error, fCurrency, fData, fNumber, fPercent, fShortenNumber, formatFullname, getCurrencySymbol, getInitColorSchemeScript, getInitials, getStorage, grey, hexToRgbChannel, hideScrollX, hideScrollY, icon, iconClasses, info, isEqual, lightPalette, maxLine, mediaQueries, menuItem, neutral, orderBy, paper, paramCase, primary, primaryFont, pxToRem, radius, remToPx, removeStorage, responsiveFontSizes, schemeConfig, secondary, secondaryFont, sentenceCase, setFont, setStorage, shadows, snakeCase, splitFullname, stylesMode, success, surface, tertiaryFont, text, textGradient, typography, updateComponentsWithSettings, updateCoreWithSettings, useBoolean, useCopyToClipboard, useCountdownDate, useCountdownSeconds, useEventListener, useLocalStorage, usePopover, useResponsive, useScrollOffSetTop, useSetState, useSettings, useWidth, varAlpha, warning };

package/dist/index.js

@@ -622,6 +622,82 @@ var useSetState = (initialState) => {
   return memoizedValue;
 };
 
+// src/hooks/useCountdown.tsx
+import { useRef, useState as useState6, useEffect as useEffect2, useCallback as useCallback6 } from "react";
+var useCountdownDate = (date) => {
+  const targetTime = typeof date === "number" ? date : typeof date === "string" ? new Date(date).valueOf() : date.valueOf();
+  const [countdown, setCountdown] = useState6({
+    days: "00",
+    hours: "00",
+    minutes: "00",
+    seconds: "00"
+  });
+  const setNewTime = useCallback6(() => {
+    const now = Date.now();
+    const distanceToNow = targetTime - now;
+    if (distanceToNow <= 0) {
+      setCountdown({
+        days: "00",
+        hours: "00",
+        minutes: "00",
+        seconds: "00"
+      });
+      return;
+    }
+    const getDays = Math.floor(distanceToNow / (1e3 * 60 * 60 * 24));
+    const getHours = `0${Math.floor(distanceToNow % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60))}`.slice(-2);
+    const getMinutes = `0${Math.floor(distanceToNow % (1e3 * 60 * 60) / (1e3 * 60))}`.slice(-2);
+    const getSeconds = `0${Math.floor(distanceToNow % (1e3 * 60) / 1e3)}`.slice(-2);
+    setCountdown({
+      days: getDays < 10 ? `0${getDays}` : `${getDays}`,
+      hours: getHours,
+      minutes: getMinutes,
+      seconds: getSeconds
+    });
+  }, [targetTime]);
+  useEffect2(() => {
+    setNewTime();
+    const interval = setInterval(setNewTime, 1e3);
+    return () => clearInterval(interval);
+  }, [setNewTime]);
+  return countdown;
+};
+var useCountdownSeconds = (initCountdown) => {
+  const [countdown, setCountdown] = useState6(initCountdown);
+  const intervalIdRef = useRef(null);
+  const remainingSecondsRef = useRef(initCountdown);
+  const startCountdown = useCallback6(() => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current);
+    }
+    remainingSecondsRef.current = initCountdown;
+    setCountdown(initCountdown);
+    intervalIdRef.current = setInterval(() => {
+      remainingSecondsRef.current -= 1;
+      if (remainingSecondsRef.current <= 0) {
+        if (intervalIdRef.current) clearInterval(intervalIdRef.current);
+        setCountdown(0);
+      } else {
+        setCountdown(remainingSecondsRef.current);
+      }
+    }, 1e3);
+  }, [initCountdown]);
+  useEffect2(() => {
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+      }
+    };
+  }, []);
+  const counting = countdown > 0 && countdown < initCountdown;
+  return {
+    counting,
+    countdown,
+    startCountdown,
+    setCountdown
+  };
+};
+
 // src/hooks/useResponsive.ts
 import { useMemo as useMemo5 } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -656,19 +732,19 @@ var useWidth = () => {
 };
 
 // src/hooks/useEventListener.ts
-import { useRef, useEffect as useEffect2, useLayoutEffect } from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
+import { useRef as useRef2, useEffect as useEffect3, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect3;
 var useEventListener = ({
   eventName,
   handler,
   element,
   options
 }) => {
-  const savedHandler = useRef(handler);
+  const savedHandler = useRef2(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  useEffect2(() => {
+  useEffect3(() => {
     const targetElement = element?.current || window;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
@@ -682,11 +758,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-import { useMemo as useMemo6, useState as useState6, useCallback as useCallback6 } from "react";
+import { useMemo as useMemo6, useState as useState7, useCallback as useCallback7 } from "react";
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = useState6("");
-  const [isCopied, setIsCopied] = useState6(false);
-  const copy = useCallback6(
+  const [copiedText, setCopiedText] = useState7("");
+  const [isCopied, setIsCopied] = useState7(false);
+  const copy = useCallback7(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -714,11 +790,11 @@ var useCopyToClipboard = () => {
 };
 
 // src/hooks/useScrollOffsetTop.ts
-import { useRef as useRef2, useMemo as useMemo7, useState as useState7, useEffect as useEffect3, useCallback as useCallback7 } from "react";
+import { useRef as useRef3, useMemo as useMemo7, useState as useState8, useEffect as useEffect4, useCallback as useCallback8 } from "react";
 var useScrollOffSetTop = (top = 0) => {
-  const elementRef = useRef2(null);
-  const [offsetTop, setOffsetTop] = useState7(false);
-  const handleScrollChange = useCallback7(() => {
+  const elementRef = useRef3(null);
+  const [offsetTop, setOffsetTop] = useState8(false);
+  const handleScrollChange = useCallback8(() => {
     const scrollHeight = Math.round(window.scrollY);
     if (elementRef?.current) {
       const rect = elementRef.current.getBoundingClientRect();
@@ -728,7 +804,7 @@ var useScrollOffSetTop = (top = 0) => {
       setOffsetTop(scrollHeight > top);
     }
   }, [top]);
-  useEffect3(() => {
+  useEffect4(() => {
     handleScrollChange();
     window.addEventListener("scroll", handleScrollChange, { passive: true });
     return () => {
@@ -6187,7 +6263,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import Box9 from "@mui/material/Box";
 import IconButton2 from "@mui/material/IconButton";
 
@@ -6255,7 +6331,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = useRef3(null);
+  const scrollRef = useRef4(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6710,7 +6786,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
 
 // src/components/OTPInput/index.tsx
-import { useRef as useRef4, useState as useState8 } from "react";
+import { useRef as useRef5, useState as useState9 } from "react";
 import { useTheme as useTheme2 } from "@mui/material/styles";
 import Box13 from "@mui/material/Box";
 import FormHelperText3 from "@mui/material/FormHelperText";
@@ -6720,8 +6796,8 @@ import { Fragment, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = useTheme2();
-  const [otp, setOtp] = useState8(Array(length).fill(""));
-  const inputsRef = useRef4([]);
+  const [otp, setOtp] = useState9(Array(length).fill(""));
+  const inputsRef = useRef5([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
     const newOtp = [...otp];
@@ -7434,6 +7510,8 @@ export {
   updateCoreWithSettings,
   useBoolean,
   useCopyToClipboard,
+  useCountdownDate,
+  useCountdownSeconds,
   useEventListener,
   useLocalStorage,
   usePopover,