@particle-network/ui-native 0.0.2

package/dist/components/input/input.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { TextInput } from "react-native";
+import { HStack, Text, VStack } from "../index.js";
+import { useColors } from "../../hooks/index.js";
+import { useStyles } from "./styles.js";
+const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
+    const { getColor } = useColors();
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(isInvalidProp);
+    useImperativeHandle(ref, ()=>({
+            blur: ()=>{
+                inputRef.current?.blur();
+            },
+            focus: ()=>{
+                inputRef.current?.focus();
+            }
+        }));
+    useEffect(()=>{
+        setIsInvalid(isInvalidProp);
+    }, [
+        isInvalidProp
+    ]);
+    useEffect(()=>{
+        if (!internalValue && isRequired) setIsInvalid(true);
+    }, []);
+    const styles = useStyles({
+        ...props,
+        isInvalid,
+        isFocused
+    });
+    useEffect(()=>{
+        if (void 0 !== controlledValue) setInternalValue(controlledValue);
+        else if (void 0 !== defaultValue) setInternalValue(defaultValue);
+    }, [
+        defaultValue,
+        controlledValue
+    ]);
+    const handleFocus = useCallback((e)=>{
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [
+        onFocus
+    ]);
+    const handleBlur = useCallback((e)=>{
+        setIsFocused(false);
+        onBlur?.(e);
+    }, [
+        onBlur
+    ]);
+    const validationResult = useMemo(()=>{
+        if (!internalValue && isRequired) {
+            setIsInvalid(true);
+            return {
+                isValid: false,
+                errorMessage: 'This field is required'
+            };
+        }
+        setIsInvalid(false);
+        return {
+            isValid: true
+        };
+    }, [
+        internalValue,
+        isRequired
+    ]);
+    const renderError = useMemo(async ()=>{
+        if (isInvalidProp && errorMessage) {
+            setIsInvalid(true);
+            return errorMessage;
+        }
+        if (!validationResult.isValid) return autoErrorMessage ? validationResult.errorMessage : null;
+        return null;
+    }, [
+        validationResult,
+        errorMessage,
+        isInvalidProp,
+        autoErrorMessage
+    ]);
+    const renderContent = async (content)=>{
+        if (!content) return null;
+        if ('object' == typeof content) return content;
+        return /*#__PURE__*/ jsx(Text, {
+            color: "tertiary",
+            children: content
+        });
+    };
+    return /*#__PURE__*/ jsxs(VStack, {
+        gap: 4,
+        style: containerStyle,
+        children: [
+            label ? /*#__PURE__*/ jsx(Text, {
+                children: label
+            }) : null,
+            /*#__PURE__*/ jsxs(HStack, {
+                borderStyle: "solid",
+                gap: 6,
+                ph: 12,
+                style: [
+                    styles.container,
+                    wrapperStyle
+                ],
+                children: [
+                    renderContent(startContent),
+                    /*#__PURE__*/ jsx(TextInput, {
+                        ref: inputRef,
+                        editable: !isDisabled && !isReadOnly,
+                        placeholderTextColor: getColor('tertiary'),
+                        selectionColor: isInvalid ? `${styles.container.borderColor}80` : styles.container.borderColor,
+                        style: [
+                            styles.input,
+                            inputStyle
+                        ],
+                        value: internalValue,
+                        onBlur: handleBlur,
+                        onChangeText: (v)=>{
+                            setInternalValue(v);
+                            onChangeText?.(v);
+                            onValueChange?.(v);
+                        },
+                        onFocus: handleFocus,
+                        ...restProps
+                    }),
+                    renderContent(endContent)
+                ]
+            }),
+            !!renderError && /*#__PURE__*/ jsx(Text, {
+                color: "danger",
+                children: renderError
+            })
+        ]
+    });
+});
+UXInput.displayName = 'UXInput';
+export { UXInput };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXInputRef, UXNumberInputProps } from './types';
+export declare const UXNumberInput: React.ForwardRefExoticComponent<UXNumberInputProps & React.RefAttributes<UXInputRef>>;

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

