@chekinapp/ui 0.0.26 → 0.0.29

package/dist/index.js

@@ -2613,32 +2613,46 @@ var useTimer = ({ seconds }) => {
 };
 
 // src/hooks/use-timeout.ts
-import { useCallback as useCallback9, useEffect as useEffect15, useRef as useRef9 } from "react";
-function useTimeout() {
-  const timeoutRef = useRef9();
-  const clearTimeoutRef = useCallback9(() => {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = void 0;
-  }, []);
-  const scheduleTimeout = useCallback9(
-    (callback, delay) => {
-      clearTimeoutRef();
-      timeoutRef.current = setTimeout(callback, delay);
-    },
-    [clearTimeoutRef]
-  );
-  useEffect15(() => clearTimeoutRef, [clearTimeoutRef]);
-  return { scheduleTimeout, clearTimeoutRef };
+import { useEffect as useEffect15, useMemo as useMemo2, useRef as useRef9 } from "react";
+function useTimeout(callback, ms = 0) {
+  const timeoutId = useRef9();
+  const memoizedCallback = useEvent(callback);
+  const handler = useMemo2(() => {
+    return {
+      start(overrideMs) {
+        handler.stop();
+        timeoutId.current = setTimeout(
+          memoizedCallback,
+          overrideMs === void 0 ? ms : overrideMs
+        );
+      },
+      stop() {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+        }
+      },
+      restart() {
+        handler.stop();
+        handler.start();
+      }
+    };
+  }, [memoizedCallback, ms]);
+  useEffect15(() => {
+    return () => {
+      handler.stop();
+    };
+  }, [handler]);
+  return handler;
 }
 
 // src/hooks/use-hover.ts
