@particle-network/ui-react 0.7.0-beta.12 → 0.7.0-beta.13

package/dist/components/UXHint/index.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-import { type UXTooltipProps } from '..';
-export type UXHintProps = UXTooltipProps & {
+import { type SimplePopoverPlacement } from '..';
+export interface UXHintProps {
+    content?: React.ReactNode;
+    children?: React.ReactNode;
     triggerType?: 'hover' | 'click';
+    placement?: SimplePopoverPlacement;
     buttonClassName?: string;
     iconClassName?: string;
-};
+}
 export declare const UXHint: React.FC<UXHintProps>;

package/dist/components/UXHint/index.js

@@ -1,31 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "react";
 import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
-import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
+import { Center, UXSimplePopover } from "../index.js";
 import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
-    const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
-    const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {
+    const { content, children, buttonClassName, iconClassName, triggerType = 'hover', placement = 'top' } = props;
+    return /*#__PURE__*/ jsx(UXSimplePopover, {
+        content: content || children,
+        triggerType: triggerType,
+        placement: placement,
+        children: /*#__PURE__*/ jsx(Center, {
             className: cn('min-h-4 min-w-4 cursor-pointer', buttonClassName),
             children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
                 size: 14,
                 className: iconClassName
             })
-        });
-    if ('hover' === triggerType) return /*#__PURE__*/ jsx(UXTooltip, {
-        content: content || children,
-        ...restProps,
-        children: renderTriggerContent()
-    });
-    return /*#__PURE__*/ jsxs(UXPopover, {
-        children: [
-            /*#__PURE__*/ jsx(UXPopoverTrigger, {
-                children: renderTriggerContent()
-            }),
-            /*#__PURE__*/ jsx(UXPopoverContent, {
-                children: content || children
-            })
-        ]
+        })
     });
 };
 UXHint.displayName = 'UX.Hint';

package/dist/components/UXSimplePopover/simple-popover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type SimplePopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type SimplePopoverPlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
 export type SimplePopoverTriggerType = 'click' | 'hover';
 export interface UXSimplePopoverProps {
     /** Popover content */
@@ -14,6 +14,8 @@ export interface UXSimplePopoverProps {
     delay?: number;
     /** Hover only: delay before closing (ms) */
     closeDelay?: number;
+    /** Distance between popover and trigger (px) */
+    offset?: number;
     /** ClassName for the trigger wrapper (when cloning a single child, applied to that child) */
     classNames?: {
         trigger?: string;

package/dist/components/UXSimplePopover/simple-popover.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import react, { cloneElement, isValidElement, useCallback, useId, useRef } from "react";
 import { cn } from "../../utils/index.js";
 const UXSimplePopover = (props)=>{
-    const { content, children, triggerType = 'hover', placement = 'top', delay = 300, closeDelay = 100, classNames = {
+    const { content, children, triggerType = 'hover', placement = 'top', offset = 8, delay = 300, closeDelay = 100, classNames = {
         trigger: '',
         content: ''
     } } = props;
@@ -54,10 +54,26 @@ const UXSimplePopover = (props)=>{
     const triggerAnchorStyle = {
         anchorName
     };
+    const offsetMargin = {
+        top: {
+            marginBottom: offset
+        },
+        bottom: {
+            marginTop: offset
+        },
+        left: {
+            marginRight: offset
+        },
+        right: {
+            marginLeft: offset
+        }
+    };
+    const primarySide = placement.split('-')[0];
     const popoverAnchorStyle = {
         positionAnchor: anchorName,
-        positionArea: placement,
-        positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline'
+        positionArea: placement.replace(/-/g, ' '),
+        positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',
+        ...offsetMargin[primarySide]
     };
     const isClick = 'click' === triggerType;
     const trigger = isClick ? /*#__PURE__*/ jsx("button", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.12",
+  "version": "0.7.0-beta.13",
   "type": "module",
   "exports": {
     ".": {
@@ -37,8 +37,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",