@@ -0,0 +1,231 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Platform, TextInput } from "react-native";
+import { HStack, Text, VStack } from "../index.js";
+import { useColors } from "../../hooks/index.js";
+import { useStyles } from "./styles.js";
+const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, minValue, maxValue, formatOptions, startContent, endContent, isRequired, isReadOnly, isDisabled, isInvalid: isInvalidProp, autoErrorMessage, allowNegative, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
+    const { getColor } = useColors();
+    const inputRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? NaN);
+    const [displayText, setDisplayText] = useState(defaultValue?.toString() ?? '');
+    const [isFocused, setIsFocused] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(isInvalidProp);
+    useImperativeHandle(ref, ()=>({
+            blur: ()=>{
+                inputRef.current?.blur();
+            },
+            focus: ()=>{
+                inputRef.current?.focus();
+            }
+        }));
+    useEffect(()=>{
+        setIsInvalid(isInvalidProp);
+    }, [
+        isInvalidProp
+    ]);
+    useEffect(()=>{
+        if (isNaN(internalValue) && isRequired) setIsInvalid(true);
+        if (void 0 !== minValue && internalValue < minValue) setIsInvalid(true);
+        if (void 0 !== maxValue && internalValue > maxValue) setIsInvalid(true);
+    }, []);
+    const styles = useStyles({
+        ...props,
+        isInvalid,
+        isFocused
+    });
+    useEffect(()=>{
+        if (void 0 !== controlledValue) {
+            setInternalValue(controlledValue);
+            setDisplayText(isNaN(controlledValue) ? '' : controlledValue.toString());
+        } else if (void 0 !== defaultValue) {
+            setInternalValue(defaultValue);
+            setDisplayText(isNaN(defaultValue) ? '' : defaultValue.toString());
+        }
+    }, [
+        defaultValue,
+        controlledValue
+    ]);
+    const numberFormatter = useMemo(()=>{
+        if (formatOptions) return new Intl.NumberFormat(void 0, formatOptions);
+        return null;
+    }, [
+        formatOptions
+    ]);
+    const validationResult = useMemo(()=>{
+        if (isNaN(internalValue) && isRequired) return {
+            isValid: false,
+            errorMessage: 'This field is required'
+        };
+        if (void 0 !== minValue && internalValue < minValue) return {
+            isValid: false,
+            errorMessage: `Value must be at least ${minValue}`
+        };
+        if (void 0 !== maxValue && internalValue > maxValue) return {
+            isValid: false,
+            errorMessage: `Value must be at most ${maxValue}`
+        };
+        setIsInvalid(false);
+        return {
+            isValid: true
+        };
+    }, [
+        internalValue,
+        isRequired,
+        minValue,
+        maxValue
+    ]);
+    const adjustValueToRange = useCallback((num)=>{
+        const numValue = isNaN(num) ? 0 : num;
+        if (void 0 !== minValue && numValue < minValue) return minValue;
+        if (void 0 !== maxValue && numValue > maxValue) return maxValue;
+        return numValue;
+    }, [
+        minValue,
+        maxValue
+    ]);
+    const adjustValueToFractionDigits = useCallback((numValue)=>{
+        if (formatOptions?.minimumFractionDigits !== void 0 || formatOptions?.maximumFractionDigits !== void 0) return Number(numberFormatter?.format(numValue).replaceAll(',', ''));
+        return numValue;
+    }, [
+        formatOptions,
+        numberFormatter
+    ]);
+    const handleChangeText = useCallback((text)=>{
+        const cleanedText = text.replace(/[^0-9.-]/gu, '');
+        const parts = cleanedText.split('.');
+        if (parts.length > 2) return;
+        if ((cleanedText.match(/-/gu) || []).length > 1) return;
+        if (cleanedText.includes('-') && !cleanedText.startsWith('-')) return;
+        setDisplayText(cleanedText);
+        onChangeText?.(cleanedText);
+        const numValue = parseFloat(cleanedText);
+        if (isNaN(numValue)) {
+            setInternalValue(NaN);
+            onValueChange?.(NaN);
+        } else {
+            setInternalValue(numValue);
+            onValueChange?.(numValue);
+        }
+    }, [
+        onChangeText,
+        onValueChange
+    ]);
+    const handleFocus = useCallback((e)=>{
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [
+        onFocus
+    ]);
+    const handleBlur = useCallback((e)=>{
+        setIsFocused(false);
+        const adjustedValue = adjustValueToFractionDigits(adjustValueToRange(internalValue));
+        if (adjustedValue !== internalValue) {
+            const adjustedText = adjustedValue.toString();
+            setDisplayText(adjustedText);
+            setInternalValue(adjustedValue);
+            onChangeText?.(adjustedText);
+            onValueChange?.(adjustedValue);
+        }
+        onBlur?.(e);
+    }, [
+        internalValue,
+        onChangeText,
+        onValueChange,
+        adjustValueToRange,
+        adjustValueToFractionDigits,
+        onBlur
+    ]);
+    const displayValue = useMemo(()=>{
+        if (isFocused) return displayText;
+        if (isNaN(internalValue)) return '';
+        if (numberFormatter) {
+            const formattedValue = numberFormatter.format(internalValue);
+            if (formatOptions?.signDisplay === 'exceptZero' || formatOptions?.signDisplay === 'always') {
+                if (internalValue > 0) return `+${formattedValue}`;
+                else if (internalValue < 0) ;
+                else if ('always' === formatOptions.signDisplay) return `+${formattedValue}`;
+            }
+            return formattedValue;
+        }
+        return internalValue.toString();
+    }, [
+        internalValue,
+        displayText,
+        numberFormatter,
+        isFocused,
+        formatOptions
+    ]);
+    const renderError = useMemo(async ()=>{
+        if (isInvalidProp && errorMessage) {
+            setIsInvalid(true);
+            return errorMessage;
+        }
+        if (!validationResult.isValid) return autoErrorMessage ? validationResult.errorMessage : null;
+        return null;
+    }, [
+        validationResult,
+        errorMessage,
+        isInvalidProp,
+        autoErrorMessage
+    ]);
+    const keyboardType = useMemo(()=>{
+        if (allowNegative) return 'ios' === Platform.OS ? 'numbers-and-punctuation' : 'default';
+        return 'numeric';
+    }, [
+        allowNegative
+    ]);
+    const renderContent = async (content)=>{
+        if (!content) return null;
+        if ('object' == typeof content) return content;
+        return /*#__PURE__*/ jsx(Text, {
+            color: "tertiary",
+            children: content
+        });
+    };
+    return /*#__PURE__*/ jsxs(VStack, {
+        gap: 4,
+        style: containerStyle,
+        children: [
+            label ? /*#__PURE__*/ jsx(Text, {
+                children: label
+            }) : null,
+            /*#__PURE__*/ jsxs(HStack, {
+                borderStyle: "solid",
+                gap: 6,
+                ph: 12,
+                style: [
+                    styles.container,
+                    wrapperStyle
+                ],
+                children: [
+                    renderContent(startContent),
+                    /*#__PURE__*/ jsx(TextInput, {
+                        ref: inputRef,
+                        editable: !isDisabled && !isReadOnly,
+                        keyboardType: keyboardType,
+                        placeholderTextColor: getColor('tertiary'),
+                        selectionColor: isInvalid ? `${styles.container.borderColor}80` : styles.container.borderColor,
+                        style: [
+                            styles.input,
+                            inputStyle
+                        ],
+                        value: displayValue,
+                        onBlur: handleBlur,
+                        onChangeText: handleChangeText,
+                        onFocus: handleFocus,
+                        ...restProps
+                    }),
+                    renderContent(endContent)
+                ]
+            }),
+            !!renderError && /*#__PURE__*/ jsx(Text, {
+                color: "danger",
+                children: renderError
+            })
+        ]
+    });
+});
+UXNumberInput.displayName = 'UXNumberInput';
+export { UXNumberInput };

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

