@pixpilot/shadcn-kanban 0.0.0

package/dist/hooks/use-kanban-drag.cjs

@@ -0,0 +1,98 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_column_sortable_id = require('../utils/column-sortable-id.cjs');
+const require_kanban_keyboard_coordinates = require('../utils/kanban-keyboard-coordinates.cjs');
+const require_use_kanban_board_state = require('./use-kanban-board-state.cjs');
+const require_use_kanban_card_drag = require('./use-kanban-card-drag.cjs');
+const require_use_kanban_collision_detection = require('./use-kanban-collision-detection.cjs');
+const require_use_kanban_column_reorder = require('./use-kanban-column-reorder.cjs');
+let __dnd_kit_core = require("@dnd-kit/core");
+__dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-drag.ts
+const POINTER_ACTIVATION_DISTANCE = 5;
+/**
+* Drag-and-drop state machine for the Kanban board, following dnd-kit's
+* multiple-containers pattern. Owns the shared drag state and routes each
+* event to either the card handlers or the column reorder handler.
+*/
+function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
+	const [activeId, setActiveId] = react.default.useState(null);
+	const isDragActiveRef = react.default.useRef(false);
+	const dragStartItemsRef = react.default.useRef(externalItems);
+	const lastOverIdRef = react.default.useRef(null);
+	const recentlyMovedToNewColumnRef = react.default.useRef(false);
+	const { items, itemsRef, applyItems, internalColumns, setInternalColumns } = require_use_kanban_board_state.useKanbanBoardState({
+		externalItems,
+		columns,
+		isDragActiveRef
+	});
+	react.default.useEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			recentlyMovedToNewColumnRef.current = false;
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [items]);
+	const columnIds = react.default.useMemo(() => new Set(internalColumns.map((column) => column.id)), [internalColumns]);
+	const sensors = (0, __dnd_kit_core.useSensors)((0, __dnd_kit_core.useSensor)(__dnd_kit_core.PointerSensor, { activationConstraint: { distance: POINTER_ACTIVATION_DISTANCE } }), (0, __dnd_kit_core.useSensor)(__dnd_kit_core.KeyboardSensor, { coordinateGetter: require_kanban_keyboard_coordinates.kanbanKeyboardCoordinates }));
+	const collisionDetection = require_use_kanban_collision_detection.useKanbanCollisionDetection({
+		columnIds,
+		itemsRef,
+		lastOverIdRef,
+		recentlyMovedToNewColumnRef
+	});
+	const { handleCardDragOver, handleCardDragEnd } = require_use_kanban_card_drag.useKanbanCardDrag({
+		columnIds,
+		itemsRef,
+		applyItems,
+		dragStartItemsRef,
+		recentlyMovedToNewColumnRef,
+		onChange
+	});
+	const handleColumnDragEnd = require_use_kanban_column_reorder.useKanbanColumnReorder({
+		internalColumns,
+		setInternalColumns,
+		onColumnChange
+	});
+	const handleDragStart = react.default.useCallback((event) => {
+		isDragActiveRef.current = true;
+		dragStartItemsRef.current = itemsRef.current;
+		lastOverIdRef.current = null;
+		setActiveId(event.active.id);
+	}, [itemsRef]);
+	const handleDragEnd = react.default.useCallback((event) => {
+		isDragActiveRef.current = false;
+		lastOverIdRef.current = null;
+		setActiveId(null);
+		if (require_column_sortable_id.isColumnSortableId(event.active.id)) {
+			handleColumnDragEnd(event);
+			return;
+		}
+		handleCardDragEnd(event);
+	}, [handleCardDragEnd, handleColumnDragEnd]);
+	const handleDragCancel = react.default.useCallback(() => {
+		isDragActiveRef.current = false;
+		lastOverIdRef.current = null;
+		setActiveId(null);
+		applyItems(dragStartItemsRef.current);
+	}, [applyItems]);
+	return {
+		items,
+		internalColumns,
+		activeId,
+		isDraggingColumn: activeId != null && require_column_sortable_id.isColumnSortableId(activeId),
+		sensors,
+		collisionDetection,
+		handleDragStart,
+		handleDragOver: handleCardDragOver,
+		handleDragEnd,
+		handleDragCancel
+	};
+}
+
+//#endregion
+exports.useKanbanDrag = useKanbanDrag;

package/dist/hooks/use-kanban-drag.js

