@monstermann/signals-modal 0.4.3 → 0.4.5

package/dist/groups/isDialog.d.mts

@@ -1,4 +1,33 @@
 //#region src/groups/isDialog.d.ts
+/**
+ * # isDialog
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function isDialog(key: string): boolean;
+ * ```
+ *
+ * Returns a boolean indicating whether the given `key` belongs to the `modalGroups.dialog` group.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalGroups,
+ *     modalGroups,
+ *     isDialog,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withModalGroups([modalGroups.popover]);
+ * });
+ *
+ * isDialog("key"); // true
+ * ```
+ *
+ */
 declare function isDialog(key: string): boolean;
 //#endregion
 export { isDialog };

package/dist/groups/isDialog.mjs

@@ -2,6 +2,35 @@ import { modalGroups } from "./modalGroups.mjs";
 import { getGroupsForModal } from "./getGroupsForModal.mjs";
 
 //#region src/groups/isDialog.ts
+/**
+* # isDialog
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function isDialog(key: string): boolean;
+* ```
+*
+* Returns a boolean indicating whether the given `key` belongs to the `modalGroups.dialog` group.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalGroups,
+*     modalGroups,
+*     isDialog,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withModalGroups([modalGroups.popover]);
+* });
+*
+* isDialog("key"); // true
+* ```
+*
+*/
 function isDialog(key) {
 	return getGroupsForModal(key).has(modalGroups.dialog);
 }

package/dist/groups/isModalInGroup.d.mts

@@ -1,4 +1,33 @@
 //#region src/groups/isModalInGroup.d.ts
+/**
+ * # isModalInGroup
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function isModalInGroup(key: string, group: string): boolean;
+ * ```
+ *
+ * Returns a boolean indicating whether the given `key` belongs to the `group`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalGroups,
+ *     modalGroups,
+ *     isModalInGroup,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withModalGroups([modalGroups.popover]);
+ * });
+ *
+ * isModalInGroup("key", modalGroups.popover); // true
+ * ```
+ *
+ */
 declare function isModalInGroup(key: string, group: string): boolean;
 //#endregion
 export { isModalInGroup };

package/dist/groups/isModalInGroup.mjs

@@ -1,6 +1,35 @@
 import { getGroupsForModal } from "./getGroupsForModal.mjs";
 
 //#region src/groups/isModalInGroup.ts
+/**
+* # isModalInGroup
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function isModalInGroup(key: string, group: string): boolean;
+* ```
+*
+* Returns a boolean indicating whether the given `key` belongs to the `group`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalGroups,
+*     modalGroups,
+*     isModalInGroup,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withModalGroups([modalGroups.popover]);
+* });
+*
+* isModalInGroup("key", modalGroups.popover); // true
+* ```
+*
+*/
 function isModalInGroup(key, group) {
 	return getGroupsForModal(key).has(group);
 }

package/dist/groups/isPopover.d.mts

@@ -1,4 +1,33 @@
 //#region src/groups/isPopover.d.ts
+/**
+ * # isPopover
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function isPopover(key: string): boolean;
+ * ```
+ *
+ * Returns a boolean indicating whether the given `key` belongs to the `modalGroups.popover` group.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalGroups,
+ *     modalGroups,
+ *     isPopover,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withModalGroups([modalGroups.popover]);
+ * });
+ *
+ * isPopover("key"); // true
+ * ```
+ *
+ */
 declare function isPopover(key: string): boolean;
 //#endregion
 export { isPopover };

package/dist/groups/isPopover.mjs

@@ -2,6 +2,35 @@ import { modalGroups } from "./modalGroups.mjs";
 import { getGroupsForModal } from "./getGroupsForModal.mjs";
 
 //#region src/groups/isPopover.ts
+/**
+* # isPopover
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function isPopover(key: string): boolean;
+* ```
+*
+* Returns a boolean indicating whether the given `key` belongs to the `modalGroups.popover` group.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalGroups,
+*     modalGroups,
+*     isPopover,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withModalGroups([modalGroups.popover]);
+* });
+*
+* isPopover("key"); // true
+* ```
+*
+*/
 function isPopover(key) {
 	return getGroupsForModal(key).has(modalGroups.popover);
 }

