@particle-network/ui-native 0.0.11 → 0.0.13

package/dist/components/UXChip/styles.js

@@ -1,20 +1,20 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
-import { useColors } from "../../hooks/index.js";
+import { useColors, useMs } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
-const sizeMap = {
-    sm: ms(14),
-    md: ms(16),
-    lg: ms(18)
-};
-const fontSizeMap = {
-    sm: ms(11),
-    md: ms(12),
-    lg: ms(14)
-};
 const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisabled })=>{
     const { getColor } = useColors();
+    const { ms } = useMs();
+    const sizeMap = {
+        sm: ms(14),
+        md: ms(16),
+        lg: ms(18)
+    };
+    const fontSizeMap = {
+        sm: ms(11),
+        md: ms(12),
+        lg: ms(14)
+    };
     const height = useMemo(()=>sizeMap[size], [
         size
     ]);
@@ -67,4 +67,4 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
     });
     return styles;
 };
-export { fontSizeMap, sizeMap, useStyles };
+export { useStyles };

package/dist/components/UXHint/index.js

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

package/dist/components/UXListBox/UXListBox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type Item, type UXListBoxProps } from './types';
+interface ListBoxContextValue {
+    selectedValues: Set<string>;
+    selectionMode?: 'single' | 'multiple';
+    disabledKeys?: Set<string>;
+    onItemPress: (key: string) => void;
+    onAction?: (key: string) => void;
+}
+export declare const ListBoxContext: React.Context<ListBoxContextValue>;
+export declare function UXListBox<T = Item>({ items, selectionMode, selectedValues: controlledselectedValues, disabledKeys, defaultselectedValues, onSelectionChange, onAction, disallowEmptySelection, 'aria-label': ariaLabel, children, }: UXListBoxProps<T>): React.JSX.Element;
+export {};

package/dist/components/UXListBox/UXListBox.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useState } from "react";
+import { ScrollView } from "react-native";
+const ListBoxContext = /*#__PURE__*/ react.createContext({
+    selectedValues: new Set(),
+    onItemPress: ()=>null
+});
+function UXListBox({ items, selectionMode, selectedValues: controlledselectedValues, disabledKeys, defaultselectedValues, onSelectionChange, onAction, disallowEmptySelection = false, 'aria-label': ariaLabel, children }) {
+    const [internalselectedValues, setInternalselectedValues] = useState(()=>{
+        if ('all' === defaultselectedValues) return new Set();
+        return defaultselectedValues || new Set();
+    });
+    const selectedValues = void 0 !== controlledselectedValues ? controlledselectedValues : internalselectedValues;
+    const isControlled = void 0 !== controlledselectedValues;
+    const handleItemPress = (key)=>{
+        if (onAction && !selectionMode) return void onAction(key);
+        if (selectionMode) {
+            const newselectedValues = new Set('all' === selectedValues ? [] : selectedValues);
+            if ('single' === selectionMode) if (newselectedValues.has(key)) {
+                if (!disallowEmptySelection) newselectedValues.clear();
+            } else {
+                newselectedValues.clear();
+                newselectedValues.add(key);
+            }
+            else if ('multiple' === selectionMode) if (newselectedValues.has(key)) {
+                if (!disallowEmptySelection || newselectedValues.size > 1) newselectedValues.delete(key);
+            } else newselectedValues.add(key);
+            if (!isControlled) setInternalselectedValues(newselectedValues);
+            onSelectionChange?.(newselectedValues);
+        }
+    };
+    const renderChildren = ()=>{
+        if (items && 'function' == typeof children) {
+            const itemsArray = Array.from(items);
+            return itemsArray.map((item)=>{
+                const child = children(item);
+                return /*#__PURE__*/ react.cloneElement(child, {
+                    key: child.key || item.key || item.value
+                });
+            });
+        }
+        return children;
+    };
+    const contextValue = {
+        selectedValues: 'all' === selectedValues ? new Set() : selectedValues,
+        selectionMode,
+        disabledKeys,
+        onItemPress: handleItemPress,
+        onAction
+    };
+    return /*#__PURE__*/ jsx(ListBoxContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(ScrollView, {
+            showsVerticalScrollIndicator: false,
+            accessibilityRole: 'list',
+            accessibilityLabel: ariaLabel,
+            children: renderChildren()
+        })
+    });
+}
+export { ListBoxContext, UXListBox };