@@ -0,0 +1,95 @@
+'use client';
+
+
+import { isColumnSortableId } from "../utils/column-sortable-id.js";
+import { kanbanKeyboardCoordinates } from "../utils/kanban-keyboard-coordinates.js";
+import { useKanbanBoardState } from "./use-kanban-board-state.js";
+import { useKanbanCardDrag } from "./use-kanban-card-drag.js";
+import { useKanbanCollisionDetection } from "./use-kanban-collision-detection.js";
+import { useKanbanColumnReorder } from "./use-kanban-column-reorder.js";
+import { KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import React from "react";
+
+//#region src/hooks/use-kanban-drag.ts
+const POINTER_ACTIVATION_DISTANCE = 5;
+/**
+* Drag-and-drop state machine for the Kanban board, following dnd-kit's
+* multiple-containers pattern. Owns the shared drag state and routes each
+* event to either the card handlers or the column reorder handler.
+*/
+function useKanbanDrag({ externalItems, columns, onChange, onColumnChange }) {
+	const [activeId, setActiveId] = React.useState(null);
+	const isDragActiveRef = React.useRef(false);
+	const dragStartItemsRef = React.useRef(externalItems);
+	const lastOverIdRef = React.useRef(null);
+	const recentlyMovedToNewColumnRef = React.useRef(false);
+	const { items, itemsRef, applyItems, internalColumns, setInternalColumns } = useKanbanBoardState({
+		externalItems,
+		columns,
+		isDragActiveRef
+	});
+	React.useEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			recentlyMovedToNewColumnRef.current = false;
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [items]);
+	const columnIds = React.useMemo(() => new Set(internalColumns.map((column) => column.id)), [internalColumns]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: POINTER_ACTIVATION_DISTANCE } }), useSensor(KeyboardSensor, { coordinateGetter: kanbanKeyboardCoordinates }));
+	const collisionDetection = useKanbanCollisionDetection({
+		columnIds,
+		itemsRef,
+		lastOverIdRef,
+		recentlyMovedToNewColumnRef
+	});
+	const { handleCardDragOver, handleCardDragEnd } = useKanbanCardDrag({
+		columnIds,
+		itemsRef,
+		applyItems,
+		dragStartItemsRef,
+		recentlyMovedToNewColumnRef,
+		onChange
+	});
+	const handleColumnDragEnd = useKanbanColumnReorder({
+		internalColumns,
+		setInternalColumns,
+		onColumnChange
+	});
+	const handleDragStart = React.useCallback((event) => {
+		isDragActiveRef.current = true;
+		dragStartItemsRef.current = itemsRef.current;
+		lastOverIdRef.current = null;
+		setActiveId(event.active.id);
+	}, [itemsRef]);
+	const handleDragEnd = React.useCallback((event) => {
+		isDragActiveRef.current = false;
+		lastOverIdRef.current = null;
+		setActiveId(null);
+		if (isColumnSortableId(event.active.id)) {
+			handleColumnDragEnd(event);
+			return;
+		}
+		handleCardDragEnd(event);
+	}, [handleCardDragEnd, handleColumnDragEnd]);
+	const handleDragCancel = React.useCallback(() => {
+		isDragActiveRef.current = false;
+		lastOverIdRef.current = null;
+		setActiveId(null);
+		applyItems(dragStartItemsRef.current);
+	}, [applyItems]);
+	return {
+		items,
+		internalColumns,
+		activeId,
+		isDraggingColumn: activeId != null && isColumnSortableId(activeId),
+		sensors,
+		collisionDetection,
+		handleDragStart,
+		handleDragOver: handleCardDragOver,
+		handleDragEnd,
+		handleDragCancel
+	};
+}
+
+//#endregion
+export { useKanbanDrag };

package/dist/hooks/use-kanban-filters.cjs

