@particle-network/ui-native 0.5.1-beta.5 → 0.5.1-beta.6

package/dist/components/UXCheckbox/checkbox.js

@@ -23,7 +23,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     const checkboxColor = color || groupContext?.color || 'primary';
     const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
     const bgColor = useMemo(()=>{
-        if ('secondary' === checkboxColor) return 'tertiary';
+        if ('secondary' === checkboxColor) return 'cursor';
         return checkboxColor;
     }, [
         checkboxColor
@@ -52,9 +52,9 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         ms
     ]);
     const labelVariant = useMemo(()=>{
-        if ('sm' === checkboxSize) return 'body3';
-        if ('lg' === checkboxSize) return 'body1';
-        return 'body2';
+        if ('sm' === checkboxSize) return 'body2Bold';
+        if ('lg' === checkboxSize) return 'body1Bold';
+        return 'body2Bold';
     }, [
         checkboxSize
     ]);
@@ -64,6 +64,12 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     }, [
         displayLabelPlacement
     ]);
+    const gap = useMemo(()=>{
+        if ('sm' === checkboxSize) return 6;
+        return 8;
+    }, [
+        checkboxSize
+    ]);
     return /*#__PURE__*/ jsx(UXPressable, {
         disabled: checkboxIsDisabled,
         style: {
@@ -72,7 +78,7 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         onPress: handleSelectChange,
         children: /*#__PURE__*/ jsxs(Flex, {
             direction: flexDirection,
-            gap: 8,
+            gap: gap,
             items: "center",
             ...props,
             children: [

package/dist/components/UXCheckbox/icons.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import react_native_svg, { Path } from "react-native-svg";
+import react_native_svg, { Path, Rect } from "react-native-svg";
 import { useColors } from "../../hooks/index.js";
 const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
     const { getColor } = useColors();
@@ -8,16 +8,18 @@ const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
     const color2Value = getColor(color2);
     return /*#__PURE__*/ jsxs(react_native_svg, {
         fill: "none",
-        viewBox: "0 0 16 16",
+        viewBox: "0 0 18 18",
         width: size,
         height: size,
         children: [
-            /*#__PURE__*/ jsx(Path, {
-                d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
+            /*#__PURE__*/ jsx(Rect, {
+                width: 18,
+                height: 18,
+                rx: 2.25,
                 fill: color1Value
             }),
             /*#__PURE__*/ jsx(Path, {
-                d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
+                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",
                 fill: color2Value
             })
         ]
@@ -27,14 +29,18 @@ const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
     const { getColor } = useColors();
     const colorValue = getColor(color);
     return /*#__PURE__*/ jsx(react_native_svg, {
+        viewBox: "0 0 18 18",
         fill: "none",
-        viewBox: "0 0 16 16",
         width: size,
         height: size,
-        children: /*#__PURE__*/ jsx(Path, {
-            d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
+        children: /*#__PURE__*/ jsx(Rect, {
+            x: 0.7,
+            y: 0.7,
+            width: 16.6,
+            height: 16.6,
+            rx: 1.55,
             stroke: colorValue,
-            strokeWidth: 1.23077
+            strokeWidth: 1.4
         })
     });
 };

package/dist/components/UXRadio/radio.js

@@ -23,7 +23,8 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
         if ('lg' === radioSize) return ms(14);
         return ms(12);
     }, [
-        radioSize
+        radioSize,
+        ms
     ]);
     const labelVariant = useMemo(()=>{
         if ('sm' === radioSize) return 'body3';

package/dist/components/input/input.js

@@ -1,7 +1,7 @@
 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, useI18n, useKeyboard } from "../../hooks/index.js";
+import { useI18n, useKeyboard, useTheme } from "../../hooks/index.js";
 import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
@@ -10,7 +10,7 @@ import { UXPressable } from "../UXPressable/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, isClearable, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, blurOnKeyboardHide = true, ...restProps } = props;
-    const { getColor } = useColors();
+    const { colors } = useTheme();
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [isFocused, setIsFocused] = useState(false);
@@ -143,7 +143,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         ref: inputRef,
                         allowFontScaling: false,
                         editable: !isDisabled && !isReadOnly,
-                        placeholderTextColor: getColor('cursor'),
+                        placeholderTextColor: colors.cursor,
                         cursorColor: styles.container.borderColor,
                         selectionColor: `${styles.container.borderColor}90`,
                         style: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.5.1-beta.5",
+  "version": "0.5.1-beta.6",
   "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/icons": "0.5.1-beta.5",
-    "@particle-network/ui-shared": "0.4.1-beta.4"
+    "@particle-network/ui-shared": "0.4.1-beta.4",
+    "@particle-network/icons": "0.5.1-beta.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",