@xetwa/design-system 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/BaseButton/BaseButton.stories.tsx

@@ -0,0 +1,74 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View, Text } from 'react-native';
+import { BaseButton } from './BaseButton';
+
+const meta = {
+  title: 'Components/Buttons/BaseButton',
+  component: BaseButton,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **BaseButton** é idêntico ao MainButton mas aceita ReactNode genérico como children. Ideal para ícones combinados com texto ou outros layouts costumizados.\n\n### Exemplo de Uso\n```tsx\n<BaseButton \n  variant="secondary"\n  size="lg"\n  onPress={() => console.log("Clicado!")}\n>\n  <View><Text>Continuar com Google</Text></View>\n</BaseButton>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'ghost'],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+    },
+    fullWidth: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 0, width: '100%', alignItems: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: <Text style={{ color: '#fff', fontWeight: 'bold' }}>Botão Base Primário</Text>,
+  },
+};
+
+export const SecondaryWithIcon: Story = {
+  args: {
+    variant: 'secondary',
+    children: (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 20 }}>🍎</Text>
+        <Text style={{ color: '#51332d', fontWeight: 'bold' }}>Continuar com Apple</Text>
+      </View>
+    ),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    variant: 'primary',
+    loading: true,
+    children: <Text>Oculto pelo loading</Text>,
+  },
+};

