@undefine-ui/design-system 2.11.0 → 2.12.0

package/README.md

@@ -232,13 +232,13 @@ Ideal for splash screens, loading overlays, or brand storytelling moments.
 
 Everything is re-exported from `src/index.ts`. Key groups:
 
-| Group      | Exports                                                                                                                                                                    |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components | `CopyButton`, `HookForm` helpers (`Form`, `Field`, `RHFSwitch`, etc.), `Icon`, `Logo`, `LoadingScreen`, `Table`, `Upload`                                                  |
-| Hooks      | `useBoolean`, `useCopyToClipboard`, `useEventListener`, `useLocalStorage`, `useResponsive`, `useSettings`, `useSetState`, `useScrollOffsetTop`, `usePopover`               |
-| Contexts   | `SettingsProvider`, `SettingsContext`, `defaultSettings`, `SettingsValueProps`                                                                                             |
-| Theme      | `ThemeProvider`, `createTheme`, `colorSchemes`, `components`, `palette`, `radius`, `shadows`, `customSpacing`, utilities such as `varAlpha`, `bgGradient`, `hideScrollX/Y` |
-| Utilities  | `changeCase` helpers, `formatNumber`, `fullname-utils`, generic `helpers`                                                                                                  |
+| Group      | Exports                                                                                                                                                                      |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components | `CopyButton`, `HookForm` helpers (`Form`, `Field`, `RHFSwitch`, etc.), `Icon`, `Logo`, `LoadingScreen`, `Table`, `Upload`                                                    |
+| Hooks      | `useBoolean`, `useCopyToClipboard`, `useEventListener`, `useLocalStorage`, `useResponsive`, `useSettings`, `useSetState`, `useScrollOffsetTop`, `usePopover`, `useCountdown` |
+| Contexts   | `SettingsProvider`, `SettingsContext`, `defaultSettings`, `SettingsValueProps`                                                                                               |
+| Theme      | `ThemeProvider`, `createTheme`, `colorSchemes`, `components`, `palette`, `radius`, `shadows`, `customSpacing`, utilities such as `varAlpha`, `bgGradient`, `hideScrollX/Y`   |
+| Utilities  | `changeCase` helpers, `formatNumber`, `fullname-utils`, generic `helpers`                                                                                                    |
 
 You can also import the theme pieces directly to compose your own MUI theme or to extend tokens in Storybook.
 

package/dist/index.cjs

