@pelatform/starter.ui 0.1.0

package/dist/hooks.js

@@ -0,0 +1,722 @@
+"use client";
+import {
+  useCopyToClipboard,
+  useIsMobile
+} from "./chunk-HHNNYCNT.js";
+
+// src/hooks/use-body-class.ts
+import { useEffect } from "react";
+var useBodyClasses = (className) => {
+  useEffect(() => {
+    if (!className.trim()) return;
+    const classList = className.split(/\s+/).filter(Boolean);
+    classList.forEach((cls) => {
+      document.body.classList.add(cls);
+    });
+    return () => {
+      classList.forEach((cls) => {
+        document.body.classList.remove(cls);
+      });
+    };
+  }, [className]);
+};
+
+// src/hooks/use-file-upload.ts
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+var useFileUpload = (options = {}) => {
+  const {
+    maxFiles = Number.POSITIVE_INFINITY,
+    maxSize = Number.POSITIVE_INFINITY,
+    accept = "*",
+    multiple = false,
+    initialFiles = [],
+    onFilesChange,
+    onFilesAdded,
+    onError
+  } = options;
+  const [state, setState] = useState({
+    files: initialFiles.map((file) => ({
+      file,
+      id: file.id,
+      preview: file.url
+    })),
+    isDragging: false,
+    errors: []
+  });
+  const inputRef = useRef(null);
+  const validateFile = useCallback(
+    (file) => {
+      if (file instanceof File) {
+        if (file.size > maxSize) {
+          return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`;
+        }
+      } else {
+        if (file.size > maxSize) {
+          return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`;
+        }
+      }
+      if (accept !== "*") {
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+        const fileType = file instanceof File ? file.type || "" : file.type;
+        const fileExtension = `.${file instanceof File ? file.name.split(".").pop() : file.name.split(".").pop()}`;
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return fileExtension.toLowerCase() === type.toLowerCase();
+          }
+          if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return fileType.startsWith(`${baseType}/`);
+          }
+          return fileType === type;
+        });
+        if (!isAccepted) {
+          return `File "${file instanceof File ? file.name : file.name}" is not an accepted file type.`;
+        }
+      }
+      return null;
+    },
+    [accept, maxSize]
+  );
+  const createPreview = useCallback((file) => {
+    if (file instanceof File) {
+      return URL.createObjectURL(file);
+    }
+    return file.url;
+  }, []);
+  const generateUniqueId = useCallback((file) => {
+    if (file instanceof File) {
+      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    return file.id;
+  }, []);
+  const clearFiles = useCallback(() => {
+    setState((prev) => {
+      for (const file of prev.files) {
+        if (file.preview && file.file instanceof File && file.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(file.preview);
+        }
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+      const newState = {
+        ...prev,
+        files: [],
+        errors: []
+      };
+      onFilesChange?.(newState.files);
+      return newState;
+    });
+  }, [onFilesChange]);
+  const addFiles = useCallback(
+    (newFiles) => {
+      if (!newFiles || newFiles.length === 0) return;
+      const newFilesArray = Array.from(newFiles);
+      const errors = [];
+      setState((prev) => ({ ...prev, errors: [] }));
+      if (!multiple) {
+        clearFiles();
+      }
+      if (multiple && maxFiles !== Number.POSITIVE_INFINITY && state.files.length + newFilesArray.length > maxFiles) {
+        errors.push(`You can only upload a maximum of ${maxFiles} files.`);
+        onError?.(errors);
+        setState((prev) => ({ ...prev, errors }));
+        return;
+      }
+      const validFiles = [];
+      for (const file of newFilesArray) {
+        if (multiple) {
+          const isDuplicate = state.files.some(
+            (existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size
+          );
+          if (isDuplicate) {
+            return;
+          }
+        }
+        if (file.size > maxSize) {
+          errors.push(
+            multiple ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.` : `File exceeds the maximum size of ${formatBytes(maxSize)}.`
+          );
+          continue;
+        }
+        const error = validateFile(file);
+        if (error) {
+          errors.push(error);
+        } else {
+          validFiles.push({
+            file,
+            id: generateUniqueId(file),
+            preview: createPreview(file)
+          });
+        }
+      }
+      if (validFiles.length > 0) {
+        onFilesAdded?.(validFiles);
+        setState((prev) => {
+          const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
+          onFilesChange?.(newFiles2);
+          return {
+            ...prev,
+            files: newFiles2,
+            errors
+          };
+        });
+      } else if (errors.length > 0) {
+        onError?.(errors);
+        setState((prev) => ({
+          ...prev,
+          errors
+        }));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [
+      state.files,
+      maxFiles,
+      multiple,
+      maxSize,
+      validateFile,
+      createPreview,
+      generateUniqueId,
+      clearFiles,
+      onFilesChange,
+      onFilesAdded,
+      onError
+    ]
+  );
+  const removeFile = useCallback(
+    (id) => {
+      setState((prev) => {
+        const fileToRemove = prev.files.find((file) => file.id === id);
+        if (fileToRemove?.preview && fileToRemove.file instanceof File && fileToRemove.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(fileToRemove.preview);
+        }
+        const newFiles = prev.files.filter((file) => file.id !== id);
+        onFilesChange?.(newFiles);
+        return {
+          ...prev,
+          files: newFiles,
+          errors: []
+        };
+      });
+    },
+    [onFilesChange]
+  );
+  const clearErrors = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      errors: []
+    }));
+  }, []);
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setState((prev) => ({ ...prev, isDragging: true }));
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    setState((prev) => ({ ...prev, isDragging: false }));
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setState((prev) => ({ ...prev, isDragging: false }));
+      if (inputRef.current?.disabled) {
+        return;
+      }
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        if (!multiple) {
+          const file = e.dataTransfer.files[0];
+          addFiles([file]);
+        } else {
+          addFiles(e.dataTransfer.files);
+        }
+      }
+    },
+    [addFiles, multiple]
+  );
+  const handleFileChange = useCallback(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.click();
+    }
+  }, []);
+  const getInputProps = useCallback(
+    (props = {}) => {
+      return {
+        ...props,
+        type: "file",
+        onChange: handleFileChange,
+        accept: props.accept || accept,
+        multiple: props.multiple !== void 0 ? props.multiple : multiple,
+        ref: inputRef
+      };
+    },
+    [accept, multiple, handleFileChange]
+  );
+  return [
+    state,
+    {
+      addFiles,
+      removeFile,
+      clearFiles,
+      clearErrors,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      handleFileChange,
+      openFileDialog,
+      getInputProps
+    }
+  ];
+};
+var formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];
+};
+
+// src/hooks/use-hydrated.ts
+import { useSyncExternalStore } from "react";
+function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+
+// src/hooks/use-intersection-observer.ts
+import * as React from "react";
+var SharedObserver = class {
+  observer = null;
+  callbacks = /* @__PURE__ */ new Map();
+  options;
+  constructor(options) {
+    this.options = options;
+  }
+  getObserver() {
+    if (!this.observer) {
+      this.observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          const callback = this.callbacks.get(entry.target);
+          if (callback) {
+            callback(entry.isIntersecting);
+          }
+        });
+      }, this.options);
+    }
+    return this.observer;
+  }
+  observe(element, callback) {
+    this.callbacks.set(element, callback);
+    this.getObserver().observe(element);
+  }
+  unobserve(element) {
+    this.callbacks.delete(element);
+    this.observer?.unobserve(element);
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.callbacks.clear();
+    this.observer = null;
+  }
+};
+var observers = /* @__PURE__ */ new Map();
+function getSharedObserver(options) {
+  const key = JSON.stringify(options);
+  if (!observers.has(key)) {
+    observers.set(key, new SharedObserver(options));
+  }
+  return observers.get(key);
+}
+function useIntersectionObserver(elementRef, {
+  threshold = 0,
+  root = null,
+  rootMargin = "0%",
+  freezeOnceVisible = false
+} = {}) {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+  const frozen = React.useRef(false);
+  React.useEffect(() => {
+    const element = elementRef?.current;
+    if (!element || freezeOnceVisible && frozen.current) return;
+    const observer = getSharedObserver({ threshold, root, rootMargin });
+    observer.observe(element, (intersecting) => {
+      setIntersecting(intersecting);
+      if (intersecting && freezeOnceVisible) {
+        frozen.current = true;
+        observer.unobserve(element);
+      }
+    });
+    return () => {
+      observer.unobserve(element);
+    };
+  }, [elementRef, threshold, root, rootMargin, freezeOnceVisible]);
+  return isIntersecting;
+}
+
+// src/hooks/use-is-mac.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useIsMac() {
+  const [isMac, setIsMac] = useState3(true);
+  useEffect3(() => {
+    setIsMac(navigator.platform.toUpperCase().includes("MAC"));
+  }, []);
+  return isMac;
+}
+
+// src/hooks/use-media-query.ts
+import { useEffect as useEffect4, useState as useState4 } from "react";
+var getMatches = (query) => {
+  if (typeof window !== "undefined") {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+};
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = useState4(getMatches(query));
+  useEffect4(() => {
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+    const matchMedia = window.matchMedia(query);
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+};
+
+// src/hooks/use-menu.ts
+var useMenu = (pathname) => {
+  const isActive = (path) => {
+    if (path && path === "/") {
+      return path === pathname;
+    } else {
+      return !!path && pathname.startsWith(path);
+    }
+  };
+  const hasActiveChild = (children) => {
+    if (!children || !Array.isArray(children)) return false;
+    return children.some(
+      (child) => child.path && isActive(child.path) || child.children && hasActiveChild(child.children)
+    );
+  };
+  const isItemActive = (item) => {
+    return (item.path ? isActive(item.path) : false) || (item.children ? hasActiveChild(item.children) : false);
+  };
+  const getCurrentItem = (items) => {
+    for (const item of items) {
+      if (item.path && isActive(item.path)) {
+        if (item.children && item.children.length > 0) {
+          const childMatch = getCurrentItem(item.children);
+          return childMatch || item;
+        }
+        return item;
+      }
+      if (item.children && item.children.length > 0) {
+        const childMatch = getCurrentItem(item.children);
+        if (childMatch) {
+          return childMatch;
+        }
+      }
+    }
+    return void 0;
+  };
+  const getBreadcrumb = (items) => {
+    const findBreadcrumb = (nodes, breadcrumb2 = []) => {
+      for (const item of nodes) {
+        const currentBreadcrumb = [...breadcrumb2, item];
+        if (item.path && isActive(item.path)) {
+          return currentBreadcrumb;
+        }
+        if (item.children && item.children.length > 0) {
+          const childBreadcrumb = findBreadcrumb(item.children, currentBreadcrumb);
+          if (childBreadcrumb.length > currentBreadcrumb.length) {
+            return childBreadcrumb;
+          }
+        }
+      }
+      return breadcrumb2;
+    };
+    const breadcrumb = findBreadcrumb(items);
+    return breadcrumb.length > 0 ? breadcrumb : [];
+  };
+  const getChildren = (items, level) => {
+    const hasActiveChildAtLevel = (items2) => {
+      for (const item of items2) {
+        if (item.path && (item.path === pathname || item.path !== "/" && item.path !== "" && pathname.startsWith(item.path)) || item.children && hasActiveChildAtLevel(item.children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const findChildren = (items2, targetLevel, currentLevel = 0) => {
+      for (const item of items2) {
+        if (item.children) {
+          if (targetLevel === currentLevel && hasActiveChildAtLevel(item.children)) {
+            return item.children;
+          }
+          const children = findChildren(item.children, targetLevel, currentLevel + 1);
+          if (children) {
+            return children;
+          }
+        } else if (targetLevel === currentLevel && item.path && (item.path === pathname || item.path !== "/" && item.path !== "" && pathname.startsWith(item.path))) {
+          return items2;
+        }
+      }
+      return null;
+    };
+    return findChildren(items, level);
+  };
+  return {
+    isActive,
+    hasActiveChild,
+    isItemActive,
+    getCurrentItem,
+    getBreadcrumb,
+    getChildren
+  };
+};
+
+// src/hooks/use-meta-color.ts
+import * as React2 from "react";
+import { useTheme } from "next-themes";
+import { META_THEME_COLORS, THEME_MODES } from "@pelatform/utils";
+function useMetaColor(defaultColors) {
+  const { resolvedTheme } = useTheme();
+  const isSystemDarkMode = React2.useCallback(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }, []);
+  const getEffectiveTheme = React2.useCallback(
+    (theme) => {
+      if (theme === THEME_MODES.SYSTEM) {
+        return isSystemDarkMode() ? THEME_MODES.DARK : THEME_MODES.LIGHT;
+      }
+      return theme;
+    },
+    [isSystemDarkMode]
+  );
+  const metaColor = React2.useMemo(() => {
+    const colorsToUse = defaultColors ?? META_THEME_COLORS;
+    const effectiveTheme = getEffectiveTheme(resolvedTheme);
+    if (effectiveTheme === THEME_MODES.DARK) {
+      return colorsToUse[THEME_MODES.DARK];
+    } else if (effectiveTheme === THEME_MODES.LIGHT) {
+      return colorsToUse[THEME_MODES.LIGHT];
+    }
+    return colorsToUse[THEME_MODES.LIGHT];
+  }, [resolvedTheme, defaultColors, getEffectiveTheme]);
+  const setMetaColor = React2.useCallback((color) => {
+    const metaTag = document.querySelector('meta[name="theme-color"]');
+    if (metaTag) {
+      metaTag.setAttribute("content", color);
+    } else {
+      const newMetaTag = document.createElement("meta");
+      newMetaTag.name = "theme-color";
+      newMetaTag.content = color;
+      document.head.appendChild(newMetaTag);
+    }
+  }, []);
+  return {
+    /** Current meta theme color based on resolved theme */
+    metaColor,
+    /** Function to manually set meta theme color */
+    setMetaColor
+  };
+}
+
+// src/hooks/use-mounted.ts
+import * as React3 from "react";
+function useMounted() {
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}
+
+// src/hooks/use-mutation-observer.ts
+import * as React4 from "react";
+var DEFAULT_OPTIONS = {
+  /** Watch for attribute changes */
+  attributes: true,
+  /** Watch for text content changes */
+  characterData: true,
+  /** Watch for child element additions/removals */
+  childList: true,
+  /** Watch for changes in descendant elements */
+  subtree: true
+};
+var useMutationObserver = (ref, callback, options = DEFAULT_OPTIONS) => {
+  React4.useEffect(() => {
+    if (ref.current) {
+      const observer = new MutationObserver(callback);
+      observer.observe(ref.current, options);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [ref, callback, options]);
+};
+
+// src/hooks/use-remove-ga-params.ts
+import { useEffect as useEffect7 } from "react";
+function useRemoveGAParams() {
+  useEffect7(() => {
+    const url = new URL(window.location.href);
+    if (url.searchParams.has("_gl")) {
+      const timer = setTimeout(() => {
+        url.searchParams.delete("_gl");
+        window.history.replaceState({}, "", url.toString());
+      }, 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+}
+
+// src/hooks/use-scroll-position.ts
+import { useEffect as useEffect8, useState as useState6 } from "react";
+var useScrollPosition = ({ targetRef } = {}) => {
+  const [scrollPosition, setScrollPosition] = useState6(0);
+  useEffect8(() => {
+    const target = targetRef?.current || document;
+    const scrollable = target === document ? window : target;
+    const updatePosition = () => {
+      const scrollY = target === document ? window.scrollY || window.pageYOffset : target.scrollTop;
+      setScrollPosition(scrollY);
+    };
+    scrollable.addEventListener("scroll", updatePosition, { passive: true });
+    updatePosition();
+    return () => {
+      scrollable.removeEventListener("scroll", updatePosition);
+    };
+  }, [targetRef]);
+  return scrollPosition;
+};
+
+// src/hooks/use-slider-input.ts
+import { useCallback as useCallback3, useState as useState7 } from "react";
+function useSliderInput({ minValue, maxValue, initialValue }) {
+  const [sliderValues, setSliderValues] = useState7(initialValue);
+  const [inputValues, setInputValues] = useState7(initialValue);
+  const handleSliderChange = useCallback3((values) => {
+    setSliderValues(values);
+    setInputValues(values);
+  }, []);
+  const handleInputChange = useCallback3(
+    (e, index) => {
+      const newValue = parseFloat(e.target.value);
+      if (!Number.isNaN(newValue)) {
+        const updatedInputs = [...inputValues];
+        updatedInputs[index] = newValue;
+        setInputValues(updatedInputs);
+      }
+    },
+    [inputValues]
+  );
+  const validateAndUpdateValue = useCallback3(
+    (value, index) => {
+      const updatedSlider = [...sliderValues];
+      if (index === 0) {
+        updatedSlider[0] = Math.max(minValue, Math.min(value, sliderValues[1]));
+      } else {
+        updatedSlider[1] = Math.min(maxValue, Math.max(value, sliderValues[0]));
+      }
+      setSliderValues(updatedSlider);
+      setInputValues(updatedSlider);
+    },
+    [sliderValues, minValue, maxValue]
+  );
+  return {
+    /** Function to manually set slider values */
+    setSliderValues,
+    /** Function to manually set input values */
+    setInputValues,
+    /** Current slider values [min, max] */
+    sliderValues,
+    /** Current input values [min, max] */
+    inputValues,
+    /** Handler for slider value changes */
+    handleSliderChange,
+    /** Handler for input field changes */
+    handleInputChange,
+    /** Function to validate and update values from inputs */
+    validateAndUpdateValue
+  };
+}
+
+// src/hooks/use-viewport.ts
+import { useEffect as useEffect9, useState as useState8 } from "react";
+var useViewport = () => {
+  const [dimensions, setDimensions] = useState8(() => {
+    if (typeof window !== "undefined") {
+      return [window.innerHeight, window.innerWidth];
+    }
+    return [0, 0];
+  });
+  useEffect9(() => {
+    const handleResize = () => {
+      setDimensions([window.innerHeight, window.innerWidth]);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize, { passive: true });
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return dimensions;
+};
+export {
+  formatBytes,
+  useBodyClasses,
+  useCopyToClipboard,
+  useFileUpload,
+  useHydrated,
+  useIntersectionObserver,
+  useIsMac,
+  useIsMobile,
+  useMediaQuery,
+  useMenu,
+  useMetaColor,
+  useMounted,
+  useMutationObserver,
+  useRemoveGAParams,
+  useScrollPosition,
+  useSliderInput,
+  useViewport
+};