@pol-studios/ui 1.0.0

package/dist/hooks/index.js

@@ -0,0 +1,345 @@
+"use client";
+
+// src/hooks/useKeyboardShortcuts.ts
+import { useEffect, useCallback, useRef } from "react";
+function useKeyboardShortcuts({ shortcuts, enabled = true }) {
+  const shortcutsRef = useRef(shortcuts);
+  useEffect(() => {
+    shortcutsRef.current = shortcuts;
+  }, [shortcuts]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled) return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable || target.tagName === "SELECT" && !event.ctrlKey && !event.metaKey) {
+        if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+          return;
+        }
+      }
+      for (const shortcut of shortcutsRef.current) {
+        if (shortcut.enabled === false) continue;
+        const keyMatches = shortcut.key.toLowerCase() === event.key.toLowerCase();
+        const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+        const hasCtrlOrCmd = event.ctrlKey || event.metaKey;
+        let ctrlMatches = true;
+        if (shortcut.ctrl !== void 0) {
+          ctrlMatches = shortcut.ctrl === (isMac ? event.metaKey : event.ctrlKey);
+        }
+        let metaMatches = true;
+        if (shortcut.meta !== void 0) {
+          metaMatches = shortcut.meta === event.metaKey;
+        }
+        if (shortcut.ctrl !== void 0 && shortcut.meta === void 0 && event.metaKey && !isMac) {
+          ctrlMatches = false;
+        }
+        if (shortcut.meta !== void 0 && shortcut.ctrl === void 0 && event.ctrlKey) {
+          metaMatches = false;
+        }
+        const shiftMatches = shortcut.shift === void 0 ? true : shortcut.shift === event.shiftKey;
+        const altMatches = shortcut.alt === void 0 ? true : shortcut.alt === event.altKey;
+        if (keyMatches && ctrlMatches && metaMatches && shiftMatches && altMatches) {
+          if (shortcut.preventDefault !== false) {
+            event.preventDefault();
+          }
+          shortcut.action();
+          break;
+        }
+      }
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown, enabled]);
+}
+function formatShortcut(shortcut) {
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  const parts = [];
+  if (shortcut.ctrl || shortcut.meta) {
+    parts.push(isMac ? "\u2318" : "Ctrl");
+  }
+  if (shortcut.alt) {
+    parts.push(isMac ? "\u2325" : "Alt");
+  }
+  if (shortcut.shift) {
+    parts.push(isMac ? "\u21E7" : "Shift");
+  }
+  let key = shortcut.key;
+  if (key.length === 1) {
+    key = key.toUpperCase();
+  } else {
+    key = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
+  }
+  parts.push(key);
+  return parts.join(isMac ? "" : "+");
+}
+
+// src/hooks/useMultistepForm.tsx
+import { useState } from "react";
+function useMultistepForm(steps) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  function goNext() {
+    setCurrentStepIndex((x) => {
+      if (x >= steps.length - 1) return x;
+      return x + 1;
+    });
+  }
+  function goBack() {
+    setCurrentStepIndex((x) => {
+      if (x === 0) return x;
+      return x - 1;
+    });
+  }
+  function goTo(index) {
+    setCurrentStepIndex(index);
+  }
+  return {
+    currentStepIndex,
+    currentStep: steps[currentStepIndex],
+    steps,
+    goTo,
+    goNext,
+    goBack
+  };
+}
+
+// src/hooks/usePOLNavigate.tsx
+import { useContext as useContext2 } from "react";
+import { useNavigate as useTanstackNavigate } from "@tanstack/react-router";
+
+// src/providers/router/RouterContext.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var RouterContext = createContext(null);
+
+// src/hooks/usePOLNavigate.tsx
+function usePolNavigate() {
+  const routerContext = useContext2(RouterContext);
+  let tanstackNavigate = null;
+  try {
+    tanstackNavigate = useTanstackNavigate();
+  } catch {
+  }
+  if (tanstackNavigate) {
+    return tanstackNavigate;
+  }
+  if (routerContext) {
+    return (options) => {
+      const searchValue = typeof options.search === "object" && options.search !== null ? options.search : void 0;
+      const adapterOptions = {
+        to: typeof options.to === "string" ? options.to : String(options.to),
+        params: options.params,
+        search: searchValue,
+        replace: options.replace
+      };
+      routerContext.navigate(adapterOptions);
+    };
+  }
+  throw new Error("usePOLNavigate requires either a RouterProvider or TanStack Router context");
+}
+
+// src/hooks/use-mobile.tsx
+import * as React2 from "react";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React2.useState(void 0);
+  React2.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+// src/hooks/use-auto-height.tsx
+import * as React3 from "react";
+function useAutoHeight(deps = [], options = {
+  includeParentBox: true,
+  includeSelfBox: false
+}) {
+  const ref = React3.useRef(null);
+  const roRef = React3.useRef(null);
+  const [height, setHeight] = React3.useState(0);
+  const measure = React3.useCallback(() => {
+    const el = ref.current;
+    if (!el) return 0;
+    const base = el.getBoundingClientRect().height || 0;
+    let extra = 0;
+    if (options.includeParentBox && el.parentElement) {
+      const cs = getComputedStyle(el.parentElement);
+      const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0);
+      const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0);
+      const isBorderBox = cs.boxSizing === "border-box";
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+    if (options.includeSelfBox) {
+      const cs = getComputedStyle(el);
+      const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0);
+      const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0);
+      const isBorderBox = cs.boxSizing === "border-box";
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+    const total = Math.ceil((base + extra) * dpr) / dpr;
+    return total;
+  }, [options.includeParentBox, options.includeSelfBox]);
+  React3.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setHeight(measure());
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    const ro = new ResizeObserver(() => {
+      const next = measure();
+      requestAnimationFrame(() => setHeight(next));
+    });
+    ro.observe(el);
+    if (options.includeParentBox && el.parentElement) {
+      ro.observe(el.parentElement);
+    }
+    roRef.current = ro;
+    return () => {
+      ro.disconnect();
+      roRef.current = null;
+    };
+  }, deps);
+  React3.useLayoutEffect(() => {
+    if (height === 0) {
+      const next = measure();
+      if (next !== 0) setHeight(next);
+    }
+  }, [height, measure]);
+  return { ref, height };
+}
+
+// src/hooks/use-controlled-state.tsx
+import * as React4 from "react";
+function useControlledState(props) {
+  const { value, defaultValue, onChange } = props;
+  const [state, setInternalState] = React4.useState(
+    value !== void 0 ? value : defaultValue
+  );
+  React4.useEffect(() => {
+    if (value !== void 0) setInternalState(value);
+  }, [value]);
+  const setState = React4.useCallback(
+    (next, ...args) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange]
+  );
+  return [state, setState];
+}
+
+// src/hooks/use-data-state.tsx
+import * as React5 from "react";
+function parseDatasetValue(value) {
+  if (value === null) return null;
+  if (value === "" || value === "true") return true;
+  if (value === "false") return false;
+  return value;
+}
+function useDataState(key, forwardedRef, onChange) {
+  const localRef = React5.useRef(null);
+  React5.useImperativeHandle(forwardedRef, () => localRef.current);
+  const getSnapshot = () => {
+    const el = localRef.current;
+    return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
+  };
+  const subscribe = (callback) => {
+    const el = localRef.current;
+    if (!el) return () => {
+    };
+    const observer = new MutationObserver((records) => {
+      for (const record of records) {
+        if (record.attributeName === `data-${key}`) {
+          callback();
+          break;
+        }
+      }
+    });
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: [`data-${key}`]
+    });
+    return () => observer.disconnect();
+  };
+  const value = React5.useSyncExternalStore(subscribe, getSnapshot);
+  React5.useEffect(() => {
+    if (onChange) onChange(value);
+  }, [value, onChange]);
+  return [value, localRef];
+}
+
+// src/hooks/use-is-in-view.tsx
+import * as React6 from "react";
+import { useInView } from "motion/react";
+function useIsInView(ref, options = {}) {
+  const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
+  const localRef = React6.useRef(null);
+  React6.useImperativeHandle(ref, () => localRef.current);
+  const inViewResult = useInView(localRef, {
+    once: inViewOnce,
+    margin: inViewMargin
+  });
+  const isInView = !inView || inViewResult;
+  return { ref: localRef, isInView };
+}
+
+// src/providers/alert/AlertContext.tsx
+import { createContext as createContext2, useContext as useContext3, useState as useState5 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var defaultAlertState = {
+  isOpen: false,
+  title: "",
+  description: "",
+  confirmTitle: "Confirm",
+  cancelTitle: "Cancel",
+  variant: "default",
+  onConfirm: () => {
+  },
+  onCancel: () => {
+  }
+};
+var defaultContextValue = {
+  showAlert: async () => false,
+  hideAlert: () => {
+  },
+  alertState: defaultAlertState
+};
+var AlertContext = createContext2(defaultContextValue);
+var useAlert = () => {
+  const context = useContext3(AlertContext);
+  if (!context) {
+    throw new Error("useAlert must be used within an AlertProvider");
+  }
+  return { hideAlert: context.hideAlert, showAlert: context.showAlert };
+};
+export {
+  formatShortcut,
+  useAlert,
+  useAutoHeight,
+  useControlledState,
+  useDataState,
+  useIsInView,
+  useIsMobile,
+  useKeyboardShortcuts,
+  useMultistepForm,
+  usePolNavigate as useNavigate,
+  usePolNavigate
+};