@particle-network/ui-native 0.0.21 → 0.0.23

package/dist/components/UXButton/button.js

@@ -7,7 +7,7 @@ import { UXPressable } from "../UXPressable/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { useStyles } from "./button.styles.js";
 const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, w, h, isIconOnly, children, ...restProps } = props;
+    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, w, h, ph, isIconOnly, children, ...restProps } = props;
     const handlePress = (e)=>{
         Keyboard.dismiss();
         triggerHapticFeedback();
@@ -24,7 +24,8 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         isIconOnly,
         width,
         w,
-        h
+        h,
+        ph
     });
     const content = useMemo(()=>{
         if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {

package/dist/components/UXButton/button.styles.d.ts

@@ -10,7 +10,7 @@ export declare const useStyles: (props: UXButtonProps) => {
             paddingVertical: number;
             height: number | undefined;
             width: number | "100%" | undefined;
-            paddingHorizontal: number;
+            paddingHorizontal: number | undefined;
             backgroundColor: string | undefined;
             borderRadius: number | undefined;
             borderWidth: number;

package/dist/components/UXButton/button.styles.js

@@ -4,7 +4,7 @@ import { useColors, useComponentConfig, useMs, useRadius, useSpacing } from "../
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
     const { button: buttonConfig } = useComponentConfig();
-    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, w, h, fullWidth, isIconOnly } = props;
+    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, w, h, ph, fullWidth, isIconOnly } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { getSpacing } = useSpacing();
@@ -77,12 +77,15 @@ const useStyles = (props)=>{
     ]);
     const paddingHorizontal = useMemo(()=>{
         if (isIconOnly || 'auto' === size || 'text' === variant) return 0;
+        if (void 0 !== ph) return getSpacing(ph);
         return paddingMap[size];
     }, [
         size,
         isIconOnly,
         variant,
-        paddingMap
+        paddingMap,
+        ph,
+        getSpacing
     ]);
     const textColor = useMemo(()=>{
         const customColorConfig = buttonConfig?.color?.[color];
@@ -110,7 +113,7 @@ const useStyles = (props)=>{
                 'default',
                 'secondary'
             ].includes(color)) return getColor(color);
-            return getColor('bg-300');
+            return getColor('bg-200');
         }
         if ('flat' === variant) {
             if (customColorConfig) return `${getColor(customColorConfig.background)}40`;
@@ -118,7 +121,7 @@ const useStyles = (props)=>{
             if ([
                 'default',
                 'secondary'
-            ].includes(color)) return `${getColor('bg-300')}40`;
+            ].includes(color)) return `${getColor('bg-200')}40`;
             return `${getColor(color)}20`;
         }
         return 'transparent';

package/dist/components/UXToast/toast.js

@@ -5,6 +5,7 @@ const toast = {
         UXToast.show({
             type: 'success',
             text1: message,
+            topOffset: 60,
             ...options
         });
     },
@@ -12,16 +13,18 @@ const toast = {
         UXToast.show({
             type: 'error',
             text1: message,
+            topOffset: 60,
             ...options
         });
     },
     loading: (message, options)=>{
-        const { visibilityTime = 0, autoHide = !!visibilityTime, ...restOptions } = options ?? {};
+        const { visibilityTime = 0, autoHide = !!visibilityTime, topOffset = 60, ...restOptions } = options ?? {};
         UXToast.show({
             type: 'loading',
             text1: message,
             visibilityTime,
             autoHide,
+            topOffset,
             ...restOptions
         });
     }

package/dist/components/input/input.js

@@ -139,13 +139,14 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         onFocus: handleFocus,
                         ...restProps
                     }),
-                    renderContent(endContent),
-                    !isClearable || !internalValue || isDisabled || isReadOnly ? null : /*#__PURE__*/ jsx(UXPressable, {
+                    isClearable && !!internalValue && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
+                        p: 4,
                         onPress: handleClear,
                         children: /*#__PURE__*/ jsx(CloseIcon, {
-                            size: 16
+                            style: styles.clearButton
                         })
-                    })
+                    }),
+                    renderContent(endContent)
                 ]
             }),
             !!renderError && /*#__PURE__*/ jsx(Text, {

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

@@ -2,12 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Platform, TextInput } from "react-native";
 import { useColors } from "../../hooks/index.js";
+import CloseIcon from "../../icons/CloseIcon.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
 import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/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 { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, minValue, maxValue, formatOptions, startContent, endContent, isRequired, isReadOnly, isDisabled, isClearable, isInvalid: isInvalidProp, autoErrorMessage, allowNegative, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
     const { getColor } = useColors();
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(defaultValue ?? NaN);
@@ -139,6 +141,18 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         adjustValueToFractionDigits,
         onBlur
     ]);
+    const handleClear = useCallback(()=>{
+        if (isDisabled || isReadOnly) return;
+        setDisplayText('');
+        setInternalValue(NaN);
+        onChangeText?.('');
+        onValueChange?.(NaN);
+    }, [
+        isDisabled,
+        isReadOnly,
+        onChangeText,
+        onValueChange
+    ]);
     const displayValue = useMemo(()=>{
         if (isFocused) return displayText;
         if (isNaN(internalValue)) return '';
@@ -219,6 +233,14 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         onFocus: handleFocus,
                         ...restProps
                     }),
+                    isClearable && !isNaN(internalValue) && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
+                        p: 4,
+                        onPress: handleClear,
+                        children: /*#__PURE__*/ jsx(CloseIcon, {
+                            style: styles.clearButton,
+                            color: "secondary"
+                        })
+                    }),
                     renderContent(endContent)
                 ]
             }),

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

@@ -27,7 +27,8 @@ export declare const useStyles: (props: UseStylesProps) => {
         textAlign: "right" | "left" | "center";
     };
     clearButton: {
-        padding: number;
+        width: number;
+        height: number;
     };
 };
 export {};

package/dist/components/input/styles.js

@@ -102,7 +102,8 @@ const useStyles = (props)=>{
                 textAlign
             },
             clearButton: {
-                padding: ms(4)
+                width: fontSize + ms(6),
+                height: fontSize + ms(6)
             }
         }), [
         width,

package/dist/config/config.default.js

@@ -13,11 +13,11 @@ const defaultComponentConfig = {
         },
         color: {
             default: {
-                background: 'bg-300',
+                background: 'bg-200',
                 text: 'default'
             },
             secondary: {
-                background: 'bg-300',
+                background: 'bg-200',
                 text: 'secondary'
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",