package/dist/groups/isTooltip.d.mts

@@ -1,4 +1,33 @@
 //#region src/groups/isTooltip.d.ts
+/**
+ * # isTooltip
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function isTooltip(key: string): boolean;
+ * ```
+ *
+ * Returns a boolean indicating whether the given `key` belongs to the `modalGroups.tooltip` group.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalGroups,
+ *     modalGroups,
+ *     isTooltip,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withModalGroups([modalGroups.popover]);
+ * });
+ *
+ * isTooltip("key"); // true
+ * ```
+ *
+ */
 declare function isTooltip(key: string): boolean;
 //#endregion
 export { isTooltip };

package/dist/groups/isTooltip.mjs

@@ -2,6 +2,35 @@ import { modalGroups } from "./modalGroups.mjs";
 import { getGroupsForModal } from "./getGroupsForModal.mjs";
 
 //#region src/groups/isTooltip.ts
+/**
+* # isTooltip
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function isTooltip(key: string): boolean;
+* ```
+*
+* Returns a boolean indicating whether the given `key` belongs to the `modalGroups.tooltip` group.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalGroups,
+*     modalGroups,
+*     isTooltip,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withModalGroups([modalGroups.popover]);
+* });
+*
+* isTooltip("key"); // true
+* ```
+*
+*/
 function isTooltip(key) {
 	return getGroupsForModal(key).has(modalGroups.tooltip);
 }

package/dist/groups/modalGroups.mjs

@@ -4,6 +4,48 @@ const modalGroups = {
 	popover: "popover",
 	tooltip: "tooltip"
 };
+/**
+* # modalGroups
+*
+* ```ts
+* const modalGroups = {
+*     dialog: "dialog",
+*     popover: "popover",
+*     tooltip: "tooltip",
+* };
+* ```
+*
+* A record containing common modal groups.
+*
+*/
+/**
+* # modalGroups
+*
+* ```ts
+* const modalGroups = {
+*     dialog: "dialog",
+*     popover: "popover",
+*     tooltip: "tooltip",
+* };
+* ```
+*
+* A record containing common modal groups.
+*
+*/
+/**
+* # modalGroups
+*
+* ```ts
+* const modalGroups = {
+*     dialog: "dialog",
+*     popover: "popover",
+*     tooltip: "tooltip",
+* };
+* ```
+*
+* A record containing common modal groups.
+*
+*/
 
 //#endregion
 export { modalGroups };

package/dist/groups/withModalGroups.d.mts

@@ -1,6 +1,36 @@
 import { Memo } from "@monstermann/signals";
 
 //#region src/groups/withModalGroups.d.ts
+
+/**
+ * # withModalGroups
+ *
+ * ```ts
+ * function withModalGroups(groups: Iterable<string>): Memo<ReadonlySet<string>>;
+ * ```
+ *
+ * Assigns the current modal to a list of groups. Can be used to for example mark the modal as a dialog/popover/tooltip. This function must be called inside a `createModal` callback.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalGroups,
+ *     getDialogs,
+ *     getGroupsForModal,
+ *     getModalsForGroup,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     withModalGroups(["dialog"]);
+ * });
+ *
+ * getGroupsForModal("key"); // Set(["dialog"])
+ * getModalsForGroup("dialog"); // Set(["key"])
+ * ```
+ *
+ */
 declare function withModalGroups(groups: Iterable<string>): Memo<ReadonlySet<string>>;
 //#endregion
 export { withModalGroups };

package/dist/groups/withModalGroups.mjs

@@ -6,9 +6,38 @@ import { INTERNAL, memo } from "@monstermann/signals";
 //#region src/groups/withModalGroups.ts
 const meta = {
 	path: "@signals-modal/groups/withModalGroups.ts",
-	line: 24,
+	line: 53,
 	name: "withModalGroups"
 };