@@ -0,0 +1,49 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-kanban-filters.ts
+/** Tracks per-column active filters and notifies the parent about changes. */
+function useKanbanFilters({ filters, onFilterChange }) {
+	const [activeFilters, setActiveFilters] = react.default.useState({});
+	/** Resolve the filters available for a given column. */
+	const resolveFilters = react.default.useCallback((column) => {
+		if (!filters) return [];
+		return (typeof filters === "function" ? filters(column) : filters) ?? [];
+	}, [filters]);
+	const emitFilterChange = react.default.useCallback((column, nextActiveIds) => {
+		if (!onFilterChange) return;
+		onFilterChange({
+			column,
+			activeFilterIds: nextActiveIds,
+			activeFilters: resolveFilters(column).filter((f) => nextActiveIds.includes(f.id))
+		});
+	}, [onFilterChange, resolveFilters]);
+	return {
+		activeFilters,
+		resolveFilters,
+		handleToggleFilter: react.default.useCallback((column, filterId) => {
+			const current = activeFilters[column.id] ?? [];
+			const next = current.includes(filterId) ? current.filter((id) => id !== filterId) : [...current, filterId];
+			setActiveFilters({
+				...activeFilters,
+				[column.id]: next
+			});
+			emitFilterChange(column, next);
+		}, [activeFilters, emitFilterChange]),
+		handleClearFilters: react.default.useCallback((column) => {
+			if ((activeFilters[column.id] ?? []).length === 0) return;
+			setActiveFilters({
+				...activeFilters,
+				[column.id]: []
+			});
+			emitFilterChange(column, []);
+		}, [activeFilters, emitFilterChange])
+	};
+}
+
+//#endregion
+exports.useKanbanFilters = useKanbanFilters;

package/dist/hooks/use-kanban-filters.js

@@ -0,0 +1,47 @@
+'use client';
+
+
+import React from "react";
+
+//#region src/hooks/use-kanban-filters.ts
+/** Tracks per-column active filters and notifies the parent about changes. */
+function useKanbanFilters({ filters, onFilterChange }) {
+	const [activeFilters, setActiveFilters] = React.useState({});
+	/** Resolve the filters available for a given column. */
+	const resolveFilters = React.useCallback((column) => {
+		if (!filters) return [];
+		return (typeof filters === "function" ? filters(column) : filters) ?? [];
+	}, [filters]);
+	const emitFilterChange = React.useCallback((column, nextActiveIds) => {
+		if (!onFilterChange) return;
+		onFilterChange({
+			column,
+			activeFilterIds: nextActiveIds,
+			activeFilters: resolveFilters(column).filter((f) => nextActiveIds.includes(f.id))
+		});
+	}, [onFilterChange, resolveFilters]);
+	return {
+		activeFilters,
+		resolveFilters,
+		handleToggleFilter: React.useCallback((column, filterId) => {
+			const current = activeFilters[column.id] ?? [];
+			const next = current.includes(filterId) ? current.filter((id) => id !== filterId) : [...current, filterId];
+			setActiveFilters({
+				...activeFilters,
+				[column.id]: next
+			});
+			emitFilterChange(column, next);
+		}, [activeFilters, emitFilterChange]),
+		handleClearFilters: React.useCallback((column) => {
+			if ((activeFilters[column.id] ?? []).length === 0) return;
+			setActiveFilters({
+				...activeFilters,
+				[column.id]: []
+			});
+			emitFilterChange(column, []);
+		}, [activeFilters, emitFilterChange])
+	};
+}
+
+//#endregion
+export { useKanbanFilters };

package/dist/index.cjs

@@ -0,0 +1,3 @@
+const require_KanbanBoard = require('./KanbanBoard.cjs');
+
+exports.KanbanBoard = require_KanbanBoard.KanbanBoard;

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { IntersectionOptions } from "./infinite-scroll/types.cjs";
+import "./infinite-scroll/index.cjs";
+import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization } from "./types.cjs";
+import { KanbanBoard } from "./KanbanBoard.cjs";
+export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { IntersectionOptions } from "./infinite-scroll/types.js";
+import "./infinite-scroll/index.js";
+import { ColumnOverflow, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization } from "./types.js";
+import { KanbanBoard } from "./KanbanBoard.js";
+export { ColumnOverflow, type IntersectionOptions, KanbanBoard, KanbanBoardProps, KanbanChangeEvent, KanbanColumn, KanbanFilter, KanbanFilterChangeEvent, KanbanFilters, KanbanInfiniteScroll, KanbanItem, KanbanVirtualization };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { KanbanBoard } from "./KanbanBoard.js";
+
+export { KanbanBoard };

package/dist/infinite-scroll/InfiniteScrollSentinel.cjs

