@tempots/ui 4.3.7 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/ui",
-  "version": "4.3.7",
+  "version": "5.0.0",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/renderables/pop-over.d.ts

@@ -6,69 +6,71 @@ import { TNode, Value, Signal } from '@tempots/dom';
  */
 export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
 /**
- * Represents the properties for a PopOver component.
+ * Represents all possible placements for a pop-over.
+ *
+ * @public
+ */
+export declare const allPlacements: Placement[];
+/**
+ * Represents the options for the arrow of a pop-over.
+ *
+ * @public
+ */
+export type PopOverArrowOptions = {
+    x?: number;
+    y?: number;
+    centerOffset: number;
+    alignmentOffset?: number;
+    placement: Placement;
+    containerWidth: number;
+    containerHeight: number;
+};
+/**
+ * Represents the properties for a pop-over.
  *
  * @public
  */
 export type PopOverOptions = {
-    /**
-     * Specifies whether the PopOver is open or closed.
-     */
-    open: Value<boolean>;
     /**
      * Specifies the content of the PopOver.
      * This should be a function that returns a TNode.
      */
-    content: () => TNode;
+    content: TNode;
     /**
      * Specifies the placement of the PopOver.
      * This is an optional property.
      */
     placement?: Value<Placement>;
     /**
-     * Specifies the offset of the PopOver.
-     * This is an optional property.
+     * Specifies the offset on the main axis.
      */
-    offset?: Value<{
-        /**
-         * Specifies the offset on the main axis.
-         */
-        mainAxis?: number;
-        /**
-         * Specifies the offset on the cross axis.
-         */
-        crossAxis?: number;
-    }>;
+    mainAxisOffset?: Value<number>;
     /**
-     * Specifies the arrow configuration for the PopOver.
-     * When provided, an arrow element will be created and positioned.
-     * This is an optional property.
+     * Specifies the offset on the cross axis.
      */
-    arrow?: {
-        /**
-         * Specifies the padding between the arrow and the edges of the floating element.
-         */
-        padding?: number;
-        /**
-         * Specifies the content of the arrow.
-         */
-        content?: (signal: Signal<PopOverArrowOptions>) => TNode;
-    };
-};
-export type PopOverArrowOptions = {
-    x?: number;
-    y?: number;
-    centerOffset: number;
-    alignmentOffset?: number;
-    placement: Placement;
-    containerWidth: number;
-    containerHeight: number;
+    crossAxisOffset?: Value<number>;
+    /**
+     * Specifies the padding between the arrow and the edges of the floating element.
+     */
+    arrowPadding?: Value<number>;
+    /**
+     * Specifies the content of the arrow.
+     */
+    arrow?: (signal: Signal<PopOverArrowOptions>) => TNode;
+    /**
+     * Specifies the target element for the PopOver. If not provided, the PopOver will be
+     * positioned relative to the parent element.
+     */
+    target?: string | HTMLElement;
 };
 /**
- * Renders a PopOver component.
+ * Creates a pop-over component.
  *
- * @param props - The properties for the PopOver component.
- * @returns The rendered PopOver component.
+ * @param fn - A function that returns the content of the pop-over.
+ * @param options - The options for the pop-over.
+ * @returns The pop-over component.
  * @public
  */
-export declare const PopOver: ({ content, open, placement: placementOption, offset, arrow: arrowOption, }: PopOverOptions) => import('@tempots/dom').Renderable;
+export declare const PopOver: (fn: (open: (options: PopOverOptions) => void, close: () => void) => TNode, options?: {
+    isOpen: Value<boolean>;
+}) => import('@tempots/dom').Renderable<import('@tempots/dom').DOMContext>;