@particle-network/ui-native 0.5.1-beta.9 → 0.6.0

package/dist/components/Text/text.js

@@ -2,11 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useColors } from "../../hooks/index.js";
+import { useFlexStyle } from "../layout/index.js";
 import { Box, useBoxStyle } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { useTextStyles } from "./text.style.js";
 const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow, ...restProps } = props;
+    const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fill, vertical, gap, inline, center, direction, justify, items, self, content, wrap, basis, grow, shrink, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow, ...restProps } = props;
     const [textWidth, setTextWidth] = useState(0);
     const { getColor } = useColors();
     const boxStyle = useBoxStyle({
@@ -74,6 +75,22 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         overflow,
         shadow
     });
+    const flexStyle = useFlexStyle({
+        fill,
+        vertical,
+        gap,
+        inline,
+        center,
+        direction,
+        justify,
+        items,
+        self,
+        content,
+        wrap,
+        basis,
+        grow,
+        shrink
+    });
     const { styles } = useTextStyles({
         variant,
         fontWeight,
@@ -159,6 +176,7 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         allowFontScaling: false,
         style: [
             boxStyle,
+            flexStyle,
             styles.text,
             underlineStyle && {
                 textDecorationLine: 'underline',

package/dist/components/Text/text.types.d.ts

@@ -1,11 +1,12 @@
 import type { TextProps as RNTextProps, TextStyle } from 'react-native';
 import type { HexColor, UXForegroundColor } from '@particle-network/ui-shared';
+import type { UseFlexProps } from '../layout';
 import type { UseBoxProps } from '../layout/Box';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
 type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
 type TextLineHeight = '1' | '1.4';
 type TextAlign = 'left' | 'center' | 'right';
-export interface TextProps extends RNTextProps, UseBoxProps {
+export interface TextProps extends RNTextProps, UseFlexProps, UseBoxProps {
     /**
      * | variant      | font-size | font-weight |
      * | :----------- | :-------- | :---------- |

package/dist/components/UXHint/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import CircleQuestionIcon from "@particle-network/icons/native/CircleQuestionIcon";
 import { useMs } from "../../hooks/index.js";
-import { Square } from "../layout/Square.js";
+import { Center } from "../layout/index.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
     const { content, children, iconStyle, iconColor = 'secondary', style, ...restProps } = props;
@@ -10,14 +10,23 @@ const UXHint = (props)=>{
     return /*#__PURE__*/ jsx(UXTooltip, {
         content: content || children,
         ...restProps,
-        children: /*#__PURE__*/ jsx(Square, {
-            center: true,
-            size: 16,
-            style: style,
+        children: /*#__PURE__*/ jsx(Center, {
+            style: [
+                {
+                    minWidth: ms(16),
+                    minHeight: ms(16)
+                },
+                style
+            ],
             children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
                 color: iconColor,
-                size: ms(14),
-                style: iconStyle
+                style: [
+                    {
+                        width: ms(14),
+                        height: ms(14)
+                    },
+                    iconStyle
+                ]
             })
         })
     });

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

@@ -1,3 +1,4 @@
 export * from './input';
 export * from './number-input';
+export * from './range-input';
 export type * from './types';

package/dist/components/input/index.js

@@ -1,2 +1,3 @@
 export * from "./input.js";
 export * from "./number-input.js";
+export * from "./range-input.js";

package/dist/components/input/number-input.js

@@ -16,6 +16,8 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     const [displayText, setDisplayText] = useState(defaultValue?.toString() ?? '');
     const [isFocused, setIsFocused] = useState(false);
     const [isInvalid, setIsInvalid] = useState(isInvalidProp);
+    const prevControlledValueRef = useRef(void 0);
+    const isInitializedRef = useRef(false);
     const i18n = useI18n();
     const { isKeyboardVisible } = useKeyboard();
     const formatOptions = useMemo(()=>{
@@ -58,6 +60,7 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isFocused
     });
     useEffect(()=>{
+        if ('web' === Platform.OS) return;
         if (inputRef.current) inputRef.current.setNativeProps({
             style: {
                 color: styles.input.color
@@ -68,16 +71,38 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     ]);
     useEffect(()=>{
         if (void 0 !== controlledValue) {
-            setInternalValue(controlledValue);
-            setDisplayText(isNaN(controlledValue) ? '' : controlledValue?.toString());
-        } else if (void 0 !== defaultValue) {
+            const prevValue = prevControlledValueRef.current;
+            if (controlledValue !== prevValue) {
+                setInternalValue(controlledValue);
+                setDisplayText(isNaN(controlledValue) ? '' : controlledValue?.toString());
+                prevControlledValueRef.current = controlledValue;
+            }
+        } else if (void 0 !== defaultValue && !isInitializedRef.current) {
             setInternalValue(defaultValue);
             setDisplayText(isNaN(defaultValue) ? '' : defaultValue?.toString());
+            isInitializedRef.current = true;
         }
     }, [
         defaultValue,
         controlledValue
     ]);
+    useEffect(()=>{
+        if (!isFocused && void 0 !== controlledValue) {
+            const timer = setTimeout(()=>{
+                setInternalValue((currentInternalValue)=>{
+                    if (isNaN(currentInternalValue) && !isNaN(controlledValue)) {
+                        setDisplayText(controlledValue.toString());
+                        return controlledValue;
+                    }
+                    return currentInternalValue;
+                });
+            }, 0);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        isFocused,
+        controlledValue
+    ]);
     const numberFormatter = useMemo(()=>new Intl.NumberFormat(void 0, formatOptions), [
         formatOptions
     ]);

package/dist/components/input/range-input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { View } from 'react-native';
+import type { UXRangeInputProps } from './types';
+export declare const UXRangeInput: React.ForwardRefExoticComponent<UXRangeInputProps & React.RefAttributes<View>>;

package/dist/components/input/range-input.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { useI18n } from "../../hooks/useI18n.js";
+import { HStack } from "../layout/HStack.js";
+import { UXNumberInput } from "./number-input.js";
+const UXRangeInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { asFragment, value, defaultValue, onValueChange, minValue, maxValue, minInputProps = {}, maxInputProps = {}, separator, gap = 8, containerStyle, ...restProps } = props;
+    const i18n = useI18n();
+    const minInputRef = useRef(null);
+    const maxInputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue || {
+        min: void 0,
+        max: void 0
+    });
+    const currentValue = void 0 !== value ? value : internalValue;
+    const handleMinChange = useCallback((newMin)=>{
+        const minValue = isNaN(newMin) ? 0 : newMin;
+        const newValue = {
+            min: minValue,
+            max: currentValue.max
+        };
+        if (void 0 !== currentValue.max && !isNaN(currentValue.max) && minValue > currentValue.max) newValue.max = minValue;
+        if (void 0 === value) setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [
+        currentValue.max,
+        value,
+        onValueChange
+    ]);
+    const handleMaxChange = useCallback((newMax)=>{
+        const maxValue = isNaN(newMax) ? 0 : newMax;
+        const newValue = {
+            min: currentValue.min,
+            max: maxValue
+        };
+        if (void 0 !== currentValue.min && !isNaN(currentValue.min) && maxValue < currentValue.min) newValue.min = maxValue;
+        if (void 0 === value) setInternalValue(newValue);
+        onValueChange?.(newValue);
+    }, [
+        currentValue.min,
+        value,
+        onValueChange
+    ]);
+    const minInputMaxValue = useMemo(()=>{
+        if (void 0 !== currentValue.max && !isNaN(currentValue.max)) return currentValue.max;
+        return maxValue;
+    }, [
+        currentValue.max,
+        maxValue
+    ]);
+    const maxInputMinValue = useMemo(()=>{
+        if (void 0 !== currentValue.min && !isNaN(currentValue.min)) return currentValue.min;
+        return minValue;
+    }, [
+        currentValue.min,
+        minValue
+    ]);
+    const Wrapper = asFragment ? Fragment : HStack;
+    return /*#__PURE__*/ jsxs(Wrapper, {
+        ref: ref,
+        gap: gap,
+        style: containerStyle,
+        items: "center",
+        children: [
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                startContent: i18n.rangeInput.min,
+                textAlign: "right",
+                ...restProps,
+                ...minInputProps,
+                ref: minInputRef,
+                value: currentValue.min,
+                minValue: minValue,
+                maxValue: minInputMaxValue,
+                containerStyle: [
+                    {
+                        flex: 1
+                    },
+                    minInputProps.containerStyle
+                ],
+                onValueChange: handleMinChange
+            }),
+            separator,
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                startContent: i18n.rangeInput.max,
+                textAlign: "right",
+                ...restProps,
+                ...maxInputProps,
+                ref: maxInputRef,
+                value: currentValue.max,
+                minValue: maxInputMinValue,
+                maxValue: maxValue,
+                containerStyle: [
+                    {
+                        flex: 1
+                    },
+                    maxInputProps.containerStyle
+                ],
+                onValueChange: handleMaxChange
+            })
+        ]
+    });
+});
+UXRangeInput.displayName = 'UXRangeInput';
+export { UXRangeInput };

package/dist/components/input/styles.d.ts

@@ -15,6 +15,7 @@ export declare const useStyles: (props: UseStylesProps) => {
         opacity: number;
     };
     input: {
+        minWidth: number;
         height: "auto" | "100%";
         flex: number;
         paddingTop: number;

package/dist/components/input/styles.js

@@ -89,6 +89,7 @@ const useStyles = (props)=>{
                 opacity: isDisabled ? disabledOpacity : 1
             },
             input: {
+                minWidth: 0,
                 height: 'android' === Platform.OS ? '100%' : 'auto',
                 flex: 1,
                 paddingTop: 0,

package/dist/components/input/types.d.ts

@@ -65,3 +65,48 @@ export interface UXNumberInputProps extends UXInputCommonProps {
     allowNegative?: boolean;
     onValueChange?: (value: number) => void;
 }
+export interface UXRangeInputValue {
+    min?: number;
+    max?: number;
+}
+export interface UXRangeInputProps extends Omit<UXNumberInputProps, 'value' | 'defaultValue' | 'onValueChange' | 'minValue' | 'maxValue'> {
+    asFragment?: boolean;
+    /**
+     * The current value of the range input (controlled)
+     */
+    value?: UXRangeInputValue;
+    /**
+     * The default value of the range input (uncontrolled)
+     */
+    defaultValue?: UXRangeInputValue;
+    /**
+     * The minimum value allowed for both inputs
+     */
+    minValue?: number;
+    /**
+     * The maximum value allowed for both inputs
+     */
+    maxValue?: number;
+    /**
+     * Props for the minimum input
+     */
+    minInputProps?: Partial<UXNumberInputProps>;
+    /**
+     * Props for the maximum input
+     */
+    maxInputProps?: Partial<UXNumberInputProps>;
+    /**
+     * Separator between the two inputs
+     * @default '-'
+     */
+    separator?: ReactNode;
+    /**
+     * Gap between the inputs (in pixels)
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Callback fired when the value changes
+     */
+    onValueChange?: (value: UXRangeInputValue) => void;
+}

package/dist/locales/en.d.ts

@@ -46,5 +46,9 @@ export declare const en: {
         min: string;
         max: string;
     };
+    rangeInput: {
+        min: string;
+        max: string;
+    };
 };
 export type LocaleText = typeof en;

package/dist/locales/en.js

@@ -45,6 +45,10 @@ const en = {
         required: 'This field is required',
         min: 'Value must be greater than {min}',
         max: 'Value must be less than {max}'
+    },
+    rangeInput: {
+        min: 'Min',
+        max: 'Max'
     }
 };
 export { en };

package/dist/locales/index.d.ts

@@ -50,6 +50,10 @@ export declare const locales: {
             min: string;
             max: string;
         };
+        rangeInput: {
+            min: string;
+            max: string;
+        };
     };
     zh: {
         datePicker: {
@@ -99,6 +103,10 @@ export declare const locales: {
             min: string;
             max: string;
         };
+        rangeInput: {
+            min: string;
+            max: string;
+        };
     };
 };
 export declare function getLocaleText(locale: Locale): {
@@ -149,4 +157,8 @@ export declare function getLocaleText(locale: Locale): {
         min: string;
         max: string;
     };
+    rangeInput: {
+        min: string;
+        max: string;
+    };
 };

package/dist/locales/zh.js

@@ -45,6 +45,10 @@ const zh = {
         required: '请输入',
         min: '值不能小于{min}',
         max: '值不能大于{max}'
+    },
+    rangeInput: {
+        min: '最小',
+        max: '最大'
     }
 };
 export { zh };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.5.1-beta.9",
+  "version": "0.6.0",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -45,8 +45,8 @@
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
     "react-native-worklets": "0.5.1",
-    "@particle-network/ui-shared": "0.4.1-beta.5",
-    "@particle-network/icons": "0.5.1-beta.6"
+    "@particle-network/icons": "0.6.0",
+    "@particle-network/ui-shared": "0.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -89,9 +89,9 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.5.1-beta.6",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/icons": "0.6.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",