fromsrc 0.0.0 → 0.0.2

package/dist/hooks/fetch.d.ts

@@ -0,0 +1,8 @@
+interface FetchState<T> {
+    data: T | null;
+    error: Error | null;
+    loading: boolean;
+}
+declare function useFetch<T>(url: string | null, options?: RequestInit): FetchState<T>;
+
+export { type FetchState, useFetch };

package/dist/hooks/fetch.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+function useFetch(url, options) {
+  const [state, setState] = useState({
+    data: null,
+    error: null,
+    loading: !!url
+  });
+  useEffect(() => {
+    if (!url) return;
+    let cancelled = false;
+    setState({ data: null, error: null, loading: true });
+    fetch(url, options).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((data) => {
+      if (!cancelled) setState({ data, error: null, loading: false });
+    }).catch((error) => {
+      if (!cancelled) setState({ data: null, error, loading: false });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return state;
+}
+
+export { useFetch };

package/dist/hooks/focustrap.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+
+declare const FOCUSABLE_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+interface FocusTrapOptions {
+    enabled: boolean;
+    onEscape?: () => void;
+    autoFocus?: boolean;
+    restoreFocus?: boolean;
+}
+declare function useFocusTrap<T extends HTMLElement>(ref: RefObject<T | null>, options: FocusTrapOptions): void;
+
+export { FOCUSABLE_SELECTOR, type FocusTrapOptions, useFocusTrap };

package/dist/hooks/focustrap.js

@@ -0,0 +1,62 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function useFocusTrap(ref, options) {
+  const { enabled, onEscape, autoFocus = true, restoreFocus = true } = options;
+  const previousFocus = useRef(null);
+  const getFocusableElements = useCallback(() => {
+    if (!ref.current) return [];
+    return Array.from(ref.current.querySelectorAll(FOCUSABLE_SELECTOR));
+  }, [ref]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape" && onEscape) {
+        onEscape();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last?.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first?.focus();
+      }
+    },
+    [onEscape, getFocusableElements]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (restoreFocus) {
+        previousFocus.current?.focus();
+      }
+    };
+  }, [enabled, handleKeyDown, restoreFocus]);
+  useEffect(() => {
+    if (!enabled || !autoFocus) return;
+    const focusable = getFocusableElements();
+    focusable[0]?.focus();
+  }, [enabled, autoFocus, getFocusableElements]);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleFocusIn = (e) => {
+      if (!(e.target instanceof Node) || !ref.current?.contains(e.target)) {
+        const focusable = getFocusableElements();
+        focusable[0]?.focus();
+      }
+    };
+    document.addEventListener("focusin", handleFocusIn);
+    return () => document.removeEventListener("focusin", handleFocusIn);
+  }, [enabled, ref, getFocusableElements]);
+}
+
+export { FOCUSABLE_SELECTOR, useFocusTrap };

package/dist/hooks/focuswithin.d.ts

@@ -0,0 +1,6 @@
+declare function useFocusWithin<T extends HTMLElement>(): [
+    React.RefObject<T | null>,
+    boolean
+];
+
+export { useFocusWithin };

package/dist/hooks/focuswithin.js

@@ -0,0 +1,24 @@
+"use client";
+import { useRef, useState, useEffect } from 'react';
+
+function useFocusWithin() {
+  const ref = useRef(null);
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onFocusIn = () => setFocused(true);
+    const onFocusOut = (e) => {
+      if (!(e.relatedTarget instanceof Node) || !el.contains(e.relatedTarget)) setFocused(false);
+    };
+    el.addEventListener("focusin", onFocusIn);
+    el.addEventListener("focusout", onFocusOut);
+    return () => {
+      el.removeEventListener("focusin", onFocusIn);
+      el.removeEventListener("focusout", onFocusOut);
+    };
+  }, []);
+  return [ref, focused];
+}
+
+export { useFocusWithin };

package/dist/hooks/form.d.ts

@@ -0,0 +1,20 @@
+type changeevent = {
+    target: {
+        value: unknown;
+    };
+};
+interface FormState<T extends Record<string, unknown>> {
+    values: T;
+    errors: Partial<Record<keyof T, string>>;
+    touched: Partial<Record<keyof T, boolean>>;
+    dirty: boolean;
+    valid: boolean;
+    set: <K extends keyof T>(field: K, value: T[K]) => void;
+    setError: (field: keyof T, error: string | undefined) => void;
+    reset: () => void;
+    handleChange: <K extends keyof T>(field: K) => (e: changeevent) => void;
+    handleBlur: (field: keyof T) => () => void;
+}
+declare function useForm<T extends Record<string, unknown>>(initial: T, validate?: (values: T) => Partial<Record<keyof T, string>>): FormState<T>;
+
+export { type FormState, useForm };

