@particle-network/ui-react 0.7.0-beta.2 → 0.7.0-beta.20

package/dist/components/ProgressWrapper/index.js

@@ -5,36 +5,61 @@ import { radiusMap, useThemeColor } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { cn } from "../../utils/index.js";
 import { Center } from "../layout/index.js";
+function createPathData(x, y, w, h, r) {
+    if (0 === r) return `
+      M ${x + w} ${y + h}
+      L ${x} ${y + h}
+      L ${x} ${y}
+      L ${x + w} ${y}
+      Z
+    `;
+    return `
+      M ${x + w - r} ${y + h}
+      L ${x + r} ${y + h}
+      Q ${x} ${y + h} ${x} ${y + h - r}
+      L ${x} ${y + r}
+      Q ${x} ${y} ${x + r} ${y}
+      L ${x + w - r} ${y}
+      Q ${x + w} ${y} ${x + w} ${y + r}
+      L ${x + w} ${y + h - r}
+      Q ${x + w} ${y + h} ${x + w - r} ${y + h}
+      Z
+    `;
+}
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
     const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
-    const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
-        width: 0,
-        height: 0
-    };
-    const widthValue = useMemo(()=>{
-        if (width) return width;
-        return childWidth + 2 * strokeWidth;
+    const size = useSize(autoLayout ? containerRef : void 0);
+    const childWidth = size?.width ?? 0;
+    const childHeight = size?.height ?? 0;
+    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
+    const { widthValue, heightValue, pathData, perimeter, strokeDashoffset } = useMemo(()=>{
+        const w = width ?? childWidth + 2 * strokeWidth;
+        const h = height ?? childHeight + 2 * strokeWidth;
+        const rectWidth = w - strokeWidth;
+        const rectHeight = h - strokeWidth;
+        const rectXY = strokeWidth / 2;
+        const p = 2 * (rectWidth + rectHeight);
+        const clamped = Math.max(0, Math.min(100, value));
+        const offset = p * (1 - clamped / 100);
+        const path = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
+        return {
+            widthValue: w,
+            heightValue: h,
+            pathData: path,
+            perimeter: p,
+            strokeDashoffset: offset
+        };
     }, [
+        width,
+        height,
         childWidth,
-        strokeWidth,
-        width
-    ]);
-    const heightValue = useMemo(()=>{
-        if (height) return height;
-        return childHeight + 2 * strokeWidth;
-    }, [
         childHeight,
         strokeWidth,
-        height
+        value,
+        radiusValue
     ]);
-    const clampedProgress = Math.max(0, Math.min(100, value));
-    const rectWidth = widthValue - strokeWidth;
-    const rectHeight = heightValue - strokeWidth;
-    const rectXY = strokeWidth / 2;
-    const perimeter = 2 * (rectWidth + rectHeight);
-    const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
     const colorValue = useMemo(()=>{
         if ('transparent' === color) return 'transparent';
         if (color.startsWith('#')) return color;
@@ -50,29 +75,6 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
         color,
         colorValue
     ]);
-    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
-    const createPathData = (x, y, w, h, r)=>{
-        if (0 === r) return `
-        M ${x + w} ${y + h}
-        L ${x} ${y + h}
-        L ${x} ${y}
-        L ${x + w} ${y}
-        Z
-      `;
-        return `
-        M ${x + w - r} ${y + h}
-        L ${x + r} ${y + h}
-        Q ${x} ${y + h} ${x} ${y + h - r}
-        L ${x} ${y + r}
-        Q ${x} ${y} ${x + r} ${y}
-        L ${x + w - r} ${y}
-        Q ${x + w} ${y} ${x + w} ${y + r}
-        L ${x + w} ${y + h - r}
-        Q ${x + w} ${y + h} ${x + w - r} ${y + h}
-        Z
-      `;
-    };
-    const pathData = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
     return /*#__PURE__*/ jsxs(Center, {
         style: {
             width: `${widthValue}px`,
@@ -82,7 +84,7 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
         ...restProps,
         children: [
             /*#__PURE__*/ jsxs("svg", {
-                className: cn('absolute left-0 top-0', svgClassName),
+                className: cn('absolute top-0 left-0', svgClassName),
                 width: widthValue,
                 height: heightValue,
                 children: [

package/dist/components/UXButton/button-theme.js

@@ -33,10 +33,10 @@ const button_theme_button = tv({
             text: 'bg-transparent min-w-0 w-auto h-auto px-0'
         },
         size: {
-            xs: 'gap-1 rounded-sm !text-caption1 min-w-min font-medium [&>svg]:size-[14px]',
-            sm: 'gap-1 rounded-md !text-body3 min-w-min font-medium [&>svg]:size-4',
-            md: 'gap-1 rounded-md text-tiny min-w-min font-medium [&>svg]:size-[18px]',
-            lg: 'gap-1 rounded-lg text-sm min-w-min font-medium [&>svg]:size-5',
+            xs: 'gap-1 rounded-[4px] !text-caption1 min-w-min font-medium [&>svg]:size-[14px]',
+            sm: 'gap-1 rounded-[6px] !text-body3 min-w-min font-medium [&>svg]:size-4',
+            md: 'gap-1 rounded-[6px] text-tiny min-w-min font-medium [&>svg]:size-[18px]',
+            lg: 'gap-1 rounded-[8px] text-sm min-w-min font-medium [&>svg]:size-5',
             xl: 'gap-1 rounded-[10px] text-medium min-w-min font-medium [&>svg]:size-6',
             auto: 'min-w-min rounded-[10px]'
         },
@@ -492,22 +492,22 @@ const button_theme_button = tv({
         {
             isInGroup: true,
             size: 'xs',
-            class: 'rounded-none first:rounded-s-sm last:rounded-e-sm'
+            class: 'rounded-none first:rounded-s-[4px] last:rounded-e-[4px]'
         },
         {
             isInGroup: true,
             size: 'sm',
-            class: 'rounded-none first:rounded-s-md last:rounded-e-md'
+            class: 'rounded-none first:rounded-s-[6px] last:rounded-e-[6px]'
         },
         {
             isInGroup: true,
             size: 'md',
-            class: 'rounded-none first:rounded-s-md last:rounded-e-md'
+            class: 'rounded-none first:rounded-s-[6px] last:rounded-e-[6px]'
         },
         {
             isInGroup: true,
             size: 'lg',
-            class: 'rounded-none first:rounded-s-lg last:rounded-e-lg'
+            class: 'rounded-none first:rounded-s-[8px] last:rounded-e-[8px]'
         },
         {
             isInGroup: true,

package/dist/components/UXColorPicker/color-fields.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { Switch3Icon } from "@particle-network/icons/web";
+import Switch3Icon from "@particle-network/icons/web/Switch3Icon";
 import { Flex, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";

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/index.d.ts

@@ -1 +1,2 @@
+export * from './provider';
 export * from './simple-popover';

package/dist/components/UXSimplePopover/index.js

@@ -1 +1,2 @@
+export * from "./provider.js";
 export * from "./simple-popover.js";

package/dist/components/UXSimplePopover/provider.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { SimplePopoverPlacement, SimplePopoverSize } from './simple-popover';
+export interface TriggerOptions {
+    placement?: SimplePopoverPlacement;
+    size?: SimplePopoverSize;
+    offset?: number;
+    delay?: number;
+    closeDelay?: number;
+    contentClassName?: string;
+}
+interface SimplePopoverCtx {
+    show: (anchor: HTMLElement, content: React.ReactNode, options?: TriggerOptions) => void;
+    hide: (closeDelay?: number) => void;
+    prepare: (anchor: HTMLElement, content: React.ReactNode, options?: TriggerOptions) => void;
+    toggle: () => void;
+}
+export declare function useSimplePopoverContext(): SimplePopoverCtx | null;
+export interface UXSimplePopoverProviderProps {
+    children: React.ReactNode;
+}
+export declare const UXSimplePopoverProvider: React.FC<UXSimplePopoverProviderProps>;
+export {};

package/dist/components/UXSimplePopover/provider.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { tv } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
+const popoverVariants = tv({
+    base: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 rounded-medium max-w-[300px] break-words wrap-break-word antialiased',
+    variants: {
+        size: {
+            sm: 'p-1.5',
+            md: 'p-2.5',
+            lg: 'p-3.5'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const PopoverContext = /*#__PURE__*/ createContext(null);
+function useSimplePopoverContext() {
+    return useContext(PopoverContext);
+}
+const OFFSET_MARGIN = {
+    top: {
+        marginBottom: 8
+    },
+    bottom: {
+        marginTop: 8
+    },
+    left: {
+        marginRight: 8
+    },
+    right: {
+        marginLeft: 8
+    }
+};
+const MARGIN_SIDE_MAP = {
+    top: 'Bottom',
+    bottom: 'Top',
+    left: 'Right',
+    right: 'Left'
+};
+const UXSimplePopoverProvider = ({ children })=>{
+    const uid = useId().replace(/:/g, '');
+    const popoverRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const triggerModeRef = useRef('hover');
+    const currentAnchorRef = useRef(null);
+    const [content, setContent] = useState(null);
+    const [anchorStyle, setAnchorStyle] = useState({});
+    const [contentClassName, setContentClassName] = useState(void 0);
+    const [size, setSize] = useState('md');
+    const clearTimers = useCallback(()=>{
+        if (null !== openTimerRef.current) {
+            clearTimeout(openTimerRef.current);
+            openTimerRef.current = null;
+        }
+        if (null !== closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const resolveAnchorName = useCallback((anchor)=>{
+        if (!anchor.style.getPropertyValue('anchor-name')) anchor.style.setProperty('anchor-name', `--sp-${uid}-${Math.random().toString(36).slice(2, 8)}`);
+        return anchor.style.getPropertyValue('anchor-name');
+    }, [
+        uid
+    ]);
+    const computeAnchorStyle = useCallback((anchorName, options)=>{
+        const { placement = 'top', offset = 8 } = options;
+        const primarySide = placement.split('-')[0];
+        const marginSide = MARGIN_SIDE_MAP[primarySide] ?? 'Bottom';
+        const offsetStyle = 8 !== offset ? {
+            [`margin${marginSide}`]: offset
+        } : OFFSET_MARGIN[primarySide];
+        return {
+            positionAnchor: anchorName,
+            positionArea: placement.replace(/-/g, ' '),
+            positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',
+            ...offsetStyle
+        };
+    }, []);
+    const show = useCallback((anchor, node, options)=>{
+        const opts = options ?? {};
+        const delay = opts.delay ?? 300;
+        clearTimers();
+        triggerModeRef.current = 'hover';
+        const anchorName = resolveAnchorName(anchor);
+        setContent(node);
+        setContentClassName(opts.contentClassName);
+        setSize(opts.size ?? 'md');
+        setAnchorStyle(computeAnchorStyle(anchorName, opts));
+        openTimerRef.current = setTimeout(()=>{
+            openTimerRef.current = null;
+            popoverRef.current?.showPopover();
+        }, delay);
+    }, [
+        clearTimers,
+        resolveAnchorName,
+        computeAnchorStyle
+    ]);
+    const hide = useCallback((closeDelay)=>{
+        const cd = closeDelay ?? 100;
+        clearTimers();
+        closeTimerRef.current = setTimeout(()=>{
+            closeTimerRef.current = null;
+            popoverRef.current?.hidePopover();
+        }, cd);
+    }, [
+        clearTimers
+    ]);
+    const prepare = useCallback((anchor, node, options)=>{
+        const opts = options ?? {};
+        clearTimers();
+        triggerModeRef.current = 'click';
+        currentAnchorRef.current = anchor;
+        const anchorName = resolveAnchorName(anchor);
+        setContent(node);
+        setContentClassName(opts.contentClassName);
+        setSize(opts.size ?? 'md');
+        setAnchorStyle(computeAnchorStyle(anchorName, opts));
+    }, [
+        clearTimers,
+        resolveAnchorName,
+        computeAnchorStyle
+    ]);
+    const toggle = useCallback(()=>{
+        const el = popoverRef.current;
+        if (!el) return;
+        try {
+            if (el.matches(':popover-open')) el.hidePopover();
+            else el.showPopover();
+        } catch  {}
+    }, []);
+    useEffect(()=>{
+        const handlePointerDown = (e)=>{
+            const el = popoverRef.current;
+            if (!el || 'click' !== triggerModeRef.current) return;
+            try {
+                if (!el.matches(':popover-open')) return;
+            } catch  {
+                return;
+            }
+            const target = e.target;
+            if (!el.contains(target) && !currentAnchorRef.current?.contains(target)) el.hidePopover();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return ()=>document.removeEventListener('pointerdown', handlePointerDown);
+    }, []);
+    useEffect(()=>()=>{
+            clearTimers();
+        }, [
+        clearTimers
+    ]);
+    const ctx = react.useMemo(()=>({
+            show,
+            hide,
+            prepare,
+            toggle
+        }), [
+        show,
+        hide,
+        prepare,
+        toggle
+    ]);
+    const handlePopoverMouseEnter = useCallback(()=>{
+        if ('hover' === triggerModeRef.current) clearTimers();
+    }, [
+        clearTimers
+    ]);
+    const handlePopoverMouseLeave = useCallback(()=>{
+        if ('hover' === triggerModeRef.current) hide();
+    }, [
+        hide
+    ]);
+    return /*#__PURE__*/ jsxs(PopoverContext.Provider, {
+        value: ctx,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                ref: popoverRef,
+                id: `ux-sp-${uid}`,
+                popover: "manual",
+                className: cn(popoverVariants({
+                    size
+                }), contentClassName),
+                style: anchorStyle,
+                onMouseEnter: handlePopoverMouseEnter,
+                onMouseLeave: handlePopoverMouseLeave,
+                children: content
+            })
+        ]
+    });
+};
+UXSimplePopoverProvider.displayName = 'UX.SimplePopoverProvider';
+export { UXSimplePopoverProvider, useSimplePopoverContext };

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

@@ -1,20 +1,25 @@
 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 type SimplePopoverSize = 'sm' | 'md' | 'lg';
 export interface UXSimplePopoverProps {
     /** Popover content */
     content: React.ReactNode;
     /** Trigger element(s) */
     children: React.ReactNode;
-    /** How to open: click (uses popovertarget) or hover (uses showPopover/hidePopover) */
+    /** How to open: click or hover */
     triggerType?: SimplePopoverTriggerType;
     /** Placement relative to trigger; uses CSS Anchor Positioning when supported */
     placement?: SimplePopoverPlacement;
+    /** Popover padding size */
+    size?: SimplePopoverSize;
     /** Hover only: delay before opening (ms) */
     delay?: number;
     /** Hover only: delay before closing (ms) */
     closeDelay?: number;
-    /** ClassName for the trigger wrapper (when cloning a single child, applied to that child) */
+    /** Distance between popover and trigger (px) */
+    offset?: number;
+    /** ClassName for the trigger element and popover content */
     classNames?: {
         trigger?: string;
         content?: string;