@monstermann/signals-modal 0.4.3 → 0.4.5

package/dist/anchor/getAnchorElement.d.mts

@@ -1,4 +1,34 @@
 //#region src/anchor/getAnchorElement.d.ts
+/**
+ * # getAnchorElement
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function getAnchorElement(key: string): HTMLElement | undefined;
+ * ```
+ *
+ * Retrieves the current anchor element for the given `key`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withAnchorElement,
+ *     setAnchorElement,
+ *     getAnchorElement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withAnchorElement();
+ * });
+ *
+ * setAnchorElement("key", document.querySelector(".anchor"));
+ * getAnchorElement("key"); // HTMLElement
+ * ```
+ *
+ */
 declare function getAnchorElement(key: string): HTMLElement | undefined;
 //#endregion
 export { getAnchorElement };

package/dist/anchor/getAnchorElement.mjs

@@ -1,6 +1,36 @@
 import { $anchorElements } from "./internals.mjs";
 
 //#region src/anchor/getAnchorElement.ts
+/**
+* # getAnchorElement
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function getAnchorElement(key: string): HTMLElement | undefined;
+* ```
+*
+* Retrieves the current anchor element for the given `key`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withAnchorElement,
+*     setAnchorElement,
+*     getAnchorElement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withAnchorElement();
+* });
+*
+* setAnchorElement("key", document.querySelector(".anchor"));
+* getAnchorElement("key"); // HTMLElement
+* ```
+*
+*/
 function getAnchorElement(key) {
 	return $anchorElements().get(key)?.() ?? void 0;
 }

package/dist/anchor/getAnchorMeasurement.d.mts

@@ -1,6 +1,44 @@
-import { Rect } from "@monstermann/fn";
+import { Rect } from "@monstermann/geometry";
 
 //#region src/anchor/getAnchorMeasurement.d.ts
+
+/**
+ * # getAnchorMeasurement
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function getAnchorMeasurement(key: string): Rect;
+ * ```
+ *
+ * Retrieves the current result of `withAnchorMeasurement` or `withMouseAnchor`, falling back to an empty `Rect`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withAnchorElement,
+ *     withModalStatus,
+ *     withAnchorMeasurement,
+ *     getAnchorMeasurement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     const $anchorElement = withAnchorElement();
+ *     // Memo({ top: number, left: number, width: number, height: number })
+ *     const $anchorMeasurement = withAnchorMeasurement({
+ *         $status,
+ *         $anchorElement,
+ *     });
+ * });
+ *
+ * // { top: number, left: number, width: number, height: number }
+ * getAnchorMeasurement("key");
+ * ```
+ *
+ */
 declare function getAnchorMeasurement(key: string): Rect;
 //#endregion
 export { getAnchorMeasurement };

package/dist/anchor/getAnchorMeasurement.mjs

@@ -2,6 +2,43 @@ import { $anchorMeasurements } from "./internals.mjs";
 import { origin } from "@monstermann/geometry/Rect/origin.mjs";
 
 //#region src/anchor/getAnchorMeasurement.ts
+/**
+* # getAnchorMeasurement
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function getAnchorMeasurement(key: string): Rect;
+* ```
+*
+* Retrieves the current result of `withAnchorMeasurement` or `withMouseAnchor`, falling back to an empty `Rect`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withAnchorElement,
+*     withModalStatus,
+*     withAnchorMeasurement,
+*     getAnchorMeasurement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     const { $status } = withModalStatus();
+*     const $anchorElement = withAnchorElement();
+*     // Memo({ top: number, left: number, width: number, height: number })
+*     const $anchorMeasurement = withAnchorMeasurement({
+*         $status,
+*         $anchorElement,
+*     });
+* });
+*
+* // { top: number, left: number, width: number, height: number }
+* getAnchorMeasurement("key");
+* ```
+*
+*/
 function getAnchorMeasurement(key) {
 	return $anchorMeasurements().get(key)?.() ?? origin;
 }

package/dist/anchor/setAnchorElement.d.mts

@@ -1,4 +1,30 @@
 //#region src/anchor/setAnchorElement.d.ts