package/dist/hooks/form.js

@@ -0,0 +1,42 @@
+"use client";
+import { useState, useCallback } from 'react';
+
+function update(values, field, value) {
+  return { ...values, [field]: value };
+}
+function useForm(initial, validate) {
+  const [values, setValues] = useState(initial);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const dirty = JSON.stringify(values) !== JSON.stringify(initial);
+  const valid = Object.values(errors).every((e) => !e);
+  const set = useCallback(
+    (field, value) => {
+      setValues((prev) => {
+        const next = update(prev, field, value);
+        if (validate) setErrors(validate(next));
+        return next;
+      });
+    },
+    [validate]
+  );
+  const setError = useCallback((field, error) => {
+    setErrors((prev) => ({ ...prev, [field]: error }));
+  }, []);
+  const reset = useCallback(() => {
+    setValues(initial);
+    setErrors({});
+    setTouched({});
+  }, [initial]);
+  const handleChange = useCallback(
+    (field) => (e) => set(field, e.target.value),
+    [set]
+  );
+  const handleBlur = useCallback(
+    (field) => () => setTouched((prev) => ({ ...prev, [field]: true })),
+    []
+  );
+  return { values, errors, touched, dirty, valid, set, setError, reset, handleChange, handleBlur };
+}
+
+export { useForm };

package/dist/hooks/fullscreen.d.ts

@@ -0,0 +1,10 @@
+interface FullscreenResult {
+    isFullscreen: boolean;
+    enter: () => Promise<void>;
+    exit: () => Promise<void>;
+    toggle: () => Promise<void>;
+    ref: React.RefObject<HTMLElement | null>;
+}
+declare function useFullscreen(): FullscreenResult;
+
+export { type FullscreenResult, useFullscreen };

package/dist/hooks/fullscreen.js

@@ -0,0 +1,34 @@
+"use client";
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+function useFullscreen() {
+  const ref = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  useEffect(() => {
+    function handler() {
+      setIsFullscreen(!!document.fullscreenElement);
+    }
+    document.addEventListener("fullscreenchange", handler);
+    return () => document.removeEventListener("fullscreenchange", handler);
+  }, []);
+  const enter = useCallback(async () => {
+    if (ref.current && !document.fullscreenElement) {
+      await ref.current.requestFullscreen();
+    }
+  }, []);
+  const exit = useCallback(async () => {
+    if (document.fullscreenElement) {
+      await document.exitFullscreen();
+    }
+  }, []);
+  const toggle = useCallback(async () => {
+    if (document.fullscreenElement) {
+      await document.exitFullscreen();
+    } else if (ref.current) {
+      await ref.current.requestFullscreen();
+    }
+  }, []);
+  return { isFullscreen, enter, exit, toggle, ref };
+}
+
+export { useFullscreen };

package/dist/hooks/geolocation.d.ts

@@ -0,0 +1,10 @@
+interface GeoPosition {
+    latitude: number | null;
+    longitude: number | null;
+    accuracy: number | null;
+    loading: boolean;
+    error: string | null;
+}
+declare function useGeolocation(watch?: boolean): GeoPosition;
+
+export { type GeoPosition, useGeolocation };

package/dist/hooks/geolocation.js

@@ -0,0 +1,38 @@
+"use client";
+import { useState, useCallback, useEffect } from 'react';
+
+function useGeolocation(watch = false) {
+  const [pos, setPos] = useState({
+    latitude: null,
+    longitude: null,
+    accuracy: null,
+    loading: true,
+    error: null
+  });
+  const onSuccess = useCallback((p) => {
+    setPos({
+      latitude: p.coords.latitude,
+      longitude: p.coords.longitude,
+      accuracy: p.coords.accuracy,
+      loading: false,
+      error: null
+    });
+  }, []);
+  const onError = useCallback((e) => {
+    setPos((prev) => ({ ...prev, loading: false, error: e.message }));
+  }, []);
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) {
+      setPos((prev) => ({ ...prev, loading: false, error: "unsupported" }));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(onSuccess, onError);
+    if (watch) {
+      const id = navigator.geolocation.watchPosition(onSuccess, onError);
+      return () => navigator.geolocation.clearWatch(id);
+    }
+  }, [watch, onSuccess, onError]);
+  return pos;
+}
+
+export { useGeolocation };

package/dist/hooks/hash.d.ts

@@ -0,0 +1,3 @@
+declare function useHash(): [string, (hash: string) => void];
+
+export { useHash };