package/dist/components/UXListBox/UXListBoxItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type UXListBoxItemProps } from './types';
+export declare const UXListBoxItem: React.FC<UXListBoxItemProps>;

package/dist/components/UXListBox/UXListBoxItem.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { useMs } from "../../hooks/index.js";
+import CheckIcon from "../../icons/CheckIcon.js";
+import { HStack } from "../layout/HStack.js";
+import { Text } from "../Text/index.js";
+import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
+import { ListBoxContext } from "./UXListBox.js";
+const disabledOpacity = 0.4;
+const UXListBoxItem = ({ value = '', startContent, isDisabled = false, onPress, children })=>{
+    const { ms } = useMs();
+    const context = useContext(ListBoxContext);
+    const { selectedValues, selectionMode, disabledKeys, onItemPress } = context;
+    const isSelected = selectedValues.has(value);
+    const isItemDisabled = isDisabled || disabledKeys?.has(value);
+    const handlePress = ()=>{
+        if (isItemDisabled) return;
+        if (onPress) onPress();
+        else onItemPress(value);
+    };
+    return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
+        radius: "sm",
+        ph: "md",
+        pv: "sm",
+        gap: 4,
+        items: "center",
+        justify: "between",
+        minH: 40,
+        disabled: isItemDisabled,
+        activeOpacity: 0.7,
+        accessibilityRole: "button",
+        accessibilityState: {
+            selected: isSelected,
+            disabled: isItemDisabled
+        },
+        onPress: handlePress,
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 4,
+                children: [
+                    startContent,
+                    /*#__PURE__*/ jsx(Text, {
+                        body1Bold: true,
+                        opacity: isItemDisabled ? disabledOpacity : 1,
+                        color: isSelected ? 'foreground' : 'secondary',
+                        children: children
+                    })
+                ]
+            }),
+            selectionMode && isSelected ? /*#__PURE__*/ jsx(CheckIcon, {
+                size: ms(16),
+                color: "foreground"
+            }) : null
+        ]
+    });
+};
+export { UXListBoxItem };

package/dist/components/UXListBox/UXListBoxSection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXListBoxSectionProps } from './types';
+export declare const UXListBoxSection: React.FC<UXListBoxSectionProps>;

package/dist/components/UXListBox/UXListBoxSection.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
+const UXListBoxSection = ({ title, children })=>/*#__PURE__*/ jsxs(VStack, {
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                body1Bold: true,
+                mt: "md",
+                children: title
+            }),
+            children
+        ]
+    });
+export { UXListBoxSection };

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

@@ -0,0 +1,4 @@
+export type { UXListBoxItemProps, UXListBoxProps, UXListBoxSectionProps } from './types';
+export { UXListBox } from './UXListBox';
+export { UXListBoxItem } from './UXListBoxItem';
+export { UXListBoxSection } from './UXListBoxSection';

package/dist/components/UXListBox/index.js

@@ -0,0 +1,4 @@
+import { UXListBox } from "./UXListBox.js";
+import { UXListBoxItem } from "./UXListBoxItem.js";
+import { UXListBoxSection } from "./UXListBoxSection.js";
+export { UXListBox, UXListBoxItem, UXListBoxSection };

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type Item = Record<string, unknown>;
+export interface UXListBoxProps<T = Item> {
+    items?: Iterable<T>;
+    selectionMode?: 'single' | 'multiple';
+    selectedValues?: Set<string> | 'all';
+    disabledKeys?: Set<string>;
+    defaultselectedValues?: Set<string> | 'all';
+    onSelectionChange?: (keys: Set<string>) => void;
+    onAction?: (key: string) => void;
+    disallowEmptySelection?: boolean;
+    'aria-label'?: string;
+    children?: ReactNode | ((item: T) => ReactNode);
+}
+export interface UXListBoxSectionProps {
+    title: string;
+    children?: ReactNode;
+}
+export interface UXListBoxItemProps {
+    value?: string;
+    startContent?: ReactNode;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    children?: ReactNode;
+}

