@chekinapp/ui 0.0.26 → 0.0.29

package/dist/index.cjs

@@ -290,6 +290,7 @@ __export(index_exports, {
   switchVariants: () => switchVariants,
   tabsListVariants: () => tabsListVariants,
   tabsTriggerVariants: () => tabsTriggerVariants,
+  toCssSize: () => toCssSize,
   toast: () => import_sonner2.toast,
   toggleVariants: () => toggleVariants,
   uiKitI18nResources: () => uiKitI18nResources,
@@ -302,14 +303,17 @@ __export(index_exports, {
   useDebouncedFunction: () => useDebouncedFunction,
   useEvent: () => useEvent,
   useHover: () => useHover,
+  useIsFormTouched: () => useIsFormTouched,
   useIsMobile: () => useIsMobile,
   useIsMounted: () => useIsMounted,
+  useKeyDown: () => useKeyDown,
   useModalControls: () => useModalControls,
   useOutsideClick: () => useOutsideClick,
   usePagination: () => usePagination,
   usePrevious: () => usePrevious,
   usePromisedModalControls: () => usePromisedModalControls,
   useRadioOptions: () => useRadioOptions,
+  useResetAfterRequestStatus: () => useResetAfterRequestStatus,
   useScreenResize: () => useScreenResize,
   useScrollFrameIntoView: () => useScrollFrameIntoView,
   useScrollToTop: () => useScrollToTop,
@@ -2927,21 +2931,35 @@ var useTimer = ({ seconds }) => {
 
 // src/hooks/use-timeout.ts
 var import_react25 = require("react");
-function useTimeout() {
-  const timeoutRef = (0, import_react25.useRef)();
-  const clearTimeoutRef = (0, import_react25.useCallback)(() => {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = void 0;
-  }, []);
-  const scheduleTimeout = (0, import_react25.useCallback)(
-    (callback, delay) => {
-      clearTimeoutRef();
-      timeoutRef.current = setTimeout(callback, delay);
-    },
-    [clearTimeoutRef]
-  );
-  (0, import_react25.useEffect)(() => clearTimeoutRef, [clearTimeoutRef]);
-  return { scheduleTimeout, clearTimeoutRef };
+function useTimeout(callback, ms = 0) {
+  const timeoutId = (0, import_react25.useRef)();
+  const memoizedCallback = useEvent(callback);
+  const handler = (0, import_react25.useMemo)(() => {
+    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]);
+  (0, import_react25.useEffect)(() => {
+    return () => {
+      handler.stop();
+    };
+  }, [handler]);
+  return handler;
 }
 
 // src/hooks/use-hover.ts
@@ -2961,11 +2979,60 @@ function useHover() {
   };
 }
 
-// src/hooks/use-promised-modal-controls.ts
+// src/hooks/use-key-down.ts
 var import_react27 = require("react");
+function useKeyDown(key, cb, options) {
+  const {
+    enabled = true,
+    metaKey = false,
+    ctrlKey = false,
+    shiftKey = false,
+    altKey = false
+  } = options ?? {};
+  const handleCallback = useEvent(cb);
+  const handleKeyDown = (0, import_react27.useCallback)(
+    (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]
+  );
+  (0, import_react27.useEffect)(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown, enabled]);
+}
+
+// src/hooks/use-reset-after-request-status.ts
+var import_react28 = require("react");
+var ResetStatusTimeoutMs = 2e3;
+function useResetAfterRequestStatus({ status, reset }) {
+  const stateTimeoutRef = (0, import_react28.useRef)();
+  const handleReset = useEvent(reset);
+  const isNotIdle = ["success", "error"].includes(status);
+  (0, import_react28.useEffect)(() => {
+    if (isNotIdle) {
+      stateTimeoutRef.current = setTimeout(handleReset, ResetStatusTimeoutMs);
+      return () => {
+        clearTimeout(stateTimeoutRef.current);
+      };
+    }
+  }, [handleReset, isNotIdle]);
+  return { isNotIdle };
+}
+
+// src/hooks/use-promised-modal-controls.ts
+var import_react29 = require("react");
 var usePromisedModalControls = () => {
   const { closeModal, isOpen, openModal } = useModalControls();
-  const resolveRef = (0, import_react27.useRef)();
+  const resolveRef = (0, import_react29.useRef)();
   const openModalWithPromise = async () => {
     openModal();
     return new Promise((resolve) => {
@@ -2980,6 +3047,56 @@ var usePromisedModalControls = () => {
   };
 };
 
+// src/hooks/use-is-form-touched.ts
+var import_react30 = require("react");
+function useIsFormTouched({
+  watch,
+  displayFields,
+  debug,
+  defaultValues
+}) {
+  const [untouchedValues, setUntouchedValues] = (0, import_react30.useState)(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
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function useIframeTitleFix(titleRef) {
@@ -3215,7 +3332,7 @@ function DownloadEntryFormsButton({
 }
 
 // src/dropdown-button/DropdownButton.tsx
-var import_react28 = require("react");
+var import_react31 = require("react");
 
 // src/dropdown-menu/DropdownMenu.tsx
 var React13 = __toESM(require("react"), 1);
@@ -3279,7 +3396,7 @@ function DropdownButton({
   modal,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenu, { onOpenChange: setIsOpen, modal, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenuTrigger, { asChild: true, children: typeof trigger === "function" ? trigger(isOpen) : trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3406,7 +3523,7 @@ var import_lucide_react12 = require("lucide-react");
 var import_react_i18next7 = require("react-i18next");
 
 // src/halo-icon/HaloIcon.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 
 // src/halo-icon/constants.ts
 var HALO_ICON_STATUS = {
@@ -3436,7 +3553,7 @@ var statusStyles = {
     color: "text-chekin-red"
   }
 };
-var HaloIcon = (0, import_react29.forwardRef)(
+var HaloIcon = (0, import_react32.forwardRef)(
   ({
     children,
     variant = "default",
@@ -3617,7 +3734,7 @@ var Switch = React15.forwardRef(
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/video-player/VideoPlayer.tsx
-var import_react30 = require("react");
+var import_react33 = require("react");
 var import_react_i18next8 = require("react-i18next");
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -3630,20 +3747,20 @@ function VideoPlayer({
   autoPlay = false
 }) {
   const { t } = (0, import_react_i18next8.useTranslation)();
-  const videoRef = (0, import_react30.useRef)(null);
-  const iframeRef = (0, import_react30.useRef)(null);
-  const containerRef = (0, import_react30.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react30.useState)(false);
-  const [isMuted, setIsMuted] = (0, import_react30.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react30.useState)(0);
-  const [duration, setDuration] = (0, import_react30.useState)(0);
-  const [isFullScreenMode, setIsFullScreenMode] = (0, import_react30.useState)(isFullScreen);
-  const [isLoading, setIsLoading] = (0, import_react30.useState)(true);
-  const [videoSource, setVideoSource] = (0, import_react30.useState)("file");
-  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = (0, import_react30.useState)("");
-  const [vimeoEmbedUrl, setVimeoEmbedUrl] = (0, import_react30.useState)("");
+  const videoRef = (0, import_react33.useRef)(null);
+  const iframeRef = (0, import_react33.useRef)(null);
+  const containerRef = (0, import_react33.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react33.useState)(false);
+  const [isMuted, setIsMuted] = (0, import_react33.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react33.useState)(0);
+  const [duration, setDuration] = (0, import_react33.useState)(0);
+  const [isFullScreenMode, setIsFullScreenMode] = (0, import_react33.useState)(isFullScreen);
+  const [isLoading, setIsLoading] = (0, import_react33.useState)(true);
+  const [videoSource, setVideoSource] = (0, import_react33.useState)("file");
+  const [youtubeEmbedUrl, setYoutubeEmbedUrl] = (0, import_react33.useState)("");
+  const [vimeoEmbedUrl, setVimeoEmbedUrl] = (0, import_react33.useState)("");
   useClickEscape({ enabled: isFullScreenMode, onClick: onClose });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     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);
@@ -3672,7 +3789,7 @@ function VideoPlayer({
     setYoutubeEmbedUrl("");
     setVimeoEmbedUrl("");
   }, [src, autoPlay]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (videoSource !== "file") return;
     const video = videoRef.current;
     if (!video) return;
@@ -3700,7 +3817,7 @@ function VideoPlayer({
       video.removeEventListener("canplay", handleCanPlay);
     };
   }, [videoSource]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (isFullScreenMode && videoRef.current && videoSource === "file") {
       void videoRef.current.play();
       setIsPlaying(true);
@@ -3977,10 +4094,10 @@ function FeatureCard({
 }
 
 // src/file-input-button/FileInputButton.tsx
-var import_react31 = require("react");
+var import_react34 = require("react");
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var FileInputButton = (0, import_react31.forwardRef)(
+var FileInputButton = (0, import_react34.forwardRef)(
   ({
     label,
     onChange,
@@ -3992,7 +4109,7 @@ var FileInputButton = (0, import_react31.forwardRef)(
     size = "default",
     ...props
   }, ref) => {
-    const handleChange = (0, import_react31.useCallback)(
+    const handleChange = (0, import_react34.useCallback)(
       (event) => {
         onChange?.(event);
         event.target.value = "";
@@ -4072,7 +4189,7 @@ var FormBox = {
 };
 
 // src/free-text-field/FreeTextField.tsx
-var import_react32 = require("react");
+var import_react35 = require("react");
 var import_react_i18next10 = require("react-i18next");
 
 // src/free-text-field/styles.module.css
@@ -4080,7 +4197,7 @@ var styles_default3 = {};
 
 // src/free-text-field/FreeTextField.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var FreeTextField = (0, import_react32.forwardRef)(
+var FreeTextField = (0, import_react35.forwardRef)(
   ({
     label,
     error,
@@ -4102,9 +4219,9 @@ var FreeTextField = (0, import_react32.forwardRef)(
     ...inputProps
   }, ref) => {
     const { t } = (0, import_react_i18next10.useTranslation)();
-    const inputId = (0, import_react32.useId)();
-    const [internalValue, setInternalValue] = (0, import_react32.useState)(defaultValue ?? "");
-    const [isFocused, setIsFocused] = (0, import_react32.useState)(false);
+    const inputId = (0, import_react35.useId)();
+    const [internalValue, setInternalValue] = (0, import_react35.useState)(defaultValue ?? "");
+    const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
     const currentValue = value !== void 0 ? value : internalValue;
     const isEmpty = !currentValue || String(currentValue).length === 0;
     const hasError = Boolean(error);
@@ -4227,9 +4344,9 @@ var FramedIcon = React16.forwardRef(
 FramedIcon.displayName = "FramedIcon";
 
 // src/grid-items/GridItems.tsx
-var import_react33 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var GridItems = (0, import_react33.forwardRef)(
+var GridItems = (0, import_react36.forwardRef)(
   ({ children, title, placeholder, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
@@ -4306,9 +4423,9 @@ function HelpTooltip({
 }
 
 // src/icon/Icon.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var MissingIcon = (0, import_react34.forwardRef)(
+var MissingIcon = (0, import_react37.forwardRef)(
   ({ size = 24, className = "", fallback = null, color, ...props }, ref) => {
     if (fallback) {
       return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: fallback });
@@ -4337,8 +4454,8 @@ var MissingIcon = (0, import_react34.forwardRef)(
   }
 );
 MissingIcon.displayName = "MissingIcon";
-var Icon = (0, import_react34.memo)(
-  (0, import_react34.forwardRef)(
+var Icon = (0, import_react37.memo)(
+  (0, import_react37.forwardRef)(
     ({ name: _name, size = 24, className = "", fallback = null, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       MissingIcon,
       {
@@ -4436,7 +4553,7 @@ function InfoBox({ className, children }) {
 }
 
 // src/image/Image.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function Image2({
   src,
@@ -4445,7 +4562,7 @@ function Image2({
   fallbackSrc = "https://placehold.co/600x400?text=Image",
   ...props
 }) {
-  const [error, setError] = (0, import_react35.useState)(false);
+  const [error, setError] = (0, import_react38.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "img",
     {
@@ -4489,10 +4606,10 @@ Input.displayName = "Input";
 var React19 = __toESM(require("react"), 1);
 
 // src/input-otp/InputOTPContext.ts
-var import_react36 = require("react");
-var InputOTPContext = (0, import_react36.createContext)(null);
+var import_react39 = require("react");
+var InputOTPContext = (0, import_react39.createContext)(null);
 function useInputOTPContext() {
-  const ctx = (0, import_react36.useContext)(InputOTPContext);
+  const ctx = (0, import_react39.useContext)(InputOTPContext);
   if (!ctx) {
     throw new Error("InputOTP compound components must be used within <InputOTP>");
   }
@@ -4504,7 +4621,7 @@ function extractDigits(str) {
 }
 
 // src/input-otp/useInputOTP.ts
-var import_react37 = require("react");
+var import_react40 = require("react");
 function useInputOTP({
   maxLength,
   value,
@@ -4513,12 +4630,12 @@ function useInputOTP({
   autoFocus,
   error
 }) {
-  const [activeIndex, setActiveIndex] = (0, import_react37.useState)(-1);
-  const inputRefs = (0, import_react37.useRef)([]);
-  const containerRef = (0, import_react37.useRef)(null);
-  const blurTimeoutRef = (0, import_react37.useRef)();
-  const slotsRef = (0, import_react37.useRef)(Array.from({ length: maxLength }, () => ""));
-  const slots = (0, import_react37.useMemo)(() => {
+  const [activeIndex, setActiveIndex] = (0, import_react40.useState)(-1);
+  const inputRefs = (0, import_react40.useRef)([]);
+  const containerRef = (0, import_react40.useRef)(null);
+  const blurTimeoutRef = (0, import_react40.useRef)();
+  const slotsRef = (0, import_react40.useRef)(Array.from({ length: maxLength }, () => ""));
+  const slots = (0, import_react40.useMemo)(() => {
     const nextSlots = Array.from({ length: maxLength }, () => "");
     for (let index = 0; index < Math.min(value.length, maxLength); index += 1) {
       const char = value[index];
@@ -4529,7 +4646,7 @@ function useInputOTP({
     return nextSlots;
   }, [value, maxLength]);
   slotsRef.current = slots;
-  const emitValue = (0, import_react37.useCallback)(
+  const emitValue = (0, import_react40.useCallback)(
     (newSlots) => {
       let lastFilledIndex = -1;
       for (let index = newSlots.length - 1; index >= 0; index -= 1) {
@@ -4550,12 +4667,12 @@ function useInputOTP({
     },
     [onChange]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (autoFocus && inputRefs.current[0]) {
       inputRefs.current[0].focus();
     }
   }, [autoFocus]);
-  const handleContainerFocusIn = (0, import_react37.useCallback)((event) => {
+  const handleContainerFocusIn = (0, import_react40.useCallback)((event) => {
     clearTimeout(blurTimeoutRef.current);
     const target = event.target;
     const slotIndex = inputRefs.current.indexOf(target);
@@ -4563,7 +4680,7 @@ function useInputOTP({
       setActiveIndex(slotIndex);
     }
   }, []);
-  const handleContainerFocusOut = (0, import_react37.useCallback)(() => {
+  const handleContainerFocusOut = (0, import_react40.useCallback)(() => {
     clearTimeout(blurTimeoutRef.current);
     blurTimeoutRef.current = setTimeout(() => {
       if (!containerRef.current?.contains(document.activeElement)) {
@@ -4571,8 +4688,8 @@ function useInputOTP({
       }
     }, 0);
   }, []);
-  (0, import_react37.useEffect)(() => () => clearTimeout(blurTimeoutRef.current), []);
-  const handleDigitInput = (0, import_react37.useCallback)(
+  (0, import_react40.useEffect)(() => () => clearTimeout(blurTimeoutRef.current), []);
+  const handleDigitInput = (0, import_react40.useCallback)(
     (index, digit) => {
       if (!DIGIT_REGEX.test(digit)) return;
       const newSlots = [...slotsRef.current];
@@ -4586,7 +4703,7 @@ function useInputOTP({
     },
     [maxLength, emitValue]
   );
-  const handleDelete = (0, import_react37.useCallback)(
+  const handleDelete = (0, import_react40.useCallback)(
     (index) => {
       const newSlots = [...slotsRef.current];
       if (newSlots[index]) {
@@ -4601,7 +4718,7 @@ function useInputOTP({
     },
     [emitValue]
   );
-  const handlePaste = (0, import_react37.useCallback)(
+  const handlePaste = (0, import_react40.useCallback)(
     (text) => {
       const digits = extractDigits(text).slice(0, maxLength);
       if (digits.length > 0) {
@@ -4617,7 +4734,7 @@ function useInputOTP({
     },
     [maxLength, emitValue]
   );
-  const contextValue = (0, import_react37.useMemo)(
+  const contextValue = (0, import_react40.useMemo)(
     () => ({
       slots,
       activeIndex,
@@ -4650,7 +4767,7 @@ function useInputOTP({
 }
 
 // src/input-otp/useInputOTPSlot.ts
-var import_react38 = require("react");
+var import_react41 = require("react");
 function useInputOTPSlot(index) {
   const {
     slots,
@@ -4720,13 +4837,13 @@ function useInputOTPSlot(index) {
     event.preventDefault();
     handlePaste(event.clipboardData.getData("text/plain"));
   };
-  const setInputRef = (0, import_react38.useCallback)(
+  const setInputRef = (0, import_react41.useCallback)(
     (element) => {
       inputRefs.current[index] = element;
     },
     [index, inputRefs]
   );
-  const focusSlot = (0, import_react38.useCallback)(() => {
+  const focusSlot = (0, import_react41.useCallback)(() => {
     inputRefs.current[index]?.focus();
   }, [index, inputRefs]);
   return {
@@ -4828,7 +4945,7 @@ var InputOTPSeparator = React19.forwardRef(
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/icons-dropdown/IconsDropdown.tsx
-var import_react39 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function IconsDropdown({
   icons,
@@ -4840,7 +4957,7 @@ function IconsDropdown({
   defaultOpen,
   onOpenChange: onOpenChangeProp
 }) {
-  const [open, setOpen] = (0, import_react39.useState)(defaultOpen ?? false);
+  const [open, setOpen] = (0, import_react42.useState)(defaultOpen ?? false);
   function handleOpenChange(value) {
     setOpen(value);
     onOpenChangeProp?.(value);
@@ -5423,9 +5540,9 @@ function LearnMoreButton({ label, ...props }) {
 }
 
 // src/link/Link.tsx
-var import_react40 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var LinkInternal = (0, import_react40.forwardRef)(
+var LinkInternal = (0, import_react43.forwardRef)(
   ({ disabled = false, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "a",
     {
@@ -5444,17 +5561,17 @@ var LinkInternal = (0, import_react40.forwardRef)(
   )
 );
 LinkInternal.displayName = "Link";
-var Link = (0, import_react40.memo)(LinkInternal);
+var Link = (0, import_react43.memo)(LinkInternal);
 
 // src/image-full-screen-view/ImageFullScreenView.tsx
-var import_react41 = require("react");
+var import_react44 = require("react");
 var import_lucide_react20 = require("lucide-react");
 var import_react_i18next13 = require("react-i18next");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 function ImageFullScreenView({ src, alt, onClose }) {
   const { t } = (0, import_react_i18next13.useTranslation)();
-  const [scale, setScale] = (0, import_react41.useState)(1);
-  const [rotation, setRotation] = (0, import_react41.useState)(0);
+  const [scale, setScale] = (0, import_react44.useState)(1);
+  const [rotation, setRotation] = (0, import_react44.useState)(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));
@@ -5652,7 +5769,7 @@ var METRIC_CARD_VARIANTS = {
 };
 
 // src/modal/Modal.tsx
-var import_react42 = require("react");
+var import_react45 = require("react");
 var import_lucide_react23 = require("lucide-react");
 
 // src/modal/styles.module.css
@@ -5683,7 +5800,7 @@ function Modal({
   container,
   modal
 }) {
-  const contentRef = (0, import_react42.useRef)(null);
+  const contentRef = (0, import_react45.useRef)(null);
   useScrollFrameIntoView(open, { elementRef: contentRef });
   const handleClose = () => {
     onOpenChange?.(false);
@@ -5725,7 +5842,7 @@ function Modal({
     }
   ) });
 }
-var ModalButton = (0, import_react42.forwardRef)(
+var ModalButton = (0, import_react45.forwardRef)(
   ({ children, size, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Button,
     {
@@ -5741,9 +5858,9 @@ ModalButton.displayName = "ModalButton";
 Modal.displayName = "Modal";
 
 // src/modal-loader/ModalLoader.tsx
-var import_react43 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var ModalLoader = (0, import_react43.memo)(({ visible, className }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+var ModalLoader = (0, import_react46.memo)(({ visible, className }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "div",
   {
     className: cn(
@@ -6131,7 +6248,7 @@ var PopoverContent = React21.forwardRef(({ className, sideOffset = 8, align = "s
 PopoverContent.displayName = "PopoverContent";
 
 // src/radio/Radio.tsx
-var import_react45 = require("react");
+var import_react48 = require("react");
 
 // src/radio-group/RadioGroup.tsx
 var React22 = __toESM(require("react"), 1);
@@ -6164,11 +6281,11 @@ var RadioGroupItem = React22.forwardRef(({ className, ...props }, ref) => /* @__
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/radio/useRadioOptions.ts
-var import_react44 = require("react");
+var import_react47 = require("react");
 function useRadioOptions({ options, defaultValue, onChange }) {
   const initialValue = (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
-  const [selectedValue, setSelectedValue] = (0, import_react44.useState)(initialValue);
-  const handleValueChange = (0, import_react44.useCallback)(
+  const [selectedValue, setSelectedValue] = (0, import_react47.useState)(initialValue);
+  const handleValueChange = (0, import_react47.useCallback)(
     (value) => {
       setSelectedValue(value);
       const selectedOption = options.find((option) => option.value === value) || "";
@@ -6189,7 +6306,7 @@ var styles_default5 = {};
 
 // src/radio/Radio.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var Radio = (0, import_react45.forwardRef)(
+var Radio = (0, import_react48.forwardRef)(
   ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
     const { selectedValue, handleValueChange } = useRadioOptions({
       options,
@@ -6579,7 +6696,7 @@ var SectionTagColors = /* @__PURE__ */ ((SectionTagColors2) => {
 })(SectionTagColors || {});
 
 // src/section/Section.tsx
-var import_react46 = require("react");
+var import_react49 = require("react");
 var import_lucide_react31 = require("lucide-react");
 
 // src/section/constants.ts
@@ -6606,7 +6723,7 @@ function TooltipInfo({ content, className }) {
     }
   ) });
 }
-var Section = (0, import_react46.forwardRef)(
+var Section = (0, import_react49.forwardRef)(
   ({
     children,
     title,
@@ -6658,17 +6775,17 @@ var Section = (0, import_react46.forwardRef)(
   )
 );
 Section.displayName = "Section";
-var SubSection = (0, import_react46.forwardRef)(
+var SubSection = (0, import_react49.forwardRef)(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Section, { ref, className: cn(Section_default.section_sub, className), ...props })
 );
 SubSection.displayName = "SubSection";
-var DividingSubsection = (0, import_react46.forwardRef)(
+var DividingSubsection = (0, import_react49.forwardRef)(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(SubSection, { ref, className: cn(Section_default.section_dividing, className), ...props })
 );
 DividingSubsection.displayName = "DividingSubsection";
 
 // src/selectors/Selectors.tsx
-var import_react47 = require("react");
+var import_react50 = require("react");
 
 // src/selector-button/styles.module.css
 var styles_default7 = {};
@@ -6740,8 +6857,8 @@ var getValueArray = (value) => {
   return [];
 };
 function getSelectorContent(label, disabled, readOnly, active) {
-  if ((0, import_react47.isValidElement)(label)) {
-    return (0, import_react47.cloneElement)(label, {
+  if ((0, import_react50.isValidElement)(label)) {
+    return (0, import_react50.cloneElement)(label, {
       disabled,
       readOnly,
       active
@@ -6786,7 +6903,7 @@ function SelectorsInternal({
     }
   };
   const isAnyActive = getValueArray(value).length > 0;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
@@ -6829,7 +6946,7 @@ function SelectorsInternal({
     )
   ] });
 }
-var Selectors = (0, import_react47.forwardRef)(SelectorsInternal);
+var Selectors = (0, import_react50.forwardRef)(SelectorsInternal);
 
 // src/separator/Separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
@@ -6989,19 +7106,19 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/sidebar/SidebarContext.ts
-var import_react48 = require("react");
-var SidebarContext = (0, import_react48.createContext)(null);
+var import_react51 = require("react");
+var SidebarContext = (0, import_react51.createContext)(null);
 
 // src/sidebar/useSidebarMenuButton.ts
-var import_react50 = require("react");
+var import_react53 = require("react");
 
 // src/sidebar/SidebarMenuButtonContext.ts
-var import_react49 = require("react");
-var SidebarMenuButtonContext = (0, import_react49.createContext)(null);
+var import_react52 = require("react");
+var SidebarMenuButtonContext = (0, import_react52.createContext)(null);
 
 // src/sidebar/useSidebarMenuButton.ts
 function useSidebarMenuButton() {
-  return (0, import_react50.useContext)(SidebarMenuButtonContext);
+  return (0, import_react53.useContext)(SidebarMenuButtonContext);
 }
 
 // src/sidebar/SidebarIcon.tsx
@@ -7042,16 +7159,16 @@ var SidebarIcon = ({
 };
 
 // src/sidebar/useSidebar.ts
-var import_react51 = require("react");
+var import_react54 = require("react");
 function useSidebar() {
-  const context = (0, import_react51.useContext)(SidebarContext);
+  const context = (0, import_react54.useContext)(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
 function useSidebarSafe() {
-  return (0, import_react51.useContext)(SidebarContext);
+  return (0, import_react54.useContext)(SidebarContext);
 }
 
 // src/sidebar/Sidebar.tsx
@@ -7624,9 +7741,9 @@ var VALUE_PART = 1;
 var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
 
 // src/circular-loader/CircularLoader.tsx
-var import_react52 = __toESM(require("react"), 1);
+var import_react55 = __toESM(require("react"), 1);
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var CircularLoader = import_react52.default.memo(
+var CircularLoader = import_react55.default.memo(
   ({ visible = true, height, width, position, label, className }) => {
     if (!visible) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
@@ -7720,10 +7837,10 @@ var CircularLoader = import_react52.default.memo(
 CircularLoader.displayName = "CircularLoader";
 
 // src/small-grid-single-item/SmallGridSingleItem.tsx
-var import_react53 = require("react");
+var import_react56 = require("react");
 var import_lucide_react34 = require("lucide-react");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var SmallGridSingleItem = (0, import_react53.memo)(
+var SmallGridSingleItem = (0, import_react56.memo)(
   ({
     title,
     subtitle,
@@ -7844,7 +7961,7 @@ function SortingAction({
 }
 
 // src/status-button/StatusButton.tsx
-var import_react54 = require("react");
+var import_react57 = require("react");
 var import_react_i18next20 = require("react-i18next");
 var import_lucide_react36 = require("lucide-react");
 var import_jsx_runtime100 = require("react/jsx-runtime");
@@ -7862,7 +7979,7 @@ function StatusButton({
   ...props
 }) {
   const { t } = (0, import_react_i18next20.useTranslation)();
-  const configMap = (0, import_react54.useMemo)(() => {
+  const configMap = (0, import_react57.useMemo)(() => {
     const defaultLoadingConfig = {
       text: loadingText ?? `${t("saving")}...`,
       icon: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react36.Loader2, { className: "h-4 w-4 animate-spin" }),
@@ -7987,9 +8104,9 @@ function Stepper({
 }
 
 // src/switch-blocks/SwitchBlocks.tsx
-var import_react55 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime103 = require("react/jsx-runtime");
-var SwitchBlocksInternal = (0, import_react55.forwardRef)(
+var SwitchBlocksInternal = (0, import_react58.forwardRef)(
   ({ options, value, onChange, disabled, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "div",
     {
@@ -8013,7 +8130,7 @@ var SwitchBlocksInternal = (0, import_react55.forwardRef)(
   )
 );
 SwitchBlocksInternal.displayName = "SwitchBlocks";
-var SwitchBlocks = (0, import_react55.memo)(SwitchBlocksInternal);
+var SwitchBlocks = (0, import_react58.memo)(SwitchBlocksInternal);
 
 // src/switch-group/SwitchGroup.tsx
 var React26 = __toESM(require("react"), 1);
@@ -8073,7 +8190,7 @@ var SwitchGroup = React26.forwardRef(
 SwitchGroup.displayName = "SwitchGroup";
 
 // src/tabs/Tabs.tsx
-var import_react56 = require("react");
+var import_react59 = require("react");
 var TabsPrimitive2 = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_jsx_runtime105 = require("react/jsx-runtime");
@@ -8089,7 +8206,7 @@ var tabsListVariants = (0, import_class_variance_authority12.cva)("inline-flex i
     variant: "default"
   }
 });
-var TabsList = (0, import_react56.forwardRef)(
+var TabsList = (0, import_react59.forwardRef)(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     TabsPrimitive2.List,
     {
@@ -8114,7 +8231,7 @@ var tabsTriggerVariants = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var TabsTrigger = (0, import_react56.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var TabsTrigger = (0, import_react59.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
   TabsPrimitive2.Trigger,
   {
     ref,
@@ -8123,7 +8240,7 @@ var TabsTrigger = (0, import_react56.forwardRef)(({ className, variant, ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive2.Trigger.displayName;
-var TabsContent = (0, import_react56.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(TabsPrimitive2.Content, { ref, className, tabIndex: -1, ...props }));
+var TabsContent = (0, import_react59.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(TabsPrimitive2.Content, { ref, className, tabIndex: -1, ...props }));
 TabsContent.displayName = TabsPrimitive2.Content.displayName;
 
 // src/tabbed-section/TabbedSection.tsx
@@ -8264,11 +8381,11 @@ var TASK_VARIANTS = {
 var import_sonner2 = require("sonner");
 
 // src/toaster/useUpdateToast.ts
-var import_react57 = require("react");
+var import_react60 = require("react");
 var import_sonner = require("sonner");
 function useUpdateToast({ id }) {
-  const toastIdRef = (0, import_react57.useRef)("");
-  const getToastOptions = (0, import_react57.useCallback)(
+  const toastIdRef = (0, import_react60.useRef)("");
+  const getToastOptions = (0, import_react60.useCallback)(
     (options) => ({
       id: toastIdRef.current,
       dismissible: false,
@@ -8383,7 +8500,7 @@ var ToggleGroupItem = React27.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/toggle-group/Toggles.tsx
-var import_react58 = require("react");
+var import_react61 = require("react");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var getValueArray2 = (value) => {
   if (value) {
@@ -8458,7 +8575,7 @@ function TogglesInternal({
     }
   };
   const isAnyActive = getValueArray2(value).length > 0;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
   const currentValue = getValueArray2(value).map((item) => String(item));
@@ -8489,7 +8606,7 @@ function TogglesInternal({
     }) })
   ] });
 }
-var Toggles = (0, import_react58.forwardRef)(TogglesInternal);
+var Toggles = (0, import_react61.forwardRef)(TogglesInternal);
 
 // src/text-field/TextField.tsx
 var React28 = __toESM(require("react"), 1);
@@ -8700,16 +8817,16 @@ var TextField = React28.forwardRef(
 TextField.displayName = "TextField";
 
 // src/textarea/Textarea.tsx
-var import_react59 = require("react");
+var import_react62 = require("react");
 
 // src/textarea/styles.module.css
 var styles_default9 = {};
 
 // src/textarea/Textarea.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");
-var Textarea = (0, import_react59.forwardRef)(
+var Textarea = (0, import_react62.forwardRef)(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
-    const inputId = (0, import_react59.useId)();
+    const inputId = (0, import_react62.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: cn(styles_default9.container, className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
         "textarea",
@@ -11602,7 +11719,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 var React41 = __toESM(require("react"), 1);
 var import_lucide_react46 = require("lucide-react");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react60 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -11677,7 +11794,7 @@ var SearchableSelectInternal = ({
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
   useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = (0, import_react60.useCallback)(
+  const setSelectOpen = (0, import_react63.useCallback)(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -12307,6 +12424,7 @@ function getNextEnabledIndex(options, startIndex, step) {
   switchVariants,
   tabsListVariants,
   tabsTriggerVariants,
+  toCssSize,
   toast,
   toggleVariants,
   uiKitI18nResources,
@@ -12319,14 +12437,17 @@ function getNextEnabledIndex(options, startIndex, step) {
   useDebouncedFunction,
   useEvent,
   useHover,
+  useIsFormTouched,
   useIsMobile,
   useIsMounted,
+  useKeyDown,
   useModalControls,
   useOutsideClick,
   usePagination,
   usePrevious,
   usePromisedModalControls,
   useRadioOptions,
+  useResetAfterRequestStatus,
   useScreenResize,
   useScrollFrameIntoView,
   useScrollToTop,