@tempots/ui 4.3.8 → 5.1.0

package/package.json

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

package/renderables/onclickoutside.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Executes a callback function when a click event occurs outside of the parent element.
+ *
+ * @param handler - The callback function to be executed when a click event occurs outside of the parent element.
+ * @returns A renderable function that takes a DOMContext and returns a function that takes a boolean indicating whether to remove the tree.
+ * @public
+ */
+export declare function OnClickOutside(handler: (event: MouseEvent) => void): import('@tempots/dom').Renderable;

package/renderables/onenterkey.d.ts

@@ -0,0 +1 @@
+export declare function OnEnterKey(handler: (event: KeyboardEvent) => void): import('@tempots/dom').Renderable;

package/renderables/onescapekey.d.ts

@@ -0,0 +1 @@
+export declare function OnEscapeKey(handler: (event: KeyboardEvent) => void): import('@tempots/dom').Renderable;

package/renderables/onkeypressed.d.ts

@@ -0,0 +1,23 @@
+export type KeyCombo = {
+    /** The key value (e.g., 'Enter', 'a', 'ArrowUp') */
+    key?: string;
+    /** The physical key code (e.g., 'KeyA', 'Enter', 'ArrowUp') - more reliable than key */
+    code?: string;
+    /** Control key modifier */
+    ctrlKey?: boolean;
+    /** Alt key modifier (Option key on Mac) */
+    altKey?: boolean;
+    /** Shift key modifier */
+    shiftKey?: boolean;
+    /** Meta key modifier (Cmd on Mac, Windows key on PC) */
+    metaKey?: boolean;
+    /** Whether the key is being held down (auto-repeat) */
+    repeat?: boolean;
+    /** Cross-platform shortcut: true if either Cmd (Mac) or Ctrl (PC) is pressed */
+    commandOrControlKey?: boolean;
+};
+export declare function matchesKeyCombo(keyCombo: KeyCombo | string, event: KeyboardEvent): boolean;
+export declare function OnKeyPressed({ allowedKeys, handler, }: {
+    allowedKeys: (KeyCombo | string)[];
+    handler: (event: KeyboardEvent) => void;
+}): import('@tempots/dom').Renderable;

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>;