@@ -157,6 +157,8 @@ __export(index_exports, {
   updateCoreWithSettings: () => updateCoreWithSettings,
   useBoolean: () => useBoolean,
   useCopyToClipboard: () => useCopyToClipboard,
+  useCountdownDate: () => useCountdownDate,
+  useCountdownSeconds: () => useCountdownSeconds,
   useEventListener: () => useEventListener,
   useLocalStorage: () => useLocalStorage,
   usePopover: () => usePopover,
@@ -788,13 +790,89 @@ var useSetState = (initialState) => {
   return memoizedValue;
 };
 
-// src/hooks/useResponsive.ts
+// src/hooks/useCountdown.tsx
 var import_react7 = require("react");
+var useCountdownDate = (date) => {
+  const targetTime = typeof date === "number" ? date : typeof date === "string" ? new Date(date).valueOf() : date.valueOf();
+  const [countdown, setCountdown] = (0, import_react7.useState)({
+    days: "00",
+    hours: "00",
+    minutes: "00",
+    seconds: "00"
+  });
+  const setNewTime = (0, import_react7.useCallback)(() => {
+    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]);
+  (0, import_react7.useEffect)(() => {
+    setNewTime();
+    const interval = setInterval(setNewTime, 1e3);
+    return () => clearInterval(interval);
+  }, [setNewTime]);
+  return countdown;
+};
+var useCountdownSeconds = (initCountdown) => {
+  const [countdown, setCountdown] = (0, import_react7.useState)(initCountdown);
+  const intervalIdRef = (0, import_react7.useRef)(null);
+  const remainingSecondsRef = (0, import_react7.useRef)(initCountdown);
+  const startCountdown = (0, import_react7.useCallback)(() => {
+    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]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+      }
+    };
+  }, []);
+  const counting = countdown > 0 && countdown < initCountdown;
+  return {
+    counting,
+    countdown,
+    startCountdown,
+    setCountdown
+  };
+};
+
+// src/hooks/useResponsive.ts
+var import_react8 = require("react");
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"), 1);
 var import_styles = require("@mui/material/styles");
 var useResponsive = (query, start, end) => {
   const theme = (0, import_styles.useTheme)();
-  const getQuery = (0, import_react7.useMemo)(() => {
+  const getQuery = (0, import_react8.useMemo)(() => {
     switch (query) {
       case "up":
         return theme.breakpoints.up(start);
@@ -813,7 +891,7 @@ var useResponsive = (query, start, end) => {
 };
 var useWidth = () => {
   const theme = (0, import_styles.useTheme)();
-  const keys = (0, import_react7.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
+  const keys = (0, import_react8.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
   const width = keys.reduce((output, key) => {
     const matches = (0, import_useMediaQuery.default)(theme.breakpoints.up(key));
     return !output && matches ? key : output;
@@ -822,19 +900,19 @@ var useWidth = () => {
 };
 
 // src/hooks/useEventListener.ts
-var import_react8 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react8.useLayoutEffect : import_react8.useEffect;
+var import_react9 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react9.useLayoutEffect : import_react9.useEffect;
 var useEventListener = ({
   eventName,
   handler,
   element,
   options
 }) => {
-  const savedHandler = (0, import_react8.useRef)(handler);
+  const savedHandler = (0, import_react9.useRef)(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const targetElement = element?.current || window;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
@@ -848,11 +926,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = (0, import_react9.useState)("");
-  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
-  const copy = (0, import_react9.useCallback)(
+  const [copiedText, setCopiedText] = (0, import_react10.useState)("");
+  const [isCopied, setIsCopied] = (0, import_react10.useState)(false);
+  const copy = (0, import_react10.useCallback)(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -872,7 +950,7 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = (0, import_react9.useMemo)(
+  const memoizedValue = (0, import_react10.useMemo)(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
@@ -880,11 +958,11 @@ var useCopyToClipboard = () => {
 };
 
 // src/hooks/useScrollOffsetTop.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var useScrollOffSetTop = (top = 0) => {
-  const elementRef = (0, import_react10.useRef)(null);
-  const [offsetTop, setOffsetTop] = (0, import_react10.useState)(false);
-  const handleScrollChange = (0, import_react10.useCallback)(() => {
+  const elementRef = (0, import_react11.useRef)(null);
+  const [offsetTop, setOffsetTop] = (0, import_react11.useState)(false);
+  const handleScrollChange = (0, import_react11.useCallback)(() => {
     const scrollHeight = Math.round(window.scrollY);
     if (elementRef?.current) {
       const rect = elementRef.current.getBoundingClientRect();
@@ -894,14 +972,14 @@ var useScrollOffSetTop = (top = 0) => {
       setOffsetTop(scrollHeight > top);
     }
   }, [top]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     handleScrollChange();
     window.addEventListener("scroll", handleScrollChange, { passive: true });
     return () => {
       window.removeEventListener("scroll", handleScrollChange);
     };
   }, [handleScrollChange]);
-  const memoizedValue = (0, import_react10.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
+  const memoizedValue = (0, import_react11.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
   return memoizedValue;
 };
 
@@ -6346,7 +6424,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
@@ -6414,7 +6492,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react11.useRef)(null);
+  const scrollRef = (0, import_react12.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -6867,7 +6945,7 @@ var RHFUpload = ({ name, multiple, helperText, ...rest }) => {
 var import_react_hook_form4 = require("react-hook-form");
 
 // src/components/OTPInput/index.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_styles37 = require("@mui/material/styles");
 var import_Box13 = __toESM(require("@mui/material/Box"), 1);
 var import_FormHelperText3 = __toESM(require("@mui/material/FormHelperText"), 1);
@@ -6877,8 +6955,8 @@ var import_jsx_runtime53 = require("react/jsx-runtime");
 var OTPInput = (props) => {
   const { length = 6, onChange, onComplete, error: error2, helperText, containerProps, ...rest } = props;
   const theme = (0, import_styles37.useTheme)();
-  const [otp, setOtp] = (0, import_react12.useState)(Array(length).fill(""));
-  const inputsRef = (0, import_react12.useRef)([]);
+  const [otp, setOtp] = (0, import_react13.useState)(Array(length).fill(""));
+  const inputsRef = (0, import_react13.useRef)([]);
   const handleChange = (value, index) => {
     if (!/^[0-9]$/.test(value) && value !== "") return;
     const newOtp = [...otp];
@@ -7592,6 +7670,8 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   updateCoreWithSettings,
   useBoolean,
   useCopyToClipboard,
+  useCountdownDate,
+  useCountdownSeconds,
   useEventListener,
   useLocalStorage,
   usePopover,