From ac7f874e17890224d17d418357884e44f161fbd9 Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:07:59 -0300
Subject: [PATCH 1/7] feat(molecules): add Button molecule

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Molecules/Button/Button.stories.tsx       | 116 ++++++++++++++++++
 .../stories/Molecules/Button/Button.styles.ts |   7 ++
 .../Button/__tests__/Button.test.tsx          |  70 +++++++++++
 .../Molecules/Button/hooks/index.ts           |   1 +
 .../Button/hooks/useButtonViewModel/index.ts  |  12 ++
 src/components/Molecules/Button/index.tsx     |  50 ++++++++
 .../Molecules/Button/library/buildSize.ts     |  42 +++++++
 .../Button/library/buildVariantColors.ts      |  24 ++++
 .../Molecules/Button/library/index.ts         |   2 +
 src/components/Molecules/Button/styles.ts     |  43 +++++++
 .../Molecules/Button/types/ButtonSize.ts      |   1 +
 .../Molecules/Button/types/ButtonVariant.ts   |   6 +
 .../Molecules/Button/types/IButtonProps.ts    |  16 +++
 .../Molecules/Button/types/index.ts           |   3 +
 src/components/Molecules/index.ts             |   1 +
 15 files changed, 394 insertions(+)
 create mode 100644 example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
 create mode 100644 example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
 create mode 100644 src/components/Molecules/Button/__tests__/Button.test.tsx
 create mode 100644 src/components/Molecules/Button/hooks/index.ts
 create mode 100644 src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
 create mode 100644 src/components/Molecules/Button/index.tsx
 create mode 100644 src/components/Molecules/Button/library/buildSize.ts
 create mode 100644 src/components/Molecules/Button/library/buildVariantColors.ts
 create mode 100644 src/components/Molecules/Button/library/index.ts
 create mode 100644 src/components/Molecules/Button/styles.ts
 create mode 100644 src/components/Molecules/Button/types/ButtonSize.ts
 create mode 100644 src/components/Molecules/Button/types/ButtonVariant.ts
 create mode 100644 src/components/Molecules/Button/types/IButtonProps.ts
 create mode 100644 src/components/Molecules/Button/types/index.ts

diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
new file mode 100644
index 0000000..dbcdc7d
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button } from 'rubber-duck-ui';
+import { styles } from './Button.styles';
+
+const meta = {
+  title: 'Molecules/Button',
+  component: Button,
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    isLoading: false,
+    fullWidth: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowLeft', 'Plus', 'Check', 'Trash2'],
+    },
+    rightIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowRight', 'Plus', 'Check', 'Trash2'],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} variant="primary" label="Primary" />
+      <Button {...args} variant="secondary" label="Secondary" />
+      <Button {...args} variant="outline" label="Outline" />
+      <Button {...args} variant="ghost" label="Ghost" />
+      <Button {...args} variant="destructive" label="Destructive" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} size="sm" label="Small" />
+      <Button {...args} size="md" label="Medium" />
+      <Button {...args} size="lg" label="Large" />
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} leftIcon="ArrowLeft" label="Back" />
+      <Button {...args} rightIcon="ArrowRight" label="Next" />
+      <Button {...args} leftIcon="Plus" rightIcon="ArrowRight" label="Add item" />
+    </View>
+  ),
+};
+
+export const FullWidth: Story = {
+  args: {
+    fullWidth: true,
+  },
+};
+
+const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Button
+      {...args}
+      isLoading={loading}
+      onPress={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveButton {...args} />,
+};
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
new file mode 100644
index 0000000..a5c0eca
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+});
diff --git a/src/components/Molecules/Button/__tests__/Button.test.tsx b/src/components/Molecules/Button/__tests__/Button.test.tsx
new file mode 100644
index 0000000..92ab995
--- /dev/null
+++ b/src/components/Molecules/Button/__tests__/Button.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Button } from '../index';
+
+jest.mock('lucide-react-native', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const mockIcon = (name: string) => (props: object) =>
+    React.createElement(View, { testID: `icon-${name}`, ...props });
+  return new Proxy({}, { get: (_t: object, name: string) => mockIcon(name) });
+});
+
+const baseProps = {
+  label: 'Press me',
+  onPress: jest.fn(),
+};
+
+describe('Button', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Label', () => {
+    it('renders the label', () => {
+      render(<Button {...baseProps} />);
+      expect(screen.getByText('Press me')).toBeTruthy();
+    });
+  });
+
+  describe('Press behavior', () => {
+    it('calls onPress when pressed', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onPress when disabled', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} disabled />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('does not call onPress when isLoading', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} isLoading testID="btn" />);
+      fireEvent.press(screen.getByTestId('btn'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading state', () => {
+    it('hides the label when isLoading is true', () => {
+      render(<Button {...baseProps} isLoading />);
+      expect(screen.queryByText('Press me')).toBeNull();
+    });
+  });
+
+  describe('Icons', () => {
+    it('renders the leftIcon when provided', () => {
+      render(<Button {...baseProps} leftIcon="ArrowLeft" />);
+      expect(screen.getByTestId('icon-ArrowLeft')).toBeTruthy();
+    });
+
+    it('renders the rightIcon when provided', () => {
+      render(<Button {...baseProps} rightIcon="ArrowRight" />);
+      expect(screen.getByTestId('icon-ArrowRight')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/components/Molecules/Button/hooks/index.ts b/src/components/Molecules/Button/hooks/index.ts
new file mode 100644
index 0000000..872add6
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useButtonViewModel';
diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
new file mode 100644
index 0000000..6c601cb
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
@@ -0,0 +1,12 @@
+import type { IButtonProps } from '../../types';
+
+export const useButtonViewModel = (props: IButtonProps) => {
+  const { onPress, disabled, isLoading } = props;
+
+  function handlePress() {
+    if (disabled || isLoading) return;
+    onPress();
+  }
+
+  return { handlePress };
+};
diff --git a/src/components/Molecules/Button/index.tsx b/src/components/Molecules/Button/index.tsx
new file mode 100644
index 0000000..c5d3fa2
--- /dev/null
+++ b/src/components/Molecules/Button/index.tsx
@@ -0,0 +1,50 @@
+import type { IButtonProps } from './types';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useStyles } from './styles';
+import { useButtonViewModel } from './hooks';
+import { Text } from '../../Atoms/Text';
+import { Icon } from '../../Atoms/Icon';
+import { Loading } from '../../Atoms/Loading';
+
+export const Button: React.FC<IButtonProps> = (props) => {
+  const {
+    label,
+    leftIcon,
+    rightIcon,
+    isLoading,
+    disabled,
+    testID,
+  } = props;
+
+  const { styles, sizes, variantColors } = useStyles(props);
+  const { handlePress } = useButtonViewModel(props);
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      activeOpacity={0.7}
+      disabled={disabled || isLoading}
+      onPress={handlePress}
+      style={styles.button}>
+      {isLoading
+        ?
+        <Loading size={sizes.loadingSize} color={variantColors.iconColor} />
+        :
+        <View style={styles.content}>
+          {leftIcon
+            ?
+            <Icon icon={leftIcon} size={sizes.iconSize} color={variantColors.iconColor} />
+            : null
+          }
+          <Text size={sizes.fontSize} weight="semibold" color={variantColors.text}>{label}</Text>
+          {rightIcon
+            ?
+            <Icon icon={rightIcon} size={sizes.iconSize} color={variantColors.iconColor} />
+            : null
+          }
+        </View>
+      }
+    </TouchableOpacity>
+  );
+};
diff --git a/src/components/Molecules/Button/library/buildSize.ts b/src/components/Molecules/Button/library/buildSize.ts
new file mode 100644
index 0000000..3dcbf6d
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildSize.ts
@@ -0,0 +1,42 @@
+import type { IconSize } from '../../../Atoms/Icon/types';
+import type { LoadingSize } from '../../../Atoms/Loading/types';
+import type { FONT_SIZES } from '../../../../tokens/typography';
+import type { ButtonSize } from '../types';
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export type ButtonSizeConfig = {
+  height: number;
+  paddingHorizontal: number;
+  fontSize: keyof typeof FONT_SIZES;
+  iconSize: IconSize;
+  loadingSize: LoadingSize;
+};
+
+export const buildSize = (size: ButtonSize): ButtonSizeConfig => {
+  switch (size) {
+    case 'sm':
+      return {
+        height: 36,
+        paddingHorizontal: Tokens.spacer({ key: 'sm' }),
+        fontSize: 'sm',
+        iconSize: 'small_16',
+        loadingSize: 'tiny_48',
+      };
+    case 'md':
+      return {
+        height: 44,
+        paddingHorizontal: Tokens.spacer({ key: 'md' }),
+        fontSize: 'md',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+    case 'lg':
+      return {
+        height: 52,
+        paddingHorizontal: Tokens.spacer({ key: 'lg' }),
+        fontSize: 'lg',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+  }
+};
diff --git a/src/components/Molecules/Button/library/buildVariantColors.ts b/src/components/Molecules/Button/library/buildVariantColors.ts
new file mode 100644
index 0000000..ee80e88
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildVariantColors.ts
@@ -0,0 +1,24 @@
+import type { IColors } from '../../../../tokens/colors';
+import type { ButtonVariant } from '../types';
+
+export type ButtonVariantColors = {
+  background: string;
+  border: string;
+  text: keyof IColors;
+  iconColor: keyof IColors;
+};
+
+export const buildVariantColors = (variant: ButtonVariant, colors: IColors): ButtonVariantColors => {
+  switch (variant) {
+    case 'primary':
+      return { background: colors.accent, border: colors.accent, text: 'black', iconColor: 'black' };
+    case 'secondary':
+      return { background: colors.surface, border: colors.borderDefault, text: 'textPrimary', iconColor: 'textPrimary' };
+    case 'outline':
+      return { background: 'transparent', border: colors.borderDefault, text: 'textPrimary', iconColor: 'textPrimary' };
+    case 'ghost':
+      return { background: 'transparent', border: 'transparent', text: 'textPrimary', iconColor: 'textPrimary' };
+    case 'destructive':
+      return { background: colors.error, border: colors.error, text: 'textInverse', iconColor: 'textInverse' };
+  }
+};
diff --git a/src/components/Molecules/Button/library/index.ts b/src/components/Molecules/Button/library/index.ts
new file mode 100644
index 0000000..203a95b
--- /dev/null
+++ b/src/components/Molecules/Button/library/index.ts
@@ -0,0 +1,2 @@
+export * from './buildSize';
+export * from './buildVariantColors';
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
new file mode 100644
index 0000000..ccaec87
--- /dev/null
+++ b/src/components/Molecules/Button/styles.ts
@@ -0,0 +1,43 @@
+import type { IButtonProps } from './types';
+import { StyleSheet } from 'react-native';
+import { useRubberDuckStore } from '../../../store';
+import { Tokens } from '../../../tokens/Tokens.class';
+import { buildSize, buildVariantColors } from './library';
+
+export const useStyles = (props: IButtonProps) => {
+  const {
+    variant = 'primary',
+    size = 'md',
+    disabled,
+    fullWidth,
+  } = props;
+
+  const colors = useRubberDuckStore((s) => s.colors);
+  const sizes = buildSize(size);
+  const variantColors = buildVariantColors(variant, colors);
+
+  return {
+    styles: StyleSheet.create({
+      button: {
+        height: sizes.height,
+        paddingHorizontal: sizes.paddingHorizontal,
+        borderRadius: Tokens.radii({ key: 'md' }),
+        backgroundColor: variantColors.background,
+        borderWidth: variant === 'outline' ? 1 : 0,
+        borderColor: variantColors.border,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: disabled ? 0.5 : 1,
+        alignSelf: fullWidth ? 'stretch' : 'flex-start',
+      },
+      content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: Tokens.spacer({ key: 'xs' }),
+      },
+    }),
+    sizes,
+    variantColors,
+  };
+};
diff --git a/src/components/Molecules/Button/types/ButtonSize.ts b/src/components/Molecules/Button/types/ButtonSize.ts
new file mode 100644
index 0000000..a052696
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonSize.ts
@@ -0,0 +1 @@
+export type ButtonSize = 'sm' | 'md' | 'lg';
diff --git a/src/components/Molecules/Button/types/ButtonVariant.ts b/src/components/Molecules/Button/types/ButtonVariant.ts
new file mode 100644
index 0000000..b1dc08c
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonVariant.ts
@@ -0,0 +1,6 @@
+export type ButtonVariant = 
+  | 'primary' 
+  | 'secondary' 
+  | 'outline' 
+  | 'ghost' 
+  | 'destructive';
diff --git a/src/components/Molecules/Button/types/IButtonProps.ts b/src/components/Molecules/Button/types/IButtonProps.ts
new file mode 100644
index 0000000..acea29e
--- /dev/null
+++ b/src/components/Molecules/Button/types/IButtonProps.ts
@@ -0,0 +1,16 @@
+import type { IconName } from '../../../Atoms/Icon/types';
+import type { ButtonVariant } from './ButtonVariant';
+import type { ButtonSize } from './ButtonSize';
+
+export interface IButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  isLoading?: boolean;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  fullWidth?: boolean;
+  testID?: string;
+}
diff --git a/src/components/Molecules/Button/types/index.ts b/src/components/Molecules/Button/types/index.ts
new file mode 100644
index 0000000..1b72ae9
--- /dev/null
+++ b/src/components/Molecules/Button/types/index.ts
@@ -0,0 +1,3 @@
+export * from './ButtonSize';
+export * from './ButtonVariant';
+export * from './IButtonProps';
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts
index 68528a4..5e5613a 100644
--- a/src/components/Molecules/index.ts
+++ b/src/components/Molecules/index.ts
@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CheckBox';
 export * from './RadioButton';
 export * from './Avatar';

From a515609447f42c5f11d956f294769988d9a50afe Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:08:46 -0300
Subject: [PATCH 2/7] refactor(molecules): move builds to Button ViewModel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Button/hooks/useButtonViewModel/index.ts  | 16 ++++-
 src/components/Molecules/Button/index.tsx     |  4 +-
 src/components/Molecules/Button/styles.ts     | 64 ++++++++-----------
 3 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
index 6c601cb..0b539ac 100644
--- a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
@@ -1,12 +1,24 @@
 import type { IButtonProps } from '../../types';
+import { useRubberDuckStore } from '../../../../../store';
+import { buildSize, buildVariantColors } from '../../library';
 
 export const useButtonViewModel = (props: IButtonProps) => {
-  const { onPress, disabled, isLoading } = props;
+  const {
+    onPress,
+    disabled,
+    isLoading,
+    variant = 'primary',
+    size = 'md',
+  } = props;
+
+  const colors = useRubberDuckStore((s) => s.colors);
+  const sizes = buildSize(size);
+  const variantColors = buildVariantColors(variant, colors);
 
   function handlePress() {
     if (disabled || isLoading) return;
     onPress();
   }
 
-  return { handlePress };
+  return { handlePress, sizes, variantColors };
 };
diff --git a/src/components/Molecules/Button/index.tsx b/src/components/Molecules/Button/index.tsx
index c5d3fa2..a5af995 100644
--- a/src/components/Molecules/Button/index.tsx
+++ b/src/components/Molecules/Button/index.tsx
@@ -17,8 +17,8 @@ export const Button: React.FC<IButtonProps> = (props) => {
     testID,
   } = props;
 
-  const { styles, sizes, variantColors } = useStyles(props);
-  const { handlePress } = useButtonViewModel(props);
+  const { handlePress, sizes, variantColors } = useButtonViewModel(props);
+  const styles = useStyles(props, sizes, variantColors);
 
   return (
     <TouchableOpacity
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
index ccaec87..fe3af25 100644
--- a/src/components/Molecules/Button/styles.ts
+++ b/src/components/Molecules/Button/styles.ts
@@ -1,43 +1,33 @@
 import type { IButtonProps } from './types';
+import type { ButtonSizeConfig, ButtonVariantColors } from './library';
 import { StyleSheet } from 'react-native';
-import { useRubberDuckStore } from '../../../store';
 import { Tokens } from '../../../tokens/Tokens.class';
-import { buildSize, buildVariantColors } from './library';
 
-export const useStyles = (props: IButtonProps) => {
-  const {
-    variant = 'primary',
-    size = 'md',
-    disabled,
-    fullWidth,
-  } = props;
+export const useStyles = (
+  props: IButtonProps,
+  sizes: ButtonSizeConfig,
+  variantColors: ButtonVariantColors,
+) => {
+  const { variant = 'primary', disabled, fullWidth } = props;
 
-  const colors = useRubberDuckStore((s) => s.colors);
-  const sizes = buildSize(size);
-  const variantColors = buildVariantColors(variant, colors);
-
-  return {
-    styles: StyleSheet.create({
-      button: {
-        height: sizes.height,
-        paddingHorizontal: sizes.paddingHorizontal,
-        borderRadius: Tokens.radii({ key: 'md' }),
-        backgroundColor: variantColors.background,
-        borderWidth: variant === 'outline' ? 1 : 0,
-        borderColor: variantColors.border,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        opacity: disabled ? 0.5 : 1,
-        alignSelf: fullWidth ? 'stretch' : 'flex-start',
-      },
-      content: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: Tokens.spacer({ key: 'xs' }),
-      },
-    }),
-    sizes,
-    variantColors,
-  };
+  return StyleSheet.create({
+    button: {
+      height: sizes.height,
+      paddingHorizontal: sizes.paddingHorizontal,
+      borderRadius: Tokens.radii({ key: 'md' }),
+      backgroundColor: variantColors.background,
+      borderWidth: variant === 'outline' ? 1 : 0,
+      borderColor: variantColors.border,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1,
+      alignSelf: fullWidth ? 'stretch' : 'flex-start',
+    },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Tokens.spacer({ key: 'xs' }),
+    },
+  });
 };

From da4341f5e8758ad75fbd251650f9662263300f07 Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:15:41 -0300
Subject: [PATCH 3/7] style(molecules): polish Button formatting and naming

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Button/hooks/useButtonViewModel/index.ts  |  8 +++-
 src/components/Molecules/Button/index.tsx     | 32 +++++++++++----
 .../Molecules/Button/library/buildSize.ts     |  3 ++
 .../Button/library/buildVariantColors.ts      | 40 ++++++++++++++++---
 src/components/Molecules/Button/styles.ts     |  1 +
 5 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
index 0b539ac..793e8d3 100644
--- a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
@@ -15,10 +15,14 @@ export const useButtonViewModel = (props: IButtonProps) => {
   const sizes = buildSize(size);
   const variantColors = buildVariantColors(variant, colors);
 
-  function handlePress() {
+  function onPressButton() {
     if (disabled || isLoading) return;
     onPress();
   }
 
-  return { handlePress, sizes, variantColors };
+  return { 
+    onPressButton, 
+    sizes, 
+    variantColors,
+  };
 };
diff --git a/src/components/Molecules/Button/index.tsx b/src/components/Molecules/Button/index.tsx
index a5af995..0dd861c 100644
--- a/src/components/Molecules/Button/index.tsx
+++ b/src/components/Molecules/Button/index.tsx
@@ -17,30 +17,48 @@ export const Button: React.FC<IButtonProps> = (props) => {
     testID,
   } = props;
 
-  const { handlePress, sizes, variantColors } = useButtonViewModel(props);
+  const { onPressButton, sizes, variantColors } = useButtonViewModel(props);
   const styles = useStyles(props, sizes, variantColors);
 
   return (
     <TouchableOpacity
       testID={testID}
-      activeOpacity={0.7}
+      activeOpacity={disabled ? 1 : 0.7}
       disabled={disabled || isLoading}
-      onPress={handlePress}
+      onPress={onPressButton}
       style={styles.button}>
       {isLoading
         ?
-        <Loading size={sizes.loadingSize} color={variantColors.iconColor} />
+        <Loading 
+          size={sizes.loadingSize} 
+          color={variantColors.iconColor} 
+        />
         :
         <View style={styles.content}>
           {leftIcon
             ?
-            <Icon icon={leftIcon} size={sizes.iconSize} color={variantColors.iconColor} />
+            <Icon
+              icon={leftIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
             : null
           }
-          <Text size={sizes.fontSize} weight="semibold" color={variantColors.text}>{label}</Text>
+
+          <Text
+            size={sizes.fontSize}
+            weight="semibold"
+            color={variantColors.text}>
+            {label}
+          </Text>
+
           {rightIcon
             ?
-            <Icon icon={rightIcon} size={sizes.iconSize} color={variantColors.iconColor} />
+            <Icon
+              icon={rightIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
             : null
           }
         </View>
diff --git a/src/components/Molecules/Button/library/buildSize.ts b/src/components/Molecules/Button/library/buildSize.ts
index 3dcbf6d..8eeb347 100644
--- a/src/components/Molecules/Button/library/buildSize.ts
+++ b/src/components/Molecules/Button/library/buildSize.ts
@@ -22,6 +22,7 @@ export const buildSize = (size: ButtonSize): ButtonSizeConfig => {
         iconSize: 'small_16',
         loadingSize: 'tiny_48',
       };
+
     case 'md':
       return {
         height: 44,
@@ -30,7 +31,9 @@ export const buildSize = (size: ButtonSize): ButtonSizeConfig => {
         iconSize: 'tiny_20',
         loadingSize: 'small_64',
       };
+
     case 'lg':
+    default:
       return {
         height: 52,
         paddingHorizontal: Tokens.spacer({ key: 'lg' }),
diff --git a/src/components/Molecules/Button/library/buildVariantColors.ts b/src/components/Molecules/Button/library/buildVariantColors.ts
index ee80e88..a283b41 100644
--- a/src/components/Molecules/Button/library/buildVariantColors.ts
+++ b/src/components/Molecules/Button/library/buildVariantColors.ts
@@ -11,14 +11,44 @@ export type ButtonVariantColors = {
 export const buildVariantColors = (variant: ButtonVariant, colors: IColors): ButtonVariantColors => {
   switch (variant) {
     case 'primary':
-      return { background: colors.accent, border: colors.accent, text: 'black', iconColor: 'black' };
+      return {
+        background: colors.accent,
+        border: colors.accent,
+        text: 'black',
+        iconColor: 'black',
+      };
+
     case 'secondary':
-      return { background: colors.surface, border: colors.borderDefault, text: 'textPrimary', iconColor: 'textPrimary' };
+      return {
+        background: colors.surface,
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
     case 'outline':
-      return { background: 'transparent', border: colors.borderDefault, text: 'textPrimary', iconColor: 'textPrimary' };
+      return {
+        background: 'transparent',
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
     case 'ghost':
-      return { background: 'transparent', border: 'transparent', text: 'textPrimary', iconColor: 'textPrimary' };
+      return {
+        background: 'transparent',
+        border: 'transparent',
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
     case 'destructive':
-      return { background: colors.error, border: colors.error, text: 'textInverse', iconColor: 'textInverse' };
+    default:
+      return {
+        background: colors.error,
+        border: colors.error,
+        text: 'textInverse',
+        iconColor: 'textInverse',
+      };
   }
 };
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
index fe3af25..641a6ba 100644
--- a/src/components/Molecules/Button/styles.ts
+++ b/src/components/Molecules/Button/styles.ts
@@ -24,6 +24,7 @@ export const useStyles = (
       opacity: disabled ? 0.5 : 1,
       alignSelf: fullWidth ? 'stretch' : 'flex-start',
     },
+    
     content: {
       flexDirection: 'row',
       alignItems: 'center',

From b93aa044ee44e1b0043ab0403bac0ac010e0e172 Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:18:03 -0300
Subject: [PATCH 4/7] refactor(molecules): remove fullWidth prop from Button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../stories/Molecules/Button/Button.stories.tsx           | 8 --------
 src/components/Molecules/Button/styles.ts                 | 3 +--
 src/components/Molecules/Button/types/IButtonProps.ts     | 1 -
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
index dbcdc7d..764c7ab 100644
--- a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -13,7 +13,6 @@ const meta = {
     size: 'md',
     disabled: false,
     isLoading: false,
-    fullWidth: false,
     onPress: () => {},
   },
   argTypes: {
@@ -28,7 +27,6 @@ const meta = {
     },
     disabled: { control: 'boolean' },
     isLoading: { control: 'boolean' },
-    fullWidth: { control: 'boolean' },
     leftIcon: {
       control: 'select',
       options: [undefined, 'ArrowLeft', 'Plus', 'Check', 'Trash2'],
@@ -90,12 +88,6 @@ export const WithIcons: Story = {
   ),
 };
 
-export const FullWidth: Story = {
-  args: {
-    fullWidth: true,
-  },
-};
-
 const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
   const [loading, setLoading] = useState(false);
 
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
index 641a6ba..08527eb 100644
--- a/src/components/Molecules/Button/styles.ts
+++ b/src/components/Molecules/Button/styles.ts
@@ -8,7 +8,7 @@ export const useStyles = (
   sizes: ButtonSizeConfig,
   variantColors: ButtonVariantColors,
 ) => {
-  const { variant = 'primary', disabled, fullWidth } = props;
+  const { variant = 'primary', disabled } = props;
 
   return StyleSheet.create({
     button: {
@@ -22,7 +22,6 @@ export const useStyles = (
       alignItems: 'center',
       justifyContent: 'center',
       opacity: disabled ? 0.5 : 1,
-      alignSelf: fullWidth ? 'stretch' : 'flex-start',
     },
     
     content: {
diff --git a/src/components/Molecules/Button/types/IButtonProps.ts b/src/components/Molecules/Button/types/IButtonProps.ts
index acea29e..fa21d1e 100644
--- a/src/components/Molecules/Button/types/IButtonProps.ts
+++ b/src/components/Molecules/Button/types/IButtonProps.ts
@@ -11,6 +11,5 @@ export interface IButtonProps {
   isLoading?: boolean;
   leftIcon?: IconName;
   rightIcon?: IconName;
-  fullWidth?: boolean;
   testID?: string;
 }

From 3261628f3680ee81d2985e9f20ca86d1354326dc Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:24:10 -0300
Subject: [PATCH 5/7] style(molecules): set Button alignSelf flex-start by
 default

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/Molecules/Button/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
index 08527eb..b0f4499 100644
--- a/src/components/Molecules/Button/styles.ts
+++ b/src/components/Molecules/Button/styles.ts
@@ -22,6 +22,7 @@ export const useStyles = (
       alignItems: 'center',
       justifyContent: 'center',
       opacity: disabled ? 0.5 : 1,
+      alignSelf: 'flex-start',
     },
     
     content: {

From 21751e398ecc8d1a37e81d031b0d5011e93ba027 Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:25:17 -0300
Subject: [PATCH 6/7] docs(storybook): add Button FullWidth story

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../stories/Molecules/Button/Button.stories.tsx           | 8 ++++++++
 .../stories/Molecules/Button/Button.styles.ts             | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
index 764c7ab..6a10acd 100644
--- a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -88,6 +88,14 @@ export const WithIcons: Story = {
   ),
 };
 
+export const FullWidth: Story = {
+  render: (args) => (
+    <View style={styles.fullWidth}>
+      <Button {...args} />
+    </View>
+  ),
+};
+
 const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
   const [loading, setLoading] = useState(false);
 
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
index a5c0eca..a7a42c6 100644
--- a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
@@ -4,4 +4,7 @@ export const styles = StyleSheet.create({
   container: {
     gap: 16,
   },
+  fullWidth: {
+    alignSelf: 'stretch',
+  },
 });

From ae489dc958a23b7689a0dea9a0316051c11831bb Mon Sep 17 00:00:00 2001
From: eumaninho54 <angelo.omarzinho@outlook.com>
Date: Sun, 3 May 2026 04:33:36 -0300
Subject: [PATCH 7/7] docs(storybook): add Button Inline story and fix default
 width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../.rnstorybook/stories/Molecules/Button/Button.stories.tsx | 4 ++--
 .../.rnstorybook/stories/Molecules/Button/Button.styles.ts   | 5 +++--
 src/components/Molecules/Button/styles.ts                    | 1 -
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
index 6a10acd..838095c 100644
--- a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -88,9 +88,9 @@ export const WithIcons: Story = {
   ),
 };
 
-export const FullWidth: Story = {
+export const Inline: Story = {
   render: (args) => (
-    <View style={styles.fullWidth}>
+    <View style={styles.inline}>
       <Button {...args} />
     </View>
   ),
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
index a7a42c6..48d498c 100644
--- a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
@@ -4,7 +4,8 @@ export const styles = StyleSheet.create({
   container: {
     gap: 16,
   },
-  fullWidth: {
-    alignSelf: 'stretch',
+  
+  inline: {
+    alignSelf: 'flex-start',
   },
 });
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
index b0f4499..08527eb 100644
--- a/src/components/Molecules/Button/styles.ts
+++ b/src/components/Molecules/Button/styles.ts
@@ -22,7 +22,6 @@ export const useStyles = (
       alignItems: 'center',
       justifyContent: 'center',
       opacity: disabled ? 0.5 : 1,
-      alignSelf: 'flex-start',
     },
     
     content: {