react-native-yastools 1.0.1

package/README.md

@@ -0,0 +1,173 @@
+# Yastools React Native Utils
+
+[![CI](https://github.com/YassineBenZriouil/react-native-yastools/actions/workflows/ci.yml/badge.svg)](https://github.com/YassineBenZriouil/react-native-yastools/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/react-native-yastools.svg)](https://www.npmjs.com/package/react-native-yastools)
+
+A collection of reusable React Native utility components.
+
+## Installation
+
+```bash
+npm install react-native-yastools
+# or
+yarn add react-native-yastools
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies to be installed in your project:
+
+- `react` >= 17.0.0
+- `react-native` >= 0.64.0
+
+## Components
+
+### YasButton
+
+A customizable button component with built-in loading state, debounce functionality, and theming support.
+
+#### Basic Usage
+
+```tsx
+import { YasButton } from 'react-native-yastools';
+
+const MyComponent = () => {
+  return (
+    <YasButton
+      text="Click Me"
+      onPress={() => console.log('Button pressed!')}
+    />
+  );
+};
+```
+
+#### With Loading State
+
+```tsx
+import { YasButton } from 'react-native-yastools';
+
+const MyComponent = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handlePress = async () => {
+    setLoading(true);
+    await someAsyncOperation();
+    setLoading(false);
+  };
+
+  return (
+    <YasButton
+      text="Submit"
+      onPress={handlePress}
+      fetching={loading}
+      loaderColor="#FFFFFF"
+    />
+  );
+};
+```
+
+#### With Custom Styling
+
+```tsx
+import { YasButton } from 'react-native-yastools';
+
+const MyComponent = () => {
+  return (
+    <YasButton
+      text="Custom Button"
+      onPress={() => {}}
+      primaryColor="#FF6B6B"
+      disabledColor="#CCCCCC"
+      additionalStyle={{
+        width: 200,
+        height: 60,
+        borderRadius: 30,
+      }}
+      textStyle={{
+        fontSize: 18,
+        fontWeight: 'bold',
+      }}
+    />
+  );
+};
+```
+
+#### With Icon
+
+```tsx
+import { YasButton } from 'react-native-yastools';
+
+const MyComponent = () => {
+  return (
+    <YasButton
+      text="Settings"
+      icon={require('./assets/settings-icon.png')}
+      onPress={() => navigation.navigate('Settings')}
+    />
+  );
+};
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onPress` | `() => void` | **Required** | Callback function when button is pressed |
+| `text` | `string` | `undefined` | Text to display on the button |
+| `icon` | `ImageSourcePropType` | `undefined` | Icon to display on the button |
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `fetching` | `boolean` | `false` | Whether to show loading indicator |
+| `additionalStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the button container |
+| `textStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the button text |
+| `iconStyle` | `StyleProp<ImageStyle>` | `undefined` | Custom styles for the icon |
+| `loaderColor` | `string` | Theme primary | Color of the loading indicator |
+| `primaryColor` | `string` | `#007AFF` | Custom primary/background color |
+| `disabledColor` | `string` | `#E5E5E5` | Custom disabled background color |
+| `debounceTime` | `number` | `1000` | Debounce time in ms to prevent multiple clicks |
+| `activeOpacity` | `number` | `0.8` | Opacity when pressing the button |
+| `testID` | `string` | `undefined` | Test ID for testing purposes |
+
+## Theme Customization
+
+You can import the default theme values to use in your own components:
+
+```tsx
+import { COLORS, FONT_SIZES, FONT_FAMILY } from 'react-native-yastools';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.primary,
+  },
+  text: {
+    fontSize: FONT_SIZES.f16,
+  },
+});
+```
+
+## Development
+
+### Running Tests
+
+```bash
+npm test
+
+# Watch mode
+npm run test:watch
+
+# Coverage report
+npm run test:coverage
+```
+
+### Building
+
+```bash
+npm run build
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+ISC

package/dist/components/Button/__tests__/YasButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/__tests__/YasButton.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import YasButton from '../index';
+describe('YasButton', () => {
+    it('renders correctly with text', () => {
+        const { getByText } = render(<YasButton text="Press Me" onPress={() => { }}/>);
+        expect(getByText('Press Me')).toBeTruthy();
+    });
+    it('calls onPress when pressed', () => {
+        const onPressMock = jest.fn();
+        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock}/>);
+        fireEvent.press(getByText('Press Me'));
+        expect(onPressMock).toHaveBeenCalledTimes(1);
+    });
+    it('does not call onPress when disabled', () => {
+        const onPressMock = jest.fn();
+        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock} disabled/>);
+        fireEvent.press(getByText('Press Me'));
+        expect(onPressMock).not.toHaveBeenCalled();
+    });
+    it('shows loading indicator when fetching', () => {
+        const { queryByText, getByTestId } = render(<YasButton text="Press Me" onPress={() => { }} fetching testID="button"/>);
+        expect(queryByText('Press Me')).toBeNull();
+    });
+    it('debounces multiple rapid presses', () => {
+        jest.useFakeTimers();
+        const onPressMock = jest.fn();
+        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock} debounceTime={1000}/>);
+        const button = getByText('Press Me');
+        fireEvent.press(button);
+        fireEvent.press(button);
+        fireEvent.press(button);
+        expect(onPressMock).toHaveBeenCalledTimes(1);
+        jest.advanceTimersByTime(1000);
+        fireEvent.press(button);
+        expect(onPressMock).toHaveBeenCalledTimes(2);
+        jest.useRealTimers();
+    });
+    it('applies custom primary color', () => {
+        const { getByTestId } = render(<YasButton text="Press Me" onPress={() => { }} primaryColor="#FF0000" testID="custom-button"/>);
+        const button = getByTestId('custom-button');
+        const flattenedStyle = Array.isArray(button.props.style)
+            ? button.props.style.flat().reduce((acc, style) => ({ ...acc, ...style }), {})
+            : button.props.style;
+        expect(flattenedStyle.backgroundColor).toBe('#FF0000');
+    });
+    it('renders without text when only icon is provided', () => {
+        const mockIcon = { uri: 'https://example.com/icon.png' };
+        const { queryByText } = render(<YasButton onPress={() => { }} icon={mockIcon}/>);
+        expect(queryByText('Press Me')).toBeNull();
+    });
+});

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { YasButtonProps } from './type';
+export type { YasButtonProps };
+declare const _default: React.NamedExoticComponent<YasButtonProps>;
+export default _default;

package/dist/components/Button/index.js

@@ -0,0 +1,50 @@
+import React, { memo, useRef } from 'react';
+import { TouchableOpacity, Text, ActivityIndicator, View, Image, } from 'react-native';
+// Internal styles and theme
+import styles from './styles';
+import COLORS from '../../theme';
+/**
+ * YasButton - A customizable button component for React Native
+ *
+ * @example
+ * ```tsx
+ * import { YasButton } from 'react-native-yastools';
+ *
+ * <YasButton
+ *   text="Click Me"
+ *   onPress={() => console.log('Pressed!')}
+ *   primaryColor="#FF6B6B"
+ * />
+ * ```
+ */
+const YasButton = ({ onPress, additionalStyle, additonalStyle, // Support legacy prop name
+disabled, fetching, text, textStyle, icon, iconStyle, loaderColor, primaryColor, disabledColor, debounceTime = 1000, activeOpacity = 0.8, testID, }) => {
+    const lastPressTime = useRef(0);
+    const handlePress = () => {
+        // Prevent multiple clicks with configurable debounce
+        const now = Date.now();
+        if (now - lastPressTime.current < debounceTime) {
+            return;
+        }
+        lastPressTime.current = now;
+        onPress();
+    };
+    // Determine container style based on state
+    const containerStyle = [
+        disabled ? styles.disabled : styles.container,
+        // Apply custom colors if provided
+        !disabled && primaryColor && { backgroundColor: primaryColor },
+        disabled && disabledColor && { backgroundColor: disabledColor },
+        // Support both prop names for backwards compatibility
+        additionalStyle || additonalStyle,
+    ];
+    return (<TouchableOpacity onPress={handlePress} activeOpacity={activeOpacity} disabled={disabled || fetching}>
+      <View style={containerStyle} testID={testID}>
+        {fetching ? (<ActivityIndicator size="small" color={loaderColor || primaryColor || COLORS.primary}/>) : (<>
+            {text && <Text style={[styles.text, textStyle]}>{text}</Text>}
+            {icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}
+          </>)}
+      </View>
+    </TouchableOpacity>);
+};
+export default memo(YasButton);

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

@@ -0,0 +1,36 @@
+/**
+ * Default styles for the YasButton component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+declare const _default: {
+    container: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+        backgroundColor: string;
+        flexDirection: "row";
+        gap: number;
+    };
+    disabled: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+        backgroundColor: string;
+        flexDirection: "row";
+        gap: number;
+    };
+    text: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+    };
+    icon: {
+        width: number;
+        height: number;
+    };
+};
+export default _default;

package/dist/components/Button/styles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import COLORS, { FONT_SIZES } from '../../theme';
+/**
+ * Default styles for the YasButton component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+export default StyleSheet.create({
+    container: {
+        width: 176,
+        height: 53,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 8,
+        backgroundColor: COLORS.primary,
+        flexDirection: 'row',
+        gap: 20,
+    },
+    disabled: {
+        width: 176,
+        height: 53,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 8,
+        backgroundColor: COLORS.grayBg,
+        flexDirection: 'row',
+        gap: 20,
+    },
+    text: {
+        fontSize: FONT_SIZES.f16,
+        color: COLORS.white,
+        fontWeight: '600',
+    },
+    icon: {
+        width: 24,
+        height: 26,
+    },
+});

package/dist/components/Button/type.d.ts

@@ -0,0 +1,33 @@
+import { StyleProp, ViewStyle, TextStyle, ImageSourcePropType, ImageStyle } from "react-native";
+export interface YasButtonProps {
+    /** Callback function when button is pressed */
+    onPress: () => void;
+    /** Additional styles to apply to the button container */
+    additionalStyle?: StyleProp<ViewStyle>;
+    /** @deprecated Use additionalStyle instead */
+    additonalStyle?: StyleProp<ViewStyle>;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether to show loading indicator */
+    fetching?: boolean;
+    /** Text to display on the button */
+    text?: string;
+    /** Icon to display on the button */
+    icon?: ImageSourcePropType;
+    /** Custom styles for the button text */
+    textStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the icon */
+    iconStyle?: StyleProp<ImageStyle>;
+    /** Color of the loading indicator (defaults to theme primary color) */
+    loaderColor?: string;
+    /** Custom primary color to override theme */
+    primaryColor?: string;
+    /** Custom disabled background color to override theme */
+    disabledColor?: string;
+    /** Debounce time in milliseconds to prevent multiple clicks (default: 1000) */
+    debounceTime?: number;
+    /** Active opacity when pressing the button (default: 0.8) */
+    activeOpacity?: number;
+    /** Test ID for testing purposes */
+    testID?: string;
+}

package/dist/components/Button/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as YasButton } from './components/Button';
+export type { YasButtonProps } from './components/Button';
+export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
+export { default } from './components/Button';

package/dist/index.js

@@ -0,0 +1,6 @@
+// Components
+export { default as YasButton } from './components/Button';
+// Theme utilities (for customization)
+export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
+// Re-export Button as default for convenience
+export { default } from './components/Button';

package/dist/theme/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Default theme configuration for YasButton
+ * Users can override these values by passing custom props
+ */
+export declare const COLORS: {
+    primary: string;
+    white: string;
+    grayBg: string;
+    gray: string;
+};
+export declare const FONT_FAMILY: {
+    InterSemiBold: string;
+    InterRegular: string;
+    InterBold: string;
+};
+export declare const FONT_SIZES: {
+    f12: number;
+    f14: number;
+    f16: number;
+    f18: number;
+    f20: number;
+    f24: number;
+};
+export default COLORS;

package/dist/theme/index.js

@@ -0,0 +1,24 @@
+/**
+ * Default theme configuration for YasButton
+ * Users can override these values by passing custom props
+ */
+export const COLORS = {
+    primary: '#007AFF',
+    white: '#FFFFFF',
+    grayBg: '#E5E5E5',
+    gray: '#666666',
+};
+export const FONT_FAMILY = {
+    InterSemiBold: 'Inter-SemiBold',
+    InterRegular: 'Inter-Regular',
+    InterBold: 'Inter-Bold',
+};
+export const FONT_SIZES = {
+    f12: 12,
+    f14: 14,
+    f16: 16,
+    f18: 18,
+    f20: 20,
+    f24: 24,
+};
+export default COLORS;

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "react-native-yastools",
+  "version": "1.0.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "keywords": [
+    "react-native",
+    "components",
+    "button",
+    "utils"
+  ],
+  "author": "",
+  "license": "ISC",
+  "description": "React Native Utility Files and Utility Components ",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
+    "@babel/preset-flow": "^7.24.0",
+    "@babel/preset-typescript": "^7.24.0",
+    "@testing-library/react-native": "^12.4.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "jest": "^29.7.0",
+    "react": "18.2.0",
+    "react-native": "^0.73.0",
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.(ts|tsx|js)",
+      "<rootDir>/src/**/*.(test|spec).(ts|tsx|js)"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/**/*.d.ts"
+    ]
+  }
+}

package/src/components/Button/__tests__/YasButton.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import YasButton from '../index';
+
+describe('YasButton', () => {
+  it('renders correctly with text', () => {
+    const { getByText } = render(
+      <YasButton text="Press Me" onPress={() => {}} />
+    );
+    expect(getByText('Press Me')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPressMock = jest.fn();
+    const { getByText } = render(
+      <YasButton text="Press Me" onPress={onPressMock} />
+    );
+
+    fireEvent.press(getByText('Press Me'));
+    expect(onPressMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const onPressMock = jest.fn();
+    const { getByText } = render(
+      <YasButton text="Press Me" onPress={onPressMock} disabled />
+    );
+
+    fireEvent.press(getByText('Press Me'));
+    expect(onPressMock).not.toHaveBeenCalled();
+  });
+
+  it('shows loading indicator when fetching', () => {
+    const { queryByText, getByTestId } = render(
+      <YasButton text="Press Me" onPress={() => {}} fetching testID="button" />
+    );
+
+    expect(queryByText('Press Me')).toBeNull();
+  });
+
+  it('debounces multiple rapid presses', () => {
+    jest.useFakeTimers();
+    const onPressMock = jest.fn();
+    const { getByText } = render(
+      <YasButton text="Press Me" onPress={onPressMock} debounceTime={1000} />
+    );
+
+    const button = getByText('Press Me');
+
+    fireEvent.press(button);
+    fireEvent.press(button);
+    fireEvent.press(button);
+
+    expect(onPressMock).toHaveBeenCalledTimes(1);
+
+    jest.advanceTimersByTime(1000);
+    fireEvent.press(button);
+
+    expect(onPressMock).toHaveBeenCalledTimes(2);
+    jest.useRealTimers();
+  });
+
+  it('applies custom primary color', () => {
+    const { getByTestId } = render(
+      <YasButton
+        text="Press Me"
+        onPress={() => {}}
+        primaryColor="#FF0000"
+        testID="custom-button"
+      />
+    );
+
+    const button = getByTestId('custom-button');
+    const flattenedStyle = Array.isArray(button.props.style)
+      ? button.props.style.flat().reduce((acc: object, style: object) => ({ ...acc, ...style }), {})
+      : button.props.style;
+    expect(flattenedStyle.backgroundColor).toBe('#FF0000');
+  });
+
+  it('renders without text when only icon is provided', () => {
+    const mockIcon = { uri: 'https://example.com/icon.png' };
+    const { queryByText } = render(
+      <YasButton onPress={() => {}} icon={mockIcon} />
+    );
+
+    expect(queryByText('Press Me')).toBeNull();
+  });
+});

package/src/components/Button/index.tsx

@@ -0,0 +1,96 @@
+import React, { memo, useRef } from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+  View,
+  Image,
+} from 'react-native';
+
+// Internal styles and theme
+import styles from './styles';
+import COLORS from '../../theme';
+import { YasButtonProps } from './type';
+
+export type { YasButtonProps };
+
+
+/**
+ * YasButton - A customizable button component for React Native
+ * 
+ * @example
+ * ```tsx
+ * import { YasButton } from 'react-native-yastools';
+ * 
+ * <YasButton
+ *   text="Click Me"
+ *   onPress={() => console.log('Pressed!')}
+ *   primaryColor="#FF6B6B"
+ * />
+ * ```
+ */
+const YasButton: React.FC<YasButtonProps> = ({
+  onPress,
+  additionalStyle,
+  additonalStyle, // Support legacy prop name
+  disabled,
+  fetching,
+  text,
+  textStyle,
+  icon,
+  iconStyle,
+  loaderColor,
+  primaryColor,
+  disabledColor,
+  debounceTime = 1000,
+  activeOpacity = 0.8,
+  testID,
+}) => {
+  const lastPressTime = useRef(0);
+
+  const handlePress = () => {
+    // Prevent multiple clicks with configurable debounce
+    const now = Date.now();
+    if (now - lastPressTime.current < debounceTime) {
+      return;
+    }
+    lastPressTime.current = now;
+    onPress();
+  };
+
+  // Determine container style based on state
+  const containerStyle: StyleProp<ViewStyle> = [
+    disabled ? styles.disabled : styles.container,
+    // Apply custom colors if provided
+    !disabled && primaryColor && { backgroundColor: primaryColor },
+    disabled && disabledColor && { backgroundColor: disabledColor },
+    // Support both prop names for backwards compatibility
+    additionalStyle || additonalStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={activeOpacity}
+      disabled={disabled || fetching}
+    >
+      <View style={containerStyle} testID={testID}>
+        {fetching ? (
+          <ActivityIndicator
+            size="small"
+            color={loaderColor || primaryColor || COLORS.primary}
+          />
+        ) : (
+          <>
+            {text && <Text style={[styles.text, textStyle]}>{text}</Text>}
+            {icon && <Image source={icon} style={[styles.icon, iconStyle]} />}
+          </>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default memo(YasButton);

package/src/components/Button/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import COLORS, { FONT_SIZES } from '../../theme';
+
+/**
+ * Default styles for the YasButton component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+export default StyleSheet.create({
+  container: {
+    width: 176,
+    height: 53,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    backgroundColor: COLORS.primary,
+    flexDirection: 'row',
+    gap: 20,
+  },
+  disabled: {
+    width: 176,
+    height: 53,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    backgroundColor: COLORS.grayBg,
+    flexDirection: 'row',
+    gap: 20,
+  },
+  text: {
+    fontSize: FONT_SIZES.f16,
+    color: COLORS.white,
+    fontWeight: '600',
+  },
+  icon: {
+    width: 24,
+    height: 26,
+  },
+});

package/src/components/Button/type.ts

@@ -0,0 +1,40 @@
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ImageSourcePropType,
+  ImageStyle,
+} from "react-native";
+
+export interface YasButtonProps {
+  /** Callback function when button is pressed */
+  onPress: () => void;
+  /** Additional styles to apply to the button container */
+  additionalStyle?: StyleProp<ViewStyle>;
+  /** @deprecated Use additionalStyle instead */
+  additonalStyle?: StyleProp<ViewStyle>;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Whether to show loading indicator */
+  fetching?: boolean;
+  /** Text to display on the button */
+  text?: string;
+  /** Icon to display on the button */
+  icon?: ImageSourcePropType;
+  /** Custom styles for the button text */
+  textStyle?: StyleProp<TextStyle>;
+  /** Custom styles for the icon */
+  iconStyle?: StyleProp<ImageStyle>;
+  /** Color of the loading indicator (defaults to theme primary color) */
+  loaderColor?: string;
+  /** Custom primary color to override theme */
+  primaryColor?: string;
+  /** Custom disabled background color to override theme */
+  disabledColor?: string;
+  /** Debounce time in milliseconds to prevent multiple clicks (default: 1000) */
+  debounceTime?: number;
+  /** Active opacity when pressing the button (default: 0.8) */
+  activeOpacity?: number;
+  /** Test ID for testing purposes */
+  testID?: string;
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+// Components
+export { default as YasButton } from './components/Button';
+export type { YasButtonProps } from './components/Button';
+
+// Theme utilities (for customization)
+export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
+
+// Re-export Button as default for convenience
+export { default } from './components/Button';

package/src/theme/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Default theme configuration for YasButton
+ * Users can override these values by passing custom props
+ */
+
+export const COLORS = {
+  primary: '#007AFF',
+  white: '#FFFFFF',
+  grayBg: '#E5E5E5',
+  gray: '#666666',
+};
+
+export const FONT_FAMILY = {
+  InterSemiBold: 'Inter-SemiBold',
+  InterRegular: 'Inter-Regular',
+  InterBold: 'Inter-Bold',
+};
+
+export const FONT_SIZES = {
+  f12: 12,
+  f14: 14,
+  f16: 16,
+  f18: 18,
+  f20: 20,
+  f24: 24,
+};
+
+export default COLORS;