@@ -0,0 +1,31 @@
+import type { UXInputCommonProps } from './types';
+type UseStylesProps = UXInputCommonProps & {
+    isFocused?: boolean;
+};
+export declare const useStyles: ({ isInvalid, isDisabled, fullWidth, isFocused, color, size, variant, radius, width: widthProp, textAlign, }: UseStylesProps) => {
+    container: {
+        width: number | "auto" | `${number}%` | import("react-native").Animated.AnimatedNode;
+        height: number;
+        borderRadius: number | undefined;
+        borderColor: string | undefined;
+        backgroundColor: string | undefined;
+        borderWidth: number;
+        opacity: number;
+    };
+    input: {
+        flex: number;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        margin: number;
+        fontSize: number;
+        color: string | undefined;
+        fontWeight: "500";
+        textAlign: "left" | "center" | "right";
+    };
+    clearButton: {
+        padding: number;
+    };
+};
+export {};

package/dist/components/input/styles.js

@@ -0,0 +1,102 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { ms } from "react-native-size-matters";
+import { sizeMap } from "@particle-network/ui-shared";
+import { useColors, useRadius } from "../../hooks/index.js";
+import { disabledOpacity } from "../../theme/index.js";
+const fontSizeMap = {
+    sm: ms(12),
+    md: ms(12),
+    lg: ms(14)
+};
+const radiusMap = {
+    sm: 'sm',
+    md: 'sm',
+    lg: 'md'
+};
+const useStyles = ({ isInvalid, isDisabled, fullWidth, isFocused, color = 'primary', size = 'md', variant = 'flat', radius, width: widthProp, textAlign = 'left' })=>{
+    const { getColor } = useColors();
+    const { getRadius } = useRadius();
+    const width = useMemo(()=>{
+        if (fullWidth) return '100%';
+        if (widthProp) return widthProp;
+        return 'auto';
+    }, [
+        fullWidth,
+        widthProp
+    ]);
+    const height = useMemo(()=>ms(sizeMap[size]), [
+        size
+    ]);
+    const fontSize = useMemo(()=>fontSizeMap[size], [
+        size
+    ]);
+    const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
+        radius,
+        size
+    ]);
+    const borderColor = useMemo(()=>{
+        if (isInvalid) return getColor('danger');
+        if (isFocused) return getColor(color);
+        if ('bordered' === variant) return getColor(color);
+        return 'transparent';
+    }, [
+        color,
+        getColor,
+        variant,
+        isFocused,
+        isInvalid
+    ]);
+    const inputTextColor = useMemo(()=>{
+        if (isInvalid) return getColor('danger');
+        return getColor('foreground');
+    }, [
+        isInvalid,
+        getColor
+    ]);
+    const backgroundColor = useMemo(()=>{
+        if (isInvalid) return `${getColor('danger')}50`;
+        return getColor('bg-200');
+    }, [
+        isInvalid,
+        getColor
+    ]);
+    const styles = useMemo(()=>StyleSheet.create({
+            container: {
+                width,
+                height,
+                borderRadius,
+                borderColor,
+                backgroundColor,
+                borderWidth: 1,
+                opacity: isDisabled ? disabledOpacity : 1
+            },
+            input: {
+                flex: 1,
+                paddingTop: 0,
+                paddingBottom: 0,
+                paddingLeft: 0,
+                paddingRight: 0,
+                margin: 0,
+                fontSize,
+                color: inputTextColor,
+                fontWeight: '500',
+                textAlign
+            },
+            clearButton: {
+                padding: ms(4)
+            }
+        }), [
+        width,
+        height,
+        borderRadius,
+        borderColor,
+        isDisabled,
+        fontSize,
+        inputTextColor,
+        textAlign,
+        backgroundColor
+    ]);
+    return styles;
+};
+export { useStyles };

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import type { UXForegroundColor, UXRadius, UXSize } from '@particle-network/ui-shared';
+export interface UXInputRef {
+    blur: () => void;
+    focus: () => void;
+}
+export interface ValidationResult {
+    isValid: boolean;
+    errorMessage?: string;
+}
+export interface UXInputCommonProps extends Omit<TextInputProps, 'value' | 'defaultValue'> {
+    /**
+     * 最外层容器，包括 label 和 error
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * 输入框容器
+     */
+    wrapperStyle?: StyleProp<ViewStyle>;
+    /**
+     * 输入框样式
+     */
+    inputStyle?: StyleProp<TextStyle>;
+    color?: UXForegroundColor;
+    size?: UXSize;
+    variant?: 'bordered' | 'flat';
+    radius?: UXRadius;
+    width?: ViewStyle['width'];
+    errorMessage?: ReactNode;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    fullWidth?: boolean;
+    isClearable?: boolean;
+    isRequired?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    label?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    autoErrorMessage?: boolean;
+}
+export interface UXInputProps extends UXInputCommonProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface UXNumberInputProps extends UXInputCommonProps {
+    value?: number;
+    defaultValue?: number;
+    minValue?: number;
+    maxValue?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    step?: number;
+    showStepper?: boolean;
+    /**
+     * 启用带符号的键盘
+     */
+    allowNegative?: boolean;
+    onValueChange?: (value: number) => void;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import type { UseBoxProps } from './useBox.type';
+export interface BoxProps extends ViewProps, UseBoxProps {
+    /**
+     * Child to render
+     */
+    as?: React.ReactElement<{
+        style?: unknown;
+    }>;
+}
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<View>>;

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

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import react, { forwardRef } from "react";
+import { View } from "react-native";
+import { useBoxStyle } from "./useBox.style.js";
+const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { as, style, 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, ...restProps } = props;
+    const boxStyle = useBoxStyle({
+        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
+    });
+    if (as) return /*#__PURE__*/ react.cloneElement(as, {
+        ...restProps,
+        style: [
+            boxStyle,
+            style,
+            as.props.style
+        ]
+    });
+    return /*#__PURE__*/ jsx(View, {
+        ref: ref,
+        style: [
+            boxStyle,
+            style
+        ],
+        ...restProps
+    });
+});
+Box.displayName = 'UXBox';
+export { Box };

package/dist/components/layout/Box/index.d.ts

@@ -0,0 +1,3 @@
+export * from './box';
+export * from './useBox.style';
+export type * from './useBox.type';

package/dist/components/layout/Box/index.js

@@ -0,0 +1,2 @@
+export * from "./box.js";
+export * from "./useBox.style.js";

package/dist/components/layout/Box/useBox.style.d.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+import type { UseBoxProps } from './useBox.type';
+export declare const useBoxStyle: (props: UseBoxProps) => ViewStyle;