mg-library 1.0.704 → 1.0.706

package/components.js

@@ -1,4 +1,5 @@
-import { Platform } from "react-native";
+import React, { useRef } from "react";
+import { Platform, Animated } from "react-native";
 import { Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
@@ -71,7 +72,7 @@ export function MGCard({ children, header = null, footer = null, style = {}, ...
     );
 }
 
-export function MGButton({
+/* export function MGButton({
     title,
     icon,
     callback,
@@ -94,8 +95,7 @@ export function MGButton({
     const isSolid = variant === "solid" || variant === "filled";
     const gsVariant = variant === "ghost" ? "link" : variant;
     const textColor = isSolid ? "$white" : `$${action}700`;
-    if (iconColor === undefined) 
-        iconColor = textColor;
+    if (iconColor === undefined) iconColor = textColor;
     const bgColor = isSolid ? `$${action}500` : "transparent";
     const borderColor = `$${action}500`;
     const SIZE_MAP = {
@@ -107,9 +107,6 @@ export function MGButton({
     const { pyToken, icon: defaultIconSize } = SIZE_MAP[size] || SIZE_MAP.lg;
     const resolvedPy = py !== undefined ? py : pyToken;
     const resolvedIconSize = iconSize ?? defaultIconSize;
-    const pressedStyles = isSolid
-        ? { bg: `$${action}600`, opacity: 0.9 }
-        : { bg: "$gray200", opacity: 0.95, borderColor: `$${action}600` };
     return (
         <Button
             action={action}
@@ -120,9 +117,11 @@ export function MGButton({
             borderColor={borderColor}
             size={size}
             minHeight={minHeight}
-            isLoading={!!isLoading}
-            _pressed={pressedStyles}
             style={[!effectiveDisabled && { opacity: 1 }, style]}
+            _pressed={{
+                bg: isSolid ? `$${action}600` : "$gray100",
+                opacity: 0.9,
+            }}
             {...rest}
         >
             {icon ? (
@@ -148,6 +147,111 @@ export function MGButton({
         </Button>
     );
 }
+ */
+
+export function MGButton({
+    title,
+    icon,
+    callback,
+    variant = "solid",
+    action = "primary",
+    isDisabled,
+    disabled,
+    isLoading,
+    style,
+    textProps = {},
+    size = "lg",
+    py,
+    minHeight,
+    iconSpacing = "$2",
+    iconSize,
+    iconColor,
+    ...rest
+}) {
+    const scale = useRef(new Animated.Value(1)).current;
+
+    const animateIn = () =>
+        Animated.spring(scale, {
+            toValue: 0.97,
+            friction: 7,
+            useNativeDriver: true,
+        }).start();
+
+    const animateOut = () =>
+        Animated.spring(scale, {
+            toValue: 1,
+            friction: 7,
+            useNativeDriver: true,
+        }).start();
+
+    const effectiveDisabled = !!(isDisabled || disabled || isLoading);
+    const isSolid = variant === "solid" || variant === "filled";
+    const gsVariant = variant === "ghost" ? "link" : variant;
+
+    const textColor = isSolid ? "$white" : `$${action}700`;
+    if (iconColor === undefined) iconColor = textColor;
+    const bgColor = isSolid ? `$${action}500` : "$white"; // 👈 fondo blanco explícito
+    const borderColor = `$${action}500`;
+
+    const SIZE_MAP = {
+        sm: { pyToken: "$2", icon: 16 },
+        md: { pyToken: "$3", icon: 18 },
+        lg: { pyToken: "$4", icon: 20 },
+        xl: { pyToken: "$5", icon: 22 },
+    };
+    const { pyToken, icon: defaultIconSize } = SIZE_MAP[size] || SIZE_MAP.lg;
+    const resolvedPy = py !== undefined ? py : pyToken;
+    const resolvedIconSize = iconSize ?? defaultIconSize;
+
+    // 🎯 Diferenciar pressed según tipo
+    const pressedStyles = isSolid
+        ? { bg: `$${action}600`, opacity: 0.9 }
+        : { bg: "$gray200", opacity: 0.95, borderColor: `$${action}600` };
+
+    return (
+        <Animated.View style={[{ transform: [{ scale }] }]}>
+            <Button
+                action={action}
+                variant={gsVariant}
+                isDisabled={effectiveDisabled}
+                onPress={callback}
+                onPressIn={animateIn}
+                onPressOut={animateOut}
+                bg={bgColor}
+                borderColor={borderColor}
+                size={size}
+                py={resolvedPy}
+                minHeight={minHeight}
+                isLoading={!!isLoading}
+                style={[!effectiveDisabled && { opacity: 1 }, style]}
+                _pressed={pressedStyles}
+                {...rest}
+            >
+                {icon ? (
+                    <ButtonIcon
+                        as={MaterialCommunityIcons}
+                        name={icon}
+                        color={iconColor}
+                        mr={title ? iconSpacing : 0}
+                        size={resolvedIconSize}
+                    />
+                ) : null}
+
+                {title ? (
+                    <ButtonText
+                        color={textColor}
+                        size="md"
+                        fontWeight="$semibold"
+                        textTransform="none"
+                        {...textProps}
+                    >
+                        {title}
+                    </ButtonText>
+                ) : null}
+            </Button>
+        </Animated.View>
+    );
+}
 
 export function MGPopover(props) {
     const [visible, setVisible] = useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mg-library",
-    "version": "1.0.704",
+    "version": "1.0.706",
     "description": "",
     "main": "index.js",
     "react-native": "index.js",