@particle-network/ui-react 0.7.0-beta.15 → 0.7.0-beta.17

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/UXSimplePopover/simple-popover.d.ts

@@ -19,7 +19,7 @@ export interface UXSimplePopoverProps {
     closeDelay?: number;
     /** Distance between popover and trigger (px) */
     offset?: number;
-    /** ClassName for the trigger wrapper and popover content */
+    /** ClassName for the trigger element and popover content */
     classNames?: {
         trigger?: string;
         content?: string;

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

@@ -1,12 +1,31 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
+import react, { useCallback, useRef } from "react";
+import { cn } from "../../utils/index.js";
 import { useSimplePopoverContext } from "./provider.js";
 const warnedRef = {
     current: false
 };
+const warnedChildRef = {
+    current: false
+};
+function composeEventHandlers(original, next) {
+    return (event)=>{
+        original?.(event);
+        if (!event.defaultPrevented) next?.(event);
+    };
+}
+function isIntrinsicInteractiveElement(element) {
+    return 'string' == typeof element.type && [
+        'button',
+        'a',
+        'input',
+        'select',
+        'textarea',
+        'summary'
+    ].includes(element.type);
+}
 const UXSimplePopover = ({ content, children, triggerType = 'hover', placement = 'top', size = 'md', offset = 8, delay = 300, closeDelay = 100, classNames })=>{
     const ctx = useSimplePopoverContext();
-    const ref = useRef(null);
     const contentRef = useRef(content);
     contentRef.current = content;
     const optionsRef = useRef({
@@ -26,8 +45,8 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         contentClassName: classNames?.content
     };
     const isClick = 'click' === triggerType;
-    const handleEnter = useCallback(()=>{
-        if (ref.current && ctx && !isClick) ctx.show(ref.current, contentRef.current, optionsRef.current);
+    const handleEnter = useCallback((e)=>{
+        if (ctx && !isClick) ctx.show(e.currentTarget, contentRef.current, optionsRef.current);
     }, [
         ctx,
         isClick
@@ -38,14 +57,17 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         ctx,
         isClick
     ]);
-    const handlePointerDown = useCallback(()=>{
-        if (ref.current && ctx && isClick) ctx.prepare(ref.current, contentRef.current, optionsRef.current);
+    const handlePointerDown = useCallback((e)=>{
+        if (ctx && isClick) ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
     }, [
         ctx,
         isClick
     ]);
-    const handleClick = useCallback(()=>{
-        if (ctx && isClick) ctx.toggle();
+    const handleClick = useCallback((e)=>{
+        if (ctx && isClick) {
+            ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
+            ctx.toggle();
+        }
     }, [
         ctx,
         isClick
@@ -53,8 +75,8 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
     const handleKeyDown = useCallback((e)=>{
         if (isClick && ('Enter' === e.key || ' ' === e.key)) {
             e.preventDefault();
-            if (ref.current && ctx) {
-                ctx.prepare(ref.current, contentRef.current, optionsRef.current);
+            if (ctx) {
+                ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
                 ctx.toggle();
             }
         }
@@ -66,16 +88,35 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         warnedRef.current = true;
         console.warn('[UXSimplePopover] must be used inside <UXSimplePopoverProvider>. Popover will not work.');
     }
+    if (/*#__PURE__*/ react.isValidElement(children) && children.type !== react.Fragment) {
+        const child = children;
+        const interactiveElement = isIntrinsicInteractiveElement(child);
+        return /*#__PURE__*/ react.cloneElement(child, {
+            className: cn(child.props.className, classNames?.trigger),
+            onMouseEnter: composeEventHandlers(child.props.onMouseEnter, handleEnter),
+            onMouseLeave: composeEventHandlers(child.props.onMouseLeave, handleLeave),
+            ...isClick ? {
+                role: child.props.role ?? (interactiveElement ? void 0 : 'button'),
+                tabIndex: child.props.tabIndex ?? (interactiveElement ? void 0 : 0),
+                onPointerDown: composeEventHandlers(child.props.onPointerDown, handlePointerDown),
+                onClick: composeEventHandlers(child.props.onClick, handleClick),
+                onKeyDown: composeEventHandlers(child.props.onKeyDown, handleKeyDown)
+            } : {}
+        });
+    }
+    if (!warnedChildRef.current) {
+        warnedChildRef.current = true;
+        console.warn('[UXSimplePopover] children should be a single React element to avoid the fallback <span> wrapper.');
+    }
     return /*#__PURE__*/ jsx("span", {
-        ref: ref,
         className: classNames?.trigger,
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         ...isClick ? {
             role: 'button',
             tabIndex: 0,
-            onPointerDownCapture: handlePointerDown,
-            onClickCapture: handleClick,
+            onPointerDown: handlePointerDown,
+            onClick: handleClick,
             onKeyDown: handleKeyDown
         } : {},
         children: children

package/dist/components/layout/Box/box-theme.d.ts

@@ -737,7 +737,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box-base", {
+}, undefined, "", {
     position: {
         static: string;
         relative: string;
@@ -2209,5 +2209,5 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box-base", unknown, unknown, undefined>>;
+}, undefined, "", unknown, unknown, undefined>>;
 export type BoxVariants = VariantProps<typeof boxVariants>;

package/dist/components/layout/Box/box-theme.js

@@ -123,7 +123,7 @@ const roundedClasses = {
     full: 'rounded-full'
 };
 const boxVariants = tv({
-    base: 'ux-box-base',
+    base: '',
     variants: {
         position: {
             static: 'static',

package/dist/components/typography/text-theme.d.ts

@@ -57,7 +57,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         '1': string;
         '1.4': string;
     };
-}, undefined, "ux-text-base", {
+}, undefined, "", {
     variant: {
         h1: string;
         h2: string;
@@ -175,4 +175,4 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         '1': string;
         '1.4': string;
     };
-}, undefined, "ux-text-base", unknown, unknown, undefined>>;
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/text-theme.js

@@ -11,7 +11,7 @@ const body3 = 'text-[0.6875rem] leading-[1rem] font-normal';
 const caption1Bold = 'text-[0.625rem] leading-[0.875rem] font-medium';
 const caption1 = 'text-[0.625rem] leading-[0.875rem] font-normal';
 const textVariants = tv({
-    base: 'ux-text-base',
+    base: '',
     variants: {
         variant: {
             h1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.15",
+  "version": "0.7.0-beta.17",
   "type": "module",
   "exports": {
     ".": {
@@ -58,8 +58,8 @@
     "tailwind-variants": "^3.2.2",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.7.0-beta.5",
-    "@particle-network/ui-shared": "0.5.0"
+    "@particle-network/ui-shared": "0.6.0-beta.0",
+    "@particle-network/icons": "0.7.0-beta.6"
   },
   "scripts": {
     "build": "rslib build",