package/dist/hooks/hash.js

@@ -0,0 +1,21 @@
+"use client";
+import { useState, useEffect, useCallback } from 'react';
+
+function useHash() {
+  const [hash, setHash] = useState("");
+  useEffect(() => {
+    setHash(window.location.hash);
+    function handle() {
+      setHash(window.location.hash);
+    }
+    window.addEventListener("hashchange", handle);
+    return () => window.removeEventListener("hashchange", handle);
+  }, []);
+  const updateHash = useCallback((newHash) => {
+    const formatted = newHash.startsWith("#") ? newHash : `#${newHash}`;
+    window.location.hash = formatted;
+  }, []);
+  return [hash, updateHash];
+}
+
+export { useHash };

package/dist/hooks/hotkeys.d.ts

@@ -0,0 +1,11 @@
+interface HotkeyBinding {
+    key: string;
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    handler: () => void;
+}
+declare function useHotkeys(bindings: HotkeyBinding[]): void;
+
+export { type HotkeyBinding, useHotkeys };

package/dist/hooks/hotkeys.js

@@ -0,0 +1,35 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+function matches(e, binding) {
+  if (e.key.toLowerCase() !== binding.key.toLowerCase()) return false;
+  if (binding.ctrl && !e.ctrlKey) return false;
+  if (binding.meta && !e.metaKey) return false;
+  if (binding.shift && !e.shiftKey) return false;
+  if (binding.alt && !e.altKey) return false;
+  return true;
+}
+function useHotkeys(bindings) {
+  const ref = useRef(bindings);
+  ref.current = bindings;
+  useEffect(() => {
+    function handle(e) {
+      if (!(e.target instanceof HTMLElement)) return;
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+      for (const binding of ref.current) {
+        if (matches(e, binding)) {
+          e.preventDefault();
+          binding.handler();
+          return;
+        }
+      }
+    }
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  }, []);
+}
+
+export { useHotkeys };

package/dist/hooks/hover.d.ts

@@ -0,0 +1,3 @@
+declare function useHover<T extends HTMLElement>(): [React.RefObject<T | null>, boolean];
+
+export { useHover };

package/dist/hooks/hover.js

@@ -0,0 +1,22 @@
+"use client";
+import { useRef, useState, useEffect } from 'react';
+
+function useHover() {
+  const ref = useRef(null);
+  const [hovered, setHovered] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const enter = () => setHovered(true);
+    const leave = () => setHovered(false);
+    el.addEventListener("mouseenter", enter);
+    el.addEventListener("mouseleave", leave);
+    return () => {
+      el.removeEventListener("mouseenter", enter);
+      el.removeEventListener("mouseleave", leave);
+    };
+  }, []);
+  return [ref, hovered];
+}
+
+export { useHover };

package/dist/hooks/idle.d.ts

@@ -0,0 +1,3 @@
+declare function useIdle(timeout?: number): boolean;
+
+export { useIdle };

package/dist/hooks/idle.js