@@ -0,0 +1,54 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_use_intersection_observer = require('./use-intersection-observer.cjs');
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/infinite-scroll/InfiniteScrollSentinel.tsx
+function DefaultLoading() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "text-muted-foreground flex items-center gap-2 text-xs",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "h-3.5 w-3.5 animate-spin" }), "Loading…"]
+	});
+}
+/**
+* An invisible element placed after the last item of a scrollable list. When it
+* scrolls into view it asks the parent for the next page.
+*
+* ```
+* ┌─────────────────┐
+* │ list item 1     │
+* │ …               │
+* │ list item N     │
+* │ [sentinel]  ◄───┼── observed
+* └─────────────────┘
+* ```
+*
+* The parent stays in control of the data: this only reports *when* to load.
+*/
+function InfiniteScrollSentinel({ onLoadMore, hasMore = true, isLoading = false, loadingComponent, endMessage, className, distance, root, threshold, disabled = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: require_use_intersection_observer.useIntersectionObserver({
+			onIntersect: onLoadMore,
+			distance,
+			root,
+			threshold,
+			disabled: disabled || !hasMore || isLoading
+		}),
+		"data-slot": "infinite-scroll-sentinel",
+		"aria-hidden": !isLoading,
+		className: (0, __pixpilot_shadcn_ui.cn)("flex shrink-0 items-center justify-center py-2", className),
+		children: [isLoading ? loadingComponent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultLoading, {}) : null, !isLoading && !hasMore ? endMessage : null]
+	});
+}
+
+//#endregion
+exports.InfiniteScrollSentinel = InfiniteScrollSentinel;

package/dist/infinite-scroll/InfiniteScrollSentinel.d.cts

@@ -0,0 +1,2 @@
+import "./types.cjs";
+import "react/jsx-runtime";

package/dist/infinite-scroll/InfiniteScrollSentinel.d.ts

@@ -0,0 +1,2 @@
+import "./types.js";
+import "react/jsx-runtime";

package/dist/infinite-scroll/InfiniteScrollSentinel.js

@@ -0,0 +1,49 @@
+'use client';
+
+
+import { useIntersectionObserver } from "./use-intersection-observer.js";
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/infinite-scroll/InfiniteScrollSentinel.tsx
+function DefaultLoading() {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "text-muted-foreground flex items-center gap-2 text-xs",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), "Loading…"]
+	});
+}
+/**
+* An invisible element placed after the last item of a scrollable list. When it
+* scrolls into view it asks the parent for the next page.
+*
+* ```
+* ┌─────────────────┐
+* │ list item 1     │
+* │ …               │
+* │ list item N     │
+* │ [sentinel]  ◄───┼── observed
+* └─────────────────┘
+* ```
+*
+* The parent stays in control of the data: this only reports *when* to load.
+*/
+function InfiniteScrollSentinel({ onLoadMore, hasMore = true, isLoading = false, loadingComponent, endMessage, className, distance, root, threshold, disabled = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useIntersectionObserver({
+			onIntersect: onLoadMore,
+			distance,
+			root,
+			threshold,
+			disabled: disabled || !hasMore || isLoading
+		}),
+		"data-slot": "infinite-scroll-sentinel",
+		"aria-hidden": !isLoading,
+		className: cn("flex shrink-0 items-center justify-center py-2", className),
+		children: [isLoading ? loadingComponent ?? /* @__PURE__ */ jsx(DefaultLoading, {}) : null, !isLoading && !hasMore ? endMessage : null]
+	});
+}
+
+//#endregion
+export { InfiniteScrollSentinel };

package/dist/infinite-scroll/index.d.cts

@@ -0,0 +1,3 @@
+import { IntersectionOptions } from "./types.cjs";
+import "./InfiniteScrollSentinel.cjs";
+import "./use-intersection-observer.cjs";

package/dist/infinite-scroll/index.d.ts

@@ -0,0 +1,3 @@
+import { IntersectionOptions } from "./types.js";
+import "./InfiniteScrollSentinel.js";
+import "./use-intersection-observer.js";

package/dist/infinite-scroll/types.d.cts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/infinite-scroll/types.d.ts
+/** Tuning knobs shared by the observer hook and the sentinel component. */
+interface IntersectionOptions {
+  /**
+   * How many pixels before the sentinel actually reaches the scroll edge the
+   * callback should fire. Larger values load earlier and hide the wait.
+   *
+   * @default 200
+   */
+  distance?: number;
+  /**
+   * The scrollable ancestor to measure against. Pass the element that owns the
+   * overflow; defaults to the browser viewport.
+   */
+  root?: Element | null;
+  /**
+   * Fraction of the sentinel that must be visible before it counts as
+   * intersecting.
+   *
+   * @default 0
+   */
+  threshold?: number;
+  /** Stops observing entirely while `true`. */
+  disabled?: boolean;
+}
+//#endregion
+export { IntersectionOptions };