package/src/components/Buttons/BaseButton/BaseButton.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Pressable, ActivityIndicator, StyleSheet, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+/**
+ * BaseButton é um botão genérico que aplica o comportamento tátil 3D e cores do tema,
+ * permitindo passar conteúdo customizado (ReactNode) como children.
+ */
+export interface BaseButtonProps {
+  /** Conteúdo livre a exibir no botão (ícones, texto, etc) */
+  children: React.ReactNode;
+  /** Variante visual do botão. */
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  /** Tamanho do botão. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Se true, o botão ocupa a largura total disponível. */
+  fullWidth?: boolean;
+  /** Se true, desativa a interação e aplica estilos de inativo. */
+  disabled?: boolean;
+  /** Se true, exibe um spinner de carregamento em vez do conteúdo. */
+  loading?: boolean;
+  /** Callback para o evento de clique. */
+  onPress?: () => void;
+  /** Cor de fundo customizada (sobrepõe a cor da variante) */
+  bgColor?: string;
+  /** Cor da sombra customizada (sobrepõe a cor da variante) */
+  shadowColor?: string;
+  /** Cor de fundo no hover (opcional) */
+  hoverColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const BaseButton = React.forwardRef<React.ElementRef<typeof Pressable>, BaseButtonProps>(
+  (
+    {
+      style,
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      loading = false,
+      children,
+      disabled,
+      onPress,
+      bgColor,
+      shadowColor,
+      hoverColor,
+      ...props
+    },
+    ref
+  ) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { scale } = useResponsive();
+
+    const getBgColor = () => {
+      if (disabled) {
+        if (variant === 'primary' || variant === 'secondary') return '#efe2d6';
+        return 'transparent';
+      }
+      if (bgColor) return isHovered ? (hoverColor || bgColor) : bgColor;
+      if (variant === 'primary') return isHovered ? '#e8883e' : theme.colors.primary;
+      if (variant === 'secondary') return theme.colors.white;
+      return 'transparent'; // ghost
+    };
+
+    const getBorderStyles = (): ViewStyle => {
+      if (variant === 'secondary') {
+        const borderColor = disabled ? '#efe2d6' : isHovered ? '#f2974b' : theme.colors.brown[100];
+        return {
+          borderWidth: 2,
+          borderColor,
+        };
+      }
+      return { borderWidth: 0 };
+    };
+
+    const getShadowStyles = (): ViewStyle => {
+      if (disabled || variant === 'ghost') {
+        return {};
+      }
+
+      if (Platform.OS === 'web') {
+        const resolvedShadowColor = shadowColor || (variant === 'primary' ? theme.colors.primaryDark : theme.colors.brown[100]);
+        return {
+          boxShadow: `0px ${scale(4)}px 0px ${resolvedShadowColor}`
+        };
+      } else {
+        if (shadowColor) {
+          return {
+            shadowColor,
+            shadowOffset: { width: 0, height: scale(4) },
+            shadowOpacity: 1,
+            shadowRadius: 0,
+            elevation: 4,
+          };
+        }
+        return variant === 'primary' ? theme.shadows.btnPrimary : theme.shadows.btnSecondary;
+      }
+    };
+
+    const sizeStyles = {
+      sm: { height: scale(36), paddingHorizontal: scale(16), borderRadius: scale(11) },
+      md: { height: scale(50), paddingHorizontal: scale(22), borderRadius: scale(16) },
+      lg: { height: scale(58), paddingHorizontal: scale(32), borderRadius: scale(18) },
+    }[size];
+
+    const buttonStyles: ViewStyle[] = [
+      styles.base,
+      sizeStyles,
+      { backgroundColor: getBgColor() },
+      getBorderStyles(),
+      getShadowStyles(),
+      fullWidth ? { width: '100%' } : { alignSelf: 'flex-start' },
+      disabled && variant === 'ghost' ? { opacity: 0.4 } : {},
+      style as ViewStyle,
+    ];
+
+    const hoverProps = Platform.OS === 'web' ? {
+      onHoverIn: () => !disabled && setIsHovered(true),
+      onHoverOut: () => !disabled && setIsHovered(false),
+    } : {};
+
+    return (
+      <Pressable
+        ref={ref}
+        disabled={disabled || loading}
+        onPress={onPress}
+        style={({ pressed }) => {
+          const stateStyles: ViewStyle[] = [...buttonStyles];
+
+          if (disabled) {
+            // @ts-expect-error - web only style
+            if (Platform.OS === 'web') stateStyles.push({ cursor: 'not-allowed' });
+            return stateStyles;
+          }
+
+          if (pressed && !loading) {
+            if (variant === 'ghost') {
+              stateStyles.push({ opacity: 0.7 });
+            } else {
+              stateStyles.push({
+                transform: [{ translateY: scale(4) }],
+              });
+              if (Platform.OS === 'web') {
+                stateStyles.push({ boxShadow: 'none' });
+              } else {
+                stateStyles.push({
+                  shadowOpacity: 0,
+                  elevation: 0,
+                });
+              }
+            }
+          } else if (isHovered && variant === 'primary' && !loading) {
+            stateStyles.push({
+              transform: [{ translateY: scale(-1) }],
+            });
+          }
+
+          return stateStyles;
+        }}
+        {...hoverProps}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={variant === 'primary' ? '#ffffff' : theme.colors.brown[500]}
+          />
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+
+BaseButton.displayName = 'BaseButton';
+
+const styles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+});

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -18,6 +18,7 @@ export interface TextInputProps extends Omit<RNTextInputProps, 'style'> {
   style?: ViewStyle | ViewStyle[];
   inputStyle?: TextStyle | TextStyle[];
   containerStyle?: ViewStyle | ViewStyle[];
+  rightElement?: React.ReactNode;
 }
 
 export const TextInput = forwardRef<RNTextInput, TextInputProps>(
@@ -31,6 +32,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
       style,
       inputStyle,
       containerStyle,
+      rightElement,
       onFocus,
       onBlur,
       ...props
@@ -138,6 +140,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
             ]}
             {...props}
           />
+          {rightElement}
         </View>
 
         {messageText && (

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/Headers/CountryHeader/CountryHeader';
 export * from './components/Buttons/MainButton/MainButton';
+export * from './components/Buttons/BaseButton/BaseButton';
 export * from './components/Buttons/BackButton/BackButton';
 export * from './components/Buttons/FabButton/FabButton';
 export * from './components/Cards/ModuleCard/ModuleCard';