package/dist/components/UXModal/index.js

@@ -3,18 +3,20 @@ import react, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Dimensions, PanResponder, Platform, ScrollView, StyleSheet } from "react-native";
 import { Modal, Portal } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ms } from "react-native-size-matters";
-import { useColors, useKeyboard } from "../../hooks/index.js";
+import { useColors, useComponentConfig, useKeyboard, useMs } 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";
+import { setColorWithOpacity } from "@particle-network/ui-shared";
 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;
+    const { modal: modalConfig } = useComponentConfig();
     const { getColor } = useColors();
+    const { ms } = useMs();
     const insets = useSafeAreaInsets();
     const { keyboardHeight } = useKeyboard();
     const translateY = useRef(new Animated.Value(height)).current;
@@ -147,8 +149,8 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
         },
         container: {
             paddingHorizontal: ms(14),
-            borderTopLeftRadius: 24,
-            borderTopRightRadius: 24,
+            borderTopLeftRadius: modalConfig.radius,
+            borderTopRightRadius: modalConfig.radius,
             flex: 1,
             gap: ms(20),
             backgroundColor: getColor('overlay'),
@@ -183,7 +185,7 @@ const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
             ],
             theme: {
                 colors: {
-                    backdrop: 'rgba(0, 0, 0, 0.8)'
+                    backdrop: setColorWithOpacity(getColor('bg-200') ?? '#000000', 0.7)
                 }
             },
             visible: isOpen,

package/dist/components/UXRadio/radio.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Pressable } from "react-native";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 import RadioOffIcon from "../../icons/RadioOffIcon.js";
 import RadioOnIcon from "../../icons/RadioOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
@@ -9,6 +9,7 @@ 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 { ms } = useMs();
     const groupContext = useRadioGroup();
     const { selectedValue, size: groupSize, color: groupColor, onValueChange, isDisabled: groupIsDisabled } = groupContext;
     const isSelected = selectedValue === value;