-import { useCallback as useCallback10, useState as useState12 } from "react";
+import { useCallback as useCallback9, useState as useState12 } from "react";
 function useHover() {
   const [isHovering, setIsHovering] = useState12(false);
-  const handleMouseEnter = useCallback10(() => {
+  const handleMouseEnter = useCallback9(() => {
     setIsHovering(true);
   }, []);
-  const handleMouseLeave = useCallback10(() => {
+  const handleMouseLeave = useCallback9(() => {
     setIsHovering(false);
   }, []);
   return {
@@ -2648,11 +2662,60 @@ function useHover() {
   };
 }
 
+// src/hooks/use-key-down.ts
+import { useCallback as useCallback10, useEffect as useEffect16 } from "react";
+function useKeyDown(key, cb, options) {
+  const {
+    enabled = true,
+    metaKey = false,
+    ctrlKey = false,
+    shiftKey = false,
+    altKey = false
+  } = options ?? {};
+  const handleCallback = useEvent(cb);
+  const handleKeyDown = useCallback10(
+    (event) => {
+      const keys = Array.isArray(key) ? key : [key];
+      const isKeyMatch = keys.includes(event.key);
+      const isModifierMatch = event.metaKey === metaKey && event.ctrlKey === ctrlKey && event.shiftKey === shiftKey && event.altKey === altKey;
+      if (isKeyMatch && isModifierMatch) {
+        handleCallback(event);
+      }
+    },
+    [key, handleCallback, metaKey, ctrlKey, shiftKey, altKey]
+  );
+  useEffect16(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown, enabled]);
+}
+
+// src/hooks/use-reset-after-request-status.ts
+import { useEffect as useEffect17, useRef as useRef10 } from "react";
+var ResetStatusTimeoutMs = 2e3;
+function useResetAfterRequestStatus({ status, reset }) {
+  const stateTimeoutRef = useRef10();
+  const handleReset = useEvent(reset);
+  const isNotIdle = ["success", "error"].includes(status);
+  useEffect17(() => {
+    if (isNotIdle) {
+      stateTimeoutRef.current = setTimeout(handleReset, ResetStatusTimeoutMs);
+      return () => {
+        clearTimeout(stateTimeoutRef.current);
+      };
+    }
+  }, [handleReset, isNotIdle]);
+  return { isNotIdle };
+}
+
 // src/hooks/use-promised-modal-controls.ts
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 var usePromisedModalControls = () => {
   const { closeModal, isOpen, openModal } = useModalControls();
-  const resolveRef = useRef10();
+  const resolveRef = useRef11();
   const openModalWithPromise = async () => {
     openModal();
     return new Promise((resolve) => {
@@ -2667,6 +2730,56 @@ var usePromisedModalControls = () => {
   };
 };
 
+// src/hooks/use-is-form-touched.ts
+import { useState as useState13 } from "react";
+function useIsFormTouched({
+  watch,
+  displayFields,
+  debug,
+  defaultValues
+}) {
+  const [untouchedValues, setUntouchedValues] = useState13(defaultValues || {});
+  const getIsFormTouched = () => {
+    if (!Object.keys(untouchedValues)) {
+      return false;
+    }
+    return Object.keys(untouchedValues).some((field) => {
+      if (!displayFields[field] || watch(field) === void 0) {
+        return false;
+      }
+      if (watch(field)?.value && untouchedValues[field]?.value) {
+        if (debug) {
+          console.log({
+            res: untouchedValues[field]?.value !== watch(field)?.value,
+            [field]: { form: watch(field), untouched: untouchedValues[field] }
+          });
+        }
+        return untouchedValues[field]?.value !== watch(field)?.value;
+      }
+      if (watch(field) instanceof Array || watch(field) instanceof Object) {
+        if (debug) {
+          console.log({
+            res: JSON.stringify(untouchedValues[field]) !== JSON.stringify(watch(field)),
+            [field]: { form: watch(field), untouched: untouchedValues[field] }
+          });
+        }
+        return JSON.stringify(untouchedValues[field]) !== JSON.stringify(watch(field));
+      }
+      if (debug) {
+        console.log({
+          res: untouchedValues[field] !== watch(field),
+          [field]: { form: watch(field), untouched: untouchedValues[field] }
+        });
+      }
+      return untouchedValues[field] !== watch(field);
+    });
+  };
+  return {
+    setUntouchedValues,
+    isFormTouched: getIsFormTouched()
+  };
+}
+
 // src/dialog/Dialog.tsx
 import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function useIframeTitleFix(titleRef) {
@@ -2902,7 +3015,7 @@ function DownloadEntryFormsButton({
 }
 
 // src/dropdown-button/DropdownButton.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/dropdown-menu/DropdownMenu.tsx
 import * as React13 from "react";
@@ -2966,7 +3079,7 @@ function DropdownButton({
   modal,
   className
 }) {
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState14(false);
   return /* @__PURE__ */ jsxs25(DropdownMenu, { onOpenChange: setIsOpen, modal, children: [
     /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, children: typeof trigger === "function" ? trigger(isOpen) : trigger }),
     /* @__PURE__ */ jsx34(
@@ -3304,7 +3417,7 @@ var Switch = React15.forwardRef(
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/video-player/VideoPlayer.tsx
-import { useEffect as useEffect17, useRef as useRef12, useState as useState14 } from "react";
+import { useEffect as useEffect19, useRef as useRef13, useState as useState15 } from "react";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import {
   Loader2,
@@ -3328,20 +3441,20 @@ function VideoPlayer({
   autoPlay = false
 }) {
   const { t } = useTranslation8();
-  const videoRef = useRef12(null);
-  const iframeRef = useRef12(null);
-  const containerRef = useRef12(null);
-  const [isPlaying, setIsPlaying] = useState14(false);
-  const [isMuted, setIsMuted] = useState14(false);
-  const [currentTime, setCurrentTime] = useState14(0);
-  const [duration, setDuration] = useState14(0);
-  const [isFullScreenMode, setIsFullScreenMode] = useState14(isFullScreen);
-  const [isLoading, setIsLoading] = useState14(true);
-  const [videoSource, setVideoSource] = useState14("file");
-  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = useState14("");
-  const [vimeoEmbedUrl, setVimeoEmbedUrl] = useState14("");
+  const videoRef = useRef13(null);
+  const iframeRef = useRef13(null);
+  const containerRef = useRef13(null);
+  const [isPlaying, setIsPlaying] = useState15(false);
+  const [isMuted, setIsMuted] = useState15(false);
+  const [currentTime, setCurrentTime] = useState15(0);
+  const [duration, setDuration] = useState15(0);
+  const [isFullScreenMode, setIsFullScreenMode] = useState15(isFullScreen);
+  const [isLoading, setIsLoading] = useState15(true);
+  const [videoSource, setVideoSource] = useState15("file");
+  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = useState15("");
+  const [vimeoEmbedUrl, setVimeoEmbedUrl] = useState15("");
   useClickEscape({ enabled: isFullScreenMode, onClick: onClose });
-  useEffect17(() => {
+  useEffect19(() => {
     const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/;
     const vimeoRegex = /(?:vimeo\.com\/|vimeo\.com\/video\/)(\d+)/;
     const youtubeMatch = src.match(youtubeRegex);
@@ -3370,7 +3483,7 @@ function VideoPlayer({
     setYoutubeEmbedUrl("");
     setVimeoEmbedUrl("");
   }, [src, autoPlay]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (videoSource !== "file") return;
     const video = videoRef.current;
     if (!video) return;
@@ -3398,7 +3511,7 @@ function VideoPlayer({
       video.removeEventListener("canplay", handleCanPlay);
     };
   }, [videoSource]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (isFullScreenMode && videoRef.current && videoSource === "file") {
       void videoRef.current.play();
       setIsPlaying(true);
@@ -3776,7 +3889,7 @@ var FormBox = {
 import {
   forwardRef as forwardRef20,
   useId as useId4,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { useTranslation as useTranslation10 } from "react-i18next";
 
@@ -3808,8 +3921,8 @@ var FreeTextField = forwardRef20(
   }, ref) => {
     const { t } = useTranslation10();
     const inputId = useId4();
-    const [internalValue, setInternalValue] = useState15(defaultValue ?? "");
-    const [isFocused, setIsFocused] = useState15(false);
+    const [internalValue, setInternalValue] = useState16(defaultValue ?? "");
+    const [isFocused, setIsFocused] = useState16(false);
     const currentValue = value !== void 0 ? value : internalValue;
     const isEmpty = !currentValue || String(currentValue).length === 0;
     const hasError = Boolean(error);
@@ -4141,7 +4254,7 @@ function InfoBox({ className, children }) {
 }
 
 // src/image/Image.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 function Image2({
   src,
@@ -4150,7 +4263,7 @@ function Image2({
   fallbackSrc = "https://placehold.co/600x400?text=Image",
   ...props
 }) {
-  const [error, setError] = useState16(false);
+  const [error, setError] = useState17(false);
   return /* @__PURE__ */ jsx59(
     "img",
     {
@@ -4209,7 +4322,7 @@ function extractDigits(str) {
 }
 
 // src/input-otp/useInputOTP.ts
-import { useCallback as useCallback12, useEffect as useEffect18, useMemo as useMemo2, useRef as useRef13, useState as useState17 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect20, useMemo as useMemo3, useRef as useRef14, useState as useState18 } from "react";
 function useInputOTP({
   maxLength,
   value,
@@ -4218,12 +4331,12 @@ function useInputOTP({
   autoFocus,
   error
 }) {
-  const [activeIndex, setActiveIndex] = useState17(-1);
-  const inputRefs = useRef13([]);
-  const containerRef = useRef13(null);
-  const blurTimeoutRef = useRef13();
-  const slotsRef = useRef13(Array.from({ length: maxLength }, () => ""));
-  const slots = useMemo2(() => {
+  const [activeIndex, setActiveIndex] = useState18(-1);
+  const inputRefs = useRef14([]);
+  const containerRef = useRef14(null);
+  const blurTimeoutRef = useRef14();
+  const slotsRef = useRef14(Array.from({ length: maxLength }, () => ""));
+  const slots = useMemo3(() => {
     const nextSlots = Array.from({ length: maxLength }, () => "");
     for (let index = 0; index < Math.min(value.length, maxLength); index += 1) {
       const char = value[index];
@@ -4255,7 +4368,7 @@ function useInputOTP({
     },
     [onChange]
   );
-  useEffect18(() => {
+  useEffect20(() => {
     if (autoFocus && inputRefs.current[0]) {
       inputRefs.current[0].focus();
     }
@@ -4276,7 +4389,7 @@ function useInputOTP({
       }
     }, 0);
   }, []);
-  useEffect18(() => () => clearTimeout(blurTimeoutRef.current), []);
+  useEffect20(() => () => clearTimeout(blurTimeoutRef.current), []);
   const handleDigitInput = useCallback12(
     (index, digit) => {
       if (!DIGIT_REGEX.test(digit)) return;
@@ -4322,7 +4435,7 @@ function useInputOTP({
     },
     [maxLength, emitValue]
   );
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({
       slots,
       activeIndex,
@@ -4535,7 +4648,7 @@ var InputOTPSeparator = React19.forwardRef(
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/icons-dropdown/IconsDropdown.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
 function IconsDropdown({
   icons,
@@ -4547,7 +4660,7 @@ function IconsDropdown({
   defaultOpen,
   onOpenChange: onOpenChangeProp
 }) {
-  const [open, setOpen] = useState18(defaultOpen ?? false);
+  const [open, setOpen] = useState19(defaultOpen ?? false);
   function handleOpenChange(value) {
     setOpen(value);
     onOpenChangeProp?.(value);
@@ -5154,14 +5267,14 @@ LinkInternal.displayName = "Link";
 var Link = memo3(LinkInternal);
 
 // src/image-full-screen-view/ImageFullScreenView.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { RotateCw, X as X4, ZoomIn, ZoomOut } from "lucide-react";
 import { useTranslation as useTranslation13 } from "react-i18next";
 import { jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
 function ImageFullScreenView({ src, alt, onClose }) {
   const { t } = useTranslation13();
-  const [scale, setScale] = useState19(1);
-  const [rotation, setRotation] = useState19(0);
+  const [scale, setScale] = useState20(1);
+  const [rotation, setRotation] = useState20(0);
   useClickEscape({ onClick: onClose });
   const zoomIn = () => setScale((value) => Math.min(value + 0.25, 3));
   const zoomOut = () => setScale((value) => Math.max(value - 0.25, 0.5));
@@ -5359,7 +5472,7 @@ var METRIC_CARD_VARIANTS = {
 };
 
 // src/modal/Modal.tsx
-import { forwardRef as forwardRef28, useRef as useRef14 } from "react";
+import { forwardRef as forwardRef28, useRef as useRef15 } from "react";
 import { X as X5 } from "lucide-react";
 
 // src/modal/styles.module.css
@@ -5390,7 +5503,7 @@ function Modal({
   container,
   modal
 }) {
-  const contentRef = useRef14(null);
+  const contentRef = useRef15(null);
   useScrollFrameIntoView(open, { elementRef: contentRef });
   const handleClose = () => {
     onOpenChange?.(false);
@@ -5871,10 +5984,10 @@ var RadioGroupItem = React22.forwardRef(({ className, ...props }, ref) => /* @__
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/radio/useRadioOptions.ts
-import { useCallback as useCallback14, useState as useState20 } from "react";
+import { useCallback as useCallback14, useState as useState21 } from "react";
 function useRadioOptions({ options, defaultValue, onChange }) {
   const initialValue = (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
-  const [selectedValue, setSelectedValue] = useState20(initialValue);
+  const [selectedValue, setSelectedValue] = useState21(initialValue);
   const handleValueChange = useCallback14(
     (value) => {
       setSelectedValue(value);
@@ -6379,7 +6492,7 @@ import {
   cloneElement as cloneElement2,
   forwardRef as forwardRef34,
   isValidElement as isValidElement2,
-  useEffect as useEffect19
+  useEffect as useEffect21
 } from "react";
 
 // src/selector-button/styles.module.css
@@ -6498,7 +6611,7 @@ function SelectorsInternal({
     }
   };
   const isAnyActive = getValueArray(value).length > 0;
-  useEffect19(() => {
+  useEffect21(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
   return /* @__PURE__ */ jsxs56(Fragment8, { children: [
@@ -7556,7 +7669,7 @@ function SortingAction({
 }
 
 // src/status-button/StatusButton.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { useTranslation as useTranslation20 } from "react-i18next";
 import { AlertCircle as AlertCircle2, CheckCircle, Loader2 as Loader24 } from "lucide-react";
 import { jsx as jsx98, jsxs as jsxs62 } from "react/jsx-runtime";
@@ -7574,7 +7687,7 @@ function StatusButton({
   ...props
 }) {
   const { t } = useTranslation20();
-  const configMap = useMemo4(() => {
+  const configMap = useMemo5(() => {
     const defaultLoadingConfig = {
       text: loadingText ?? `${t("saving")}...`,
       icon: /* @__PURE__ */ jsx98(Loader24, { className: "h-4 w-4 animate-spin" }),
@@ -7976,10 +8089,10 @@ var TASK_VARIANTS = {
 import { Toaster, toast as toast2 } from "sonner";
 
 // src/toaster/useUpdateToast.ts
-import { useCallback as useCallback16, useRef as useRef16 } from "react";
+import { useCallback as useCallback16, useRef as useRef17 } from "react";
 import { toast } from "sonner";
 function useUpdateToast({ id }) {
-  const toastIdRef = useRef16("");
+  const toastIdRef = useRef17("");
   const getToastOptions = useCallback16(
     (options) => ({
       id: toastIdRef.current,
@@ -8095,7 +8208,7 @@ var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/toggle-group/Toggles.tsx
-import { forwardRef as forwardRef40, useEffect as useEffect21 } from "react";
+import { forwardRef as forwardRef40, useEffect as useEffect23 } from "react";
 import { jsx as jsx108, jsxs as jsxs69 } from "react/jsx-runtime";
 var getValueArray2 = (value) => {
   if (value) {
@@ -8170,7 +8283,7 @@ function TogglesInternal({
     }
   };
   const isAnyActive = getValueArray2(value).length > 0;
-  useEffect21(() => {
+  useEffect23(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
   const currentValue = getValueArray2(value).map((item) => String(item));
@@ -12018,6 +12131,7 @@ export {
   switchVariants,
   tabsListVariants,
   tabsTriggerVariants,
+  toCssSize,
   toast2 as toast,
   toggleVariants,
   uiKitI18nResources,
@@ -12030,14 +12144,17 @@ export {
   useDebouncedFunction,
   useEvent,
   useHover,
+  useIsFormTouched,
   useIsMobile,
   useIsMounted,
+  useKeyDown,
   useModalControls,
   useOutsideClick,
   usePagination,
   usePrevious,
   usePromisedModalControls,
   useRadioOptions,
+  useResetAfterRequestStatus,
   useScreenResize,
   useScrollFrameIntoView,
   useScrollToTop,