+/**
+ * # setAnchorElement
+ *
+ * ```ts
+ * function setAnchorElement(key: string, element: HTMLElement | null): void;
+ * ```
+ *
+ * Sets the current anchor element for the given `key`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withAnchorElement,
+ *     getAnchorElement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withAnchorElement();
+ * });
+ *
+ * setAnchorElement("key", document.querySelector(".anchor"));
+ * ```
+ *
+ */
 declare function setAnchorElement(key: string, element: HTMLElement | null): void;
 //#endregion
 export { setAnchorElement };

package/dist/anchor/setAnchorElement.mjs

@@ -1,6 +1,32 @@
 import { $anchorElements } from "./internals.mjs";
 
 //#region src/anchor/setAnchorElement.ts
+/**
+* # setAnchorElement
+*
+* ```ts
+* function setAnchorElement(key: string, element: HTMLElement | null): void;
+* ```
+*
+* Sets the current anchor element for the given `key`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withAnchorElement,
+*     getAnchorElement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withAnchorElement();
+* });
+*
+* setAnchorElement("key", document.querySelector(".anchor"));
+* ```
+*
+*/
 function setAnchorElement(key, element) {
 	$anchorElements().get(key)?.(element);
 }

package/dist/anchor/withAnchorElement.d.mts

@@ -1,6 +1,37 @@
 import { Signal } from "@monstermann/signals";
 
 //#region src/anchor/withAnchorElement.d.ts
+
+/**
+ * # withAnchorElement
+ *
+ * ```ts
+ * function withAnchorElement(
+ *     anchorElement?: HTMLElement,
+ * ): Signal<HTMLElement | null>;
+ * ```
+ *
+ * Assigns an anchor element to the current modal. This function must be called inside a `createModal` callback.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withAnchorElement,
+ *     setAnchorElement,
+ *     getAnchorElement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withAnchorElement();
+ * });
+ *
+ * setAnchorElement("key", document.querySelector(".anchor"));
+ * getAnchorElement("key"); // HTMLElement
+ * ```
+ *
+ */
 declare function withAnchorElement(anchorElement?: HTMLElement | null): Signal<HTMLElement | null>;
 //#endregion
 export { withAnchorElement };

package/dist/anchor/withAnchorElement.mjs

@@ -5,9 +5,39 @@ import { INTERNAL, signal } from "@monstermann/signals";
 //#region src/anchor/withAnchorElement.ts
 const meta = {
 	path: "@signals-modal/anchor/withAnchorElement.ts",
-	line: 8,
+	line: 38,
 	name: "withAnchorElement.$anchorElement"
 };
