@particle-network/ui-native 0.5.1-beta.13 → 0.5.1-beta.14

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/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,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { HStack } from "../layout/HStack.js";
+import { Text } from "../Text/index.js";
+import { UXNumberInput } from "./number-input.js";
+const UXRangeInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value, defaultValue, onValueChange, minValue, maxValue, minInputProps = {}, maxInputProps = {}, separator = '-', gap = 8, containerStyle, ...restProps } = props;
+    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
+    ]);
+    return /*#__PURE__*/ jsxs(HStack, {
+        ref: ref,
+        gap: gap,
+        style: containerStyle,
+        items: "center",
+        children: [
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                ...restProps,
+                ...minInputProps,
+                ref: minInputRef,
+                value: currentValue.min,
+                minValue: minValue,
+                maxValue: minInputMaxValue,
+                placeholder: minInputProps.placeholder || 'Min',
+                containerStyle: [
+                    {
+                        flex: 1
+                    },
+                    minInputProps.containerStyle
+                ],
+                onValueChange: handleMinChange
+            }),
+            separator && /*#__PURE__*/ jsx(Text, {
+                color: "tertiary",
+                style: {
+                    marginHorizontal: 4
+                },
+                children: separator
+            }),
+            /*#__PURE__*/ jsx(UXNumberInput, {
+                ...restProps,
+                ...maxInputProps,
+                ref: maxInputRef,
+                value: currentValue.max,
+                minValue: maxInputMinValue,
+                maxValue: maxValue,
+                placeholder: maxInputProps.placeholder || 'Max',
+                containerStyle: [
+                    {
+                        flex: 1
+                    },
+                    maxInputProps.containerStyle
+                ],
+                onValueChange: handleMaxChange
+            })
+        ]
+    });
+});
+UXRangeInput.displayName = 'UXRangeInput';
+export { UXRangeInput };

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

@@ -65,3 +65,47 @@ 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'> {
+    /**
+     * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.5.1-beta.13",
+  "version": "0.5.1-beta.14",
   "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.7",
-    "@particle-network/icons": "0.5.1-beta.9"
+    "@particle-network/icons": "0.5.1-beta.9",
+    "@particle-network/ui-shared": "0.4.1-beta.7"
   },
   "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.9",
+    "@particle-network/lintstaged-config": "0.1.0",
     "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/icons": "0.5.1-beta.9"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",