@particle-network/ui-native 0.4.0-beta.18 → 0.4.0-beta.20

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, ph, isIconOnly, children, ...restProps } = props;
+    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, width, gap, w, h, ph, isIconOnly, children, ...restProps } = props;
     const handlePress = (e)=>{
         Keyboard.dismiss();
         triggerHapticFeedback();
@@ -23,6 +23,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         fullWidth,
         isIconOnly,
         width,
+        gap,
         w,
         h,
         ph

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

@@ -6,7 +6,7 @@ export declare const useStyles: (props: UXButtonProps) => {
             flexDirection: "row";
             alignItems: "center";
             justifyContent: "center";
-            gap: number;
+            gap: number | undefined;
             paddingVertical: number;
             height: number | undefined;
             width: number | "100%" | undefined;

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, ph, fullWidth, isIconOnly } = props;
+    const { size = 'md', radius = buttonConfig.defaultProps?.radius, color = 'default', variant = 'solid', isDisabled, isLoading, width, gap, w, h, ph, fullWidth, isIconOnly } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { getSpacing } = useSpacing();
@@ -29,6 +29,15 @@ const useStyles = (props)=>{
         ms,
         buttonConfig.fontSize
     ]);
+    const iconSizeMap = useMemo(()=>({
+            xs: ms(14),
+            sm: ms(16),
+            md: ms(18),
+            lg: ms(24),
+            auto: ms(16)
+        }), [
+        ms
+    ]);
     const radiusMap = {
         xs: 'xs',
         sm: 'sm',
@@ -37,9 +46,9 @@ const useStyles = (props)=>{
         auto: 'sm'
     };
     const paddingMap = useMemo(()=>({
-            xs: ms(4),
-            sm: ms(6),
-            md: ms(10),
+            xs: ms(10),
+            sm: ms(14),
+            md: ms(14),
             lg: ms(14)
         }), [
         ms
@@ -70,9 +79,9 @@ const useStyles = (props)=>{
         size,
         fontSizeMap
     ]);
-    const spinnerSize = useMemo(()=>fontSize + ms(4), [
-        fontSize,
-        ms
+    const spinnerSize = useMemo(()=>iconSizeMap[size], [
+        size,
+        iconSizeMap
     ]);
     const borderRadius = useMemo(()=>getRadius(radius ?? radiusMap[size]), [
         radius,
@@ -120,12 +129,12 @@ const useStyles = (props)=>{
             return getColor('bg-200');
         }
         if ('flat' === variant) {
-            if (customColorConfig) return `${getColor(customColorConfig.background)}40`;
+            if (customColorConfig) return `${getColor(customColorConfig.background)}20`;
             if ('contrast' === color) return `${getColor('foreground')}40`;
             if ([
                 'default',
                 'secondary'
-            ].includes(color)) return `${getColor('bg-200')}40`;
+            ].includes(color)) return getColor('bg-300');
             return `${getColor(color)}20`;
         }
         return 'transparent';
@@ -161,7 +170,7 @@ const useStyles = (props)=>{
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: ms(8),
+            gap: gap ? getSpacing(gap) : ms(4),
             paddingVertical: 0,
             height,
             width: widthStyle,

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

@@ -253,7 +253,7 @@ export interface UseBoxProps {
      * | bg-200     | #1F1F23      | #F0F0F2     |
      * | bg-300     | #17171C      | #F8F8FA     |
      * | bg-400     | #0F0F0F      | #FFFFFF     |
-     * | divider    | #282828      | #E8E8ED     |
+     * | divider    | #26272D      | #E8E8ED     |
      * | transparent | transparent | transparent |
      *
      * - Foreground Color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.4.0-beta.18",
+  "version": "0.4.0-beta.20",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -44,8 +44,8 @@
     "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
-    "@particle-network/icons": "0.4.0-beta.14",
-    "@particle-network/ui-shared": "0.3.0-beta.6"
+    "@particle-network/ui-shared": "0.3.0-beta.7",
+    "@particle-network/icons": "0.4.0-beta.15"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -89,7 +89,7 @@
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
     "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/icons": "0.4.0-beta.14",
+    "@particle-network/icons": "0.4.0-beta.15",
     "@particle-network/lintstaged-config": "0.1.0"
   },
   "overrides": {