package/dist/infinite-scroll/types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/infinite-scroll/types.d.ts
+/** Tuning knobs shared by the observer hook and the sentinel component. */
+interface IntersectionOptions {
+  /**
+   * How many pixels before the sentinel actually reaches the scroll edge the
+   * callback should fire. Larger values load earlier and hide the wait.
+   *
+   * @default 200
+   */
+  distance?: number;
+  /**
+   * The scrollable ancestor to measure against. Pass the element that owns the
+   * overflow; defaults to the browser viewport.
+   */
+  root?: Element | null;
+  /**
+   * Fraction of the sentinel that must be visible before it counts as
+   * intersecting.
+   *
+   * @default 0
+   */
+  threshold?: number;
+  /** Stops observing entirely while `true`. */
+  disabled?: boolean;
+}
+//#endregion
+export { IntersectionOptions };

package/dist/infinite-scroll/use-intersection-observer.cjs

@@ -0,0 +1,46 @@
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/infinite-scroll/use-intersection-observer.ts
+const DEFAULT_DISTANCE = 200;
+/**
+* Observes a single node and calls `onIntersect` whenever it comes into view.
+*
+* Returns a ref callback to attach to the node being watched. The observer is
+* rebuilt whenever `disabled` or any of the geometry options change — which is
+* what lets a caller resume paging: re-observing emits a fresh entry even when
+* the node never actually left the viewport, so a page too short to push the
+* node out of view does not silently stall the sequence.
+*/
+function useIntersectionObserver({ onIntersect, distance = DEFAULT_DISTANCE, root, threshold = 0, disabled = false }) {
+	const [node, setNode] = react.default.useState(null);
+	const onIntersectRef = react.default.useRef(onIntersect);
+	onIntersectRef.current = onIntersect;
+	react.default.useEffect(() => {
+		if (node == null || disabled) return void 0;
+		if (typeof IntersectionObserver === "undefined") return void 0;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) onIntersectRef.current();
+		}, {
+			root: root ?? null,
+			rootMargin: `0px 0px ${distance}px 0px`,
+			threshold
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		node,
+		disabled,
+		root,
+		distance,
+		threshold
+	]);
+	return setNode;
+}
+
+//#endregion
+exports.useIntersectionObserver = useIntersectionObserver;

package/dist/infinite-scroll/use-intersection-observer.d.cts

@@ -0,0 +1 @@
+import "./types.cjs";

package/dist/infinite-scroll/use-intersection-observer.d.ts

@@ -0,0 +1 @@
+import "./types.js";

package/dist/infinite-scroll/use-intersection-observer.js

@@ -0,0 +1,44 @@
+'use client';
+
+
+import React from "react";
+
+//#region src/infinite-scroll/use-intersection-observer.ts
+const DEFAULT_DISTANCE = 200;
+/**
+* Observes a single node and calls `onIntersect` whenever it comes into view.
+*
+* Returns a ref callback to attach to the node being watched. The observer is
+* rebuilt whenever `disabled` or any of the geometry options change — which is
+* what lets a caller resume paging: re-observing emits a fresh entry even when
+* the node never actually left the viewport, so a page too short to push the
+* node out of view does not silently stall the sequence.
+*/
+function useIntersectionObserver({ onIntersect, distance = DEFAULT_DISTANCE, root, threshold = 0, disabled = false }) {
+	const [node, setNode] = React.useState(null);
+	const onIntersectRef = React.useRef(onIntersect);
+	onIntersectRef.current = onIntersect;
+	React.useEffect(() => {
+		if (node == null || disabled) return void 0;
+		if (typeof IntersectionObserver === "undefined") return void 0;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) onIntersectRef.current();
+		}, {
+			root: root ?? null,
+			rootMargin: `0px 0px ${distance}px 0px`,
+			threshold
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		node,
+		disabled,
+		root,
+		distance,
+		threshold
+	]);
+	return setNode;
+}
+
+//#endregion
+export { useIntersectionObserver };