@particle-network/ui-native 0.4.0-beta.8 → 0.4.0

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/UXEmpty/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { View } from 'react-native';
 import type { IconProps } from '../../icons/types';
-import { type VStackProps } from '../layout/VStack';
+import { type VStackProps } from '../layout';
 export interface UXEmptyProps extends VStackProps {
     iconProps?: IconProps;
     text?: React.ReactNode;
+    action?: React.ReactNode;
 }
 export declare const UXEmpty: React.ForwardRefExoticComponent<UXEmptyProps & React.RefAttributes<View>>;

package/dist/components/UXEmpty/index.js

@@ -3,12 +3,12 @@ import { forwardRef } from "react";
 import { useI18n } from "../../hooks/useI18n.js";
 import { useMs } from "../../hooks/useMs.js";
 import { Icon } from "../../icons/index.js";
-import { VStack } from "../layout/VStack.js";
+import { Box, VStack } from "../layout/index.js";
 import { Text } from "../Text/index.js";
 const UXEmpty = /*#__PURE__*/ forwardRef((props, ref)=>{
     const i18n = useI18n();
     const { ms } = useMs();
-    const { text = i18n.table.emptyContent, iconProps, ...restProps } = props;
+    const { text = i18n.table.emptyContent, iconProps, action, ...restProps } = props;
     return /*#__PURE__*/ jsxs(VStack, {
         ref: ref,
         center: true,
@@ -26,6 +26,10 @@ const UXEmpty = /*#__PURE__*/ forwardRef((props, ref)=>{
                 color: "secondary",
                 fontWeight: "normal",
                 children: text
+            }),
+            action && /*#__PURE__*/ jsx(Box, {
+                mt: "lg",
+                children: action
             })
         ]
     });

package/dist/components/index.d.ts

@@ -1,12 +1,6 @@
 export * from './date-picker';
 export * from './input';
-export * from './layout/Box';
-export * from './layout/Center';
-export * from './layout/Circle';
-export * from './layout/Flex';
-export * from './layout/HStack';
-export * from './layout/Square';
-export * from './layout/VStack';
+export * from './layout';
 export * from './ProgressWrapper';
 export * from './Text';
 export * from './UXButton';

package/dist/components/index.js

@@ -1,12 +1,6 @@
 export * from "./date-picker/index.js";
 export * from "./input/index.js";
-export * from "./layout/Box/index.js";
-export * from "./layout/Center.js";
-export * from "./layout/Circle.js";
-export * from "./layout/Flex/index.js";
-export * from "./layout/HStack.js";
-export * from "./layout/Square.js";
-export * from "./layout/VStack.js";
+export * from "./layout/index.js";
 export * from "./ProgressWrapper/index.js";
 export * from "./Text/index.js";
 export * from "./UXButton/index.js";

package/dist/components/input/input.js

@@ -132,7 +132,8 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         allowFontScaling: false,
                         editable: !isDisabled && !isReadOnly,
                         placeholderTextColor: getColor('tertiary'),
-                        selectionColor: isInvalid ? `${styles.container.borderColor}80` : styles.container.borderColor,
+                        cursorColor: styles.container.borderColor,
+                        selectionColor: `${styles.container.borderColor}90`,
                         style: [
                             styles.input,
                             inputStyle

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

@@ -230,7 +230,8 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                         editable: !isDisabled && !isReadOnly,
                         keyboardType: keyboardType,
                         placeholderTextColor: getColor('tertiary'),
-                        selectionColor: isInvalid ? `${styles.container.borderColor}80` : styles.container.borderColor,
+                        cursorColor: styles.container.borderColor,
+                        selectionColor: `${styles.container.borderColor}90`,
                         style: [
                             styles.input,
                             inputStyle

package/dist/components/input/styles.js

@@ -57,11 +57,7 @@ const useStyles = (props)=>{
         isInvalid,
         getColor
     ]);
-    const backgroundColor = useMemo(()=>{
-        if (isInvalid) return `${getColor('danger')}50`;
-        return getColor('bg-200');
-    }, [
-        isInvalid,
+    const backgroundColor = useMemo(()=>getColor('bg-200'), [
         getColor
     ]);
     const containerPadding = useMemo(()=>{

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/dist/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Box';
+export * from './Center';
+export * from './Circle';
+export * from './Flex';
+export * from './HStack';
+export * from './Square';
+export * from './VStack';

package/dist/components/layout/index.js

@@ -0,0 +1,7 @@
+export * from "./Box/index.js";
+export * from "./Center.js";
+export * from "./Circle.js";
+export * from "./Flex/index.js";
+export * from "./HStack.js";
+export * from "./Square.js";
+export * from "./VStack.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.4.0-beta.8",
+  "version": "0.4.0",
   "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.7",
-    "@particle-network/ui-shared": "0.3.0-beta.2"
+    "@particle-network/ui-shared": "0.3.0",
+    "@particle-network/icons": "0.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -75,9 +75,9 @@
     "expo-constants": "~18.0.8",
     "expo-status-bar": "~3.0.8",
     "lucide-react-native": "^0.541.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
+    "react": "19.1.2",
+    "react-dom": "19.1.2",
+    "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.0",
     "react-native-safe-area-context": "5.6.1",
@@ -85,13 +85,12 @@
     "react-native-web": "^0.21.1",
     "serve": "^14.2.5",
     "storybook": "^9.1.6",
-    "typescript": "~5.9.2",
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.4.0-beta.7",
+    "@particle-network/eslint-config": "0.3.0",
     "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/icons": "0.4.0"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",
@@ -112,7 +111,7 @@
     "storybook:build": "storybook build",
     "storybook:preview": "serve storybook-static",
     "storybook:generate": "sb-rn-get-stories",
-    "type-check": "npx tsc --noEmit -p ./tsconfig.json",
+    "type-check": "npx tsgo --noEmit -p ./tsconfig.json",
     "dev": "rslib build --watch",
     "build": "rslib build",
     "lint": "eslint . --no-error-on-unmatched-pattern --quiet",