@@ -0,0 +1,28 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+
+function useIdle(timeout = 6e4) {
+  const [idle, setIdle] = useState(false);
+  const timer = useRef(null);
+  useEffect(() => {
+    function reset() {
+      setIdle(false);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setIdle(true), timeout);
+    }
+    const events = ["mousemove", "keydown", "scroll", "touchstart", "click"];
+    for (const event of events) {
+      window.addEventListener(event, reset, { passive: true });
+    }
+    reset();
+    return () => {
+      for (const event of events) {
+        window.removeEventListener(event, reset);
+      }
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [timeout]);
+  return idle;
+}
+
+export { useIdle };

package/dist/hooks/infinitescroll.d.ts

@@ -0,0 +1,9 @@
+interface InfiniteScrollResult {
+    ref: React.RefObject<HTMLElement | null>;
+    loading: boolean;
+    done: boolean;
+    setDone: (done: boolean) => void;
+}
+declare function useInfiniteScroll(onLoadMore: () => Promise<void>, threshold?: number): InfiniteScrollResult;
+
+export { type InfiniteScrollResult, useInfiniteScroll };

package/dist/hooks/infinitescroll.js

@@ -0,0 +1,31 @@
+"use client";
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+function useInfiniteScroll(onLoadMore, threshold = 200) {
+  const ref = useRef(null);
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+  const loadingRef = useRef(false);
+  const handleScroll = useCallback(() => {
+    if (loadingRef.current || done) return;
+    const el = ref.current;
+    const target = el || document.documentElement;
+    const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+    if (scrollBottom < threshold) {
+      loadingRef.current = true;
+      setLoading(true);
+      onLoadMore().finally(() => {
+        loadingRef.current = false;
+        setLoading(false);
+      });
+    }
+  }, [onLoadMore, threshold, done]);
+  useEffect(() => {
+    const el = ref.current || window;
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+  return { ref, loading, done, setDone };
+}
+
+export { useInfiniteScroll };

package/dist/hooks/interval.d.ts

@@ -0,0 +1,3 @@
+declare function useInterval(callback: () => void, delay: number | null): void;
+
+export { useInterval };

package/dist/hooks/interval.js

@@ -0,0 +1,16 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+function useInterval(callback, delay) {
+  const savedCallback = useRef(callback);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    if (delay === null) return;
+    const id = setInterval(() => savedCallback.current(), delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}
+
+export { useInterval };

package/dist/hooks/inview.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+
+interface InViewOptions {
+    threshold?: number;
+    rootMargin?: string;
+    once?: boolean;
+}
+declare function useInView<T extends HTMLElement = HTMLElement>(options?: InViewOptions): [RefObject<T | null>, boolean];
+
+export { type InViewOptions, useInView };

package/dist/hooks/inview.js

@@ -0,0 +1,28 @@
+"use client";
+import { useRef, useState, useEffect } from 'react';
+
+function useInView(options = {}) {
+  const { threshold = 0, rootMargin = "0px", once = false } = options;
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        const visible = entry.isIntersecting;
+        setInView(visible);
+        if (visible && once) {
+          observer.disconnect();
+        }
+      },
+      { threshold, rootMargin }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, once]);
+  return [ref, inView];
+}
+
+export { useInView };

package/dist/hooks/keyboard.d.ts

@@ -0,0 +1,14 @@
+import { DocMeta } from '../content.js';
+import 'zod';
+import '../schema.js';
+
+declare function useKeyboardNav(docs: DocMeta[], basePath?: string): void;
+interface ShortcutOptions {
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    preventDefault?: boolean;
+}
+declare function useKeyboardShortcut(key: string, callback: () => void, options?: ShortcutOptions): void;
+
+export { useKeyboardNav, useKeyboardShortcut };

package/dist/hooks/keyboard.js

@@ -0,0 +1,82 @@
+"use client";
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+function sortDocs(docs) {
+  const intro = [];
+  const components = [];
+  const api = [];
+  const other = [];
+  for (const doc of docs) {
+    if (doc.slug.startsWith("components/")) {
+      components.push(doc);
+    } else if (doc.slug.startsWith("api/")) {
+      api.push(doc);
+    } else if (!doc.slug || doc.slug.match(/^[^/]+$/)) {
+      intro.push(doc);
+    } else {
+      other.push(doc);
+    }
+  }
+  const sortByOrder = (a, b) => (a.order ?? 999) - (b.order ?? 999);
+  return [
+    ...intro.sort(sortByOrder),
+    ...components.sort(sortByOrder),
+    ...api.sort(sortByOrder),
+    ...other.sort(sortByOrder)
+  ];
+}
+function useKeyboardNav(docs, basePath = "/docs") {
+  const pathname = usePathname();
+  const router = useRouter();
+  useEffect(() => {
+    const sorted = sortDocs(docs);
+    const paths = sorted.map((d) => d.slug ? `${basePath}/${d.slug}` : basePath);
+    const current = paths.indexOf(pathname);
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
+      if (e.key === "ArrowRight" && current < paths.length - 1) {
+        e.preventDefault();
+        const next = paths[current + 1];
+        if (next) router.push(next);
+      }
+      if (e.key === "ArrowLeft" && current > 0) {
+        e.preventDefault();
+        const prev = paths[current - 1];
+        if (prev) router.push(prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [docs, pathname, router, basePath]);
+}
+function editable(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return true;
+  return target.isContentEditable;
+}
+function useKeyboardShortcut(key, callback, options = {}) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  useEffect(() => {
+    function handler(e) {
+      if (editable(e.target)) return;
+      const opts = optionsRef.current;
+      if (opts.ctrl && !e.ctrlKey) return;
+      if (opts.meta && !e.metaKey) return;
+      if (opts.shift && !e.shiftKey) return;
+      if (e.key.toLowerCase() !== key.toLowerCase()) return;
+      if (opts.preventDefault !== false) {
+        e.preventDefault();
+      }
+      callbackRef.current();
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [key]);
+}
+
+export { useKeyboardNav, useKeyboardShortcut };

package/dist/hooks/keypress.d.ts

@@ -0,0 +1,3 @@
+declare function useKeyPress(targetKey: string): boolean;
+
+export { useKeyPress };