@particle-network/ui-native 0.5.1-beta.5 → 0.5.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
|
|
|
23
23
|
const checkboxColor = color || groupContext?.color || 'primary';
|
|
24
24
|
const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
|
|
25
25
|
const bgColor = useMemo(()=>{
|
|
26
|
-
if ('secondary' === checkboxColor) return '
|
|
26
|
+
if ('secondary' === checkboxColor) return 'cursor';
|
|
27
27
|
return checkboxColor;
|
|
28
28
|
}, [
|
|
29
29
|
checkboxColor
|
|
@@ -52,9 +52,9 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
|
|
|
52
52
|
ms
|
|
53
53
|
]);
|
|
54
54
|
const labelVariant = useMemo(()=>{
|
|
55
|
-
if ('sm' === checkboxSize) return '
|
|
56
|
-
if ('lg' === checkboxSize) return '
|
|
57
|
-
return '
|
|
55
|
+
if ('sm' === checkboxSize) return 'body2Bold';
|
|
56
|
+
if ('lg' === checkboxSize) return 'body1Bold';
|
|
57
|
+
return 'body2Bold';
|
|
58
58
|
}, [
|
|
59
59
|
checkboxSize
|
|
60
60
|
]);
|
|
@@ -64,6 +64,12 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
|
|
|
64
64
|
}, [
|
|
65
65
|
displayLabelPlacement
|
|
66
66
|
]);
|
|
67
|
+
const gap = useMemo(()=>{
|
|
68
|
+
if ('sm' === checkboxSize) return 6;
|
|
69
|
+
return 8;
|
|
70
|
+
}, [
|
|
71
|
+
checkboxSize
|
|
72
|
+
]);
|
|
67
73
|
return /*#__PURE__*/ jsx(UXPressable, {
|
|
68
74
|
disabled: checkboxIsDisabled,
|
|
69
75
|
style: {
|
|
@@ -72,7 +78,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
|
|
|
72
78
|
onPress: handleSelectChange,
|
|
73
79
|
children: /*#__PURE__*/ jsxs(Flex, {
|
|
74
80
|
direction: flexDirection,
|
|
75
|
-
gap:
|
|
81
|
+
gap: gap,
|
|
76
82
|
items: "center",
|
|
77
83
|
...props,
|
|
78
84
|
children: [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import react_native_svg, { Path } from "react-native-svg";
|
|
3
|
+
import react_native_svg, { Path, Rect } from "react-native-svg";
|
|
4
4
|
import { useColors } from "../../hooks/index.js";
|
|
5
5
|
const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
|
|
6
6
|
const { getColor } = useColors();
|
|
@@ -8,16 +8,18 @@ const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
|
|
|
8
8
|
const color2Value = getColor(color2);
|
|
9
9
|
return /*#__PURE__*/ jsxs(react_native_svg, {
|
|
10
10
|
fill: "none",
|
|
11
|
-
viewBox: "0 0
|
|
11
|
+
viewBox: "0 0 18 18",
|
|
12
12
|
width: size,
|
|
13
13
|
height: size,
|
|
14
14
|
children: [
|
|
15
|
-
/*#__PURE__*/ jsx(
|
|
16
|
-
|
|
15
|
+
/*#__PURE__*/ jsx(Rect, {
|
|
16
|
+
width: 18,
|
|
17
|
+
height: 18,
|
|
18
|
+
rx: 2.25,
|
|
17
19
|
fill: color1Value
|
|
18
20
|
}),
|
|
19
21
|
/*#__PURE__*/ jsx(Path, {
|
|
20
|
-
d: "
|
|
22
|
+
d: "M7.82501 10.225L5.67501 8.075C5.49168 7.89167 5.25834 7.8 4.97501 7.8C4.69168 7.8 4.45834 7.89167 4.27501 8.075C4.09168 8.25833 4.00001 8.49167 4.00001 8.775C4.00001 9.05833 4.09168 9.29167 4.27501 9.475L7.12501 12.325C7.32501 12.525 7.55835 12.625 7.82501 12.625C8.09168 12.625 8.32501 12.525 8.52501 12.325L14.175 6.675C14.3583 6.49167 14.45 6.25833 14.45 5.975C14.45 5.69167 14.3583 5.45833 14.175 5.275C13.9917 5.09167 13.7583 5 13.475 5C13.1917 5 12.9583 5.09167 12.775 5.275L7.82501 10.225Z",
|
|
21
23
|
fill: color2Value
|
|
22
24
|
})
|
|
23
25
|
]
|
|
@@ -27,14 +29,18 @@ const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
|
|
|
27
29
|
const { getColor } = useColors();
|
|
28
30
|
const colorValue = getColor(color);
|
|
29
31
|
return /*#__PURE__*/ jsx(react_native_svg, {
|
|
32
|
+
viewBox: "0 0 18 18",
|
|
30
33
|
fill: "none",
|
|
31
|
-
viewBox: "0 0 16 16",
|
|
32
34
|
width: size,
|
|
33
35
|
height: size,
|
|
34
|
-
children: /*#__PURE__*/ jsx(
|
|
35
|
-
|
|
36
|
+
children: /*#__PURE__*/ jsx(Rect, {
|
|
37
|
+
x: 0.7,
|
|
38
|
+
y: 0.7,
|
|
39
|
+
width: 16.6,
|
|
40
|
+
height: 16.6,
|
|
41
|
+
rx: 1.55,
|
|
36
42
|
stroke: colorValue,
|
|
37
|
-
strokeWidth: 1.
|
|
43
|
+
strokeWidth: 1.4
|
|
38
44
|
})
|
|
39
45
|
});
|
|
40
46
|
};
|
|
@@ -23,7 +23,8 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
|
|
|
23
23
|
if ('lg' === radioSize) return ms(14);
|
|
24
24
|
return ms(12);
|
|
25
25
|
}, [
|
|
26
|
-
radioSize
|
|
26
|
+
radioSize,
|
|
27
|
+
ms
|
|
27
28
|
]);
|
|
28
29
|
const labelVariant = useMemo(()=>{
|
|
29
30
|
if ('sm' === radioSize) return 'body3';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { Platform, TextInput } from "react-native";
|
|
4
|
-
import {
|
|
4
|
+
import { useI18n, useKeyboard, useTheme } from "../../hooks/index.js";
|
|
5
5
|
import { Icon } from "../../icons/index.js";
|
|
6
6
|
import { HStack } from "../layout/HStack.js";
|
|
7
7
|
import { VStack } from "../layout/VStack.js";
|
|
@@ -10,7 +10,7 @@ import { UXPressable } from "../UXPressable/index.js";
|
|
|
10
10
|
import { useStyles } from "./styles.js";
|
|
11
11
|
const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
12
12
|
const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, startContent, endContent, isReadOnly, isDisabled, isRequired, isClearable, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
|
|
13
|
-
const {
|
|
13
|
+
const { colors } = useTheme();
|
|
14
14
|
const inputRef = useRef(null);
|
|
15
15
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
16
16
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -143,7 +143,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
143
143
|
ref: inputRef,
|
|
144
144
|
allowFontScaling: false,
|
|
145
145
|
editable: !isDisabled && !isReadOnly,
|
|
146
|
-
placeholderTextColor:
|
|
146
|
+
placeholderTextColor: colors.cursor,
|
|
147
147
|
cursorColor: styles.container.borderColor,
|
|
148
148
|
selectionColor: `${styles.container.borderColor}90`,
|
|
149
149
|
style: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-native",
|
|
3
|
-
"version": "0.5.1-beta.
|
|
3
|
+
"version": "0.5.1-beta.7",
|
|
4
4
|
"main": "./entry.js",
|
|
5
5
|
"react-native": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
"react-native-size-matters": "^0.4.2",
|
|
46
46
|
"react-native-toast-message": "^2.3.3",
|
|
47
47
|
"react-native-worklets": "0.5.1",
|
|
48
|
-
"@particle-network/icons": "0.5.1-beta.
|
|
49
|
-
"@particle-network/ui-shared": "0.4.1-beta.
|
|
48
|
+
"@particle-network/icons": "0.5.1-beta.6",
|
|
49
|
+
"@particle-network/ui-shared": "0.4.1-beta.5"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@babel/core": "^7.24.0",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"vite": "^6.3.5",
|
|
91
91
|
"zustand": "^5.0.8",
|
|
92
92
|
"@particle-network/eslint-config": "0.3.0",
|
|
93
|
-
"@particle-network/icons": "0.5.1-beta.
|
|
93
|
+
"@particle-network/icons": "0.5.1-beta.6",
|
|
94
94
|
"@particle-network/lintstaged-config": "0.1.0"
|
|
95
95
|
},
|
|
96
96
|
"overrides": {
|