+/**
+* # withAnchorElement
+*
+* ```ts
+* function withAnchorElement(
+*     anchorElement?: HTMLElement,
+* ): Signal<HTMLElement | null>;
+* ```
+*
+* Assigns an anchor element to the current modal. This function must be called inside a `createModal` callback.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withAnchorElement,
+*     setAnchorElement,
+*     getAnchorElement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withAnchorElement();
+* });
+*
+* setAnchorElement("key", document.querySelector(".anchor"));
+* getAnchorElement("key"); // HTMLElement
+* ```
+*
+*/
 function withAnchorElement(anchorElement) {
 	const modal = currentModal();
 	const $anchorElement = signal(anchorElement ?? null, INTERNAL, meta);

package/dist/anchor/withAnchorMeasurement.d.mts

@@ -1,8 +1,51 @@
 import { ModalStatus } from "../status/types.mjs";
 import { Memo, Reactive } from "@monstermann/signals";
-import { Rect } from "@monstermann/fn";
+import { Rect } from "@monstermann/geometry";
 
 //#region src/anchor/withAnchorMeasurement.d.ts
+
+/**
+ * # withAnchorMeasurement
+ *
+ * ```ts
+ * function withAnchorMeasurement(options: {
+ *     $anchorElement: Reactive<HTMLElement | null>;
+ *     $status: Reactive<ModalStatus>;
+ *     transform?: (rect: Rect) => Rect;
+ * }): Memo<Rect>;
+ * ```
+ *
+ * Takes an anchor element and continuously measures its position while the modal is visible, to be used to position eg. a popover next to an element. This function must be called inside a `createModal` callback.
+ *
+ * The optional `transform` option can be used to eg. make the anchor bigger, resulting with a margin between the anchor and floating popover.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withAnchorElement,
+ *     withModalStatus,
+ *     withAnchorMeasurement,
+ *     setAnchorElement,
+ *     setModalStatus,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     const $anchorElement = withAnchorElement();
+ *     // Memo({ top: number, left: number, width: number, height: number })
+ *     const $anchorMeasurement = withAnchorMeasurement({
+ *         $status,
+ *         $anchorElement,
+ *     });
+ * });
+ *
+ * setAnchorElement("key", document.querySelector(".anchor"));
+ * setModalStatus("key", "opened");
+ * ```
+ *
+ */
 declare function withAnchorMeasurement(options: {
   $anchorElement: Reactive<HTMLElement | null>;
   $status: Reactive<ModalStatus>;

package/dist/anchor/withAnchorMeasurement.mjs

@@ -11,19 +11,61 @@ import { fromDOMRect } from "@monstermann/geometry/Rect/fromDOMRect.mjs";
 const path = "@signals-modal/anchor/withAnchorMeasurement.ts";
 const meta = {
 	path,
-	line: 19,
+	line: 61,
 	name: "withAnchorMeasurement.$rect"
 };
 const meta1 = {
 	path,
-	line: 24,
+	line: 66,
 	name: "withAnchorMeasurement.$measurement"
 };
 const meta2 = {
 	path,
-	line: 28,
+	line: 70,
 	name: "withAnchorMeasurement"
 };
+/**
+* # withAnchorMeasurement
+*
+* ```ts
+* function withAnchorMeasurement(options: {
+*     $anchorElement: Reactive<HTMLElement | null>;
+*     $status: Reactive<ModalStatus>;
+*     transform?: (rect: Rect) => Rect;
+* }): Memo<Rect>;
+* ```
+*
+* Takes an anchor element and continuously measures its position while the modal is visible, to be used to position eg. a popover next to an element. This function must be called inside a `createModal` callback.
+*
+* The optional `transform` option can be used to eg. make the anchor bigger, resulting with a margin between the anchor and floating popover.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withAnchorElement,
+*     withModalStatus,
+*     withAnchorMeasurement,
+*     setAnchorElement,
+*     setModalStatus,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     const { $status } = withModalStatus();
+*     const $anchorElement = withAnchorElement();
+*     // Memo({ top: number, left: number, width: number, height: number })
+*     const $anchorMeasurement = withAnchorMeasurement({
+*         $status,
+*         $anchorElement,
+*     });
+* });
+*
+* setAnchorElement("key", document.querySelector(".anchor"));
+* setModalStatus("key", "opened");
+* ```
+*
+*/
 function withAnchorMeasurement(options) {
 	const modal = currentModal();
 	const $rect = signal(origin, {

package/dist/anchor/withMouseAnchor.d.mts

@@ -1,8 +1,42 @@
 import { ModalStatus } from "../status/types.mjs";
 import { Memo, Reactive } from "@monstermann/signals";
-import { Rect } from "@monstermann/fn";
+import { Rect } from "@monstermann/geometry";
 
 //#region src/anchor/withMouseAnchor.d.ts
+
+/**
+ * # withMouseAnchor
+ *
+ * ```ts
+ * function withMouseAnchor(options: {
+ *     $status: Reactive<ModalStatus>;
+ *     transform?: (rect: Rect) => Rect;
+ * }): Memo<Rect>;
+ * ```
+ *
+ * This can be used to make the mouse cursor the anchor, instead of an element. This function must be called inside a `createModal` callback.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalStatus,
+ *     withMouseAnchor,
+ *     setModalStatus,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     // Memo({ top: number, left: number, width: number, height: number })
+ *     const $anchorMeasurement = withMouseAnchor({ $status });
+ * });
+ *
+ * // Updates $anchorMeasurement to the current mouse coordinates (once).
+ * setModalStatus("key", "opened");
+ * ```
+ *
+ */
 declare function withMouseAnchor(options: {
   $status: Reactive<ModalStatus>;
   transform?: (rect: Rect) => Rect;

package/dist/anchor/withMouseAnchor.mjs

@@ -10,19 +10,52 @@ import { $mouseX, $mouseY } from "@monstermann/signals-web";
 const path = "@signals-modal/anchor/withMouseAnchor.ts";
 const meta = {
 	path,
-	line: 17,
+	line: 50,
 	name: "withMouseAnchor.$rect"
 };
 const meta1 = {
 	path,
-	line: 22,
+	line: 55,
 	name: "withMouseAnchor.$measurement"
 };
 const meta2 = {
 	path,
-	line: 26,
+	line: 59,
 	name: "withMouseAnchor"
 };
+/**
+* # withMouseAnchor
+*
+* ```ts
+* function withMouseAnchor(options: {
+*     $status: Reactive<ModalStatus>;
+*     transform?: (rect: Rect) => Rect;
+* }): Memo<Rect>;
+* ```
+*
+* This can be used to make the mouse cursor the anchor, instead of an element. This function must be called inside a `createModal` callback.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalStatus,
+*     withMouseAnchor,
+*     setModalStatus,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     const { $status } = withModalStatus();
+*     // Memo({ top: number, left: number, width: number, height: number })
+*     const $anchorMeasurement = withMouseAnchor({ $status });
+* });
+*
+* // Updates $anchorMeasurement to the current mouse coordinates (once).
+* setModalStatus("key", "opened");
+* ```
+*
+*/
 function withMouseAnchor(options) {
 	const modal = currentModal();
 	const $rect = signal(origin, {

package/dist/createModal.d.mts

@@ -10,6 +10,35 @@ interface ModalContext {
 }
 declare const onModalDisposed: _monstermann_signals0.Emitter<string>;
 declare function currentModal(): ModalContext;
+/**
+ * # createModal
+ *
+ * ```ts
+ * function createModal(
+ *     key: string,
+ *     setup: () => T,
+ * ): T & {
+ *     key: string;
+ *     dispose: () => void;
+ *     isDisposed: () => boolean;
+ *     onDispose: (dispose: MaybeDispose) => void;
+ * };
+ * ```
+ *
+ * Creates a new modal.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import { createModal } from "@monstermann/signals-modal";
+ *
+ * const modal = createModal("key", () => ({}));
+ * modal.key;
+ * modal.dispose();
+ * modal.onDispose(callback);
+ * ```
+ *
+ */
 declare function createModal<T extends object>(key: string, setup: () => T): ModalContext & T;
 //#endregion
 export { ModalContext, createModal, currentModal, onModalDisposed };

package/dist/createModal.mjs

@@ -16,6 +16,35 @@ function currentModal() {
 	if (!ctx) throw new Error("`currentModal` called outside of `createModal` context.");
 	return ctx;
 }
+/**
+* # createModal
+*
+* ```ts
+* function createModal(
+*     key: string,
+*     setup: () => T,
+* ): T & {
+*     key: string;
+*     dispose: () => void;
+*     isDisposed: () => boolean;
+*     onDispose: (dispose: MaybeDispose) => void;
+* };
+* ```
+*
+* Creates a new modal.
+*
+* ## Example
+*
+* ```ts
+* import { createModal } from "@monstermann/signals-modal";
+*
+* const modal = createModal("key", () => ({}));
+* modal.key;
+* modal.dispose();
+* modal.onDispose(callback);
+* ```
+*
+*/
 function createModal(key, setup) {
 	const dispose = disposer();
 	const nextCtx = {

package/dist/floating/getFloatingElement.d.mts

@@ -1,4 +1,34 @@
 //#region src/floating/getFloatingElement.d.ts
+/**
+ * # getFloatingElement
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function getFloatingElement(key: string): HTMLElement | undefined;
+ * ```
+ *
+ * Retrieves the current floating element for the given `key`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withFloatingElement,
+ *     setFloatingElement,
+ *     getFloatingElement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withFloatingElement();
+ * });
+ *
+ * setFloatingElement("key", document.querySelector(".floating"));
+ * getFloatingElement("key"); // HTMLElement
+ * ```
+ *
+ */
 declare function getFloatingElement(key: string): HTMLElement | undefined;
 //#endregion
 export { getFloatingElement };

package/dist/floating/getFloatingElement.mjs

@@ -1,6 +1,36 @@
 import { $floatingElements } from "./internals.mjs";
 
 //#region src/floating/getFloatingElement.ts
+/**
+* # getFloatingElement
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function getFloatingElement(key: string): HTMLElement | undefined;
+* ```
+*
+* Retrieves the current floating element for the given `key`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withFloatingElement,
+*     setFloatingElement,
+*     getFloatingElement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withFloatingElement();
+* });
+*
+* setFloatingElement("key", document.querySelector(".floating"));
+* getFloatingElement("key"); // HTMLElement
+* ```
+*
+*/
 function getFloatingElement(key) {
 	return $floatingElements().get(key)?.() ?? void 0;
 }