@particle-network/ui-native 0.0.15 → 0.0.17

package/dist/components/Text/text.js

@@ -166,5 +166,5 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-text_Text.displayName = 'UXText';
+text_Text.displayName = 'Text';
 export { text_Text as Text };

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

@@ -8,15 +8,17 @@ export declare const useStyles: (props: Partial<UXTabsProps> & {
         flex: number;
         justifyContent: "flex-start" | "space-between";
         borderRadius: number | undefined;
-        height: number | undefined;
+        height: number;
         padding: number;
         opacity: number;
     };
     tab: {
+        flexDirection: "column";
         flexGrow: number;
         height: "100%";
         alignItems: "center";
         justifyContent: "center";
+        gap: number;
         paddingHorizontal: number;
         borderRadius: number | undefined;
         backgroundColor: string | undefined;

package/dist/components/UXTabs/styles.js

@@ -8,8 +8,14 @@ const useStyles = (props)=>{
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { ms } = useMs();
+    const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
+        size,
+        ms,
+        tabsConfig.fontSize
+    ]);
     const height = useMemo(()=>{
-        if ('text' === variant || 'underlined' === variant) return;
+        if ('text' === variant) return fontSize + ms(4);
+        if ('underlined' === variant) return fontSize + ms(4) + ms(2) + fontSize / 2;
         if ('solid' === variant) switch(size){
             case 'sm':
                 return ms(24);
@@ -27,14 +33,10 @@ const useStyles = (props)=>{
                 return ms(30);
         }
     }, [
-        size,
         variant,
-        ms
-    ]);
-    const fontSize = useMemo(()=>ms(tabsConfig.fontSize[size]), [
         size,
-        ms,
-        tabsConfig.fontSize
+        fontSize,
+        ms
     ]);
     const paddingHorizontal = useMemo(()=>{
         if ('text' === variant || 'underlined' === variant) return 0;
@@ -151,6 +153,7 @@ const useStyles = (props)=>{
                 opacity: isDisabled ? disabledOpacity : 1
             },
             tab: {
+                flexDirection: 'column',
                 flexGrow: [
                     'text',
                     'light',
@@ -159,6 +162,7 @@ const useStyles = (props)=>{
                 height: '100%',
                 alignItems: 'center',
                 justifyContent: 'center',
+                gap: fontSize / 2,
                 paddingHorizontal,
                 borderRadius: tabBorderRadius,
                 backgroundColor: tabBg

package/dist/components/UXTabs/tab.js

@@ -27,9 +27,6 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
     return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
         activeOpacity: 0.7,
         disabled: isDisabled,
-        gap: 8,
-        direction: "column",
-        items: "center",
         style: [
             styles.tab,
             style

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

@@ -5,7 +5,9 @@ type UseStylesProps = UXInputCommonProps & {
 export declare const useStyles: (props: UseStylesProps) => {
     container: {
         width: number | import("react-native").Animated.AnimatedNode | "auto" | `${number}%`;
-        height: number;
+        height: number | undefined;
+        paddingTop: number;
+        paddingBottom: number;
         borderRadius: number | undefined;
         borderColor: string | undefined;
         backgroundColor: string | undefined;

package/dist/components/input/styles.js

@@ -4,7 +4,7 @@ import { useColors, useComponentConfig, useMs, useRadius } from "../../hooks/ind
 import { disabledOpacity } from "../../theme/index.js";
 const useStyles = (props)=>{
     const { input: inputConfig } = useComponentConfig();
-    const { isInvalid, isDisabled, fullWidth, isFocused, color = 'primary', size = 'md', variant = 'flat', radius = inputConfig.defaultProps?.radius, width: widthProp, textAlign = 'left' } = props;
+    const { isInvalid, isDisabled, fullWidth, isFocused, color = 'primary', size = 'md', variant = 'flat', multiline, radius = multiline ? void 0 : inputConfig.defaultProps?.radius, width: widthProp, textAlign = 'left' } = props;
     const { getColor } = useColors();
     const { getRadius } = useRadius();
     const { ms } = useMs();
@@ -21,10 +21,13 @@ const useStyles = (props)=>{
         fullWidth,
         widthProp
     ]);
-    const height = useMemo(()=>ms(inputConfig.size[size]), [
+    const height = useMemo(()=>{
+        if (!multiline) return ms(inputConfig.size[size]);
+    }, [
         size,
         inputConfig.size,
-        ms
+        ms,
+        multiline
     ]);
     const fontSize = useMemo(()=>inputConfig.fontSize[size], [
         size,
@@ -61,10 +64,25 @@ const useStyles = (props)=>{
         isInvalid,
         getColor
     ]);
+    const containerPadding = useMemo(()=>{
+        if (multiline) return {
+            paddingTop: ms(12),
+            paddingBottom: ms(12)
+        };
+        return {
+            paddingTop: 0,
+            paddingBottom: 0
+        };
+    }, [
+        multiline,
+        ms
+    ]);
     const styles = useMemo(()=>StyleSheet.create({
             container: {
                 width,
                 height,
+                paddingTop: containerPadding.paddingTop,
+                paddingBottom: containerPadding.paddingBottom,
                 borderRadius,
                 borderColor,
                 backgroundColor,
@@ -95,7 +113,9 @@ const useStyles = (props)=>{
         fontSize,
         inputTextColor,
         textAlign,
-        backgroundColor
+        backgroundColor,
+        containerPadding,
+        ms
     ]);
     return styles;
 };

package/dist/components/layout/Box/box.js

@@ -85,5 +85,5 @@ const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-Box.displayName = 'UXBox';
+Box.displayName = 'Box';
 export { Box };

package/dist/components/layout/Center.js

@@ -6,5 +6,5 @@ const Center = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         center: true,
         ...props
     }));
-Center.displayName = 'UXCenter';
+Center.displayName = 'Center';
 export { Center };

package/dist/components/layout/Circle.js

@@ -10,5 +10,5 @@ const Circle = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-Circle.displayName = 'UXCircle';
+Circle.displayName = 'Circle';
 export { Circle };

package/dist/components/layout/Flex/flex.js

@@ -29,5 +29,5 @@ const Flex = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-Flex.displayName = 'UXFlex';
+Flex.displayName = 'Flex';
 export { Flex };

package/dist/components/layout/HStack.js

@@ -7,5 +7,5 @@ const HStack = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         items: "center",
         ...props
     }));
-HStack.displayName = 'UXHStack';
+HStack.displayName = 'HStack';
 export { HStack };

package/dist/components/layout/Square.js

@@ -10,5 +10,5 @@ const Square = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-Square.displayName = 'UXSquare';
+Square.displayName = 'Square';
 export { Square };

package/dist/components/layout/VStack.js

@@ -10,5 +10,5 @@ const VStack = /*#__PURE__*/ forwardRef((props, ref)=>{
         ...restProps
     });
 });
-VStack.displayName = 'UXVStack';
+VStack.displayName = 'VStack';
 export { VStack };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",