+/**
+* # withModalGroups
+*
+* ```ts
+* function withModalGroups(groups: Iterable<string>): Memo<ReadonlySet<string>>;
+* ```
+*
+* Assigns the current modal to a list of groups. Can be used to for example mark the modal as a dialog/popover/tooltip. This function must be called inside a `createModal` callback.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalGroups,
+*     getDialogs,
+*     getGroupsForModal,
+*     getModalsForGroup,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     withModalGroups(["dialog"]);
+* });
+*
+* getGroupsForModal("key"); // Set(["dialog"])
+* getModalsForGroup("dialog"); // Set(["key"])
+* ```
+*
+*/
 function withModalGroups(groups) {
 	const modal = currentModal();
 	$keysToGroups((keys) => {

package/dist/position/getModalPlacement.d.mts

@@ -1,6 +1,56 @@
 import { ModalPlacement } from "./withPlacement.mjs";
 
 //#region src/position/getModalPlacement.d.ts
+
+/**
+ * # getModalPlacement
+ *
+ * ```ts
+ * function getModalPlacement(key: string): ModalPlacement | undefined;
+ * ```
+ *
+ * Returns the current placement for the given `key`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalStatus,
+ *     withAnchorElement,
+ *     withAnchorMeasurement,
+ *     withFloatingElement,
+ *     withFloatingMeasurement,
+ *     withBoundary,
+ *     withPlacement,
+ *     getModalPlacement,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     const $anchorElement = withAnchorElement();
+ *     const $floatingElement = withFloatingElement();
+ *     const $anchorMeasurement = withAnchorMeasurement({
+ *         $status,
+ *         $anchorElement,
+ *     });
+ *     const $floatingMeasurement = withFloatingMeasurement({
+ *         $status,
+ *         $floatingElement,
+ *     });
+ *     const $boundary = withBoundary({ $status });
+ *     const $placement = withPlacement({
+ *         placement: "vertical-center",
+ *         $boundary,
+ *         $anchorMeasurement,
+ *         $floatingMeasurement,
+ *     });
+ * });
+ *
+ * getModalPlacement("key"); // up-center | down-center
+ * ```
+ *
+ */
 declare function getModalPlacement(key: string): ModalPlacement | undefined;
 //#endregion
 export { getModalPlacement };

package/dist/position/getModalPlacement.mjs

@@ -1,6 +1,55 @@
 import { $placements } from "./internals.mjs";
 
 //#region src/position/getModalPlacement.ts
+/**
+* # getModalPlacement
+*
+* ```ts
+* function getModalPlacement(key: string): ModalPlacement | undefined;
+* ```
+*
+* Returns the current placement for the given `key`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalStatus,
+*     withAnchorElement,
+*     withAnchorMeasurement,
+*     withFloatingElement,
+*     withFloatingMeasurement,
+*     withBoundary,
+*     withPlacement,
+*     getModalPlacement,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     const { $status } = withModalStatus();
+*     const $anchorElement = withAnchorElement();
+*     const $floatingElement = withFloatingElement();
+*     const $anchorMeasurement = withAnchorMeasurement({
+*         $status,
+*         $anchorElement,
+*     });
+*     const $floatingMeasurement = withFloatingMeasurement({
+*         $status,
+*         $floatingElement,
+*     });
+*     const $boundary = withBoundary({ $status });
+*     const $placement = withPlacement({
+*         placement: "vertical-center",
+*         $boundary,
+*         $anchorMeasurement,
+*         $floatingMeasurement,
+*     });
+* });
+*
+* getModalPlacement("key"); // up-center | down-center
+* ```
+*
+*/
 function getModalPlacement(key) {
 	return $placements().get(key)?.();
 }

package/dist/position/getModalPosition.d.mts

@@ -1,6 +1,65 @@
 import { ModalPosition } from "./withPosition.mjs";
 
 //#region src/position/getModalPosition.d.ts
+
+/**
+ * # getModalPosition
+ *
+ * <Badge type="tip">Reactive</Badge>
+ *
+ * ```ts
+ * function getModalPosition(key: string): ModalPosition | undefined;
+ * ```
+ *
+ * Returns the current result of `withPosition`.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalStatus,
+ *     withAnchorElement,
+ *     withAnchorMeasurement,
+ *     withFloatingElement,
+ *     withFloatingMeasurement,
+ *     withBoundary,
+ *     withPlacement,
+ *     withPosition,
+ *     getModalPosition,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     const $anchorElement = withAnchorElement();
+ *     const $floatingElement = withFloatingElement();
+ *     const $anchorMeasurement = withAnchorMeasurement({
+ *         $status,
+ *         $anchorElement,
+ *     });
+ *     const $floatingMeasurement = withFloatingMeasurement({
+ *         $status,
+ *         $floatingElement,
+ *     });
+ *     const $boundary = withBoundary({ $status });
+ *     const $placement = withPlacement({
+ *         placement: "vertical-center",
+ *         $boundary,
+ *         $anchorMeasurement,
+ *         $floatingMeasurement,
+ *     });
+ *     const $position = withPosition({
+ *         $boundary,
+ *         $placement,
+ *         $anchorMeasurement,
+ *         $floatingMeasurement,
+ *     });
+ * });
+ *
+ * getModalPosition("key"); // ModalPosition | undefined
+ * ```
+ *
+ */
 declare function getModalPosition(key: string): ModalPosition | undefined;
 //#endregion
 export { getModalPosition };

package/dist/position/getModalPosition.mjs

@@ -1,6 +1,64 @@
 import { $positions } from "./internals.mjs";
 
 //#region src/position/getModalPosition.ts
+/**
+* # getModalPosition
+*
+* <Badge type="tip">Reactive</Badge>
+*
+* ```ts
+* function getModalPosition(key: string): ModalPosition | undefined;
+* ```
+*
+* Returns the current result of `withPosition`.
+*
+* ## Example
+*
+* ```ts
+* import {
+*     createModal,
+*     withModalStatus,
+*     withAnchorElement,
+*     withAnchorMeasurement,
+*     withFloatingElement,
+*     withFloatingMeasurement,
+*     withBoundary,
+*     withPlacement,
+*     withPosition,
+*     getModalPosition,
+* } from "@monstermann/signals-modal";
+*
+* createModal("key", () => {
+*     const { $status } = withModalStatus();
+*     const $anchorElement = withAnchorElement();
+*     const $floatingElement = withFloatingElement();
+*     const $anchorMeasurement = withAnchorMeasurement({
+*         $status,
+*         $anchorElement,
+*     });
+*     const $floatingMeasurement = withFloatingMeasurement({
+*         $status,
+*         $floatingElement,
+*     });
+*     const $boundary = withBoundary({ $status });
+*     const $placement = withPlacement({
+*         placement: "vertical-center",
+*         $boundary,
+*         $anchorMeasurement,
+*         $floatingMeasurement,
+*     });
+*     const $position = withPosition({
+*         $boundary,
+*         $placement,
+*         $anchorMeasurement,
+*         $floatingMeasurement,
+*     });
+* });
+*
+* getModalPosition("key"); // ModalPosition | undefined
+* ```
+*
+*/
 function getModalPosition(key) {
 	return $positions().get(key)?.();
 }

package/dist/position/withBoundary.d.mts

@@ -1,8 +1,39 @@
 import { ModalStatus } from "../status/types.mjs";
 import { Memo, Reactive } from "@monstermann/signals";
-import { Rect } from "@monstermann/fn";
+import { Rect } from "@monstermann/geometry";
 
 //#region src/position/withBoundary.d.ts
+
+/**
+ * # withBoundary
+ *
+ * ```ts
+ * function withBoundary(options: {
+ *     $status: Reactive<ModalStatus>;
+ *     transform?: (rect: Rect) => Rect;
+ * }): Memo<Rect>;
+ * ```
+ *
+ * Constructs a `Rect` resembling the window dimensions, to be fed into `withPlacement` and `withPosition`, used to constrain the floating element to be within the window boundary. This function must be called inside a `createModal` callback.
+ *
+ * The optional `transform` option can be used to eg. make the `Rect` smaller, increasing the distance between the floating element and the edges of the window.
+ *
+ * ## Example
+ *
+ * ```ts
+ * import {
+ *     createModal,
+ *     withModalStatus,
+ *     withBoundary,
+ * } from "@monstermann/signals-modal";
+ *
+ * createModal("key", () => {
+ *     const { $status } = withModalStatus();
+ *     const $boundary = withBoundary({ $status });
+ * });
+ * ```
+ *
+ */
 declare function withBoundary(options: {
   $status: Reactive<ModalStatus>;
   transform?: (rect: Rect) => Rect;