package/dist/components/UXSwitch/styles.js

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef } from "react";
 import { Animated, StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
+import { useMs } from "../../hooks/index.js";
 const useStyles = ({ size = 'md', isSelected = false })=>{
+    const { ms } = useMs();
     const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
     useEffect(()=>{
         Animated.timing(animatedValue, {

package/dist/components/UXSwitch/switch.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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 { useColors } from "../../hooks/index.js";
+import { useColors, useMs } 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;
+    const { ms } = useMs();
     const [isSelected, setIsSelected] = useState(isSelectedProps || defaultSelected);
     useUpdateEffect(()=>{
         setIsSelected(isSelectedProps);

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

@@ -8,7 +8,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
         flex: number;
         justifyContent: "flex-start" | "space-between";
         borderRadius: number | undefined;
-        height: number;
+        height: number | undefined;
         padding: number;
         opacity: number;
     };
@@ -27,4 +27,7 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
         fontWeight: "500";
         color: string | undefined;
     };
+    underline: {
+        backgroundColor: string | undefined;
+    };
 };

package/dist/components/UXTabs/styles.js

@@ -1,21 +1,15 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { ms } from "react-native-size-matters";
-import { useColors, useRadius } from "../../hooks/index.js";
+import { useColors, useComponentConfig, useMs, useRadius } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
-    const { size = 'md', radius, fullWidth, variant = 'solid', color = 'default', isDisabled, isSelected, w, gap } = props;
+    const { tabs: tabsConfig } = useComponentConfig();
+    const { size = 'md', radius = tabsConfig.defaultProps?.radius, fullWidth, variant = 'solid', color = 'default', isDisabled, isSelected, w, gap } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
+    const { ms } = useMs();
     const height = useMemo(()=>{
-        if ('text' === variant) switch(size){
-            case 'sm':
-                return ms(16);
-            case 'lg':
-                return ms(20);
-            default:
-                return ms(18);
-        }
+        if ('text' === variant || 'underlined' === variant) return;
         if ('solid' === variant) switch(size){
             case 'sm':
                 return ms(24);
@@ -34,22 +28,16 @@ const useStyles = (props)=>{
         }
     }, [
         size,
-        variant
+        variant,
+        ms
     ]);
-    const fontSize = useMemo(()=>{
-        switch(size){
-            case 'sm':
-                return ms(12);
-            case 'lg':
-                return ms(16);
-            default:
-                return ms(14);
-        }
-    }, [
-        size
+    const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
+        size,
+        ms,
+        tabsConfig.fontSize
     ]);
     const paddingHorizontal = useMemo(()=>{
-        if ('text' === variant) return 0;
+        if ('text' === variant || 'underlined' === variant) return 0;
         switch(size){
             case 'sm':
                 return ms(8);
@@ -60,11 +48,12 @@ const useStyles = (props)=>{
         }
     }, [
         size,
-        variant
+        variant,
+        ms
     ]);
     const gapValue = useMemo(()=>{
         if (gap) return gap;
-        if ('text' === variant) switch(size){
+        if ('text' === variant || 'underlined' === variant) switch(size){
             case 'sm':
                 return ms(14);
             case 'lg':
@@ -77,7 +66,8 @@ const useStyles = (props)=>{
     }, [
         variant,
         size,
-        gap
+        gap,
+        ms
     ]);
     const wrapperBackgroundColor = useMemo(()=>{
         if ('switch' === variant) return getColor('bg-200');
@@ -97,7 +87,8 @@ const useStyles = (props)=>{
     }, [
         variant,
         size,
-        radius
+        radius,
+        ms
     ]);
     const wrapperPadding = useMemo(()=>{
         if ('solid' === variant) {
@@ -107,18 +98,22 @@ const useStyles = (props)=>{
         return 0;
     }, [
         variant,
-        size
+        size,
+        ms
     ]);
     const tabBorderRadius = useMemo(()=>{
         if (radius) return getRadius(radius);
+        if ('text' === variant || 'underlined' === variant) return 0;
         return ms(6);
     }, [
         variant,
-        radius
+        radius,
+        ms,
+        getRadius
     ]);
     const tabBg = useMemo(()=>{
         if (!isSelected) return 'transparent';
-        if ('text' === variant) return 'transparent';
+        if ('text' === variant || 'underlined' === variant) return 'transparent';
         if ('default' === color) {
             if ('switch' === variant) return getColor('tertiary');
             return getColor('bg-200');
@@ -132,7 +127,7 @@ const useStyles = (props)=>{
     ]);
     const tabTextColor = useMemo(()=>{
         if (!isSelected) return getColor('secondary');
-        if ('text' === variant) {
+        if ('text' === variant || 'underlined' === variant) {
             if ('default' === color) return getColor('foreground');
             return getColor(color);
         }
@@ -156,7 +151,11 @@ const useStyles = (props)=>{
                 opacity: isDisabled ? disabledOpacity : 1
             },
             tab: {
-                flexGrow: 'text' === variant || 'light' === variant ? 0 : 1,
+                flexGrow: [
+                    'text',
+                    'light',
+                    'underlined'
+                ].includes(variant) ? 0 : 1,
                 height: '100%',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -169,6 +168,9 @@ const useStyles = (props)=>{
                 lineHeight: fontSize + ms(4),
                 fontWeight: '500',
                 color: tabTextColor
+            },
+            underline: {
+                backgroundColor: isSelected ? tabTextColor : 'transparent'
             }
         }), [
         variant,
@@ -184,7 +186,9 @@ const useStyles = (props)=>{
         isDisabled,
         tabTextColor,
         fullWidth,
-        w
+        w,
+        ms,
+        isSelected
     ]);
     return styles;
 };

package/dist/components/UXTabs/tab.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import DotIcon from "../../icons/DotIcon.js";
+import { Box } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
@@ -23,34 +24,45 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
         radius,
         isSelected
     });
-    return /*#__PURE__*/ jsx(UXTouchableOpacity, {
+    return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
         activeOpacity: 0.7,
         disabled: isDisabled,
+        gap: 8,
+        direction: "column",
+        items: "center",
         style: [
             styles.tab,
             style
         ],
         onPress: handlePress,
-        children: /*#__PURE__*/ jsxs(HStack, {
-            gap: 4,
-            position: "relative",
-            children: [
-                'function' == typeof icon ? icon(isSelected) : icon,
-                'function' == typeof title ? title(isSelected) : /*#__PURE__*/ jsx(Text, {
-                    style: styles.tabText,
-                    children: title
-                }),
-                notification ? /*#__PURE__*/ jsx(DotIcon, {
-                    color: "danger",
-                    size: 5,
-                    style: {
-                        position: 'absolute',
-                        right: -4,
-                        top: 0
-                    }
-                }) : null
-            ]
-        })
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 4,
+                position: "relative",
+                children: [
+                    'function' == typeof icon ? icon(isSelected) : icon,
+                    'function' == typeof title ? title(isSelected) : /*#__PURE__*/ jsx(Text, {
+                        style: styles.tabText,
+                        children: title
+                    }),
+                    notification ? /*#__PURE__*/ jsx(DotIcon, {
+                        color: "danger",
+                        size: 5,
+                        style: {
+                            position: 'absolute',
+                            right: -4,
+                            top: 0
+                        }
+                    }) : null
+                ]
+            }),
+            'underlined' === variant && /*#__PURE__*/ jsx(Box, {
+                w: 24,
+                h: 2,
+                radius: 4,
+                style: styles.underline
+            })
+        ]
     });
 };
 UXTab.displayName = 'UXTab';

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

@@ -4,8 +4,23 @@ import type { UXForegroundColor, UXSize } from '@particle-network/ui-shared';
 import type { HStackProps } from '../layout/HStack';
 export interface UXTabsProps extends HStackProps {
     color?: UXForegroundColor;
+    /**
+     * 高度对比
+     * | variant | sm  | md  | lg  |
+     * | ------- | --- | --- | --- |
+     * | solid   | -   | 30  | 40  |
+     * | switch  | 24  | 30  | 34  |
+     * | light   | 24  | 30  | 34  |
+     *
+     * variant-text 字号对比
+     * | text    | ux-pro | ux    |
+     * | ------- | ------ | ----- |
+     * | sm      | 12     | 14    |
+     * | md      | 14     | 16    |
+     * | lg      | 16     | 18    |
+     */
     size?: UXSize;
-    variant?: 'solid' | 'light' | 'text' | 'switch';
+    variant?: 'solid' | 'light' | 'text' | 'switch' | 'underlined';
     selectedKey?: string;
     defaultSelectedKey?: string;
     onSelectionChange?: (key: string) => void;

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './UXCheckbox';
 export * from './UXChip';
 export * from './UXDivider';
 export * from './UXHint';
+export * from './UXListBox';
 export * from './UXModal';
 export * from './UXPressable';
 export * from './UXRadio';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export * from "./UXCheckbox/index.js";
 export * from "./UXChip/index.js";
 export * from "./UXDivider/index.js";
 export * from "./UXHint/index.js";
+export * from "./UXListBox/index.js";
 export * from "./UXModal/index.js";
 export * from "./UXPressable/index.js";
 export * from "./UXRadio/index.js";

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

@@ -2,7 +2,7 @@ import type { UXInputCommonProps } from './types';
 type UseStylesProps = UXInputCommonProps & {
     isFocused?: boolean;
 };
-export declare const useStyles: ({ isInvalid, isDisabled, fullWidth, isFocused, color, size, variant, radius, width: widthProp, textAlign, }: UseStylesProps) => {
+export declare const useStyles: (props: UseStylesProps) => {
     container: {
         width: number | import("react-native").Animated.AnimatedNode | "auto" | `${number}%`;
         height: number;