@particle-network/ui-react 0.3.0 → 0.3.2-beta.0

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

@@ -15,7 +15,7 @@ const button_theme_button = tv({
         'whitespace-nowrap',
         'min-w-max',
         'font-normal',
-        'subpixel-antialiased',
+        'antialiased',
         'overflow-hidden',
         'tap-highlight-transparent',
         'transform-gpu data-[pressed=true]:scale-[0.97]',

package/dist/components/UXDatePicker/index.js

@@ -29,7 +29,7 @@ const UXDatePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DatePicker, {
         popoverProps: {
             classNames: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box'
+                content: 'bg-content1 text-foreground-300 shadow-box antialiased'
             }
         },
         timeInputProps: {

package/dist/components/UXDropdown/dropdown-item.js

@@ -17,7 +17,7 @@ const classes = {
             },
             flat: {
                 base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[selected=true]:text-foreground gap-1',
-                title: 'text-tiny font-medium',
+                title: 'text-tiny font-medium antialiased',
                 selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
             },
             shadow: {

package/dist/components/UXDropdown/dropdown.js

@@ -8,7 +8,7 @@ const UXDropdown = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         classNames: {
             content: [
-                'text-tiny p-2.5 text-foreground-300 rounded-medium no-scrollbar shadow-box',
+                'text-tiny p-2.5 text-foreground-300 rounded-medium no-scrollbar shadow-box antialiased',
                 content
             ],
             ...restClassNames

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type IconProps } from '../../icons';
+import { type IconProps } from '@/icons';
 import { type VStackProps } from '../layout';
 export interface UXEmptyProps extends VStackProps {
     iconProps?: IconProps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type UXTooltipProps } from '..';
+import { type UXTooltipProps } from '@/components';
 export type UXHintProps = UXTooltipProps & {
     triggerType?: 'hover' | 'click';
     buttonClassName?: string;

package/dist/components/UXModal/index.js

@@ -2,21 +2,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
 import { Center, Circle, Flex, Text, UXButton } from "../index.js";
+import useKeyboard from "../../hooks/useKeyboard.js";
 import { CloseIcon } from "../../icons/index.js";
 const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
+    const { size, title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
+    const { isKeyboardVisible } = useKeyboard();
     return /*#__PURE__*/ jsx(Modal, {
         ref: ref,
         backdrop: backdrop,
         scrollBehavior: scrollBehavior,
+        size: size,
         classNames: {
             wrapper: [
                 'items-end md:items-center',
                 classNames?.wrapper
             ],
             base: [
-                'py-6 gap-5 shadow-box',
-                'max-h-[calc(100vh-48px)] max-md:m-0 max-md:rounded-b-none',
+                'py-6 gap-5 shadow-box m-0 max-md:rounded-b-none',
+                isKeyboardVisible && 'full' !== size ? "!max-h-[400px] !min-h-[400px] overflow-y-auto" : 'max-h-[calc(100vh-48px)]',
                 'md:max-h-[750px]',
                 classNames?.base
             ],
@@ -53,17 +56,17 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps,
         children: /*#__PURE__*/ jsxs(ModalContent, {
             children: [
-                title ? /*#__PURE__*/ jsx(ModalHeader, {
+                title && /*#__PURE__*/ jsx(ModalHeader, {
                     className: "capitalize",
                     children: title
-                }) : null,
+                }),
                 /*#__PURE__*/ jsx(ModalBody, {
                     children: children
                 }),
-                footer ? /*#__PURE__*/ jsx(ModalFooter, {
+                footer && /*#__PURE__*/ jsx(ModalFooter, {
                     children: footer
-                }) : null,
-                tip ? /*#__PURE__*/ jsx(ModalFooter, {
+                }),
+                tip && /*#__PURE__*/ jsx(ModalFooter, {
                     className: "-mt-md",
                     children: /*#__PURE__*/ jsxs(Flex, {
                         gap: 2,
@@ -81,7 +84,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
                             })
                         ]
                     })
-                }) : null
+                })
             ]
         })
     });

package/dist/components/UXPopover/popover.extend.js

@@ -16,7 +16,7 @@ const ExtendedPopover = extendVariants(Popover, {
         color: {
             default: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box text-tiny'
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny antialiased'
             }
         }
     },

package/dist/components/UXSelect/index.js

@@ -35,7 +35,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
             },
             itemClasses: {
                 base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[selected=true]:text-foreground gap-1',
-                title: 'text-tiny font-medium',
+                title: 'text-tiny font-medium antialiased',
                 selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
             }
         },

package/dist/components/UXTooltip/tooltip.extend.js

@@ -16,7 +16,7 @@ const ExtendedTooltip = extendVariants(Tooltip, {
         color: {
             default: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 break-words wrap-break-word'
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 break-words wrap-break-word antialiased'
             }
         }
     },

package/dist/hooks/useKeyboard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description
+ * 尝试获取移动端虚拟键盘的高度。
+ * 该方法主要依赖监听视口高度变化，在移动端（尤其 iOS）键盘弹出时，
+ * window.innerHeight 或 window.visualViewport.height 会减小。
+ *
+ * @returns {number} 键盘高度（像素值），如果键盘未弹出或无法确定则返回 0。
+ */
+declare const useKeyboard: () => {
+    keyboardHeight: number;
+    isKeyboardVisible: boolean;
+};
+export default useKeyboard;

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+const useKeyboard = ()=>{
+    const [initialViewportHeight, setInitialViewportHeight] = useState(0);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(()=>{
+        const setInitialHeight = ()=>{
+            const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+            if (height > 0) setInitialViewportHeight((prevHeight)=>Math.max(prevHeight, height));
+        };
+        requestAnimationFrame(setInitialHeight);
+        window.addEventListener('focusin', setInitialHeight);
+        const handleViewportChange = ()=>{
+            const currentHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+            if (0 === initialViewportHeight) return;
+            const calculatedHeight = Math.max(0, initialViewportHeight - currentHeight);
+            calculatedHeight > 50 ? setKeyboardHeight(calculatedHeight) : setKeyboardHeight(0);
+        };
+        window.addEventListener('resize', handleViewportChange);
+        if (window.visualViewport) window.visualViewport.addEventListener('resize', handleViewportChange);
+        return ()=>{
+            window.removeEventListener('focusin', setInitialHeight);
+            window.removeEventListener('resize', handleViewportChange);
+            if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleViewportChange);
+        };
+    }, [
+        initialViewportHeight
+    ]);
+    return {
+        keyboardHeight,
+        isKeyboardVisible: keyboardHeight > 0
+    };
+};
+const hooks_useKeyboard = useKeyboard;
+export { hooks_useKeyboard as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.3.0",
+  "version": "0.3.2-beta.0",
   "type": "module",
   "exports": {
     ".": {