@particle-network/ui-native 0.0.4 → 0.0.6

package/dist/components/ProgressWrapper/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { UXForegroundColor, UXRadius } from '@particle-network/ui-shared';
-import { type FlexProps } from '..';
+import { type FlexProps } from '../layout/Flex';
 export interface ProgressWrapperProps extends Omit<FlexProps, 'radius' | 'width' | 'height' | 'w' | 'h'> {
     /**
      * 进度 (%)

package/dist/components/ProgressWrapper/index.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import react_native_svg, { Path } from "react-native-svg";
-import { Flex } from "../index.js";
 import { useColors, useRadius } from "../../hooks/index.js";
+import { Flex } from "../layout/Flex/index.js";
 const ProgressWrapper = ({ style, svgStyle, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, ...restProps })=>{
     const { getColor } = useColors();
     const { getRadius } = useRadius();

package/dist/components/Text/text.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
-import { Box, HStack, useBoxStyle } from "../index.js";
 import { useColors } from "../../hooks/index.js";
+import { Box, useBoxStyle } from "../layout/Box/index.js";
+import { HStack } from "../layout/HStack.js";
 import { textStyles } from "./text.types.js";
 const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, ...restProps } = props;

package/dist/components/Text/text.types.d.ts

@@ -1,6 +1,6 @@
 import type { TextProps as RNTextProps, TextStyle } from 'react-native';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
-import type { UseBoxProps } from '..';
+import type { UseBoxProps } from '../layout/Box';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
 type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
 type TextLineHeight = '1' | '1.4';

package/dist/components/UXButton/button.js

@@ -1,8 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ActivityIndicator, Keyboard } from "react-native";
-import { Text, UXPressable } from "../index.js";
 import { triggerHapticFeedback } from "../../utils/triggerHapticFeedback.js";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/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, fill, width, isIconOnly, children, ...restProps } = props;
@@ -23,7 +24,7 @@ const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         width,
         fill
     });
-    const content = useMemo(async ()=>{
+    const content = useMemo(()=>{
         if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {
             style: styles.title,
             children: children.toString()

package/dist/components/UXCheckbox/checkbox-group.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FlexProps } from '..';
+import { type FlexProps } from '../layout/Flex';
 import type { UXCheckboxCommonProps } from './types';
 export type UXCheckboxGroupProps = UXCheckboxCommonProps & FlexProps & {
     value?: string[];

package/dist/components/UXCheckbox/checkbox-group.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { Flex } from "../index.js";
+import { Flex } from "../layout/Flex/index.js";
 import { CheckboxGroupContext } from "./context.js";
 const UXCheckboxGroup = ({ size, isDisabled, color, children, gap = 8, value = [], onValueChange, ...props })=>{
     const handleValueChange = (checkboxValue, selected)=>{

package/dist/components/UXCheckbox/checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FlexProps } from '..';
+import { type FlexProps } from '../layout/Flex';
 import type { UXCheckboxCommonProps } from './types';
 export type UXCheckboxProps = UXCheckboxCommonProps & FlexProps & {
     defaultSelected?: boolean;

package/dist/components/UXCheckbox/checkbox.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { ms } from "react-native-size-matters";
-import { Flex, Text, UXPressable } from "../index.js";
 import CheckboxOffIcon from "../../icons/CheckboxOffIcon.js";
 import CheckboxOnIcon from "../../icons/CheckboxOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
+import { Flex } from "../layout/Flex/index.js";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
 import { useCheckboxGroup } from "./context.js";
 const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, ...props })=>{
     const [internalSelected, setInternalSelected] = useState(defaultSelected ?? isSelected);

package/dist/components/UXChip/chip.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { HStack, Text } from "../index.js";
+import { HStack } from "../layout/HStack.js";
+import { Text } from "../Text/index.js";
 import { useStyles } from "./styles.js";
 const UXChip = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { style, size, gap = 2, radius = 4, color, variant, isDisabled, startContent, endContent, children, ...restProps } = props;
@@ -10,7 +11,7 @@ const UXChip = /*#__PURE__*/ forwardRef((props, ref)=>{
         variant,
         isDisabled
     });
-    const content = useMemo(async ()=>{
+    const content = useMemo(()=>{
         if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {
             style: styles.title,
             children: children.toString()

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
-import type { HStackProps } from '..';
+import type { HStackProps } from '../layout/HStack';
 export interface UXChipProps extends HStackProps {
     color?: UXForegroundColor;
     size?: 'sm' | 'md' | 'lg';

package/dist/components/UXDivider/index.d.ts

@@ -1,5 +1,5 @@
 import type { View } from 'react-native';
-import { type BoxProps } from '..';
+import { type BoxProps } from '../layout/Box';
 export interface UXDividerProps extends Omit<BoxProps, 'w' | 'h'> {
     w?: number;
     h?: number;

package/dist/components/UXDivider/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { Box } from "../index.js";
+import { Box } from "../layout/Box/index.js";
 const UXDivider = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { w, h, orientation = 'horizontal', style, ...restProps } = props;
     const width = useMemo(()=>{

package/dist/components/UXHint/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type UXTooltipProps } from '..';
 import type { IconProps } from '../../icons/types';
+import { type UXTooltipProps } from '../UXTooltip';
 export type UXHintProps = UXTooltipProps & {
     iconStyle?: IconProps['style'];
 };

package/dist/components/UXHint/index.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { ms } from "react-native-size-matters";
-import { UXTooltip } from "../index.js";
 import QuestionIcon from "../../icons/QuestionIcon.js";
+import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
     const { content, children, iconStyle, ...restProps } = props;
     return /*#__PURE__*/ jsx(UXTooltip, {

package/dist/components/UXModal/index.js

@@ -4,8 +4,13 @@ import { Animated, Dimensions, PanResponder, Platform, ScrollView, StyleSheet }
 import { Modal, Portal } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ms } from "react-native-size-matters";
-import { Box, Circle, Flex, HStack, Text, VStack } from "../index.js";
 import { useColors, useKeyboard } from "../../hooks/index.js";
+import { Box } from "../layout/Box/index.js";
+import { Circle } from "../layout/Circle.js";
+import { Flex } from "../layout/Flex/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
 const { height } = Dimensions.get('window');
 const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
     const { style, contentStyle, isOpen, title, titleAlign = 'left', onClose, onVisibleChange, children, disableCloseBySwipe, closeByLineOnly, wrapPortal, footer, modalName, tip, keyboardAvoidPosition = 'container' } = props;

package/dist/components/UXPressable/index.d.ts

@@ -1,4 +1,5 @@
 import type { PressableProps, View } from 'react-native';
-import { type UseBoxProps, type UseFlexProps } from '..';
+import type { UseBoxProps } from '../layout/Box';
+import { type UseFlexProps } from '../layout/Flex';
 export type UXPressableProps = PressableProps & UseBoxProps & UseFlexProps;
 export declare const UXPressable: import("react").ForwardRefExoticComponent<PressableProps & UseBoxProps & UseFlexProps & import("react").RefAttributes<View>>;

package/dist/components/UXPressable/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { Pressable } from "react-native";
 import useDebounceFn from "ahooks/es/useDebounceFn";
-import { useFlexBoxStyle } from "../index.js";
+import { useFlexBoxStyle } from "../layout/Flex/index.js";
 const UXPressable = /*#__PURE__*/ forwardRef(({ style, onPress, ...props }, ref)=>{
     const { run } = useDebounceFn(onPress || (()=>null), {
         wait: 300,

package/dist/components/UXRadio/radio-group.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FlexProps } from '..';
+import { type FlexProps } from '../layout/Flex';
 import type { UXRadioCommonProps } from './types';
 export type UXRadioGroupProps = UXRadioCommonProps & FlexProps;
 export declare const UXRadioGroup: React.FC<UXRadioGroupProps>;

package/dist/components/UXRadio/radio-group.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import { Flex } from "../index.js";
+import { Flex } from "../layout/Flex/index.js";
 import { RadioGroupContext } from "./context.js";
 const UXRadioGroup = ({ value = '', onValueChange, color, size, isDisabled, children, gap = 8, ...props })=>/*#__PURE__*/ jsx(RadioGroupContext.Provider, {
         value: {

package/dist/components/UXRadio/radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FlexProps } from '..';
+import { type FlexProps } from '../layout/Flex';
 import type { UXRadioCommonProps } from './types';
 export type UXRadioProps = Omit<UXRadioCommonProps, 'onValueChange'> & FlexProps;
 export declare const UXRadio: React.FC<UXRadioProps>;

package/dist/components/UXRadio/radio.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Pressable } from "react-native";
 import { ms } from "react-native-size-matters";
-import { Flex, Text } from "../index.js";
 import RadioOffIcon from "../../icons/RadioOffIcon.js";
 import RadioOnIcon from "../../icons/RadioOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
+import { Flex } from "../layout/Flex/index.js";
+import { Text } from "../Text/index.js";
 import { useRadioGroup } from "./context.js";
 const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
     const groupContext = useRadioGroup();

package/dist/components/UXSwitch/switch.js

@@ -3,9 +3,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Animated } from "react-native";
 import { ms } from "react-native-size-matters";
 import useUpdateEffect from "ahooks/es/useUpdateEffect";
-import { Text, UXTouchableOpacity } from "../index.js";
 import { useColors } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
+import { Text } from "../Text/index.js";
+import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
 import { useStyles } from "./styles.js";
 const UXSwitch = (props)=>{
     const { color = 'primary', size = 'md', defaultSelected = false, isSelected: isSelectedProps = false, onValueChange, isReadOnly, isDisabled, children, ...flexProps } = props;

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

@@ -1,5 +1,5 @@
 import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
-import type { FlexProps } from '..';
+import type { FlexProps } from '../layout/Flex';
 export type UXSwitchProps = FlexProps & {
     color?: UXForegroundColor;
     size?: UXSize;

package/dist/components/UXTabs/tab.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { HStack, Text, UXTouchableOpacity } from "../index.js";
 import DotIcon from "../../icons/DotIcon.js";
+import { HStack } from "../layout/HStack.js";
+import { Text } from "../Text/index.js";
+import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
 import { useTabsContext } from "./context.js";
 import { useStyles } from "./styles.js";
 const UXTab = ({ tabKey = '', title, icon, style, notification })=>{

package/dist/components/UXTabs/tabs.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useState } from "react";
 import useUpdateEffect from "ahooks/es/useUpdateEffect";
-import { HStack, VStack } from "../index.js";
 import { disabledOpacity } from "../../theme/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
 import { TabsContext } from "./context.js";
 import { useStyles } from "./styles.js";
 const UXTabs = (props)=>{
@@ -24,14 +25,14 @@ const UXTabs = (props)=>{
             onSelectionChange?.(key);
         }
     };
-    const tabs = Children.map(children, async (child)=>{
+    const tabs = Children.map(children, (child)=>{
         if (/*#__PURE__*/ isValidElement(child) && child.key) return /*#__PURE__*/ cloneElement(child, {
             tabKey: String(child.key),
             style: tabStyle
         });
         return child;
     });
-    const renderSelectedTabContent = ()=>Children.map(children, async (child)=>{
+    const renderSelectedTabContent = ()=>Children.map(children, (child)=>{
             if (/*#__PURE__*/ isValidElement(child) && child.key === selectedKey) return child.props.children;
             return null;
         });

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

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
-import type { HStackProps } from '..';
+import type { HStackProps } from '../layout/HStack';
 export interface UXTabsProps extends HStackProps {
     color?: UXForegroundColor;
     size?: UXSize;

package/dist/components/UXTooltip/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type UXModalProps } from '..';
+import { type UXModalProps } from '../UXModal';
 export type UXTooltipProps = Partial<Omit<UXModalProps, 'isOpen' | 'onClose'>> & {
     content: React.ReactNode;
 };

package/dist/components/UXTooltip/index.js

@@ -1,6 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Text, UXModal, UXPressable } from "../index.js";
+import { Text } from "../Text/index.js";
+import { UXModal } from "../UXModal/index.js";
+import { UXPressable } from "../UXPressable/index.js";
 const UXTooltip = (props)=>{
     const { content, children, ...restProps } = props;
     const [isShow, setIsShow] = useState(false);

package/dist/components/UXTouchableOpacity/index.d.ts

@@ -1,4 +1,5 @@
 import { type TouchableOpacityProps, type View } from 'react-native';
-import { type UseBoxProps, type UseFlexProps } from '..';
+import type { UseBoxProps } from '../layout/Box';
+import { type UseFlexProps } from '../layout/Flex';
 export type UXTouchableOpacityProps = TouchableOpacityProps & UseBoxProps & UseFlexProps;
 export declare const UXTouchableOpacity: import("react").ForwardRefExoticComponent<TouchableOpacityProps & UseBoxProps & UseFlexProps & import("react").RefAttributes<View>>;

package/dist/components/UXTouchableOpacity/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { TouchableOpacity } from "react-native";
 import useDebounceFn from "ahooks/es/useDebounceFn";
-import { useFlexBoxStyle } from "../index.js";
+import { useFlexBoxStyle } from "../layout/Flex/index.js";
 const UXTouchableOpacity = /*#__PURE__*/ forwardRef(({ onPress, style, ...props }, ref)=>{
     const { run } = useDebounceFn(onPress || (()=>null), {
         wait: 300,

package/dist/components/input/input.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { TextInput } from "react-native";
-import { HStack, Text, VStack } from "../index.js";
 import { useColors } from "../../hooks/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/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, isInvalid: isInvalidProp, autoErrorMessage, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
@@ -67,7 +69,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         internalValue,
         isRequired
     ]);
-    const renderError = useMemo(async ()=>{
+    const renderError = useMemo(()=>{
         if (isInvalidProp && errorMessage) {
             setIsInvalid(true);
             return errorMessage;
@@ -80,7 +82,7 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isInvalidProp,
         autoErrorMessage
     ]);
-    const renderContent = async (content)=>{
+    const renderContent = (content)=>{
         if (!content) return null;
         if ('object' == typeof content) return content;
         return /*#__PURE__*/ jsx(Text, {

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

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Platform, TextInput } from "react-native";
-import { HStack, Text, VStack } from "../index.js";
 import { useColors } from "../../hooks/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
 import { useStyles } from "./styles.js";
 const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { containerStyle, wrapperStyle, inputStyle, value: controlledValue, defaultValue, errorMessage, minValue, maxValue, formatOptions, startContent, endContent, isRequired, isReadOnly, isDisabled, isInvalid: isInvalidProp, autoErrorMessage, allowNegative, label, onChangeText, onValueChange, onFocus, onBlur, ...restProps } = props;
@@ -157,7 +159,7 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
         isFocused,
         formatOptions
     ]);
-    const renderError = useMemo(async ()=>{
+    const renderError = useMemo(()=>{
         if (isInvalidProp && errorMessage) {
             setIsInvalid(true);
             return errorMessage;
@@ -176,7 +178,7 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     }, [
         allowNegative
     ]);
-    const renderContent = async (content)=>{
+    const renderContent = (content)=>{
         if (!content) return null;
         if ('object' == typeof content) return content;
         return /*#__PURE__*/ jsx(Text, {

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

@@ -4,7 +4,7 @@ type UseStylesProps = UXInputCommonProps & {
 };
 export declare const useStyles: ({ isInvalid, isDisabled, fullWidth, isFocused, color, size, variant, radius, width: widthProp, textAlign, }: UseStylesProps) => {
     container: {
-        width: number | "auto" | `${number}%` | import("react-native").Animated.AnimatedNode;
+        width: number | import("react-native").Animated.AnimatedNode | "auto" | `${number}%`;
         height: number;
         borderRadius: number | undefined;
         borderColor: string | undefined;
@@ -22,7 +22,7 @@ export declare const useStyles: ({ isInvalid, isDisabled, fullWidth, isFocused,
         fontSize: number;
         color: string | undefined;
         fontWeight: "500";
-        textAlign: "left" | "center" | "right";
+        textAlign: "right" | "left" | "center";
     };
     clearButton: {
         padding: number;

package/dist/components/layout/Center.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { View } from 'react-native';
-import { type FlexProps } from '..';
+import { type FlexProps } from './Flex';
 export type CenterProps = Omit<FlexProps, 'justify' | 'align'>;
 export declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<View>>;

package/dist/components/layout/Center.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Flex } from "../index.js";
+import { Flex } from "./Flex/index.js";
 const Center = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         center: true,

package/dist/components/layout/Circle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { View } from 'react-native';
-import { type SquareProps } from '..';
+import { type SquareProps } from './Square';
 export type CircleProps = SquareProps;
-export declare const Circle: React.ForwardRefExoticComponent<Omit<import("..").CenterProps, "h" | "w"> & {
+export declare const Circle: React.ForwardRefExoticComponent<Omit<import("./Center").CenterProps, "h" | "w"> & {
     size?: number;
 } & React.RefAttributes<View>>;

package/dist/components/layout/Circle.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Square } from "../index.js";
+import { Square } from "./Square.js";
 const Circle = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { size, ...restProps } = props;
     return /*#__PURE__*/ jsx(Square, {

package/dist/components/layout/Flex/useFlexBox.style.d.ts

@@ -1,4 +1,5 @@
-import { type UseBoxProps, type UseFlexProps } from '../..';
+import type { UseBoxProps } from '../Box';
+import type { UseFlexProps } from './useFlex.type';
 export declare const useFlexBoxStyle: (props: UseFlexProps & UseBoxProps) => {
     backfaceVisibility?: "visible" | "hidden" | undefined;
     backgroundColor?: import("react-native").ColorValue | undefined;

package/dist/components/layout/Flex/useFlexBox.style.js

@@ -1,4 +1,5 @@
-import { useBoxStyle, useFlexStyle } from "../../index.js";
+import { useBoxStyle } from "../Box/useBox.style.js";
+import { useFlexStyle } from "./useFlex.style.js";
 const useFlexBoxStyle = (props)=>{
     const { fill, vertical, gap, inline, center, direction = 'row', justify, items, self, content, wrap, basis, grow, shrink, ...boxProps } = props;
     const flexStyle = useFlexStyle({

package/dist/components/layout/HStack.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { View } from 'react-native';
-import { type FlexProps } from '..';
+import { type FlexProps } from './Flex';
 export type HStackProps = Omit<FlexProps, 'direction' | 'vertical' | 'inline'>;
 export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<View>>;

package/dist/components/layout/HStack.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Flex } from "../index.js";
+import { Flex } from "./Flex/index.js";
 const HStack = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         direction: "row",

package/dist/components/layout/Square.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { View } from 'react-native';
-import { type CenterProps } from '..';
+import { type CenterProps } from './Center';
 export type SquareProps = Omit<CenterProps, 'w' | 'h'> & {
     size?: number;
 };

package/dist/components/layout/Square.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Center } from "../index.js";
+import { Center } from "./Center.js";
 const Square = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { size, ...restProps } = props;
     return /*#__PURE__*/ jsx(Center, {

package/dist/components/layout/VStack.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { View } from 'react-native';
-import { type FlexProps } from '..';
+import { type FlexProps } from './Flex';
 export type VStackProps = Omit<FlexProps, 'direction' | 'vertical' | 'inline'>;
 export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<View>>;

package/dist/components/layout/VStack.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Flex } from "../index.js";
+import { Flex } from "./Flex/index.js";
 const VStack = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { items = 'stretch', ...restProps } = props;
     return /*#__PURE__*/ jsx(Flex, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
@@ -50,7 +50,10 @@
   ],
   "author": "UniversalX",
   "dependencies": {
-    "@particle-network/ui-shared": "*"
+    "@particle-network/ui-shared": "*",
+    "ahooks": "^3.9.4",
+    "expo-haptics": "^14.1.4",
+    "react-native-size-matters": "^0.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -74,13 +77,11 @@
     "@storybook/react-native": "^9",
     "@storybook/react-native-web-vite": "^9",
     "@types/react": "~19.0.10",
-    "ahooks": "^3.9.4",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "cross-env": "^7.0.3",
     "expo": "~53.0.22",
     "expo-constants": "~17.1.6",
-    "expo-haptics": "^14.1.4",
     "expo-status-bar": "~2.2.3",
     "lucide-react-native": "^0.541.0",
     "react": "19.0.0",
@@ -90,11 +91,11 @@
     "react-native-paper": "^5.14.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
-    "react-native-size-matters": "^0.4.2",
     "react-native-svg": "15.11.2",
     "react-native-web": "^0.20.0",
     "storybook": "^9",
     "typescript": "~5.8.3",
+    "unfetch": "^4.2.0",
     "vite": "^6.3.5"
   },
   "resolutions": {